LearnA New Year, A New Responsive Dribbble Portfolio – Part 1 of 2


writes on January 26, 2012

Dribbble Portfolio

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:

It should look a little something like this:

Dribbble Portfolio

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


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.



	Dribbble Portfolio


My Logo

This is Me

Check Out My Super Radical One Page Responsive Portfolio Which Pulls My Dribble 'Shots'. Get Gnarly!

Latest Work

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.



	Dribbble Portfolio

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.


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.

My Logo

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.

This is Me

Check Out My Super Radical One Page Responsive Portfolio Which Pulls My Dribble 'Shots'. Get Gnarly!

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.

Latest Work

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



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:



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 { 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; }

	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; }

.main-image { width:100%; }
.tagline { line-height:140%; color:#616634; font-family:Raleway; font-weight:normal; }

#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 { border-top:5px solid #bcc664; margin-top:20px; padding:20px 0; font-size:12px;}

@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.


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:

8 Responses to “A New Year, A New Responsive Dribbble Portfolio – Part 1 of 2”

  1. Thanks, great article. Super easy to understand. I wish I was a dribble player too 🙁

  2. Hey love the write up and the idea in general.  However just thought I would alert you that Google Chrome is coming up for a Malware Detected error on the demo

  3. Excellent, well written article. Very cohesive and in-depth while still expalining the principles of what’s going on. Too bad I don’t have a dribbble 🙁

  4. Dale Cruse on January 26, 2012 at 2:26 pm said:

    Mat, this tutorial is easier to follow than many I’ve read elsewhere. 

    However, with all due respect, I question your use of the new HTML5 section element. In the first two uses in the markup, the section element is used as a generic container. The first one contains only an image, the second one only some text. According to the HTML5 spec, the new section element is intended for a thematic grouping of information not intended for syndication. My interpretation is that in this case a div would be more appropriate.

    The third use of the new HTML5 section element is used to wrap your latest work. While this use better fits the definition of the section element, I suggest the new HTML5 article element might be more appropriate. According to the HTML5 spec, the new article element is intended for a thematic grouping of information intended for syndication. If you intend for the information in the latest work grouping to be syndicated, the article element would be more appropriate.


Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop