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 TitleDuration
1The CSS Bootcamp: Zero to Mastery01:16
2Course Overview & Bruno's Introduction03:20
3Introduction to HTML14:38
4Basic Elements23:15
5Basic Attributes - Part 110:55
6Basic Attributes - Part 209:34
7Basic Attributes - Part 311:55
8Semantic Website16:36
9Challenges05:36
10Introduction15:42
11HTML Forms and Input Types - Part 109:56
12HTML Forms and Input Types - Part 208:52
13Form Validation and Accessibility - Part 110:18
14Form Validation and Accessibility - Part 209:08
15Job Application Form - Part 116:28
16Job Application Form - Part 211:26
17Text Elements - Part 111:39
18Text Elements - Part 209:01
19Table Example07:15
20Challenges05:44
21Introduction09:05
22Image and Multimedia Elements - Part 111:42
23Image and Multimedia Elements - Part 209:41
24Audio and Video Examples - Part 110:57
25Audio and Video Examples - Part 205:50
26Embed Examples11:49
27Challenges05:26
28Introduction to CSS13:27
29CSS Syntax and Basic Selectors10:41
30Basic CSS Properties - Part 113:04
31Basic CSS Properties - Part 212:50
32Cascade, Specificity, Inheritance - Part 107:22
33Cascade, Specificity, Inheritance - Part 210:23
34External CSS (Bootstrap Example) - Part 111:35
35External CSS (Bootstrap Example) - Part 205:59
36Challenges06:20
37Introduction14:01
38Box Model Properties - Part 113:38
39Box Model Properties - Part 217:20
40Position Property - Part 108:49
41Position Property - Part 210:47
42Display Property09:55
43Video Background12:34
44Challenges06:08
45Introduction07:54
46Table Example14:05
47Images and Multimedia Example10:01
48Audio and Video Example08:13
49Job Application Example - Part 113:36
50Job Application Example - Part 208:04
51Semantic Website Example - Part 111:42
52Semantic Website Example - Part 209:58
53Bruno02:02
54Introduction05:02
55Mac / Linux Device Setup05:35
56Windows Device Setup06:58
57VSCode Setup & Template19:27
58VSCode Extensions09:11
59DevTools13:57
60GitHub14:34
61Bruno01:44
62Introduction16:44
63Design Games17:49
64Styling Text with CSS11:02
65Web Typography Basics - Part 110:55
66Web Typography Basics - Part 213:27
67Font Awesome16:11
68Typographix V1 - Part 113:25
69Typographix V1 - Part 210:07
70Introduction19:35
71Bruno01:41
72Color Game07:22
73Color Values15:18
74Color Schemes & Palettes10:15
75Web Accessibility - Contrast Checker04:14
76Shadows10:38
77Border Radius and Shapes09:09
78CSS Variables and Custom Properties16:07
79Dark Mode09:54
80Typographix V2 - Adding Section Content14:32
81Typographix V2 - Section Styling18:27
82Typographix V2 - Dark Mode Toggle18:10
83Bruno02:02
84Introduction09:02
85Viewport & Media Queries10:32
86Responsive Media09:15
87Responsive Text12:01
88Navigation Menu12:51
89Typographix V3 - Custom Scrollbar09:10
90Typographix V3 - Navigation Menu - Part 112:21
91Typographix V3 - Navigation Menu - Part 208:22
92Typographix V3 - Media Queries (Tablets) - Part 115:35
93Typographix V3 - Media Queries (Tablets) - Part 209:03
94Typographix V3 - Media Queries (Smartphones) - Part 112:33
95Typographix V3 - Media Queries (Smartphones) - Part 211:58
96Bruno01:30
97Introduction08:57
98Flexbox Game05:59
99Flexbox Containers15:31
100Flexbox Items09:11
101Common Layouts13:27
102Flexbox Gallery06:43
103Typographix Blog V1 - Adding HTML - Part 109:01
104Typographix Blog V1 - Adding HTML - Part 212:25
105Typographix Blog V1 - ChatGPT and AI07:40
106Typographix Blog V1 - Styling Main Page - Part 114:00
107Typographix Blog V1 - Styling Main Page - Part 210:22
108Typographix Blog V1 - Sticky Navigation13:49
109Typographix Blog V1 - Article Styling14:10
110Typographix Blog V1 - Mobile Responsiveness - Part 104:24
111Typographix Blog V1 - Mobile Responsiveness - Part 211:52
112Exercise: Imposter Syndrome02:57
113Bruno01:35
114Introduction09:47
115Grid Garden19:34
116Grid Containers16:41
117Grid Items11:54
118Common Layouts14:39
119Gallery Layout06:21
120Column Masonry13:24
121Typographix Gallery V1 - Styling - Part 109:25
122Typographix Gallery V1 - Styling - Part 214:47
123Typographix Gallery V1 - Modal Functionality14:46
124Bruno01:19
125Introduction09:08
126Transition Properties14:31
127Timing Functions11:18
128Transition Tools10:14
129Riddles Project16:39
130Transition Steps (06:39
131Typographix Gallery V2 - Transitions18:35
132Bruno01:23
133Introduction10:18
134Animation Properties05:12
135Animation Loops (Infinite Animations)19:47
136Animation Tools15:53
137Typewriter Effect09:01
138Loading Animations - Part 114:28
139Loading Animations - Part 211:33
140Skeleton Screens17:17
141Typographix Gallery V3 - Add Loading Spinner11:01
142Typographix Blog V2 - Add Skeleton Screen15:10
143Bruno01:29
144Introduction03:39
145Broadcast Graphics Project12:39
146Broadcast Graphics - Styling - Part 110:04
147Broadcast Graphics - Styling - Part 211:02
148Broadcast Graphics - Dynamic Width JS11:39
149Broadcast Graphics - CSS Animations17:31
150Broadcast Graphics - JS Controls13:42
151Bruno01:33
152Introduction09:27
153CSS Pseudo Selectors11:24
154AI Image Generation06:28
155Gradients and Patterns10:15
156Clipping and Masking12:44
157Blend Modes and Filters16:50
158Cursor Types and Custom Cursors09:41
159CSS Houdini10:25
160Developer Portfolio V1 - Preview03:47
161Developer Portfolio V1 - Mockups09:39
162Developer Portfolio V1 - AI Generation07:02
163Developer Portfolio V1 - Home - Part 116:26
164Developer Portfolio V1 - Home - Part 208:52
165Developer Portfolio V1 - About17:05
166Developer Portfolio V1 - Projects17:28
167Developer Portfolio V1 - Contact - Part 113:02
168Developer Portfolio V1 - Contact - Part 212:35
169Developer Portfolio V1 - Navigation05:18
170Developer Portfolio - Responsive Design - Part 111:07
171Developer Portfolio - Responsive Design - Part 211:03
172Developer Portfolio - Responsive Design - Part 307:39
173Bruno01:20
174Introduction09:28
175Accessibility Testing - Part 112:27
176Accessibility Testing - Part 209:37
177Typographix V4 - Media Queries - Part 114:02
178Typographix V4 - Media Queries - Part 207:14
179Media Queries - Print Example07:20
180Developer Portfolio V2 - Media Optimization19:47
181Bruno01:46
182Introduction13:41
183Compare CSS, SCSS, SASS12:55
184Color Adjustments15:13
185Variables, Nesting, Mixins, Extend/Inheritance18:56
186Control Directives (for, each, while) - Part 110:25
187Control Directives (for, each, while) - Part 212:37
188Functions10:43
189Typograhpix Blog V3 - Setup - Part 112:42
190Typograhpix Blog V3 - Setup - Part 210:04
191Typographix Blog V3 - Basic Partials, Dark Mode18:48
192Typographix Blog V3 - Most Partials - Part 111:33
193Typographix Blog V3 - Most Partials - Part 211:02
194Typographix Blog V3 - Media Queries & Testing13:11
195Introduction03:20
196Bruno01:29
197Typographix Final - Preview04:43
198Typographix Final - Gather and Optimize Media08:30
199Typographix Final - Project Setup16:37
200Typographix Final - Home Section15:04
201Typographix Final - About Section (HTML/SCSS)12:48
202Typographix Final - About Section (JS)13:15
203Typographix Final - Gallery Section - Part 110:19
204Typographix Final - Gallery Section - Part 212:25
205Typographix Final - Blog Section - Part 114:19
206Typographix Final - Blog Section - Part 213:39
207Typographix Final - Contact Section - Part 113:15
208Typographix Final - Contact Section - Part 208:25
209Typographix Final - Form Functionality - Part 110:49
210Typographix Final - Form Functionality - Part 211:47
211Typographix Final - Footer Section06:58
212Typographix Final - Navigation Menu13:10
213Typographix Final - Navigation Menu (Animation) - Part 110:33
214Typographix Final - Navigation Menu (Animation) - Part 207:47
215Typographix Final - Media Queries (Tablets) - Part 112:09
216Typographix Final - Media Queries (Tablets) - Part 209:58
217Typographix Final - Media Queries (Tablets) - Part 308:47
218Typographix Final - Media Queries (Smartphones) - Part 108:35
219Typographix Final - Media Queries (Smartphones) - Part 209:57
220Typographix Final - Media Queries (Smartphones) - Part 311:44
221Typographix Final - Testing & Optimizing05:51
222Bruno01:48
223Course Wrap-up11:19
224Preparing for CSS Interviews08:25
225Challenges11:40
226Thank You!01:18

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Page Transitions

Page Transitions

Sources: superhi.com
Integrate the Barba.js Javascript library into your websites and use CSS and Javascript techniques to add smooth and harmonious effects.
4 hours 10 minutes 33 seconds
100 Days Of Code: The Complete Web Development Bootcamp 2024

100 Days Of Code: The Complete Web Development Bootcamp 2024

Sources: Academind Pro
Learn web development from A to Z in 100 days (or at your own pace) - from "basic" to "advanced", it's all included!
78 hours 51 minutes 55 seconds
CSS Demystified: Start writing CSS with confidence

CSS Demystified: Start writing CSS with confidence

Sources: kevin powell
CSS seems easy at first, but the deeper into it you get, the more complicated it becomes. Often we end up trying to fix problems by adding more and more code on top and hoping f...
20 hours 45 minutes 24 seconds
Create Animated Breaking News Graphics with HTML, CSS and JavaScript

Create Animated Breaking News Graphics with HTML, CSS and JavaScript

Sources: zerotomastery.io
Master the creation of dynamic overlays and animations for streams, scoreboards, and TV graphics. Learn the principles of working with animation and web technol
2 hours 40 minutes 39 seconds
100 Days Of Code: The Complete Web Development Bootcamp 2024

100 Days Of Code: The Complete Web Development Bootcamp 2024

Sources: Academind Pro
Learn web development from A to Z in 100 days (or at your own pace) - from "basic" to "advanced", it's all included!
78 hours 51 minutes 55 seconds