Module Lessons
CSS Layout Techniques
Flexbox Playground - The Parent Properties
Exploring the basic and intermediate properties and values of Flexbox and getting to know your development tools.
8
Flexbox - Navigation Bar Challenge
Use flexbox to create a horizontal navigation menu with the logo aligned to the left and navigation links aligned to the right, all on the same line.
9
Flexbox Playground - The Child Properties
The biggest changes are seen by altering properties of the parent. However, the true power of flex are seen when adjusting child properties.
10
Grid - An Overview
When is grid better then flexbox (and vice-versa)? What are some common use cases for each. This lesson provides a quick primer as well as a decision-making tree to help you decide.
11
Flexible Fitting in CSS Grid with minmax and autofit
CSS properties and values that give you intrinsic responsiveness with very little code. You will be reaching for this one a lot!
14
Responsive Design Is a Decision, Not a Breakpoint
The web isn't a static printed page, so why do we often design it like one? Discover why responsiveness is an intentional choice to make your content accessible to everyone, everywhere.
15
Fluid Layouts - Letting Content Breathe
Stop building rigid "boxes" and start creating layouts that flow like water. Learn how relative units allow your designs to breathe and adapt naturally before you ever write a single media query.
16
Media Queries Revisited - Still Useful, Just Not Universal
Stop chasing every new device screen size and start designing for the "break." Learn how to use media queries strategically to fix your layout only when the content physically fails to hold up.
17
Container Queries - Designing Components That Will Travel
What if a component was smart enough to know it's in a sidebar vs. a main content area? Master the tool that lets components adapt to their immediate neighborhood, making your designs truly modular and portable.
18
Responsiveness Inside Layouts - Why Flexbox Almost Works
Flexbox is a negotiation system for space, but the browser usually wins the argument if you don't set the rules. Learn to identify the hidden assumptions that cause layouts to "almost work" until they break.
19