We’re hiring four new video teachers! The Treehouse video studio is located in Orlando, Florida which is where you’ll be working. We’re looking for some amazing people that can dominate the following roles:

• PHP & WordPress Teacher
• Front-End Design Teacher
• Android Development Teacher
• Business & Marketing Teacher

Responsibilities

1. Writing and recording videos
2. Writing quizzes and code challenges
3. Creating downloadable assets and code
4. Writing blog posts for Think Vitamin

Here’s one of the videos from our library, which is similar to what you’ll be creating:

Skills and Qualities

• You have crazy passion for the web. You live this stuff!
• You have outstanding writing abilities.
• You have impressive presentation skills and lots of on-camera confidence.
• You’re self motivated and you maintain your razor sharp knowledge.
• You whole-heartedly believe in our Core Values.

Our Benefits

We believe work, fun, and generous benefits go together. Treehouse team members enjoy…

1. Full salary for a 4-Day week! We don’t work Fridays :)
2. 18 vacation days, 9 federal holidays, and two weeks off at Christmas
3. Free iPhone + monthly contract
4. Free lunch every day
5. 401(k) contribution matching
6. Full coverage for medical, dental, and vision

Working in Orlando

You’ll absolutely love working in our Orlando office! In addition to the growing teaching team, you’ll also work closely with our talented video production crew. These creative guys and gals are the best in the biz; they will make you look and sound your best.

We’re a fun loving bunch that appreciates cupcakes, remote control helicopters, hammocks, Nerf wars, and coffee. Oh, and animated GIFs! Can’t forget about the GIFs. :) Here’s a behind-the-scenes video of a project we all worked on together that will give you a flavor for the office.

How to Apply

1. Create a 3-5 minute audition video where you teach a topic related to the role you’re applying for. If you love PHP and WordPress, tell me all about themes or plugins!
2. When you’ve uploaded your video to the web, email the link to nick@teamtreehouse.com – Please do not send email attachments.

Also, please don’t send a resume. ;) We don’t care about your education or how many jobs you’ve worked. We’re looking for confidence, friendliness, passion, and crisp teaching abilities.

Application Deadline

Make sure to email us your application by Thursday, March 8th 2012!

I’m super excited to announce that Peter Vesterbacka, the Founder of Angry Birds, will be speaking at Future Insights Live in Vegas, April 30 – May 4th.

There are only 19 Early Bird tickets left, so buy your ticket here. See you there!

HTML to PHP

First things first let’s turn our project from HTML to PHP. This task takes two easy steps. First, make sure we have our files in a php environment. Second change the file extension of the index file.

As most of you know, when you run PHP you need to be in a PHP environment such as a live server or a local server. I personally use MAMP as a test server before putting anything live. MAMP is for Mac users where as WAMP is for Windows users. These two solutions are super easy to install and operate. Also you have the option of using a live server.

Now that we have our PHP environment lets take our static HTML Dribbble Portfolio and upload it to our server. Since I’m using MAMP the default local host is ‘localhost:8888/’ and the directory is ‘Dribble-Portfolio/’. In the browser the direct path is ‘http://localhost:8888/Dribble-Portfolio/’. From here lets change the file extension of our index.html to index.php. When you refresh the page you will notice the url doesn’t change at all and the page still renders the same. This is exactly what we want.

Download the PHP wrapper for the Dribbble API

Thanks to Martin Bean for making this next step super easy. Martin created a ‘PHP wrapper for the Dribbble API’ which you can download at github. This allows us to access the Dribbble API with minimal code. Simply download the file from here and unzip it. Copy the ‘src’ folder inside the main folder and paste it in the same directory as our index.php. Your directory should now look like this:

Integrating Everything

Now it’s time to jump into some php code. First we want to add the following code to our header area right before the html doctype:

 
<?php
 
require 'src/dribbble.php';
 
$dribbble = new Dribbble();
 
//////////////////////////////////////////////////////////////////////
 
//Dribbble User ID
$playername='mathelme';
//How many 'shots' would you like to display per page?
$perpage='12';
 
//Contact Info
$email='mat.helme@gmail.com';
$twitter='twitter.com/#/mathelme';
$facebook='facebook.com/mat.helme';
$linkedin='http://www.linkedin.com/pub/mat-helme/28/7b5/710';
 
 
/////////////////////////////////////////////////////////////////////
 
?>
 
<!DOCTYPE html>

Lets briefly go over the code. We start off with an opening php tag. The next bit of code calls the ‘dribbble.php’ file which we placed in our directory and initiates its options for the Dribbble API. Directly under the ‘//Dribble User ID’ is where we specify which dribbble account we want to pull from. For example purposes I have used all of my credentials. My direct url to my dribbble account is http://www.dribbble.com/mathelme, so my player name is ‘mathelme’. Then below that is how many shots we want to display. I would recommend using ’12′. Lastly is the contact info. Again I have used my credentials for example purposes. Simply swap out my info with yours. Lastly we close the php tag.

Now that we have initiated all the php functions and variables lets swap out the data in our page. Our first step is swapping out our contact info. Simply highlight all the data between the ‘nav’ tags with:

 
<ul class="menu">
 
     <li><a href="mailto:<?php echo $email ?>" class="email"></a></li>
     <li><a href="http://www.dribbble.com/<?php echo $playername ?>" class="dribbble"></a></li>
     <li><a href="<?php echo $twitter ?>" class="twitter"></a></li>
     <li><a href="<?php echo $facebook ?>" class="facebook"></a></li>
     <li><a href="<?php echo $linkedin ?>" class="linkd"></a></li>
 
</ul>

All we are doing here is changing the ‘href’ ‘#’ link with the variables we set in the head of the page through a php echo statement.

Now we want to pull in the latest shots for our Dribbble user. Simply swap out the following code in between the id ‘container’ with:

 
<?php
 
                    $my_shots = $dribbble->get_player_shots($playername, 1, $perpage);
 
                    foreach ($my_shots->shots as $shot) 
                    {
                        echo '<a class="box" href="' . $shot->url . '"><h3>' . $shot->title. '</h3><img src="'. $shot->image_url . '" alt="' . $shot->title. '" class="pic" />' . '</a>';
                    }
 
?>

This php code runs a loop and grabs the latest 12 shots from the Dribbble user and returns a linking title and image to Dribbble.

Your final index.php file should look something like this:

 
<?php
 
require 'src/dribbble.php';
 
$dribbble = new Dribbble();
 
//////////////////////////////////////////////////////////////////////
 
//Dribbble User ID
$playername='mathelme';
//How many 'shots' would you like to display per page?
$perpage='12';
 
//Contact Info
$email='mat.helme@gmail.com';
$twitter='twitter.com/#/mathelme';
$facebook='facebook.com/mat.helme';
$linkedin='http://www.linkedin.com/pub/mat-helme/28/7b5/710';
 
 
/////////////////////////////////////////////////////////////////////
 
?>
 
<!DOCTYPE html>
 
<html>
 
<head>
 
	<!--Viewport-->
	<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
	<title>Dribbble Portfolio</title>
 
    <!--Google fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
 
    <!--Main Stylesheet-->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
 
</head>
 
<body>
 
	<header>
 
    	<h1 id="logo"><a href="#"><img src="images/logo.png" alt="My Logo" /></a></h1>
 
        <nav>
 
        	<ul class="menu">
 
                 <li><a href="mailto:<?php echo $email ?>" class="email"></a></li>
                 <li><a href="http://www.dribbble.com/<?php echo $playername ?>" class="dribbble"></a></li>
                 <li><a href="<?php echo $twitter ?>" class="twitter"></a></li>
                 <li><a href="<?php echo $facebook ?>" class="facebook"></a></li>
                 <li><a href="<?php echo $linkedin ?>" class="linkd"></a></li>
 
            </ul>
 
        </nav>
 
    </header>
    <!--end header-->
 
    <section class="half">
 
            <img src="images/me.jpg" class="main-image" alt="This is Me" />
 
    </section>
    <!--end main image-->
 
    <section class="half">
 
    	<h2 class="tagline">Check Out My Super Radical One Page Responsive Portfolio Which Pulls My Dribble 'Shots'. Get Gnarly!</h2>
 
    </section>
    <!--end tagline-->
 
    <div class="clear"></div>
 
    <section>
 
			<h1>Latest Work</h1>
 
 
			<div id="container">
 
 
                    <?php
 
                    $my_shots = $dribbble->get_player_shots($playername, 1, $perpage);
 
                    foreach ($my_shots->shots as $shot) 
                    {
                        echo '<a class="box" href="' . $shot->url . '"><h3>' . $shot->title. '</h3><img src="'. $shot->image_url . '" alt="' . $shot->title. '" class="pic" />' . '</a>';
                    }
 
                    ?>
 
 
			</div>
 
	</section>
    <!--end dribble content-->
 
    <div class="clear"></div>
 
    <footer>All RIghts Reserved <a href="#">www.website.com</a></footer>
    <!--end footer-->
 
    <!--js files-->
    <script src="scripts/jquery.js"></script>
    <script src="scripts/fitText.js"></script>
 
    <!--initiate fitText-->
    <script>
 
		$(document).ready(function() {
 
			/*FitText*/
			$(".tagline").fitText(1.1, { minFontSize: '20px', maxFontSize: '200px' });
 
		});
 
    </script>
 
</body>
 
</html>

Congratulations you have successfully created a responsive one page Dribbble portfolio for Chrome, Firefox and Safari. As for Internet Explorer 8 and up we will need to add some additional code.

IE fixes

The fixes for IE aren’t going to be exact fixes but more or less simple solutions. Here is what we need to add directly below the main stylesheet in the head tag:

 
<!-- IE fixes -->
    <script src="scripts/html5.js"></script>
    <script src="scripts/respond.min.js"></script>
 
    <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="css/ie.css" />
    <![endif]-->

The html5.js file is to allow IE to support HTML5 elements. The respond.js file is used for media quires in IE, since they don’t support them. Lastly we use another style sheet specifically for IE since it doesn’t support CSS3 column-count or column-gap. Also we added CSS3pie to fix the rounded-corners.

Source Files

Role Those Credits:

• Dribbble
• jQuery
• Fit Text
• CSS3pie
• HTML5.js
• Respond.js
• Treehouse

This video is from Treehouse, a high-quality video training site with hundreds of short videos on topics like …

• Accessibility
• CSS3
• Aesthetic Foundations
• Django
• HTML
• CSS
• HTML5
• iOS Development
• JavaScript
• jQuery
• NoSQL
• PHP
• Responsive Web Design
• Ruby
• Ruby on Rails
• UX
• Version Control
• WordPress Theme Design

New videos are added regularly, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

You can view the full Change log and both rvm and ruby-build both support the new release in their respective latest versions.

Last week, event mascot-in-chief Fil Bot joined us in the offices, for a chat with Ryan Carson, founder of Carsonified and Treehouse.

The pair discussed the Future Insights Live conference, Ryan’s conference session on the new gamification layer in Treehouse, and the joys of spending time with 1,000 or so of the top minds in web and mobile design and development.

Early Bird pricing for Future Insights Live ends this week, so head over to Registration and we’ll see you in April…

Hope you can join us for that frozen margarita :)

Bert Appward of the Google team recently released a superb interactive book titled “Field Guide to Web Applications“. Through the literature Bert presents the best skills and practices of building modern web apps. The guide covers the following topics:

1. KNOW YOUR WEB APPS
2. DESIGNING WEB APPLICATIONS
3. CASE STUDIES OF WEB APPS IN THE WILD
4. BUILDING GREAT WEB APPLICATIONS

Not only is it a great read but a fun experience. The guide has an almost tangible feel to it as the pages flip and has a strong emphasis on texture. I recommend checking it out.

What is the Command Line?

If you really want to learn about the history of the command line, you can check out the Wikipedia page on the topic:

A command-line interface (CLI) is a mechanism for interacting with a computer operating system or software by typing commands to perform specific tasks… This method of instructing a computer to perform a given task is referred to as “entering” a command: the system waits for the user to conclude the submitting of the text command by pressing the “Enter” key (a descendant of the “carriage return” key of a typewriter keyboard). A command-line interpreter then receives, parses, and executes the requested user command.

TL;DR: wall of text.

You don’t have to be a developer in order to get the full benefit using the command line. Being familiar with how the command line works can vastly simplify your daily life. Let’s say you’d like to move all of the files with a certain extension from one folder to another. Let’s also say that there are far too many to want to select them in Finder and move them to a folder called html_files. You could take a lot of time and do it in Finder or open a terminal and type in the following:

  mv *.html html_files

It’s pretty easy once you get the hang of it. We’ll walk through that example now, learning the commands we would need to build up to that.

What Does It Look Like?

If you’re on a Mac, launch Terminal. You can find it in the "Utilities" folder inside of your main "Applications" Folder. This is what you’ll see:

Isn’t that exciting? Well no, not very. In fact, the command line is pretty boring and generally not very pretty. It does, however, provide great power once you learn to use it.

Let’s Learn Some Commands

The main way that you’ll interact with the command line is by typing commands in. For the most part, it works like this (yes, there are a lot of exceptions):

[command name] [options] [arguments]

We’ll start our command line journey with the ls command. This is a command that lists information about files. Essentially, it shows you a list of files in the directory or folder you tell it to. Let’s try it. Back in Terminal, type in ls and press enter. You should see something like the following:

  $ ls
  Public                  Desktop                 Library                 Sites               
  Documents               Movies                  Source                  Downloads           
  Music                   Dropbox                 Pictures

That’s what my home directory looks like. Cool, right!

Let’s say you wanted slightly different output that had file sizes and other information. Most command line programs offer more options to do what you want to do through the use of arguments. These can also be called options or flags. They are usually prefixed with a - character (hyphen or dash) to tell the program that you’re submitting an argument.

Here’s what the ls command looks like with the flags for a long list all files (by default, files that start with a . character are hidden) with human file sizes:

[~]$ ls -alhF
drwxr-xr-x+ 57 jason  staff   1.9K Feb  9 16:27 ./
drwxr-xr-x   5 root   admin   170B Nov  2 14:21 ../
-rw-r--r--@  1 jason  staff    15K Feb  8 09:51 .DS_Store
drwx------   2 jason  staff    68B Feb  8 09:40 .Trash/
lrwxr-xr-x   1 jason  staff    42B Nov  2 15:34 .bash@ -> /Users/jason/Source/private/dotfiles/.bash
-rw-------   1 jason  staff   112K Feb  7 16:25 .bash_history
lrwxr-xr-x   1 jason  staff    37B Nov  2 15:36 .bash_profile@ -> Source/private/dotfiles/.bash_profile
drwx------  13 jason  staff   442B Feb 13 10:00 .dropbox/
drwxr-xr-x   3 jason  staff   102B Nov  2 16:35 .gem/
lrwxr-xr-x   1 jason  staff    47B Nov  2 15:34 .gitconfig@ -> /Users/jason/Source/private/dotfiles/.gitconfig
-rw-r--r--   1 jason  staff    13B Nov  2 14:24 .gitignore_global
lrwxr-xr-x   1 jason  staff    20B Nov  2 15:48 .gvimrc@ -> Source/dotvim/gvimrc
drwx------   3 jason  staff   102B Dec  8 18:28 .heroku/
-rw-r--r--   1 jason  staff    27B Nov  2 14:24 .hgignore_global
-rw-r--r--@  1 jason  staff   622B Jan  9 14:10 .hgrc
drwxr-xr-x   6 jason  staff   204B Nov  7 09:36 .ievms/
lrwxr-xr-x   1 jason  staff    45B Nov  2 15:34 .inputrc@ -> /Users/jason/Source/private/dotfiles/.inputrc
-rw-r--r--   1 jason  staff   349B Feb  7 11:18 .irb-history
-rw-r--r--   1 jason  staff   525B Jan 30 11:42 .irb_history
-rw-------   1 jason  staff   649B Jan 23 10:18 .mysql_history
drwxr-xr-x  69 jason  staff   2.3K Jan 12 00:40 .npm/
lrwxr-xr-x   1 jason  staff    50B Nov  2 17:20 .pow@ -> /Users/jason/Library/Application Support/Pow/Hosts
drwxr-xr-x   4 jason  staff   136B Nov 21 17:06 .rbenv/
-rw-r--r--   1 jason  staff   8.1K Dec  7 18:02 .rdebug_hist
drwxr-xr-x  27 jason  staff   918B Nov 21 17:07 .rvm/
drwx------   9 jason  staff   306B Nov  7 11:57 .ssh/
lrwxr-xr-x   1 jason  staff    13B Nov  2 15:48 .vim@ -> Source/dotvim
-rw-------   1 jason  staff    45K Feb  8 15:32 .viminfo
lrwxr-xr-x   1 jason  staff    19B Nov  2 15:48 .vimrc@ -> Source/dotvim/vimrc
-rw-r--r--   1 jason  staff   661B Jan 11 11:37 .vimrc.local
drwxr-xr-x@  5 jason  staff   170B Feb  8 09:40 AeroFS/
drwx------+  4 jason  staff   136B Feb  7 16:26 Desktop/
drwx------+ 21 jason  staff   714B Feb  7 16:26 Documents/
drwx------+  6 jason  staff   204B Feb  8 10:09 Downloads/
drwx------@ 51 jason  staff   1.7K Feb 13 09:48 Dropbox/
drwx------@  8 jason  staff   272B Jan 19 13:51 Insync/
drwx------@ 49 jason  staff   1.6K Feb  7 15:23 Library/
drwx------+  5 jason  staff   170B Feb  2 16:19 Movies/
drwx------+  6 jason  staff   204B Feb  2 16:19 Music/
drwx------+  7 jason  staff   238B Feb  2 16:19 Pictures/
drwxr-xr-x+  5 jason  staff   170B Feb  2 16:19 Public/
drwxr-xr-x   5 jason  staff   170B Feb  2 16:19 Sites/
drwxr-xr-x   9 jason  staff   306B Nov 29 15:32 Source/
lrwxr-xr-x   1 jason  staff    40B Nov  2 15:34 bin@ -> /Users/jason/Source/private/dotfiles/bin

You can look up the arguments to ls here. The path when using the ls command is optional. If it’s not submitted, it defaults to the current directory. You can add another path after the arguments if you choose to get a file listing of a directory other than the current one.

Some More Commands

If you want to change the current working directory, you can do so with the cd command. If you’re in your home directory and want to change to. If you wanted to enter your Sites directory, you would type the following:

  $ cd Sites
  [~/Sites] $

That would put you in the Sites directory. The output you see above [~/Sites] $ is because I’ve modified the built in prompt. If you don’t have that in your prompt (you probably don’t) and forget where you are, you can always use the pwd command to remind you:

[~/Sites]$ pwd
/Users/jason/Sites

Accomplishing Something Useful

Let’s say I wanted to duplicate one file as another file without using the Finder. For that, you can use the cp command. It takes two arguments: the path of the file you want to copy from and the path of the file you want to copy to. Let’s say I was in the think_vitamin directory from the Git for Designers article and I wanted to copy the index.html file to homepage.html. I could do the following:

[~/Sites]$ cd think_vitamin/
[~/Sites/think_vitamin master]$ cp index.html homepage.html

That would duplicate the index.html file to homepage.html file. If I have a change of heart and decide to rename the homepage.html file, I can use the mv command:

[~/Sites/think_vitamin master]$ mv homepage.html home.html
[~/Sites/think_vitamin master]$ ls -alhF
total 16
drwxr-xr-x   5 jason  staff   170B Feb 14 12:50 ./
drwxr-xr-x+ 36 jason  staff   1.2K Feb 12 12:01 ../
drwxr-xr-x  10 jason  staff   340B Feb  1 01:57 .git/
-rw-r--r--   1 jason  staff     3B Feb 14 12:46 home.html
-rw-r--r--   1 jason  staff     3B Feb  1 01:57 index.html

Let’s say I was trying to organize files by their type. I’ve decided (for some reason) to move all html files to the html directory. I could move every file individually in Finder. Or, I could use something called the wildcard character and do it on the command line. The wildcard character is represented by an asterisk. Here’s what it looks like:

[~/Sites/think_vitamin master]$ mv *.html html/
[~/Sites/think_vitamin master]$ ls -alhF
total 0
drwxr-xr-x   4 jason  staff   136B Feb 14 12:51 ./
drwxr-xr-x+ 36 jason  staff   1.2K Feb 12 12:01 ../
drwxr-xr-x  10 jason  staff   340B Feb  1 01:57 .git/
drwxr-xr-x   4 jason  staff   136B Feb 14 12:51 html/

Now let’s check out the html directory:

[~/Sites/think_vitamin master]$ ls -alhF html/
total 16
drwxr-xr-x  4 jason  staff   136B Feb 14 12:51 ./
drwxr-xr-x  4 jason  staff   136B Feb 14 12:51 ../
-rw-r--r--  1 jason  staff     3B Feb 14 12:46 home.html
-rw-r--r--  1 jason  staff     3B Feb  1 01:57 index.html

Getting Help

Invevitably there will be times when you get stuck or need a little refresher. The authors of most commands and programs knew that would happen. Accordingly, most programs allow you to specify either -h or --help as an argument. This will usually bring up a small help screen that displays the list of commands and arguments a program takes and give you a short description of each.

If you’re on a Mac or linux system, the man command will give you a much more in depth description of the options available. Not every program ships with a man page but most do. Reading through the man page will inevitably be helpful for understanding the command itself and all of the options. Often, man pages will include examples of correct usage, which is extremely helpful when you’re stuck.

If you’re still stuck, there’s always the option of doing a web search. Just type in the name of the command and the problem you’re having in to Google. Stack Overflow is another great resource for both finding help and looking up answers to your problems. Of course, Treehouse walks you through using the commands you need to accomplish tasks while earning badges.

This video is from Treehouse, a high-quality video training site with hundreds of short videos on topics like …

• Accessibility
• CSS3
• Aesthetic Foundations
• Django
• HTML
• CSS
• HTML5
• iOS Development
• JavaScript
• jQuery
• NoSQL
• PHP
• Responsive Web Design
• Ruby
• Ruby on Rails
• UX
• Version Control
• WordPress Theme Design

New videos are added regularly, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

Apps Phoning Home

A lot of mobile apps that provide social networking features and connect you with your friends, upload information from your address book to their servers unbeknownst to you. Which apps are doing this? That is not the right question, the right question is WHY they are doing it? The main reason we have heard is that they want to have the information to notify you when a friend from your address book joins their service. I’m not sure if I prefer ease of use over violation of privacy. If an app specifically asks for your consent then by all means go ahead but don’t just steal my data! Yes, it is absolutely stealing if you are not asking for my permission.

What Can You Do?

Glad you asked. Firstly, you can learn how to detect these kinds of activities for yourself. All it takes is installing software and changing a few settings on your device.

The software for the job is known as a “man in the middle” or MITM proxy. As the name suggests, this utility stands in between your device and the server the app is trying to reach. The MITM proxy inspects the packets and provides you with useful information such as: request headers, parameters and data sent.

We are going to use a free tool called Paros proxy, but you could also use mitmproxy. The latter is only tested for OSX, Unix and Linux but I didn’t have much success with it. Paros is a cross-platform tool built in Java, which means you can install it regardless of your operating system.

Installing Paros Proxy

Before you can install Paros make sure that you have the Java runtime installed.

Download Paros proxy for your operating system. For Mac OSX users download the unix version and open up “paros.jar” file.

Next, find the IP address of your Wi-Fi connection.

• Windows go to the command prompt and type ipconfig
• Mac OSX open up the Terminal app, type ifconfig en1 | grep inet, or go to the System Preferences and click on Network

Finally, open up that Paros proxy software, from the menu select Tools > Options > Local proxy and in the address field input the IP address that you found in the previous step. Leave the port at 8080.

Setup Your Device

Open up settings, select Wi-Fi and tap the selected Wi-Fi network and scroll towards the bottom.

Find A Suspecting App

For this tutorial, we will use an app called Path which has been known to upload your address book. However, to be fair to Path they have issued an official apology and added an opt-in feature for a future update.

Make sure you have the Paros proxy software running and then open up Path on your device. Once you sign-up or login to Path you can see the requests being made to the server in logs of the Paros proxy software.

If you discover that an app is sending data that you have not consented to then please report it. Blog about it, let people know and make them change their policy to add an opt-in feature.

I want to tell you a story of a couple of problems that we’ve tried to solve several times with technology, when all we needed was a couple dollars worth of office supplies.

The Lunch Party

I’ve been working with Nick Pettit since 2007, before we came to Carsonified and Treehouse. In our last job we had a group of friends we would regularly go out to lunch with from the office. After a while, the decision of where to go became too difficult. “We went there yesterday!”, “I don’t really like X!”, and “I don’t know, where do you want to go?” became the common choices.

Then, I was writing in Rails, so I thought, “This is an easy problem to solve. Create a Restaurant and Person model, set up a voting system, input local eateries, Bam! Problem solved.” I had spare time in the office and this could easily be classified as learning, or experience building. I ended up making two or three prototypes over the 3 years I worked there.

The problem is, nobody really used it. Maybe it was a usability problem, but I think the process of using a web app to plan lunch just is not natural. Going out to lunch was a very social activity, and voting on a computer screen doesn’t really mesh well with that.

The “Lunch App” became a running joke between me and Nick. It was a more sarcastic version of “There’s an app for that.” An idea that seems easy, but just doesn’t really work. Fortunately, before I spent the rest of my life trying to plan lunch in the office, the problem was solved for me. Nick and I quit. Then we joined Carsonified to built Treehouse (then Think Vitamin Membership).

There were now just 3 people in the company, and one of them was on another continent. Lunch was just agreeing between 2 people what to do, a web app is overkill. Then we hired Michael. Then Jon. And Amit, now there are 19 people working in the Orlando office. We scaled for a while, we just had to get 3 or 4 or 5 people to agree on lunch. It became stressful around 7. Suddenly the whole office can’t eat at the same place. Organizing lunch became a problem again.

For a few weeks we handled it in our campfire chat room. Someone would suggest a lunch destination, some people would be in, some not so much, an alternative choice would surface. It became hard to track who goes where. I began to think about the “Lunch App” again. Then I came to my senses.

I grabbed a sharpie and a pack of sticky notes, wrote everybody’s name and all of the restaurants, each on their own note. I stuck them on the wall and this happened.

It was amazing. Everybody could see the options, see who wanted to go where and make a good decision. We split into 3 reasonable groups and had excellent lunches, all the way around. This took 2 minutes to make.

There were bugs. The sticky notes were cheap. It was a bit boring, but that was fixed by going to the store and buying some extra-sticky sticky notes. I also picked up some stickers and other decorations so people could customize their stickies.

Version 2 was deployed in a few minutes, now with MySpace levels of “tasteful” customization.

Video Workflow

Lunch planning was not the end of our sticky note problem solving. Managing a video production studio is tough. We spent a lot of time at 2 video pros and 3 teachers. It was pretty manageable, but now there are 9 people on the video team, and 7 teachers. Now planning is critical. We have one screencasting room, and one video studio. With so many people figuring out who is using what resource when, and who is working with who when became our biggest headache.

At Treehouse, we use a lot of web apps. We have switched project management apps more times thatn I can count. Codebase, Basecamp, Github, Remember the Milk, Trello, Team Gannt, Asana, and probably a few others that escape my memory. It felt like we were switching project management apps every week. None of these apps were bad, but they all left something to be desired for our needs.

Then one day the sticky notes began to spread. Michael began utilizing other walls for organizing project workflow and scheduling

So, Sticky Notes Solve All Problems?

No, my point is not that we should all use sticky notes for everything. Obviously this has disadvantages vs a technical solution, but for lunch, we don’t need to have our remote employees involved, for obvious reasons.

The moral of the story is that it’s very easy to get lost in our tools. As web designers and developers, we love the web, we love our tools. It’s easy to get into the mindset of solving every problem with what you know, when the obvious solution just isn’t obvious to you anymore.

Next time you set out to solve a problem with software, step back and think, can I solve this problem without it?

• Faster development mode – Rails now only reloads the classes you’ve actually changed between requests in development mode.
• Explain queries – In development mode, you can automatically show the explain of certain queries by calling .explain at the end of your query. The results will go in your log.
• Active Record Store – Active Record now has a built in way to do key/value storage right from your models. No plug-ins or external gems required!

You can also check out the change log of all of the fixes and changes, both big and small. Enjoy!

We’ve added a simple Groups Dashboard that allows you to see …

1. Group Activity: Who’s watching videos and unlocking Badges
2. Ranking in your Group, based on Badge unlocks

More info …

1. Group pricing is 25% off normal prices, which allows people with large groups to save a bit of money.
2. You only need 2+ people to sign up.
3. If you’re already a Member, you can’t be brought into a Group. We’ll address this in v2 of Groups. However, please contact Support if you need help: help@teamtreehouse.com
4. Sign up here

We have big plans for adding more features to Groups, so stay tuned. This is just an MVP (minimum viable product) release, so we could get it out to you all and see what you think :)

General Design Refresh

Tyson, our new Designer has also done a site-wide refresh on the app. It’s even easier to use now and super fast. Tyson lead the Digg Design Team for awhile so he knows all about optimizing for speed :)

This video is from Treehouse, a high-quality video training site with hundreds of short videos on topics like …

• Accessibility
• CSS3
• Aesthetic Foundations
• Django
• HTML
• CSS
• HTML5
• iOS Development
• JavaScript
• jQuery
• NoSQL
• PHP
• Responsive Web Design
• Ruby
• Ruby on Rails
• UX
• Version Control
• WordPress Theme Design

New videos are added regularly, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

We had so much fun celebrating with our previous giveaway, that we thought we would do another one.If you tweet to @treehouse the name of your favorite web app, we’ll randomly pick 10 winners to receive a "Mike the Frog" Nerd Merit Badge! Here’s a picture of what they look like:

This is super helpful to collect, test and experiment with your collection of semantic HTML & CSS patterns. For beginners it can be a great way to begin to understand the relationship between markup and style. No matter which audience you fall into, it is a handy tool for improving speed and productivity.

Also make sure to take notice of the Pears website itself, which is beautifully designed and responsive.

Thanks Dan, for making our lives more enjoyable with Dribbble and easier with Pears. :)

If you caught Ryan’s article last week, he told you about our brand new, not to be missed Vegas event – Future Insights Live! We’ve combined the Future of Web Apps, Design and Mobile into one massive five day event all geared toward you! Whether you’re a Web Designer, Developer or Entrepreneur there will be something for everyone.

We are launching a brand new scheduling app within the next couple of weeks which will list full details of the huge conference schedule and give you an overall feel for the event. So with that in mind, we have decided to extend our Early Birds (saving you $200) until 24th Feb! That way you can see EXACTLY what you’re paying for.

We’ll be launching the full schedule by the end of the week, so please check it out and join us for our biggest event yet!

It’s difficult to test aesthetics, but with tools like Spur App you can make sure that your design looks good for people with color blindness and other mild vision impairments. You can also make sure that your design has enough contrast and feels "balanced" on both sides.

Check My Colours is another web-based tool that can help out. Simply type in your live URL, and you’ll get a listing of all the areas where your color contrast can be improved. It’s a bit more technical than simply looking at a black and white image, but it’s good for more detailed analysis, especially on a complex web application that might have lots of dynamic views.

At Carsonified Towers, we’re all getting super excited for May, when The Future of Web Design hits London for another three days of learning and inspiration. As ever, we kick off the show with four full-day workshops – each lead by a totally inspirational industry leader. From 9am am to 5pm, we’ll be rolling up our sleeves and knuckling down for a serious hit of web savvy. Numbers are capped at 40 for each workshop, ensuring a great learning environment.

This year’s chosen workshop topics are already proving popular. First up, we’ve got the unstoppable force of web awesomeness that is Paul Boag. Director of Headscape, Paul will be leading a crash course in Running A Successful Web Design Business: ”We like to think that being a successful independent web designer is about creating great websites. Its not. Running your own business is about a lot more than having the right professional skills. ”

After wowing the crowds as a Rising Star back in 2011, Steve Fisher has rapidly become one of our most popular speakers. He’ll be joining us again in London to lead his Rock Solid UX Deliverables workshop: “No longer something that has to always be hugely complex and costly, we’ll cover the back-to-basics approach to UX design in this workshop and how to practically dispatch a rock solid responsive web design UX deliverables package.” 

Next up, creator of the uber popular Coach to 5K app, Josh Clark will be crossing the Atlantic to deliver his Teaching Touch workshop – a sell out success at FOWD NYC last year: “The workshop presents nitty-gritty ‘rule of thumb’ design techniques that together form a framework for crafting finger-friendly interface metaphors, affordances, and gestures for a new generation of mobile apps that inform and delight.”

Last but not least, longtime Carsonified favourites, the Web Standardistas will be joining the fun, to teach their Good Ideas Grow On Paper workshop: “Armed with some fundamental design principles and an abundance of tools – which naturally includes the Standardistas’ ‘Bag of Awesome™’ (containing a veritable cornucopia of material) – we show the aspiring analogue designer a range of methods for breaking out of the stranglehold of the often clichéd digital world.”

This video is from Treehouse, a high-quality video training site with hundreds of short videos on topics like …

• Accessibility
• CSS3
• Aesthetic Foundations
• Django
• HTML
• CSS
• HTML5
• iOS Development
• JavaScript
• jQuery
• NoSQL
• PHP
• Responsive Web Design
• Ruby
• Ruby on Rails
• UX
• Version Control
• WordPress Theme Design

New videos are added regularly, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

Why Use Version Control?

You might be wondering why you should use version control, even for a site you’ll never collaborate with anyone on. This is a valid question. I can best illustrate the answer with a scenario you may have encountered in the past. Let’s say you’re in the middle of making a site and want to try something crazy with the css. Maybe you want to do a bit of an experiment and make everything strange shades of yellow and red. You don’t know if you’re going to keep the work when you finish it. Since it’s an experiment, it would probably be a good idea to not mess up your working version of the site.

At this point, you might be thinking of creating a copy of the site and making your changes on the copy. Maybe you’re sure that you’re going to use this work and you’re going to crank through. Maybe it doesn’t work out, though. Wouldn’t it be nice if you could take a snapshot of your site now, do your experiment, and not have to worry about whether you mess things up? That’s exactly what version control is for!

Step 1: Install and Configure Git

In order to start working with git, though, we need to install it. Git is fairly easy to install. If you’re using Windows, GitHub has an excellent set up guide to get git installed on Windows. They also have great guides for Mac OS X and linux. If you don’t already have git installed, follow those guides and come on back here.

Once you have git installed, you have to tell it who you are. This is done using the config command. Open Terminal and type in the following:

$ git config --global user.name "Jason Seifer"
$ git config --global user.email "jason@teamtreehouse.com"

Step 2: Initialize a repository

We’re going to initialize a git repository now. A repository is just a directory with one or more files we want to track the changes of, in this case our web site. Open up terminal (or command prompt on Windows) and change to the directory containing the site you want to put in to git. You do that with the cd command. I’m going to put my web site in the Sites/think_vitamin directory.

[~] $ cd Sites/think_vitamin
[~/Sites/think_vitamin] $

Once you’re in there, type the following:

[~/Sites/think_vitamin] $ git init

Assuming you have correctly installed git, you should see the following:

  Initialized empty Git repository in /Users/jason/Sites/think_vitamin/.git/

This is git telling you that thinks are working and that the path it gave you is now a repository. If you don’t see that output, go back to step 1 and verify that everything was correctly installed.

Step 3: Add Your Files

Now that we have initialized our git repository, we have to tell git what files we want to add to the repository. In order to do this, we use the add command. The add command takes either a single file or a path. The add command takes the changes you’ve made and adds them to something in git called the staging area. The staging area is kind of like a waiting room for git. It lets you tell git what changes you’re going to add to the main index.

Since we are already in the directory with our web site, we’ll tell it to add the path of the current directory:

[~/Sites/think_vitamin] $ git add .

At this point, you won’t see any output. My example is just an index.html file. In order to see what git is about to stage, you can use the status command:

[~/Sites/think_vitamin master]$ git status
 
# On branch master
#
# Initial commit
#
# Changes to be committed:
#   (use "git rm --cached ..." to unstage)
#
#	new file:   index.html
#

The first line of the output says “On branch master“. In git, a branch is just a pointer to something called a commit (explained in the next section). Since this is our first commit, git lets us know that on the second line of output where it says Initial commit. Next, git says there are changes to be committed. My index.html file is there since it’s the only thing I have in the directory right now. This is good!

Step 4: Commit Your Changes

A commit in git is a pointer to a series of changes that you have told git you want to track with the add command. When you commit your changes, git writes them to the index. This is git’s way of saying “this is what the repository looked like at this point in time.” So let’s commit our changes:

[~/Sites/think_vitamin]$ git commit -m "Initial commit"
[master (root-commit) 542d5fa] Initial commit
 1 files changed, 1 insertions(+), 0 deletions(-)
 create mode 100644 index.html

Here we use the commit command to tell git to commit our changes to the repository. The -m argument told git that we want to give the commit a message. My message here was “Initial commit” because this was the first commit to the repository. As you make changes, you can be much more descriptive. This is helpful when working on larger teams. Time Pope has a great article on writing good commit messages if you’d like any pointers.

The important thing about commits is that, once you have committed changes, you can always go back to how your repository was at the point in time of that commit. How cool is that? That means that you’re now free to make horrible changes to your site. Wnat to see how Comic Sans looks for all the headers? Go for it! You can always go back.

Step 5: Make some changes

Now that things are committed, you can feel free to make some changes to your code. In my example web page, I made changes to the header of the page. Now we can run git status again to see what happened:

[~/Sites/think_vitamin]$ git status
# On branch master
# Changes not staged for commit:
#   (use "git add ..." to update what will be committed)
#   (use "git checkout -- ..." to discard changes in working directory)
#
#	modified:   index.html
#
no changes added to commit (use "git add" and/or "git commit -a")

Now we’ll add the file we just changed:

[~/Sites/think_vitamin]$ git add index.html
1.9.3 [~/Sites/think_vitamin]$ git status
# On branch master
# Changes to be committed:
#   (use "git reset HEAD ..." to unstage)
#
#	modified:   index.html
#

Finally, we’ll commit the change:

[~/Sites/think_vitamin]$ git commit -m "Modify home page header"
[master bc8251b] Modify home page header
 1 files changed, 1 insertions(+), 1 deletions(-)

Great! We just made our first two commits. Our co-workers will love us for writing a descriptive message along with the second commit, too, although they might also still be mad for taking the last cup of coffee.

Step 6: Make a branch

Remember earlier when we were talking about making experimental changes that you may want to keep? That’ what branches are for! Branches let you easily separate your work. You can have two branches going at the same time with different work. Branches are great for experimentation with something that you’re not sure you’re going to keep.

Let’s say we wanted to change the font on all headers to Comic Sans. You’re not sure how this is going to look (bad) but your client really wants you to give it a try anyway. Let’s create a branch to do that just in case we want to switch back. In git terms, we call this process creating a branch. We do that by checking out the branch and passing a flag to git saying that we want to create it:

[~/Sites/think_vitamin]$ git checkout -b comic_sans
Switched to a new branch 'comic_sans'

Now that we’re on our comic_sans branch, we are free to make changes and commit them. This won’t affect anything on our master branch until later. Let’s make our changes:

[~/Sites/think_vitamin]$ git status
# On branch comic_sans
# Changes not staged for commit:
#   (use "git add ..." to update what will be committed)
#   (use "git checkout -- ..." to discard changes in working directory)
#
#	modified:   index.html
#
no changes added to commit (use "git add" and/or "git commit -a")

Git also let’s us see what changed in between what we’re about to stage with the diff command:

[~/Sites/think_vitamin]$ git diff
diff --git a/index.html b/index.html
index 159202e..266d025 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-

Hello world

+

Hello world

We can also add and commit the change with one command by using the -a flag when committing:

[~/Sites/think_vitamin]$ git commit -am "Make header font comic sans"
[comic_sans 94af8b2] Make header font comic sans
 1 files changed, 1 insertions(+), 1 deletions(-)

Now we’ve committed to the comic_sans branch. Sweet!

Step 7: Merge your changes

Our client is now happy with the header changes. Our experimental branch we created now needs the changes to make their way back in to our main branch. We do this through a process called merging. What we want to do is merge or changes from the comic_sans branch back in to the master branch. First, we have to go to the branch we want to merge to. We do that by checking out. This time, we won’t use the -b parameter since we’re not creating the branch:

[~/Sites/think_vitamin]$ git checkout master
Switched to branch 'master'

Now we use the merge command to get our changes from the comic_sans branch in to master:

[~/Sites/think_vitamin]$ git merge comic_sans
Updating bc8251b..94af8b2
Fast-forward
 index.html |    2 +-
 1 files changed, 1 insertions(+), 1 deletions(-)

Boom! Now we have all of our changes in to git. If we want to see what these changes were, we can use th log command to get a nice display of times, dates, and authors:

[~/Sites/think_vitamin]$ git log
commit 94af8b2e976ba11755f7483bc761ea2b9a747e0a
Author: Jason Seifer 
Date:   Wed Feb 1 15:07:45 2012 -0500
 
    Make header font comic sans
 
commit bc8251b338b8ac4451888e1da482708df6264529
Author: Jason Seifer 
Date:   Wed Feb 1 10:16:41 2012 -0500
 
    Modify home page header
 
commit 542d5fab4c86d29a125a78b8a89366f70bdfaa9d
Author: Jason Seifer 
Date:   Wed Feb 1 10:10:01 2012 -0500
 
    Initial commit

Well Done!

In this article we learned how to install git, create a repository, change branches, and commit changes to our code. In the next article in this series, we’ll learn about removing files, going back to different commits, and pushing up to GitHub and working with other people. Stay tuned!

The ongoing drawback to Google Fonts has been the smaller selection compared to other font services, but that’s rapidly changing. Even better, an editorialized web page called “Beautiful Web Type” has popped up that showcases the best fonts that Google has to offer. Loving this!

View the Tutorial
Demo Page

You can read all about Elliot’s ideas on his website. He explain everything is great detail. If you read his post you will find it hard to disagree. Fixed designs are becoming harder and harder to justify.

We’ve just confirmed that industry leaders Kevin Rose and Jason Calacanis will be speaking at Future Insights Live in Vegas on April 30 – May 4th!

Future Insights Live is our new show that combines Future of Web Apps, Future of Web Design and Future of Mobile into one huge 5-day, 5-track, 1,500 person conference. It’s going to be epic and you won’t want to miss it.

Early bird pricing (save $200) is almost over, so grab your ticket today.

This video is from Treehouse, a high-quality video training site with hundreds of short videos on topics like …

• Accessibility
• CSS3
• Aesthetic Foundations
• Django
• HTML
• CSS
• HTML5
• iOS Development
• JavaScript
• jQuery
• NoSQL
• PHP
• Responsive Web Design
• Ruby
• Ruby on Rails
• UX
• Version Control
• WordPress Theme Design

New videos are added regularly, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

You can also follow @twbootstrap on Twitter.

Here’s some of what’s new in this release:

• Responsive layout (!) with media queries.
• New 12 column grid (the old one was 16 columns).
• Stacked forms are the default.
• Split button dropdowns.
• New Pills.
• Navigation lists.
• New Dropdowns.
• Tabbles in any direction.
• New JavaScript plugins.

What better way to start off the new year than a fresh new Dribbble portfolio?  If you are a designer with minimal coding experience and want to display your Dribbble work in all browser sizes, you have come to the right place.  We will be creating a HTML5 one page portfolio which pulls your Dribbble information and is responsive in all browsers.  This little project will be presented in two parts.

Part 1 (this post):

HTML/CSS/jQuery set up.

Part 2 (coming soon):

Convert HTML to PHP and use the Dribbble API to pull your data. Plus IE fixes.

The File Structure

Let’s dig right in and start off with our file structure.  On your desktop create a folder labeled: ‘Dribble-Portfolio’.  In that folder create the following files:

• folder labeled ‘css’
• style.css
• folder labeled ‘images’
• logo.png
• connet.jpg
• me.png
• sample.jpg
• index.html
• folder labeled ‘scripts’
• jquery.js
• fitText.js

It should look a little something like this:

*to download the .js and image files simply select the links above and save them to the appropriate file structure.

The HTML

Now that we have all of our assets and files lets begin with the HTML. Below is the proper code for your ‘index.html’ file.

<!DOCTYPE html>
 
<html>
 
<head>
 
	<!--Viewport-->
	<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
	<title>Dribbble Portfolio</title>
 
  <!--Google fonts-->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
 
  <!--Main Stylesheet-->
  <link rel="stylesheet" type="text/css" href="css/style.css" />
 
</head>
 
<body>
 
	<header>
 
  	<h1 id="logo"><a href="#"><img src="images/logo.png" alt="My Logo" /></a></h1>
 
    <nav>
 
    	<ul class="menu">
 
        <li><a href="#" class="email"></a></li>
        <li><a href="#" class="dribbble"></a></li>
        <li><a href="#" class="twitter"></a></li>
        <li><a href="#" class="facebook"></a></li>
        <li><a href="#" class="linkd"></a></li>
 
      </ul>
 
    </nav>
 
  </header>
  <!--end header-->
 
  <section class="half">
 
      <img src="images/me.jpg" class="main-image" alt="This is Me" />
 
  </section>
  <!--end main image-->
 
  <section class="half">
 
  	<h2 class="tagline">Check Out My Super Radical One Page Responsive Portfolio Which Pulls My Dribble 'Shots'. Get Gnarly!</h2>
 
  </section>
  <!--end tagline-->
 
  <div class="clear"></div>
 
  <section>
 
			<h1>Latest Work</h1>
 
 
			<div id="container">
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
			</div>
 
	</section>
  <!--end dribble content-->
 
  <div class="clear"></div>
 
  <footer>All RIghts Reserved <a href="#">www.website.com</a></footer>
  <!--end footer-->
 
 
 
</body>
 
</html>

As you can see the code is fairly simple. We have a basic HTML5 markup with some ‘viewport’ settings at the top. The ‘viewport’ settings tell devices such as iPhones to display at the devices width and scale.

 
<!DOCTYPE html>
 
<html>
 
<head>
 
	<!--Viewport-->
	<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
	<title>Dribbble Portfolio</title>

Also the ‘head’ is reaching out and grabbing some Google font stylesheets as well as our ‘style.css’ file in our ‘css’ folder. We will get to this file in our next step.

 
  <!--Google fonts-->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
 
  <!--Main Stylesheet-->
  <link rel="stylesheet" type="text/css" href="css/style.css" />
 
</head>

As we get into the body of the file we have four main sections(header, section(half), section(dribbble) and footer).

The header contains two elements. Element one is the logo, feel free to change it. It’s located in the images folder, labeled ‘logo.png’(200x80px). Element two is our social network icons which we won’t see until we add the css styles. For now we are going to link to hash tags. In part two of this tutorial we will be pulling in the correct data via Dribbble.

<header>
 
  	<h1 id="logo"><a href="#"><img src="images/logo.png" alt="My Logo" /></a></h1>
 
    <nav>
 
    	<ul class="menu">
 
        <li><a href="#" class="email"></a></li>
        <li><a href="#" class="dribbble"></a></li>
        <li><a href="#" class="twitter"></a></li>
        <li><a href="#" class="facebook"></a></li>
        <li><a href="#" class="linkd"></a></li>
 
      </ul>
 
    </nav>
 
  </header>
  <!--end header-->

The next section, section(half) contains our ‘me.jpg’ image and our tagline which are located directly below the header. Feel free to swap out the image(me.jpg) and tagline copy to better personalize your portfolio. The image currently being pulled in is 800x600px as it is scalable to the screen size.

 
<section class="half">
 
      <img src="images/me.jpg" class="main-image" alt="This is Me" />
 
  </section>
  <!--end main image-->
 
  <section class="half">
 
  	<h2 class="tagline">Check Out My Super Radical One Page Responsive Portfolio Which Pulls My Dribble 'Shots'. Get Gnarly!</h2>
 
  </section>
  <!--end tagline-->
 
  <div class="clear"></div>

Our next section is section(dribble) which is going to pull our most recent Dribbble ‘shot’ titles and ‘shot’ images. For now we are going to use dummy content. In part two we will be running a loop to pull the latest projects with the all mighty power of php. You will also be able to choose how many projects you would like to display. For now we are going show twelve ‘shot’ examples.

<section>
 
			<h1>Latest Work</h1>
 
 
			<div id="container">
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
			</div>
 
	</section>
  <!--end dribble content-->

The last section is the footer area. This is for any links or Copy Right text you wish to display or link out to.

<footer>All RIghts Reserved <a href="#">www.website.com</a></footer>
  <!--end footer-->

The CSS

Now that we have inserted all of our HTML data, let’s add our styles to the page. Simply copy the CSS code below and input it into the style.css file. Here is the CSS code:

/* DRIBBBLE PORTFOLIO SITE - 2012 */
 
/*RESET*/
html,body,div,span,applet,object,iframe,#logo,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{outline:none;border:0;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
 
/*MAIN*/
body { background:#dce877; margin:0 auto; padding:0 5%; font-family:Open Sans, Arial, Helvetica, sans-serif; width:90%; font-size:13px; line-height:21px; color:#616634; }
header, footer { float:left; width:100%; }
section { float:left; }
ul { list-style:none; margin:0; padding:0; float:left; }
a { color:#616634; text-decoration:none; transition:all linear .5s; -webkit-transition:all linear .5s; -moz-transition:all linear .5s; cursor:pointer; }
a:hover { color:#111; opacity:1; }
h1, h2, h3 { font-weight:normal; float:left; }
h1 { margin:20px 0; }
h2 { font-size:30px; line-height:40px; }
h3 { font-size:14px; line-height:40px; }
p { font-size:12px; }
.full { width:96%; margin:0; padding:2%; float:left; position:relative; }
.half { width:46%; margin:0; padding:2%; float:left; position:relative; }
.clear { clear:both; }
 
/*HEADER*/
header { position:relative; width:100%; border-bottom:5px solid #bcc664; margin:0 0 20px; }
#logo { float:left; margin:20px 0 0; transition:all linear .5s; -webkit-transition:all linear .5s; -moz-transition:all linear .5s; }
 
	/*CONNECT*/
	nav { float:right; transition:all linear .5s; -webkit-transition:all linear .5s; -moz-transition:all linear .5s; }
	.menu { list-style:none; margin:15px 0; }
	.menu li { display:inline; }
	.menu li a { width:32px; height:31px; background:url(../images/connect.png) no-repeat; opacity:.5; float:left; display:block; margin:30px 5px; }
	.menu li a:hover { opacity:1; }
	.dribbble { background-position:0 0; }
	.linkd { background-position:-38px 0 !important; }
	.twitter { background-position:-78px 0 !important; }
	.facebook { background-position:-118px 0 !important; }
	.email { background-position:-158px 0 !important; }
 
/*SECTION(HALF)*/
.main-image { width:100%; }
.tagline { line-height:140%; color:#616634; font-family:Raleway; font-weight:normal; }
 
/*SECTION(DRIBBBLE)*/
#container { -moz-column-count:4; column-count:4; -webkit-column-count:4; -webkit-column-gap:10px; -moz-column-gap:10px; column-gap:10px; float:left; width:100%; }
.box { background:#BCC664; padding:5%; opacity:.75; display:inline-block; margin-bottom:10px; border-bottom:2px solid #616634; border-radius:2px 2px 10px 10px; width:90%; }
.pic { width:100%; float:left; clear:both; }
 
/*FOOTER*/
footer { border-top:5px solid #bcc664; margin-top:20px; padding:20px 0; font-size:12px;}
 
 
/*MEDIA QUERIES*/
@media screen and (max-width:960px ) {
 
	#container { -moz-column-count:3; column-count:3; -webkit-column-count:3; }
 
}
 
@media screen and (max-width: 768px) {
 
	.half { width:95%; }
	.menu li a { margin-right:1px; }
	#container { -moz-column-count:2; -webkit-column-count:2; column-count:2; }	
}
 
@media screen and (max-width: 479px) {
 
	#logo { margin:0 0 0 48px; }
	nav { float:left; margin:0 0 0 50px; }
	.menu { margin:0; }
	#container { -moz-column-count:1; -webkit-column-count:1; column-count:1; }
 
}

After we save our ‘style.css’ file and refresh our browser, we have a very clean portfolio layout that responds well to the browser size.

When you view the stylesheet css code you will see ‘%’ used a lot on the width attributes. The page is styled with a responsive fluid layout in mind. If you have any questions about responsive web sites, please check out ‘Responsive Web Design Foundations’ over at Treehouse.

As of now we have a fully functional static HTML5 page which has been tested in the latest versions of Firefox, Chrome and Safari. Because we are using HTML5 and CSS3 capabilities we will not be testing in IE at the moment. Once we finish up part 2 of the tutorial we will set up separate IE files to compensate for it’s lack of functionality with HTML5 and CSS3.

The JavaScript

Lastly we are going to add a little javascript to our page allowing our ‘tagline’ text to scale with browser size. Insert this snippet of code directly below the footer.

<!--js files-->
	<script src="scripts/jquery.js"></script>
	<script src="scripts/fitText.js"></script>
 
	<!--initiate fit text-->
	<script>
 
  	 $(document).ready(function() {
 
  		 /*FitText*/
  		 $(".tagline").fitText(1.1, { minFontSize: '20px', maxFontSize: '200px' });
 
  	 });
 
	</script>

This snippet simply links up to our ‘jquery’ and ‘fitText’ files we set in our scripts folder earlier. Then it initiates the ‘fitText’ function and gives it some variables. Feel free to change the max-font-size and min-font-size as your ‘tagline’ will be different.

Wrapping Up

Now lets review what we have just done.

• We have set up our HTML
• Added our CSS styles
• Inserted a little javascript

Congratulations you have successfully set up a static responsive one page portfolio.

Source Files
Demo Site

Still to Come(Part 2)

In the final portion of this tutorial we will be using Dribbble API to load in our user data and ‘shots’, as well as IE 8 and up fixes. In the meantime if you would like to know more about HTML5 and CSS3 please check out Treehouse, or contact me at mat@teamtreehouse.com. As always, Get Gnarly and Design your Life!

Role Those Credits:

• Dribbble
• jQuery
• Fit Text
• Treehouse

Just when you thought scrolling your web page was getting boring. Scrollorama has stepped the scroll game up with this remarkable jQuery Plugin. Scrollorama allows you to manipulate text when you scroll the page. You can do everything from Transitions to Zoom to Parallax. Check out the Scrollorama site to view some great examples and the plugin’s documentation.

This Plugin is great for landing pages and highly interactive web applications. Like CSS3 transitions, use your animations sparingly.