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.
Watch the Trailer
5 badges • 19 videos
-
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.
-
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.
-
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.
-
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
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.
