After years in the web industry working as a digital marketer, Brandon Kidd joined Treehouse with the mission to advance his skill set and propel himself into web design and development. Now, only a few years later Brandon has successfully launched his career as a freelance designer and developer, teamed up with a group of fellow freelancers to start web design agency Factory Web Design, and is working on another service — Themazing — which is soon to launch.

I’ve been working in the web in some fashion over the past 12 years. I originally got my start building websites and doing online marketing as a necessity while working with an automotive startup. I mostly did simple CSS tweaks on turnkey website solutions and fumbled my way through digital marketing. At that time there really was no good way to learn about the web. Books were costly and time consuming, and schools mostly provided outdated content.

Several years into the future and several jobs later, I finally found Treehouse. I was able to learn more advanced skills such as CSS3, PHP, Ruby on Rails, and how to utilize those skills as a business owner. While expanding my skillset I worked with two different digital agencies, doing everything from project management, maintenance, and a bit of coding. Something was still missing at this point. I wanted to not only be a better web developer, I wanted to do it on my terms and offer the type of service I can stand by.

About 6 months ago I started working on my own as a freelancer (or funlancer as Aaron Draplin would say). It was tough. It is tough to find new clients and when you do, sometimes the work can be a bit out of your league. I had some other freelance friends that came in and helped when I needed and before I knew it, we were relying on each other’s assistance.

About two months ago we decided to take our teamwork a step further and created Factory Web Design. We wanted to create a company that echoes our personality and that lives up to our passion for quality. Our primary objective is to provide a full service experience for clients. That means we start at the brand level and work our way through web design, SEO, and long term marketing strategies. We also have future plans to launch a service called Themazing which will provide cost effective yet attractive WordPress themes, as well as a couple mobile apps for connecting business owners.

Looking back, I honestly can say I wouldn’t have made it this far without Treehouse. It offered the spark I needed to ignite my career as an entrepreneur and to evolve my creative vision. Every week when I log on, there is always something new I can learn and another tool for my tool belt. I want to also give a special thanks to the Treehouse staff who have worked with me so closely and kept me motivated to keep on making progress.

The post Student Success Story: Brandon Kidd appeared first on Treehouse Blog.

I had a dumb little idea the other night so I just coded it up (as you do). You know those little icons that have come represent navigation? We've called them Three Line Menu icons around here, but otherwise known as Navicon (clever) or Hamburger (dumb). The point of that icon is that it looks like a little menu, so hopefully it's obvious you click it to reveal a real menu. But what if that icon wasn't an icon at all, but the actual menu, just shrunken?

The Concept

Yep, it's a little cheezy.

The trick is very easy though. It largely relies on CSS transform and transition, and a few more basics.

The process is essentially:

1. Design full size view first
2. Shrink entire thing to icon size with transform: scale(0.X);
3. Remove unnecessary bits with opacity: 0
4. When in icon size, only react to clicks on the whole thing.
5. When clicked, toggle to transform: scale(1), hidden bits to opacity: 1, and restore normal clicking ability.

Here's the design bits:

Changing State

Changing the "state" (expanded or not) of menu you could do in any number of ways. Perhaps the checkbox hack or real easy-like with jQuery:

$(".main-nav").on("click", function() {
      $(this).toggleClass("open");
      return false;
    });

All we're doing is changing a class here, which is the way to go for sure.

The CSS

I particularly like Sass when dealing with states because you can nest the states within the same block.

.main-nav {
      /* Animate the state change */
      transition: 0.3s ease;
      transform: 
        /* Make mini */
        scale(0.1) 
        /* Hot performance 10x hack */
        translateZ(0);
      /* The open state */
      &.open {
        transform: scale(1.0);
      }
    }

Handling Clicks

The clicking thing is a little funky. We need to make sure that

• Clicking the icon version simply opens the menu
• Clicking menu items inside while open work
• There is a way to close it

We already have the jQuery in place that toggles the class when you click anywhere on the entire element. That can stay just like that. We just need to make sure that if you happen to click exactly one of those those tiny little lines inside the mini icon, you don't actually go to that link.

All those links are in a <ul>, so one way to handle that is to use CSS to make that entire thing un-clickable by default (minified), but clickable when in the open state.

.main-nav {
      ul {
        pointer-events: none;
      }
      &.open {
        ul {
          pointer-events: auto;
        }
      }
    }

While pointer-events is awesome, a noticeable gap in support is IE 10 (11 does support it though). You may instead want to use an additional <div> that you use to cover the entire thing when in the default (minified) state and just remove it when in the open state.

Closing It

The way we handle closing is to add a close button:

<button class="close-button">
      <b class="visually-hidden">Close</b>
      <span aria-hidden="true">
        ×
      </span>
    </button>

We wanted to use the × character there as essentially an icon. But that has no meaning when read (or if it does, it's "multiply"). So we hide that from being read and include a more readable word that is visually hidden (kicked off page with positioning). Standard procedure for using icons.

In our simple example, we don't even need to bind an event handler directly to this button, because we already have one attached to the entire parent element that toggles that open state. If you click this button, that event will bubble up and fire that event and do the job. That might be weird, so feel free to adjust and bind directly to the element.

Semantics?

While this <button> doesn't exactly make my skin crawl, we could endless debate about it. (example conversation). It's meaningless without JS enabled, so should we insert it with JS? Should we have made it an anchor link with an href back to the top of the page? Is <button> still the correct element?

Progressive Enhancement?

While we're just having fun here, we might consider tackling this via progressive enhancement. That is, start with a menu that is completely functional as markup alone. Then level up all the fancy stuff as support is available.

Fortunately, our markup already mostly in good shape. I do think <button> is the correct element for our close button, since there is no "meaningful href", but it should be inserted with JS since it only has functionality with JS. Very simply, that might look like:

$('<button class="close-button">\
        <b class="visually-hidden">Close</b>\
        <span aria-hidden="true">\
          ×\
        </span>\
      </button>').appendTo(".main-nav");

Another concern is that we approached the CSS in such a way that the default state is with the menu closed. And that "closed" state essentially relies on a CSS transform shrinking it. If CSS transforms aren't supported, the menu will appear open, overlapping content and unable to be closed (bad). If our menu didn't overlap content, we might be OK, but since it does we would be better off only applying our fancy styling should be browser support our fancy CSS needs.

There are countless ways to approach this, but a fairly easy and standard way is to detect support of the relevant technologies via Modernizr. If what we need is there, there will be a class name telling us that on the <html> element, and we can use that to apply the fancy.

.main-nav {
      /* Default, visible, accessible styling */
    }
    .csstransforms .main-nav {
      /* Bring the fancy */
    }

IE 8 doesn't support CSS transforms, so:

There I go again, turning a dumb little demo into a lesson. Here's the final deal:

See the Pen Line Menu Icon that Expands Into Actual Menu by Chris Coyier (@chriscoyier) on CodePen

Other Ideas?

Perhaps this exact idea is cheezytown, but I do like the idea of the thing you click on being a part of what is revealed. It's kind of like how animations can be used to make an action more clear, having a single point of focus during those animations can also help. For instance:

See the Pen owgLF by Chris Coyier (@chriscoyier) on CodePen

Line Menu Icon… That Is A Menu is a post from CSS-Tricks

Codecademy started to help anyone learn the skills they need in order to succeed in the twenty-first century. We want Codecademy to be with you everywhere - learning shouldn't be confined to a classroom or a desktop computer.

We launched our first iPhone app, Codecademy: Hour of Code, for anyone in the world to get started learning to code on the go. We've built an entirely new Codecademy experience for mobile that includes the same things that make Codecademy on the web great - interactivity, "snack" sized content, and fun lessons. Our first app gives you the basics of programming and should help absolutely anyone get started with programming - it's almost too easy not to try!

We'll send content updates to this app with more courses for you to complete as time goes on. You'll see more feature updates as well.

Perhaps best of all, this is just the beginning of Codecademy on the go. We want to help you learn the skills that can help you change your life - anywhere and anytime. Download our first app and let us know what you think!

Codecademy started to help anyone learn the skills they need in order to succeed in the twenty-first century. We want Codecademy to be with you everywhere - learning shouldn't be confined to a classroom or a desktop computer.

We launched our first iPhone app, Codecademy: Hour of Code, for anyone in the world to get started learning to code on the go. We've built an entirely new Codecademy experience for mobile that includes the same things that make Codecademy on the web great - interactivity, "snack" sized content, and fun lessons. Our first app gives you the basics of programming and should help absolutely anyone get started with programming - it's almost too easy not to try!

We'll send content updates to this app with more courses for you to complete as time goes on. You'll see more feature updates as well.

Perhaps best of all, this is just the beginning of Codecademy on the go. We want to help you learn the skills that can help you change your life - anywhere and anytime. Download our first app and let us know what you think!