Conquering Responsive Layouts

Are you ready to take the challenge and finally figure out responsive layouts? 

Click the button below and jump in!
Introduction
Intro & Why the course is formatted in this way
4 mins
Asking Questions
12 mins
My editor and a useful extension
3 mins
Day 1 | Using percentages & avoiding heights
Percentages vs Fixed widths
4 mins
Percentages on the child
5 mins
Why it's a good idea to avoid heights
5 mins
About the challenges
Challenge #1
2 mins
Challenge #1 - Starting Files
1.22 KB
Day 2 | Getting familiar with relative units
Getting familiar with relative units
CSS em and rem explained
Why you shouldn't set font-sizes using em
Day 3 | Enter max-width
Challenge #1 - Solution
2 mins
Adding in a max-width
3 mins
Challenge #2
2 mins
Challenge #2 - Starting Files
1.4 KB
Some notes on the challenge
Day 4 | Extra curricular activities
Some extra material if you're interested
CSS Units: vh, vw, vmin, vmax
Day 5 | Practice time!
Challenge #2 - Solution
4 mins
Challenge #3
4 mins
challenge-design-specs.pdf
115 KB
Day 6 | Review
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
My solution to challenge #3
20 mins
challenge-finished.zip
1.01 KB
Day 8 | Flexbox Basics
Flexbox basics
An introduction to flexbox
10 mins
Adding space in between columns
6 mins
Flexbox challenge #1
2 mins
Flexbox challenge #1 - Design Specs
351 KB
Flexbox challenge #1 - starting files | HTML & CSS Files
1.48 KB
Flexbox challenge #1 - starting files | Codepen
Day 9 | A deeper dive into flexbox
My Solution to Flexbox challenge #1
11 mins
Reducing the amount of HTML needed
3 mins
Adding a hero image
7 mins
Column widths and flexbox
8 mins
Ensuring the image is responsive
2 mins
Flebox challenge #2
2 mins
Flexbox challenge #2 - Design Specs
828 KB
Flexbox challenge #2 - starting files | HTML & CSS Files
133 KB
Flexbox challenge #2 - starting CodePen
Day 10 | Extra curricular activities
A deeper dive into flexbox
Day 11 | Using flexbox for a navigation
Flexbox challenge #2 - Solution
13 mins
Flexbox Challenge #3
2 mins
Flexbox challenge #3 - starting files | HTML & CSS files
136 KB
Flexbox challenge #3 - starting files | Codepen
Flexbox challenge #3 - Solution
3 mins
Day 12 | Getting fancy with navigations
Fancier up our navigation with flexbox
9 mins
The logo
3.09 KB
More improvements to the navigation
11 mins
Centering things the easy way
3 mins
Flexbox challenge #4
3 mins
Flexbox Challenge #4 - Design Specs and Images
22.5 MB
Day 13/14
Break time!
Day 15 | Intro to media queries
Media query basics
8 mins
Adding one to our layout
5 mins
Day 16 | What breakpoints to use?
How do decide what breakpoints to use?
7 mins
The 100% correct way to do CSS breakpoints
Day 17 | The viewport meta tag
The meta viewport tag
5 mins
Day 18 | Challenge solution & Mobile-first
Flexbox Challenge #4 solution - Writing the HTML
11 mins
html-finished.zip
243 KB
Flexbox Challenge #4 solution - Writing mobile-first CSS
17 mins
Flexbox Challenge #4 solution - Adding media queries for larger screens
9 mins
Flexbox Challenge #4 solution - A look at min-height
5 mins
flexbox-challenge-4-finished.zip
244 KB
Day 19 | Mobile navigation challenge
Navigation Challenge
5 mins
Navigation Challenge - layouts
720 KB
nav-challenge.zip
135 KB
Navigation Challenge | Starting Codepen
Day 20 | Mobile navigation challenge solution
Navigation Challenge | My Solution
10 mins
Day 21 | You've done it!
You've done it!
11 mins
Links to other resources
Your Final Challenge
Final Challenge | Design Specs
2.4 MB
The image used
72.3 KB