Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Mastering CSS - Second Edition
CSS Foundations
The Course Overview (5:57)
The Anatomy of a Rule Set and the Three Types of Style Sheets (7:19)
The Box Model and Block versus Inline Elements (6:29)
Ramping Up
Text Editors (6:51)
CSS Reset (7:53)
Chrome Dev Tools (4:58)
Renaming Elements: Classes and IDs (6:34)
Descendant Selectors (5:56)
Creating a Page Layout with Floats
Floats Introduction – Flowing Text around Images (5:10)
Creating a Multicolumn Layout (5:41)
Solving the Problems of Floats (7:25)
Creating Buttons with Modular CSS
Creating Buttons with Modular CSS (5:17)
Multiple Classes (4:45)
Specificity Rules (7:43)
Transitions (6:46)
Transforms (7:03)
Styling a Call to Action Button (5:25)
Gradients (3:47)
Creating the Main Navigation
Starting the Navigation (6:48)
Using Pseudo Classes (5:45)
Absolute Positioning (5:22)
Building the Dropdown (7:46)
CSS Animations (6:19)
CSS Animations (Continued) (7:48)
Finalizing the Navigation (7:19)
Becoming Responsive
Fluid Grid (11:15)
Flexible Images (8:20)
Media Queries (9:40)
Mobile Menu (10:56)
Viewport Meta Tag (3:23)
Web Fonts
The @font-face Property (4:19)
Font Kits and Font Services (6:26)
Google Web Fonts (4:37)
Subscription Font Foundries (6:16)
Icon Fonts (10:42)
The Workflow for HiDPI Devices
2x Images (6:07)
The JavaScript Approach (7:41)
1.5x images (4:34)
Background Images (6:08)
SVG (8:03)
Srcset (12:14)
Flexbox
Introduction to Flexbox (5:38)
From Floats to Flexbox (8:44)
Understanding flex-grow, flex-shrink, flex-basis, and flex (13:33)
More Layout, More Positioning (10:14)
Building the Product Listing (10:57)
flex-wrap and align-content (9:01)
Changing the Display Order of Content (7:18)
Vendor Prefixes (7:32)
Wrapping Up
Conclusion and Links (6:40)
Next Steps (11:10)
Fluid Grid
Creating a fluid percent-age-based layout.
Learn the formula
Apply the formula to widths
Apply the formula to margins and padding
Complete and Continue