Build a Responsive Website

The Smells Like Bakin' cupcake company needs their website to work on tablets and phones. We will modify the code of their pre-existing website so that it is flexible and fits beautifully into a wide variety of screen resolutions and devices.

Cover css bakin2

5 Achievements

Introduction to Responsive Web Design

Introduction to Responsive Web Design

Some years ago there was a clear differentiation between desktop and mobile. The introduction of tablets and other new web devices brings the challenge of designing for more resolutions and devices than ever before. Fortunately, responsive web design has emerged as a robust solution.

Hide 8 Steps
Fluid Foundation

Creating a Fluid Foundation

The key to a responsive website is building it on a fluid foundation. This defines our website layout in ratios and proportions rather than absolute values. Using the target ÷ context = result formula, we'll convert widths, margins, and padding from pixels to percentages. We'll also learn how to make our images scalable.

Show 6 Steps
Adaptive Design

Adaptive Design

Introducing media queries allows us to target specific device resolutions; like an iPad or iPhone, and adjust our website's layout accordingly. This is referred to as an adaptive design approach.

Show 8 Steps
Responsive Design

Responsive Design

Responsive websites are built on a fluid grid and use media queries not to target specific device resolutions, but rather to adjust the design and content as it reaches various breakpoints.

Advanced Techniques

Advanced Techniques

Responsive web design doesn't stop at creating a fluid foundation and implementing media queries. It's an ongoing process. In this stage, we'll continue to make our typography and media even more responsive. We'll also learn how we should move forward when starting responsive web projects from scratch.


  • Allison Grayce

    Allison is a freelance web designer and UX consultant with experience working at small interactive agencies and large advertising firms.

Download videos

You have to sign up for Treehouse in order to download course videos.

Sign up