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
The HTML & CSS Bootcamp 2023 Edition
Sources: udemy
This course will teach you everything you need to know about HTML, CSS, and web design to build your own stunning websites from scratch. Instead of just watching me code, you’ll...
37 hours 18 minutes 8 seconds
Tailwind Mastery
Sources: Build UI
Tailwind CSS has become one of the most popular ways to style modern web applications, and for good reason. Its APIs make developers feel incredibly productive, and because it's...
2 hours 34 minutes 57 seconds
Beginner Tailwind
Sources: Chris Sev
Tailwind makes writing CSS easier and lets us customize our designs faster than any other CSS framework. If you want a CSS framework that has pre-built components, then Tailwind...
9 hours 33 minutes 19 seconds
CSS - The Complete Guide 2022 (incl. Flexbox, Grid & Sass)
Sources: udemy, Academind Pro
CSS - short for Cascading Style Sheets - is a "programming language" you use to turn your raw HTML pages into real beautiful websites. This course covers it all - we start at t...
20 hours 54 minutes 47 seconds
Modern HTML & CSS From The Beginning Course
Sources: Brad Traversy
This course is suitable for beginners who want to learn HTML and CSS from scratch to an advanced level, as well as for developers who want to implement...
24 hours 21 minutes 52 seconds