The CSS Bootcamp: Zero to Mastery
40h 15m 13s
English
Free
Course description
Learn everything from CSS basics to advanced CSS techniques by completing 100+ exercises and projects. You'll learn how to use CSS to create beautiful, responsive websites that wow users and employers. Become a CSS Pro and never create an ugly website again.
Read more about the course
This CSS course is the most comprehensive and up-to-date way to learn CSS online. It will take you step-by-step from complete beginner to real mastery by learning modern and advanced CSS techniques. Plus you'll be building awesome real-world projects along the way to practice your skills and build your portfolio.
Watch Online
0:00 0:00
| # | Lesson Title | Duration |
|---|---|---|
| 1 | The CSS Bootcamp: Zero to Mastery | 01:16 |
| 2 | Course Overview & Bruno's Introduction | 03:20 |
| 3 | Introduction to HTML | 14:38 |
| 4 | Basic Elements | 23:15 |
| 5 | Basic Attributes - Part 1 | 10:55 |
| 6 | Basic Attributes - Part 2 | 09:34 |
| 7 | Basic Attributes - Part 3 | 11:55 |
| 8 | Semantic Website | 16:36 |
| 9 | Challenges | 05:36 |
| 10 | Introduction | 15:42 |
| 11 | HTML Forms and Input Types - Part 1 | 09:56 |
| 12 | HTML Forms and Input Types - Part 2 | 08:52 |
| 13 | Form Validation and Accessibility - Part 1 | 10:18 |
| 14 | Form Validation and Accessibility - Part 2 | 09:08 |
| 15 | Job Application Form - Part 1 | 16:28 |
| 16 | Job Application Form - Part 2 | 11:26 |
| 17 | Text Elements - Part 1 | 11:39 |
| 18 | Text Elements - Part 2 | 09:01 |
| 19 | Table Example | 07:15 |
| 20 | Challenges | 05:44 |
| 21 | Introduction | 09:05 |
| 22 | Image and Multimedia Elements - Part 1 | 11:42 |
| 23 | Image and Multimedia Elements - Part 2 | 09:41 |
| 24 | Audio and Video Examples - Part 1 | 10:57 |
| 25 | Audio and Video Examples - Part 2 | 05:50 |
| 26 | Embed Examples | 11:49 |
| 27 | Challenges | 05:26 |
| 28 | Introduction to CSS | 13:27 |
| 29 | CSS Syntax and Basic Selectors | 10:41 |
| 30 | Basic CSS Properties - Part 1 | 13:04 |
| 31 | Basic CSS Properties - Part 2 | 12:50 |
| 32 | Cascade, Specificity, Inheritance - Part 1 | 07:22 |
| 33 | Cascade, Specificity, Inheritance - Part 2 | 10:23 |
| 34 | External CSS (Bootstrap Example) - Part 1 | 11:35 |
| 35 | External CSS (Bootstrap Example) - Part 2 | 05:59 |
| 36 | Challenges | 06:20 |
| 37 | Introduction | 14:01 |
| 38 | Box Model Properties - Part 1 | 13:38 |
| 39 | Box Model Properties - Part 2 | 17:20 |
| 40 | Position Property - Part 1 | 08:49 |
| 41 | Position Property - Part 2 | 10:47 |
| 42 | Display Property | 09:55 |
| 43 | Video Background | 12:34 |
| 44 | Challenges | 06:08 |
| 45 | Introduction | 07:54 |
| 46 | Table Example | 14:05 |
| 47 | Images and Multimedia Example | 10:01 |
| 48 | Audio and Video Example | 08:13 |
| 49 | Job Application Example - Part 1 | 13:36 |
| 50 | Job Application Example - Part 2 | 08:04 |
| 51 | Semantic Website Example - Part 1 | 11:42 |
| 52 | Semantic Website Example - Part 2 | 09:58 |
| 53 | Bruno | 02:02 |
| 54 | Introduction | 05:02 |
| 55 | Mac / Linux Device Setup | 05:35 |
| 56 | Windows Device Setup | 06:58 |
| 57 | VSCode Setup & Template | 19:27 |
| 58 | VSCode Extensions | 09:11 |
| 59 | DevTools | 13:57 |
| 60 | GitHub | 14:34 |
| 61 | Bruno | 01:44 |
| 62 | Introduction | 16:44 |
| 63 | Design Games | 17:49 |
| 64 | Styling Text with CSS | 11:02 |
| 65 | Web Typography Basics - Part 1 | 10:55 |
| 66 | Web Typography Basics - Part 2 | 13:27 |
| 67 | Font Awesome | 16:11 |
| 68 | Typographix V1 - Part 1 | 13:25 |
| 69 | Typographix V1 - Part 2 | 10:07 |
| 70 | Introduction | 19:35 |
| 71 | Bruno | 01:41 |
| 72 | Color Game | 07:22 |
| 73 | Color Values | 15:18 |
| 74 | Color Schemes & Palettes | 10:15 |
| 75 | Web Accessibility - Contrast Checker | 04:14 |
| 76 | Shadows | 10:38 |
| 77 | Border Radius and Shapes | 09:09 |
| 78 | CSS Variables and Custom Properties | 16:07 |
| 79 | Dark Mode | 09:54 |
| 80 | Typographix V2 - Adding Section Content | 14:32 |
| 81 | Typographix V2 - Section Styling | 18:27 |
| 82 | Typographix V2 - Dark Mode Toggle | 18:10 |
| 83 | Bruno | 02:02 |
| 84 | Introduction | 09:02 |
| 85 | Viewport & Media Queries | 10:32 |
| 86 | Responsive Media | 09:15 |
| 87 | Responsive Text | 12:01 |
| 88 | Navigation Menu | 12:51 |
| 89 | Typographix V3 - Custom Scrollbar | 09:10 |
| 90 | Typographix V3 - Navigation Menu - Part 1 | 12:21 |
| 91 | Typographix V3 - Navigation Menu - Part 2 | 08:22 |
| 92 | Typographix V3 - Media Queries (Tablets) - Part 1 | 15:35 |
| 93 | Typographix V3 - Media Queries (Tablets) - Part 2 | 09:03 |
| 94 | Typographix V3 - Media Queries (Smartphones) - Part 1 | 12:33 |
| 95 | Typographix V3 - Media Queries (Smartphones) - Part 2 | 11:58 |
| 96 | Bruno | 01:30 |
| 97 | Introduction | 08:57 |
| 98 | Flexbox Game | 05:59 |
| 99 | Flexbox Containers | 15:31 |
| 100 | Flexbox Items | 09:11 |
| 101 | Common Layouts | 13:27 |
| 102 | Flexbox Gallery | 06:43 |
| 103 | Typographix Blog V1 - Adding HTML - Part 1 | 09:01 |
| 104 | Typographix Blog V1 - Adding HTML - Part 2 | 12:25 |
| 105 | Typographix Blog V1 - ChatGPT and AI | 07:40 |
| 106 | Typographix Blog V1 - Styling Main Page - Part 1 | 14:00 |
| 107 | Typographix Blog V1 - Styling Main Page - Part 2 | 10:22 |
| 108 | Typographix Blog V1 - Sticky Navigation | 13:49 |
| 109 | Typographix Blog V1 - Article Styling | 14:10 |
| 110 | Typographix Blog V1 - Mobile Responsiveness - Part 1 | 04:24 |
| 111 | Typographix Blog V1 - Mobile Responsiveness - Part 2 | 11:52 |
| 112 | Exercise: Imposter Syndrome | 02:57 |
| 113 | Bruno | 01:35 |
| 114 | Introduction | 09:47 |
| 115 | Grid Garden | 19:34 |
| 116 | Grid Containers | 16:41 |
| 117 | Grid Items | 11:54 |
| 118 | Common Layouts | 14:39 |
| 119 | Gallery Layout | 06:21 |
| 120 | Column Masonry | 13:24 |
| 121 | Typographix Gallery V1 - Styling - Part 1 | 09:25 |
| 122 | Typographix Gallery V1 - Styling - Part 2 | 14:47 |
| 123 | Typographix Gallery V1 - Modal Functionality | 14:46 |
| 124 | Bruno | 01:19 |
| 125 | Introduction | 09:08 |
| 126 | Transition Properties | 14:31 |
| 127 | Timing Functions | 11:18 |
| 128 | Transition Tools | 10:14 |
| 129 | Riddles Project | 16:39 |
| 130 | Transition Steps ( | 06:39 |
| 131 | Typographix Gallery V2 - Transitions | 18:35 |
| 132 | Bruno | 01:23 |
| 133 | Introduction | 10:18 |
| 134 | Animation Properties | 05:12 |
| 135 | Animation Loops (Infinite Animations) | 19:47 |
| 136 | Animation Tools | 15:53 |
| 137 | Typewriter Effect | 09:01 |
| 138 | Loading Animations - Part 1 | 14:28 |
| 139 | Loading Animations - Part 2 | 11:33 |
| 140 | Skeleton Screens | 17:17 |
| 141 | Typographix Gallery V3 - Add Loading Spinner | 11:01 |
| 142 | Typographix Blog V2 - Add Skeleton Screen | 15:10 |
| 143 | Bruno | 01:29 |
| 144 | Introduction | 03:39 |
| 145 | Broadcast Graphics Project | 12:39 |
| 146 | Broadcast Graphics - Styling - Part 1 | 10:04 |
| 147 | Broadcast Graphics - Styling - Part 2 | 11:02 |
| 148 | Broadcast Graphics - Dynamic Width JS | 11:39 |
| 149 | Broadcast Graphics - CSS Animations | 17:31 |
| 150 | Broadcast Graphics - JS Controls | 13:42 |
| 151 | Bruno | 01:33 |
| 152 | Introduction | 09:27 |
| 153 | CSS Pseudo Selectors | 11:24 |
| 154 | AI Image Generation | 06:28 |
| 155 | Gradients and Patterns | 10:15 |
| 156 | Clipping and Masking | 12:44 |
| 157 | Blend Modes and Filters | 16:50 |
| 158 | Cursor Types and Custom Cursors | 09:41 |
| 159 | CSS Houdini | 10:25 |
| 160 | Developer Portfolio V1 - Preview | 03:47 |
| 161 | Developer Portfolio V1 - Mockups | 09:39 |
| 162 | Developer Portfolio V1 - AI Generation | 07:02 |
| 163 | Developer Portfolio V1 - Home - Part 1 | 16:26 |
| 164 | Developer Portfolio V1 - Home - Part 2 | 08:52 |
| 165 | Developer Portfolio V1 - About | 17:05 |
| 166 | Developer Portfolio V1 - Projects | 17:28 |
| 167 | Developer Portfolio V1 - Contact - Part 1 | 13:02 |
| 168 | Developer Portfolio V1 - Contact - Part 2 | 12:35 |
| 169 | Developer Portfolio V1 - Navigation | 05:18 |
| 170 | Developer Portfolio - Responsive Design - Part 1 | 11:07 |
| 171 | Developer Portfolio - Responsive Design - Part 2 | 11:03 |
| 172 | Developer Portfolio - Responsive Design - Part 3 | 07:39 |
| 173 | Bruno | 01:20 |
| 174 | Introduction | 09:28 |
| 175 | Accessibility Testing - Part 1 | 12:27 |
| 176 | Accessibility Testing - Part 2 | 09:37 |
| 177 | Typographix V4 - Media Queries - Part 1 | 14:02 |
| 178 | Typographix V4 - Media Queries - Part 2 | 07:14 |
| 179 | Media Queries - Print Example | 07:20 |
| 180 | Developer Portfolio V2 - Media Optimization | 19:47 |
| 181 | Bruno | 01:46 |
| 182 | Introduction | 13:41 |
| 183 | Compare CSS, SCSS, SASS | 12:55 |
| 184 | Color Adjustments | 15:13 |
| 185 | Variables, Nesting, Mixins, Extend/Inheritance | 18:56 |
| 186 | Control Directives (for, each, while) - Part 1 | 10:25 |
| 187 | Control Directives (for, each, while) - Part 2 | 12:37 |
| 188 | Functions | 10:43 |
| 189 | Typograhpix Blog V3 - Setup - Part 1 | 12:42 |
| 190 | Typograhpix Blog V3 - Setup - Part 2 | 10:04 |
| 191 | Typographix Blog V3 - Basic Partials, Dark Mode | 18:48 |
| 192 | Typographix Blog V3 - Most Partials - Part 1 | 11:33 |
| 193 | Typographix Blog V3 - Most Partials - Part 2 | 11:02 |
| 194 | Typographix Blog V3 - Media Queries & Testing | 13:11 |
| 195 | Introduction | 03:20 |
| 196 | Bruno | 01:29 |
| 197 | Typographix Final - Preview | 04:43 |
| 198 | Typographix Final - Gather and Optimize Media | 08:30 |
| 199 | Typographix Final - Project Setup | 16:37 |
| 200 | Typographix Final - Home Section | 15:04 |
| 201 | Typographix Final - About Section (HTML/SCSS) | 12:48 |
| 202 | Typographix Final - About Section (JS) | 13:15 |
| 203 | Typographix Final - Gallery Section - Part 1 | 10:19 |
| 204 | Typographix Final - Gallery Section - Part 2 | 12:25 |
| 205 | Typographix Final - Blog Section - Part 1 | 14:19 |
| 206 | Typographix Final - Blog Section - Part 2 | 13:39 |
| 207 | Typographix Final - Contact Section - Part 1 | 13:15 |
| 208 | Typographix Final - Contact Section - Part 2 | 08:25 |
| 209 | Typographix Final - Form Functionality - Part 1 | 10:49 |
| 210 | Typographix Final - Form Functionality - Part 2 | 11:47 |
| 211 | Typographix Final - Footer Section | 06:58 |
| 212 | Typographix Final - Navigation Menu | 13:10 |
| 213 | Typographix Final - Navigation Menu (Animation) - Part 1 | 10:33 |
| 214 | Typographix Final - Navigation Menu (Animation) - Part 2 | 07:47 |
| 215 | Typographix Final - Media Queries (Tablets) - Part 1 | 12:09 |
| 216 | Typographix Final - Media Queries (Tablets) - Part 2 | 09:58 |
| 217 | Typographix Final - Media Queries (Tablets) - Part 3 | 08:47 |
| 218 | Typographix Final - Media Queries (Smartphones) - Part 1 | 08:35 |
| 219 | Typographix Final - Media Queries (Smartphones) - Part 2 | 09:57 |
| 220 | Typographix Final - Media Queries (Smartphones) - Part 3 | 11:44 |
| 221 | Typographix Final - Testing & Optimizing | 05:51 |
| 222 | Bruno | 01:48 |
| 223 | Course Wrap-up | 11:19 |
| 224 | Preparing for CSS Interviews | 08:25 |
| 225 | Challenges | 11:40 |
| 226 | Thank You! | 01:18 |
Comments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
CSS Simplified
Sources: webdevsimplified.com
Learn how to create beautiful websites with over 100 video tutorials and 20+ unique projects designed to make learning CSS as easy and understandable as...
15 hours 17 minutes 44 seconds
Advanced CSS & JavaScript Projects
Sources: zerotomastery.io
Master CSS and JavaScript by creating real projects! Develop applications like a quiz, an expense tracker, and a podcast player. You will learn...
15 hours 24 minutes 29 seconds
CSS Animations & Transitions
Sources: leveluptutorials
Welcome to the CSS Transitions course. In this course, you will not only learn the basic techniques, but also dive deeply into creating animations and transitions. In practice, ...
2 hours 9 minutes 35 seconds