Project

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.

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.

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.

Instructor

  • 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

Release Date

This course will be available in DATE.