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)
The @font-face Property
There were only so many “web safe” fonts out there until Web Fonts came along.
Add the OTF file to the site folder
Define new fonts in CSS
Apply the font to elements
Complete and Continue