Responsive Design

What is responsive design? It is designing your page layout to reflect the size and capabilities of the device being used to look at the page. Have you ever visited a site from your phone just to find out you can't access important information? This means the site is not responsive.


The key to having a great page is to design "mobile-first." This means that you should make sure that your page has all of the necessary functionalities when viewed on an extra small screen.


The larger screen of tablets allows you to modify the layout to provide a different experience for your users. An example? A navigation bar that stretches across the width of the screen.

PCs and Desktops

When people are viewing your page from a large screen you can consider adding some elements that want to avoid on the mobile view, e.g. photo carousels, large videos, etc.

Course Code

Week 1: Style with Responsive Design


Online Access

Fluid Measurements (Starter)CodePen

Fluid Measurements (Completed)CodePen

Week 2: Basic Concepts


Online Access

Fluid Measurements and Media Queries (Starter)CodePen

Fluid Measurements and Media Queries (Completed)CodePen

Media Queries Part 2CodePen

Responsive Navigation (Starter)CodePen

Responsive Navigation (Completed)CodePen

Responsive Homework Starter CodeCodePen

Week 3: Media Queries fo Layout and Accessbility


Online Access

Responsive Grid (Starter)CodePen

Responsive Grid (Completed)CodePen

Responsive Flex (Starter)CodePen

Responsive Flex (Completed)CodePen

Week 4: Frameworks


Online Access

Bootstrap Grid Example CodePen

Bootstrap Navigation CodePen