CSS Simplified
- Buy now
- Learn more
Course Tools

Course Platform Browser Extension
Fundamentals

01 - What Is CSS
02 - CSS Basic Syntax
03 - How To Add CSS
04 - Comments
05 - Inheritance
Selector Cheat Sheet - Light
Selector Cheat Sheet - Dark
06 - Simple Blog Project
07 - User Profile Project Introduction
08 - User Profile Project Walkthrough
09 - Color Basics
10 - Specificity
11 - Pseudo Classes
12 - Box Model
Box Model Cheat Sheet - Light
Box Model Cheat Sheet - Dark
13 - Units
14 - Input Component Library Introduction
15 - Input Component Library Walkthrough
16 - Button Component Library Introduction
17 - Button Component Library Walkthrough
18 - Portfolio Project
Layout and Positioning

19 - Document Flow
20 - Floats
21 - Flexbox
22 - Modal Project
23 - Navbar Project Introduction
24 - Navbar Project Walkthrough
25 - Grid
26 - Grid Home Page Project
27 - Image Gallery Project Introduction
28 - Image Grid Project Walkthrough
29 - Subgrid
30 - Multi-Value Display
31 - Position
32 - z-index
33 - Logical Properties
34 - Multi-Column Layout
35 - Overflow
36 - Text Wrapping
37 - Advanced Margins
Responsive Design

38 - Viewport Meta Tag
39 - Media Query
40 - Container Query
41 - Responsive House Project Introduction
42 - Responsive House Project Walkthrough
43 - Media Queries For Accessibility
44 - Responsive Design Without Media Queries
Advanced Features

45 - Custom Properties
46 - @property
47 - Custom Media Queries
48 - Calc
49 - Nesting
50 - Layers
51 - Input Component Library Updates Introduction
52 - Input Component Library Updates Walkthrough
53 - Button Component Library Updates Introduction
54 - Button Component Library Updates Walkthrough
55 - @scope
56 - calc-size
57 - Custom Fonts
Advanced Colors

58 - Gradients
59 - Color Spaces
60 - Advanced Color Functions
61 - Relative Colors
62 - Built In Color Properties
63 - Button Component Library Colors Introduction
64 - Button Component Library Colors Walkthrough
Advanced Selectors

65 - Relationship Selectors
66 - Attribute Selectors
67 - Pseudo Elements
68 - Custom Checkbox Project
69 - Parent Selector
70 - where vs is
71 - Child Selectors
72 - Focus Selectors
73 - Additional Pseudo Classes
74 - Input Component Library Validation Introduction
75 - Input Component Library Validation Walkthrough
Animation

76 - Transition Property
77 - Button Transition Project Introduction
78 - Button Transition Project Walkthrough
79 - Animation Property
80 - Transform
81 - Button Animation Project
82 - Loading Text Project Introduction
83 - Loading Text Project Walkthrough
84 - Animating Custom Properties
85 - @starting-style & transition-behavior
86 - interpolate-size
87 - Modal Animation Introduction
88 - Modal Animation Walkthrough
89 - Perspective Property
90 - 3D Cube Project
Conclusion

91 - Next Steps
BONUS: How To Use CSS In Real Projects

01 - CSS Reset
02 - Browser Support
03 - Feature Query
04 - @import
05 - Vendor Prefixes
06 - CSS Frameworks
BONUS: Build Real World Projects

01 - MNTN Landing Page Introduction
02 - MNTN Landing Page Walkthrough
03 - Discord Clone Introduction
04 - Discord Clone Walkthrough
Download Videos

Fundamentals.zip
Layout and Positioning.zip
Responsive Design.zip
Advanced Features.zip
Advanced Colors.zip
Advanced Selectors.zip
Animation.zip
Conclusion.zip
BONUS: How To Use CSS In Real Projects.zip
BONUS: Build Real World Projects.zip

17 - Button Component Library Walkthrough

Before Code
After Code

Live Demo