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