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.
The CSS Bootcamp: Zero to Mastery
40h 15m 13s
English
Free
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.
About the Author: Zero To Mastery
Zero To Mastery (ZTM) is a Toronto-based online coding academy founded by Andrei Neagoie, originally a senior developer at large Canadian tech firms before turning to teaching full-time. The academy's signature is the cohort-based bootcamp track combined with a deep self-paced course library, all aimed at career-changers and self-taught developers preparing to land software-engineering roles at top companies.
The instructor roster has grown well beyond Andrei to include other senior practitioners: Daniel Bourke (machine learning), Aleksa Tešić (DevOps), Jacinto Wong, and others. Courses cover the full software-engineering career path: web development with React and Next.js, Python, machine learning and deep learning, DevOps and cloud, system design, mobile, and the algorithm / data-structure interview prep that gates engineering jobs.
The CourseFlix listing under this source carries over 120 ZTM courses spanning that full range. Material is paid; ZTM itself runs on a monthly / annual membership model. The teaching style favours long-form, project-based courses where students build complete portfolio-quality applications rather than disconnected feature tutorials.
Watch Online 226 lessons
- Space or K: play or pause
- J: rewind 10 seconds
- L: forward 10 seconds
- Left Arrow: rewind 5 seconds
- Right Arrow: forward 5 seconds
- Up Arrow: volume up
- Down Arrow: volume down
- M: mute or unmute
- F: toggle fullscreen
- T: toggle theater mode
- I: toggle mini player
- 0 to 9: seek to 0 to 90 percent of the video
- Shift plus N: next video
- Shift plus P: previous video
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 |
Related courses
-
Updated 3y agoThe HTML & CSS Bootcamp 2023 Edition
By: UdemyBrand new HTML & CSS course, just released in February 2023 Check out the promo video to see the beautiful, responsive projects we build in this course!37h 18m5/5 -
Updated 6mo agoCreate Animated Breaking News Graphics with HTML, CSS and JavaScript
By: Zero To MasteryMaster the creation of dynamic overlays and animations for streams, scoreboards, and TV graphics. Learn the principles of working with animation and web technol2h 40m -
ClassicCSS for JavaScript Developers
By: Josh ComeauThe all-new interactive learning experience designed to help JavaScript developers become confident with CSS.5/5
Frequently asked questions
What is The CSS Bootcamp: Zero to Mastery about?
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…
Who teaches this course?
It is taught by Zero To Mastery. You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 226 lessons with a total runtime of 40 hours 15 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
Yes — this is a free online course on CourseFlix. You can watch every lesson without a paid subscription.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/the-css-bootcamp-zero-to-mastery. The page hosts every lesson with the integrated video player; no download is required.