Preview unavailable

Delayed 0 days

• Intro & Why the course is formatted in this way

• Asking Questions

• My editor and a useful extension

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

Delayed 1 day

• Getting familiar with relative units

• CSS em and rem explained

• Why you shouldn't set font-sizes using em

Delayed 2 days

• Challenge #1 - Solution

• Adding in a max-width

• Challenge #2

• Challenge #2 - Starting Files

• Some notes on the challenge

Delayed 3 days

• Some extra material if you're interested

• CSS Units: vh, vw, vmin, vmax

Delayed 4 days

• Challenge #2 - Solution

• Challenge #3

• challenge-design-specs.pdf

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

Delayed 6 days

• My solution to challenge #3

• challenge-finished.zip

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

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

Delayed 9 days

• A deeper dive into flexbox

• Let's talk about CSS Grid

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

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

Delayed 12 days

• Break time!

Delayed 14 days

• Media query basics

• Adding one to our layout

Delayed 15 days

• How do decide what breakpoints to use?

• The 100% correct way to do CSS breakpoints

Delayed 16 days

• The meta viewport tag

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

Delayed 18 days

• Navigation Challenge

• Navigation Challenge - layouts

• nav-challenge.zip

• Navigation Challenge | Starting Codepen

Delayed 19 days

• Navigation Challenge | My Solution

Delayed 20 days

• You've done it!

• Links to other resources

• Your Final Challenge

• Final Challenge | Design Specs

• The image used