Conquering Responsive Layouts
- Buy now
- Learn more
Introduction

Delayed 0 days

Intro & Why the course is formatted in this way
Asking Questions
My editor and a useful extension
Day 1 | Using percentages & avoiding heights

Delayed 0 days

Percentages vs Fixed widths
Percentages on the child
Why it's a good idea to avoid heights
About the challenges
Challenge #1
Challenge #1 - Starting Files
Information about the daily drip
Day 2 | Getting familiar with relative units

Delayed 1 days

Getting familiar with relative units
CSS em and rem explained
Why you shouldn't set font-sizes using em
Day 3 | Enter max-width

Delayed 2 days

Challenge #1 - Solution
Adding in a max-width
Challenge #2
Challenge #2 - Starting Files
Some notes on the challenge
Day 4 | Extra curricular activities

Delayed 3 days

Some extra material if you're interested
CSS Units: vh, vw, vmin, vmax
Day 5 | Practice time!

Delayed 4 days

Challenge #2 - Solution
Challenge #3
challenge-design-specs.pdf
Day 6 | Review

Delayed 5 days

Review of the first week
Why you shouldn't use 'em's for font-size
A Tale of width and max-width
Day 7 | Solution to challenge #3

Delayed 6 days

My solution to challenge #3
challenge-finished.zip
Day 8 | Flexbox Basics

Delayed 7 days

Flexbox basics
An introduction to flexbox
Adding space in between columns
Flexbox challenge #1
Flexbox challenge #1 - Design Specs
Flexbox challenge #1 - starting files | HTML & CSS Files
Flexbox challenge #1 - starting files | Codepen
Day 9 | A deeper dive into flexbox

Delayed 8 days

My Solution to Flexbox challenge #1
Reducing the amount of HTML needed
Adding a hero image
Column widths and flexbox
Ensuring the image is responsive
Flebox challenge #2
Flexbox challenge #2 - Design Specs
Flexbox challenge #2 - starting files | HTML & CSS Files
Flexbox challenge #2 - starting CodePen
Day 10 | Extra curricular activities

Delayed 9 days

A deeper dive into flexbox
Let's talk about CSS Grid
Day 11 | Using flexbox for a navigation

Delayed 10 days

Flexbox challenge #2 - Solution
Flexbox Challenge #3
Flexbox challenge #3 - starting files | HTML & CSS files
Flexbox challenge #3 - starting files | Codepen
Flexbox challenge #3 - Solution
Day 12 | Getting fancy with navigations

Delayed 11 days

Fancier up our navigation with flexbox
The logo
More improvements to the navigation
Centering things the easy way
Flexbox challenge #4
Flexbox Challenge #4 - Design Specs and Images
Day 13/14

Delayed 12 days

Break time!
Day 15 | Intro to media queries

Delayed 14 days

Media query basics
Adding one to our layout
Day 16 | What breakpoints to use?

Delayed 15 days

How do decide what breakpoints to use?
The 100% correct way to do CSS breakpoints
Day 17 | The viewport meta tag

Delayed 16 days

The meta viewport tag
Day 18 | Challenge solution & Mobile-first

Delayed 17 days

Flexbox Challenge #4 solution - Writing the HTML
html-finished.zip
Flexbox Challenge #4 solution - Writing mobile-first CSS
Flexbox Challenge #4 solution - Adding media queries for larger screens
Flexbox Challenge #4 solution - A look at min-height
flexbox-challenge-4-finished.zip
Day 19 | Mobile navigation challenge

Delayed 18 days

Navigation Challenge
Navigation Challenge - layouts
nav-challenge.zip
Navigation Challenge | Starting Codepen
Day 20 | Mobile navigation challenge solution

Delayed 19 days

Navigation Challenge | My Solution
Day 21 | You've done it!

Delayed 20 days

You've done it!
Links to other resources
Your Final Challenge
Final Challenge | Design Specs
The image used

Day 12 | Getting fancy with navigations

6 Lessons