Conquering Responsive Layouts

# Course Progress :

• Day 1 | Using percentages & avoiding heights
• Lecture-1
• Lecture-2
• Lecture-3
• Challenge-1
• Day 2 | Getting familiar with relative units
• Em Vs Rem
• Understanding Em vs Rem
• Day 3 | Enter max-width
• Kevin's Solution to Challenge 1
• max-width (Practice)
• Challenge-2
• Day 4 | Extra Curricular activities
• CSS Viewport units
• Day 5 | Practice Time!
• Challenge-3
• Day 6 | Review
• Recap of 1st Week
• Using percentages for widths
• Avoiding to set heights
• Using max-width
• Why you shouldn't set font-sizes using em
• Day 7 | Solution to Challenge-3
• Kevin's Solution to Challenge-3
• A Tale of width & max-width
• BEM Naming Convention for CSS
• BEM Documentation
• {box-sizing:border-box;} explained
• Day 8 | Flexbox Basics
• Flexbox Challenge-1
• Day 9 | A deeper dive into Flexbox
• Kevin's Solution to Flexbox Challenge-1
• Adding a hero image
• Column widths & flexbox
• Ensuring the image is responsive
• Flexbox Challenge-2
• Day 10 | Extra curricular activities
• Flexbox Basics Playlist Notes
• Flexbox Containers Notes
• Flexbox Items Notes
• Simple Layout using flexbox(Webpage)
• Flexbox Basics Playlist
• Day 11 | Using flexbox for a navigation
• Navbar Challenge-1
• Day 12 | Getting fancy with navigations
• Styling up our navigation
• More improvements to the navigation
• Flexbox Challenge-4
• Day 13/14 | Break time!
• some relatively new CSS functions
• min(), max() & clamp() Practice
• Day 15 | Intro to Media Queries
• 1. Media Query Basics
• Adding Media Query to our Layout
• Day 16 | What breakpoints to use ?
• How to decide what breakpoints to use ?
• (Article)The 100% correct way to do CSS Breakpoints
• Day 17 | The viewport meta tag
• The meta viewport tag
• Day 18 | Flexbox Challenge #4 Solution & Mobile-first
• Extra Resources
• Kevin's Solution - Flexbox Challenge #4
• Day 19 | Mobile Navigation Challenge
• Mobile Navigation Challenge
• Day 20 | Kevin's Solution to Mobile Navigation Challenge
• Mobile Navigation Challenge Solution
• Day 21 | The Last Day
• Some Notes & Resources
• The Final Challenge