Build a Responsive, Single Page Portfolio with Sass and Compass – New on Premium
plus

Build a Responsive, Single Page Portfolio with Sass and Compass – New on Premium

on Feb 14th 2013 with 7 comments
Tutorial Details
  • Estimated completion time: 2 hours
  • Difficulty: Intermediate
  • Topic: Sass and Compass

Final Product What You'll Be Creating

Demo View It Online

There’s a lot that goes into creating a web site these days. We’re now building websites using HTML5, CSS preprocessors, APIs, custom typography and more. Our design challenges include responsive architecture, resolution independence and multi-device interaction support. In this Premium tutorial, we’ll build a single page portfolio that covers aspects of all these techniques.

Become a Tuts+ Premium member to gain access to the whole tutorial, as well as hundreds of other advanced videos, tutorials, and courses.

This is a customizable, responsive, single-page website that incorporates modern web development techniques including:

  • Responsive design
  • HTML5 markup
  • CSS using SASS and the Compass preprocessor
  • Typography using Google’s web fonts service
  • jQuery fetching data from Dribbble’s API
  • Cross-browser, responsive, horizontal-scrolling carousel supporting touch interaction (without using javascript)
  • Icon font using the free iconmoon.io font-generator

The overflowing layout of our Dribbble shots

How the layout appears on a mobile device

Customizing our icon collection from IcoMoon

Tuts+ Premium

The recently re-launched Tuts+ Premium is a service that provides top-tier training in a variety of creative fields. Whether you prefer books, visual training, or in depth tutorials, we have you covered. While we unfortunately can’t afford to provide the service for free, it’s only $19 a month – less than you’d spend on dinner.

We hope you’ll consider checking it out! In addition to learning a huge variety of new skills, it’s also a fantastic way to say thank you to Webdesigntuts+.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Jim Nielsen considers himself a web designer at heart, though he often dabbles in other areas such as print and identity design. He loves acquiring new knowledge and hopes to someday develop competency in a wide-array of disciplines including programming, mathematics, and even physics!  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.vishnupadmanabhan.in/ Vishnu Padmanabhan

    Wow! The complete package!

  • Casper

    I have an question about the markup, when I would like to have more sections with colors, what should be the best markup for it. Can I add more section tags inside the section class content or is that not the correct way? I like to hear from you.

  • Jacob

    Sorry, but the design leaves too much white-space according to me.

  • Richard Davenport

    Hey Jim, your demo looks great, but your link to dribble is https and should be http. Just thought I’d mention it.

  • mister

    Thanks for this article.

  • Braff

    Hey! Doesn’t look bad at all. But what I really miss here at Webdesigntuts, Nettuts,all this Sitebuild Crab on Envato..etc. There is nothing really creative. Everything looks the same, look at what your readers commit and the sitebuilds you are publishing. If you want to become good at Webdesign, good at programming you need to be innovative. Learn your craft. Things you see here->Sitebuilds with a lot of high quality pics topped with 1million icons that your standard client doesn’t need or cannot efford are missing when you get your assignment. That’s where it ends building those standard Wp Themes and PSDs. Cheers

  • http://www.tinocordes.dk/ Tino Bøgebjerg Cordes

    I like the way the social links are done :-)