CF

The CSS Bootcamp: Zero to Mastery

40h 15m 13s
English
Free

The CSS Bootcamp: Zero to Mastery is a 226-lesson 40 hours 15 minutes self-paced course by Zero To Mastery. Learn everything from CSS basics to advanced CSS techniques by completing 100+ exercises and projects.

Course facts

Lessons
226
Duration
40 hours 15 minutes
Level
All levels
Language
English
Updated
Instructor
Zero To Mastery
Price
Free

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.

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.

Who teaches The CSS Bootcamp: Zero to Mastery? Zero To Mastery

Zero To Mastery thumbnail

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.

What lessons are included in The CSS Bootcamp: Zero to Mastery?

  • 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 TitleDuration
1The CSS Bootcamp: Zero to Mastery 01:16
2Course Overview & Bruno's Introduction 03:20
3Introduction to HTML 14:38
4Basic Elements 23:15
5Basic Attributes - Part 1 10:55
6Basic Attributes - Part 2 09:34
7Basic Attributes - Part 3 11:55
8Semantic Website 16:36
9Challenges 05:36
10Introduction 15:42
11HTML Forms and Input Types - Part 1 09:56
12HTML Forms and Input Types - Part 2 08:52
13Form Validation and Accessibility - Part 1 10:18
14Form Validation and Accessibility - Part 2 09:08
15Job Application Form - Part 1 16:28
16Job Application Form - Part 2 11:26
17Text Elements - Part 1 11:39
18Text Elements - Part 2 09:01
19Table Example 07:15
20Challenges 05:44
21Introduction 09:05
22Image and Multimedia Elements - Part 1 11:42
23Image and Multimedia Elements - Part 2 09:41
24Audio and Video Examples - Part 1 10:57
25Audio and Video Examples - Part 2 05:50
26Embed Examples 11:49
27Challenges 05:26
28Introduction to CSS 13:27
29CSS Syntax and Basic Selectors 10:41
30Basic CSS Properties - Part 1 13:04
31Basic CSS Properties - Part 2 12:50
32Cascade, Specificity, Inheritance - Part 1 07:22
33Cascade, Specificity, Inheritance - Part 2 10:23
34External CSS (Bootstrap Example) - Part 1 11:35
35External CSS (Bootstrap Example) - Part 2 05:59
36Challenges 06:20
37Introduction 14:01
38Box Model Properties - Part 1 13:38
39Box Model Properties - Part 2 17:20
40Position Property - Part 1 08:49
41Position Property - Part 2 10:47
42Display Property 09:55
43Video Background 12:34
44Challenges 06:08
45Introduction 07:54
46Table Example 14:05
47Images and Multimedia Example 10:01
48Audio and Video Example 08:13
49Job Application Example - Part 1 13:36
50Job Application Example - Part 2 08:04
51Semantic Website Example - Part 1 11:42
52Semantic Website Example - Part 2 09:58
53Bruno 02:02
54Introduction 05:02
55Mac / Linux Device Setup 05:35
56Windows Device Setup 06:58
57VSCode Setup & Template 19:27
58VSCode Extensions 09:11
59DevTools 13:57
60GitHub 14:34
61Bruno 01:44
62Introduction 16:44
63Design Games 17:49
64Styling Text with CSS 11:02
65Web Typography Basics - Part 1 10:55
66Web Typography Basics - Part 2 13:27
67Font Awesome 16:11
68Typographix V1 - Part 1 13:25
69Typographix V1 - Part 2 10:07
70Introduction 19:35
71Bruno 01:41
72Color Game 07:22
73Color Values 15:18
74Color Schemes & Palettes 10:15
75Web Accessibility - Contrast Checker 04:14
76Shadows 10:38
77Border Radius and Shapes 09:09
78CSS Variables and Custom Properties 16:07
79Dark Mode 09:54
80Typographix V2 - Adding Section Content 14:32
81Typographix V2 - Section Styling 18:27
82Typographix V2 - Dark Mode Toggle 18:10
83Bruno 02:02
84Introduction 09:02
85Viewport & Media Queries 10:32
86Responsive Media 09:15
87Responsive Text 12:01
88Navigation Menu 12:51
89Typographix V3 - Custom Scrollbar 09:10
90Typographix V3 - Navigation Menu - Part 1 12:21
91Typographix V3 - Navigation Menu - Part 2 08:22
92Typographix V3 - Media Queries (Tablets) - Part 1 15:35
93Typographix V3 - Media Queries (Tablets) - Part 2 09:03
94Typographix V3 - Media Queries (Smartphones) - Part 1 12:33
95Typographix V3 - Media Queries (Smartphones) - Part 2 11:58
96Bruno 01:30
97Introduction 08:57
98Flexbox Game 05:59
99Flexbox Containers 15:31
100Flexbox Items 09:11
101Common Layouts 13:27
102Flexbox Gallery 06:43
103Typographix Blog V1 - Adding HTML - Part 1 09:01
104Typographix Blog V1 - Adding HTML - Part 2 12:25
105Typographix Blog V1 - ChatGPT and AI 07:40
106Typographix Blog V1 - Styling Main Page - Part 1 14:00
107Typographix Blog V1 - Styling Main Page - Part 2 10:22
108Typographix Blog V1 - Sticky Navigation 13:49
109Typographix Blog V1 - Article Styling 14:10
110Typographix Blog V1 - Mobile Responsiveness - Part 1 04:24
111Typographix Blog V1 - Mobile Responsiveness - Part 2 11:52
112Exercise: Imposter Syndrome 02:57
113Bruno 01:35
114Introduction 09:47
115Grid Garden 19:34
116Grid Containers 16:41
117Grid Items 11:54
118Common Layouts 14:39
119Gallery Layout 06:21
120Column Masonry 13:24
121Typographix Gallery V1 - Styling - Part 1 09:25
122Typographix Gallery V1 - Styling - Part 2 14:47
123Typographix Gallery V1 - Modal Functionality 14:46
124Bruno 01:19
125Introduction 09:08
126Transition Properties 14:31
127Timing Functions 11:18
128Transition Tools 10:14
129Riddles Project 16:39
130Transition Steps ( 06:39
131Typographix Gallery V2 - Transitions 18:35
132Bruno 01:23
133Introduction 10:18
134Animation Properties 05:12
135Animation Loops (Infinite Animations) 19:47
136Animation Tools 15:53
137Typewriter Effect 09:01
138Loading Animations - Part 1 14:28
139Loading Animations - Part 2 11:33
140Skeleton Screens 17:17
141Typographix Gallery V3 - Add Loading Spinner 11:01
142Typographix Blog V2 - Add Skeleton Screen 15:10
143Bruno 01:29
144Introduction 03:39
145Broadcast Graphics Project 12:39
146Broadcast Graphics - Styling - Part 1 10:04
147Broadcast Graphics - Styling - Part 2 11:02
148Broadcast Graphics - Dynamic Width JS 11:39
149Broadcast Graphics - CSS Animations 17:31
150Broadcast Graphics - JS Controls 13:42
151Bruno 01:33
152Introduction 09:27
153CSS Pseudo Selectors 11:24
154AI Image Generation 06:28
155Gradients and Patterns 10:15
156Clipping and Masking 12:44
157Blend Modes and Filters 16:50
158Cursor Types and Custom Cursors 09:41
159CSS Houdini 10:25
160Developer Portfolio V1 - Preview 03:47
161Developer Portfolio V1 - Mockups 09:39
162Developer Portfolio V1 - AI Generation 07:02
163Developer Portfolio V1 - Home - Part 1 16:26
164Developer Portfolio V1 - Home - Part 2 08:52
165Developer Portfolio V1 - About 17:05
166Developer Portfolio V1 - Projects 17:28
167Developer Portfolio V1 - Contact - Part 1 13:02
168Developer Portfolio V1 - Contact - Part 2 12:35
169Developer Portfolio V1 - Navigation 05:18
170Developer Portfolio - Responsive Design - Part 1 11:07
171Developer Portfolio - Responsive Design - Part 2 11:03
172Developer Portfolio - Responsive Design - Part 3 07:39
173Bruno 01:20
174Introduction 09:28
175Accessibility Testing - Part 1 12:27
176Accessibility Testing - Part 2 09:37
177Typographix V4 - Media Queries - Part 1 14:02
178Typographix V4 - Media Queries - Part 2 07:14
179Media Queries - Print Example 07:20
180Developer Portfolio V2 - Media Optimization 19:47
181Bruno 01:46
182Introduction 13:41
183Compare CSS, SCSS, SASS 12:55
184Color Adjustments 15:13
185Variables, Nesting, Mixins, Extend/Inheritance 18:56
186Control Directives (for, each, while) - Part 1 10:25
187Control Directives (for, each, while) - Part 2 12:37
188Functions 10:43
189Typograhpix Blog V3 - Setup - Part 1 12:42
190Typograhpix Blog V3 - Setup - Part 2 10:04
191Typographix Blog V3 - Basic Partials, Dark Mode 18:48
192Typographix Blog V3 - Most Partials - Part 1 11:33
193Typographix Blog V3 - Most Partials - Part 2 11:02
194Typographix Blog V3 - Media Queries & Testing 13:11
195Introduction 03:20
196Bruno 01:29
197Typographix Final - Preview 04:43
198Typographix Final - Gather and Optimize Media 08:30
199Typographix Final - Project Setup 16:37
200Typographix Final - Home Section 15:04
201Typographix Final - About Section (HTML/SCSS) 12:48
202Typographix Final - About Section (JS) 13:15
203Typographix Final - Gallery Section - Part 1 10:19
204Typographix Final - Gallery Section - Part 2 12:25
205Typographix Final - Blog Section - Part 1 14:19
206Typographix Final - Blog Section - Part 2 13:39
207Typographix Final - Contact Section - Part 1 13:15
208Typographix Final - Contact Section - Part 2 08:25
209Typographix Final - Form Functionality - Part 1 10:49
210Typographix Final - Form Functionality - Part 2 11:47
211Typographix Final - Footer Section 06:58
212Typographix Final - Navigation Menu 13:10
213Typographix Final - Navigation Menu (Animation) - Part 1 10:33
214Typographix Final - Navigation Menu (Animation) - Part 2 07:47
215Typographix Final - Media Queries (Tablets) - Part 1 12:09
216Typographix Final - Media Queries (Tablets) - Part 2 09:58
217Typographix Final - Media Queries (Tablets) - Part 3 08:47
218Typographix Final - Media Queries (Smartphones) - Part 1 08:35
219Typographix Final - Media Queries (Smartphones) - Part 2 09:57
220Typographix Final - Media Queries (Smartphones) - Part 3 11:44
221Typographix Final - Testing & Optimizing 05:51
222Bruno 01:48
223Course Wrap-up 11:19
224Preparing for CSS Interviews 08:25
225Challenges 11:40
226Thank You! 01:18

Recommended next

What courses are similar to The CSS Bootcamp: Zero to Mastery?

More courses by Zero To Mastery

Frequently asked questions

What are the prerequisites for enrolling in this CSS course?
The course begins with an introduction to HTML, covering basic elements and attributes, which serves as a foundation for learning CSS. There are no strict prerequisites, but familiarity with basic HTML concepts is beneficial. The course is designed to take students from zero knowledge to mastery of CSS, so beginners can start without prior experience.
What types of projects will I work on during the course?
Students will complete over 100 exercises and projects, including creating a semantic website, a job application form, and various multimedia examples. These projects are designed to reinforce CSS concepts and techniques, such as responsive design and advanced CSS properties, ensuring practical application of learned skills.
Who is the target audience for this CSS Bootcamp?
The course is aimed at individuals who want to learn CSS from scratch or improve their existing skills. It is suitable for beginners, web developers, and designers looking to create visually appealing and responsive websites. The course provides a comprehensive understanding of CSS, making it ideal for anyone interested in front-end development.
How does the depth of this course compare to other CSS courses?
This course covers both basic and advanced CSS techniques, with 226 lessons and over 100 projects. It includes topics like external CSS with Bootstrap, the cascade, specificity, inheritance, and the box model. Its comprehensive nature makes it more in-depth than many beginner-focused courses, providing a pathway from fundamental concepts to complex styling methodologies.
What specific tools or platforms will I learn to use?
The course includes setup instructions for Mac, Linux, and Windows devices, and guides on configuring VSCode with extensions for CSS development. Students will also learn to use DevTools for debugging and GitHub for version control. An example of using external CSS with Bootstrap is also covered, providing exposure to popular frameworks.
What topics are not covered in this CSS course?
While the course is extensive in CSS coverage, it does not delve into JavaScript or back-end development. The focus is solely on HTML and CSS, including responsive design and multimedia handling. Those interested in a full-stack development approach may need additional resources beyond this course.
What is the expected time commitment for completing the course?
The course consists of 226 lessons, including 100+ exercises and projects. While the exact runtime is unspecified, students should be prepared to commit several weeks to fully engage with the material, depending on their pace. Regular practice and project work will enhance learning and skill acquisition.