Advertisement
HTML/CSS

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

by

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

Related Posts
  • Code
    Articles
    Strategies For Choosing the Right Premium WordPress Theme for Your Next ProjectPremiumwp
    You have your credit card in hand, and you are ready to buy a beautiful, premium WordPress theme for your next website or blog. But where should you begin? Perhaps a search through Google? Maybe a famous WordPress theme site? Perhaps ThemeForest.net? In this post, I aim to arm you with a few tips that will guide you when choosing a premium theme not only purchase a beautiful theme, but one that will meet your needs.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Releasing Your ThemeCreating wordpress theme from html 400
    If you've been following this series you now have a working WordPress theme. Your theme has a number of template files, including a page template and an archive template, and also has featured image support.Read More…
  • Code
    HTML5
    HTML5: Vibration APIPdl54 preview image@2x
    HTML5 has been a breath of fresh air for the web, which hasn't only affected the web as we know it. HTML5 provides a number of APIs that enable developers to create interactive websites and improve the user experience on mobile devices. In this article, we'll take a closer look at the Vibration API.Read More…
  • Design & Illustration
    News
    New Design Courses Available on Tuts+ PremiumNewdesigncourses
    Tuts+ Premium courses teach you a single skill from top to bottom, inside out. Currently, more than 15,000 members are sharpening their skills in web design, web development, Photoshop, vector design, video effects and much more. Our dedicated team adds new content weekly, so there’s always something fresh to sink your teeth into. Today, we're highlighting a few of the latest and greatest course additions to Tuts+ Premium.Read More…
  • Web Design
    Design Theory
    CSS3, Web Fonts and IconsDsfd webfonts retina
    We’re really lucky to be working in an industry like the web industry. Nowadays, we have so many new tips and techniques and ways of working all of the time. We’re also really lucky that we’re in an age where, as these new technologies are introduced, our browsers can (for the most part) be pretty quick to catch up, so we get to put these new technologies into our designs (and gasp, even into client work!) more than ever before.Read More…
  • Code
    JavaScript & AJAX
    Important Considerations When Building Single Page Web AppsSpa preview
    Single page web applications - or SPAs, as they are commonly referred to - are quickly becoming the de facto standard for web app development. The fact that a major part of the app runs inside a single web page makes it very interesting and appealing, and the accelerated growth of browser capabilities pushes us closer to the day, when all apps run entirely in the browser. Read More…