I know what it's like to learn from scratch. Just six years ago I knew pretty much nothing about how to create a website, but I worked hard, practiced a lot, and learned a ton of stuff along the way—including that (there's a better way to learn to code than just reading books and scouring the internet for tutorials.

You don't have to spend a ton of time or money to get started with the web. You just need the right information delivered in digestible bits, and someone to lean on when you get a bit flustered or stuck. Enter...

YOU can CODE Part I: Learn HTML + CSS Basics in One Week!

I've created a straightforward and brief getting started course for folks who want to learn how to create on the web. You can check out my announcement, and get a 25% discount code on my YOU can CODE website.

On the horizon I also have two progressive follow-up courses that I plan to release after the completion of the first course.

• YOU can CODE Part II: Create a Marketing Site in 3 Weeks
• YOU can CODE Part III: Create a Rails App in 4 Weeks

Checkout a sample of one of the brief lessons on HTML:

A couple days ago I posted a brief article on what I call Icon Stacks--an easy way to create complex multi-color icons using icon fonts. Today I wanted to share another interesting use for Icon Stacks that I came up with: Textured Icons.

So historically if you wanted to create a textured icon, you were most certainly relegated to using some sort of image for your icons. This often meant recreating existing icons in photoshop and then applying texture brushes, etc. to get the look you were going for. If you wanted to use these icons at different sizes you, you'd have to rinse and repeat for each individual size...lame.

I Want Scalable Texture

No worries, Icon Stacks can help with that too, just create a couple of texture icons and add them to your icon font:

Now pair those with your expected .icon-base and you've just created a distressed or stamped feeling Icon Stack without having to write any extra code. This is where Icon Stacks start to yield dividends, when you can easily re-use the markup pattern to create interesting combinations.

<i class="icon-stack icon-size-64">
    <i class="icon icon-smile icon-stack-base"></i>
    <i class="icon icon-texture-1"></i>
</i>

Combining icon font glyphs to create complex mega-icons.

If you've recently joined the ranks of designers and devs using icon fonts, you're likely still in the honeymoon phase. I know for me it was a god-send when I first starting using these sweet scalable glyphs in my app. Ahhh…goodbye messy sprites, farewell PNGs, GIFs, and JPGs, no more will I torture myself with the pains of nudging my background positioning to -1384px—or was it -1385?

In my quest to delete all the sprites and images from my repo, I hit a brick wall, the multi-colored icon. That's right, with icon fonts I could only create flat, boring, single-color, icons…but I needed more! So I came up with the idea of Icon Stacks™. The premise is simple, split apart the components of your multi-color vector, add each element to your icon font, and then stack them to create a mega-icon. Let's look at an example.

I Want Scalable Weather

With a typical icon-font implementation you'd have to use an icon like: . Using an Icon Stack you can have an icon more like:

The HTML

<i class="icon-stack">
    <i class="icon icon-upper-sun"></i>
    <i class="icon icon-cloud-w-upper icon-stack-base"></i>
</i>

The CSS

.icon,
.icon-stack {
    font-family: 'conorcc';
    font-size: inherit; // So icon adapts to the size of its parent
    position: relative; // To allow for nudging icons up and down for vertical alignment
    display: inline-block; // So we get the crispest icons possible at all times
    line-height: 0.9; // Without this the line-height can screw up the height of containers in FF
    *line-height: 1; // Old IE needs a slightly different value =)
}

.icon-stack .icon {
    position: absolute; // Icons within the stack are positioned one on top of the other
    top: 0;
    left: 0;
}

.icon-stack .icon-stack-base {
    position: relative; // One of the icons needs to be identified as a base so it won't be positioned absolutely
}

.icon-cloud-w-upper {
    color: #AFD2EB;
}

.icon-upper-sun {
    color: #e7be00;
}

So that gets us an improvement over the monochrome icons, but wouldn't it be nice if we could add a little more depth.

.backgroundcliptext .icon-cloud-w-upper {
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, rgba(255, 255, 255, 0.95)), color-stop(50%, rgba(250, 250, 250, 0.95)), color-stop(100%, #CCC));
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0.95) 40%, rgba(250, 250, 250, 0.95) 50%, #CCC);
    background: -moz-linear-gradient(rgba(255, 255, 255, 0.95) 40%, rgba(250, 250, 250, 0.95) 50%, #CCC);
    background: -o-linear-gradient(rgba(255, 255, 255, 0.95) 40%, rgba(250, 250, 250, 0.95) 50%, #CCC);
    background: linear-gradient(rgba(255, 255, 255, 0.95) 40%, rgba(250, 250, 250, 0.95) 50%, #CCC);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
}

And here's a more complete set for our weather:

Update: I posted a follow-up article on how you can use Icon Stacks to create textured vector icons.

A little over a year ago I wrote about being halfway to obese. I stated my goal was to lose 16 pounds and bring my weight back down to the "healthy" weight of 164 pounds. I've not quite gotten down to 164, I'm still sitting around 168 most mornings. Here's what I've done to go from 181 down to 168.

Maximized Living

Katie and I started going to a new chiropractor near our home, I stumbled upon it merely because it was the closest one I could find, and I was looking for something convenient. It turns out this chiropractor happens to be part of a network called Maximized Living. The approach the doctor's office takes is to help patients live to their full potential not only through chiropractic services, but through a holistic approach to a better life. Here's the 5 principles they teach, and that we're now trying to live by:

1. Maximized Mind
2. Maximized Nerve Supply
3. Maximized Quality Nutrition
4. Maximized Oxygen & Lean Muscle
5. Minimized Toxins

For me this meant quite a few lifestyle changes. So far I've focused on Principles two, three, and four.

Maximized Nerve Supply

Because our nervous system is central to the body's communication functions, it impacts all aspects of our health. It just so happens that the nerve supply is also tightly coupled to our spinal structure. Improving my spine, it's shape and health, means that I'm improving the communication paths throughout my body.

My chiropractor has been instrumental in helping me to recover from some back injuries that were holding me back for over a year now. My shoulder is functional again, and my low back has much less problems than before. My nervous supply is definitely being maximized.

Maximized Quality Nutrition

I tend to be a pretty poor eater. Working at an office that provides a host of yummy snacks doesn't help much either. I'd grab an Oreo here, and a bag of Pop Chips there, maybe a handful of Jellybeans on the walk past a colleague's desk. I was pumping junky food into my body on a regular basis. Add to that less than ideal foods like breads, bagels, and cream cheese, and things weren't exactly looking (or feeling) great.

One of our first improvements to our nutrition was to remove all refined sugars, and almost all grains. That change alone helped me lose around 10 pounds in just a month or so. Raw nuts, oatmeal, and tons of broccoli have become the new norm around here, and I actually really enjoy it all.

Maximized Oxygen & Lean Muscle

This has probably been my favorite category of change. With the back problems I had been experiencing, I totally quit CrossFit, and all other exercises for that matter—lame, I know. Since starting to see my chiropractor, I've begun an extremely enjoyable uptick in my daily exercise regiment. I now workout every day of the week except Sundays.

I've been using the Max T3 program that Maximized Living has created, it challenges me every day, and I always walk away completely exhausted. The best part though? It's just 12 minutes a day. Booya!

Outcomes

The effects of these three focus areas combine has been a total weight loss of 13 pounds and counting. I've gained some lean muscle, my stomach has flattened significantly, and I start each day feeling invigorated and ready for life.

My original goal was to get down to 164, now that I've seen what 168 looks like, it's obvious to me that I'm not going to be satisfied with that number. Right now I'm aiming to drop down to 155 and see how I feel once I get there.

Well eight weeks have come and gone, and I haven’t lost 16 pounds. Actually I haven’t really lost any pounds.

I’d like to blame it on the fact that I injured my back and have been going to physio therapy instead of CrossFit, but let’s be real, that’s not why I haven’t lost any weight.

I bought and have almost finished reading The Abs Diet, it’s a really great book, so great that I’ve even started to do some of the things it recommends. That’s the problem you see, I’ve only really put half my heart into this thing.

Browsing through some old entries on Katie’s Blog tonight has renewed my motivation though. I want to look my best again, and I know I can do it. I’ve still got 2 months and 10 days left to meet my goal, I’m gonna make it.