Autoplay
Autocomplete
Previous Lesson
Complete and Continue
The CSS Bootcamp: Zero to Mastery
Introduction
The CSS Bootcamp: Zero to Mastery (1:15)
Exercise: Meet Your Classmates and Instructor
Course Overview & Bruno's Introduction (3:19)
Where Should You Start?
Course Resources
ZTM Plugin + Understanding Your Video Player
Set Your Learning Streak Goal
Module 1: HTML Overview
Introduction to HTML (14:37)
Basic Elements (23:14)
Basic Attributes - Part 1 (10:54)
Basic Attributes - Part 2 (9:33)
Basic Attributes - Part 3 (11:55)
Semantic Website (16:35)
Challenges (5:35)
Module 2: HTML Forms and Text
Introduction (15:41)
HTML Forms and Input Types - Part 1 (9:55)
HTML Forms and Input Types - Part 2 (8:51)
Form Validation and Accessibility - Part 1 (10:17)
Form Validation and Accessibility - Part 2 (9:07)
Job Application Form - Part 1 (16:27)
Job Application Form - Part 2 (11:25)
Text Elements - Part 1 (11:38)
Text Elements - Part 2 (9:00)
Table Example (7:14)
Challenges (5:43)
Let's Have Some Fun (+ More Resources)
Module 3: HTML Media
Introduction (9:04)
Image and Multimedia Elements - Part 1 (11:41)
Image and Multimedia Elements - Part 2 (9:40)
Audio and Video Examples - Part 1 (10:56)
Audio and Video Examples - Part 2 (5:49)
Embed Examples (11:48)
Note on Unsplash Random
Challenges (5:25)
Unlimited Updates
Module 4: Introduction to Cascading Style Sheets (CSS)
Introduction to CSS (13:26)
CSS Syntax and Basic Selectors (10:40)
Basic CSS Properties - Part 1 (13:03)
Basic CSS Properties - Part 2 (12:50)
Cascade, Specificity, Inheritance - Part 1 (7:21)
Cascade, Specificity, Inheritance - Part 2 (10:22)
External CSS (Bootstrap Example) - Part 1 (11:34)
External CSS (Bootstrap Example) - Part 2 (5:58)
Challenges (6:19)
Implement a New Life System
Module 5: CSS Layout Basics
Introduction (14:01)
Box Model Properties - Part 1 (13:37)
Box Model Properties - Part 2 (17:19)
Position Property - Part 1 (8:48)
Position Property - Part 2 (10:46)
Display Property (9:54)
Video Background (12:33)
Challenges (6:07)
Module 6: CSS Projects & Practical Examples
Introduction (7:53)
Table Example (14:04)
Images and Multimedia Example (10:00)
Audio and Video Example (8:12)
Job Application Example - Part 1 (13:35)
Job Application Example - Part 2 (8:03)
Semantic Website Example - Part 1 (11:41)
Semantic Website Example - Part 2 (9:57)
Course Check-In
Module 7: Developer Setup
Bruno (2:01)
Introduction (5:01)
Mac / Linux Device Setup (5:34)
Windows Device Setup (6:57)
VSCode Setup & Template (19:26)
VSCode Extensions (9:10)
DevTools (13:56)
GitHub (14:33)
Module 8: Design & Typography
Bruno (1:43)
Introduction (16:43)
Design Games (17:48)
Styling Text with CSS (11:01)
Web Typography Basics - Part 1 (10:54)
Web Typography Basics - Part 2 (13:26)
Font Awesome (16:10)
Typographix V1 - Part 1 (13:24)
Typographix V1 - Part 2 (10:06)
Module 9: Utilizing Color
Introduction (19:34)
Bruno (1:40)
Color Game (7:21)
Color Values (15:17)
Color Schemes & Palettes (10:14)
Web Accessibility - Contrast Checker (4:13)
Shadows (10:37)
Border Radius and Shapes (9:08)
CSS Variables and Custom Properties (16:06)
Dark Mode (9:53)
Typographix V2 - Adding Section Content (14:31)
Typographix V2 - Section Styling (18:26)
Typographix V2 - Dark Mode Toggle (18:09)
Module 10: Responsive Design
Bruno (2:01)
Introduction (9:01)
Viewport & Media Queries (10:31)
Responsive Media (9:14)
Responsive Text (12:00)
Navigation Menu (12:50)
Typographix V3 - Custom Scrollbar (9:09)
Typographix V3 - Navigation Menu - Part 1 (12:20)
Typographix V3 - Navigation Menu - Part 2 (8:21)
Typographix V3 - Media Queries (Tablets) - Part 1 (15:34)
Typographix V3 - Media Queries (Tablets) - Part 2 (9:02)
Typographix V3 - Media Queries (Smartphones) - Part 1 (12:32)
Typographix V3 - Media Queries (Smartphones) - Part 2 (11:57)
Module 11: Flexbox
Bruno (1:29)
Introduction (8:56)
Flexbox Game (5:58)
Flexbox Containers (15:30)
Flexbox Items (9:10)
Note on Unsplash Random
Common Layouts (13:26)
Flexbox Gallery (6:42)
Typographix Blog V1 - Adding HTML - Part 1 (9:00)
Typographix Blog V1 - Adding HTML - Part 2 (12:24)
Typographix Blog V1 - ChatGPT and AI (7:39)
Typographix Blog V1 - Styling Main Page - Part 1 (13:59)
Typographix Blog V1 - Styling Main Page - Part 2 (10:21)
Typographix Blog V1 - Sticky Navigation (13:48)
Typographix Blog V1 - Article Styling (14:09)
Typographix Blog V1 - Mobile Responsiveness - Part 1 (4:23)
Typographix Blog V1 - Mobile Responsiveness - Part 2 (11:51)
Exercise: Imposter Syndrome (2:55)
Module 12: CSS Grid
Bruno (1:34)
Introduction (9:46)
Grid Garden (19:33)
Grid Containers (16:40)
Grid Items (11:53)
Common Layouts (14:38)
Note on Unsplash Random
Gallery Layout (6:20)
Column Masonry (13:23)
Typographix Gallery V1 - Styling - Part 1 (9:24)
Typographix Gallery V1 - Styling - Part 2 (14:46)
Typographix Gallery V1 - Modal Functionality (14:45)
Module 13: Transitions
Bruno (1:18)
Introduction (9:07)
Transition Properties (14:30)
Timing Functions (11:17)
Transition Tools (10:13)
Riddles Project (16:38)
Transition Steps (6:38)
Typographix Gallery V2 - Transitions (18:34)
Module 14: Animation
Bruno (1:22)
Introduction (10:17)
Animation Properties (5:11)
Animation Loops (Infinite Animations) (19:46)
Animation Tools (15:52)
Typewriter Effect (9:00)
Loading Animations - Part 1 (14:27)
Loading Animations - Part 2 (11:32)
Note on Unsplash Random
Skeleton Screens (17:16)
Typographix Gallery V3 - Add Loading Spinner (11:00)
Typographix Blog V2 - Add Skeleton Screen (15:09)
Module 15: Broadcast Graphics
Bruno (1:28)
Introduction (3:38)
Broadcast Graphics Project (12:38)
Broadcast Graphics - Styling - Part 1 (10:03)
Broadcast Graphics - Styling - Part 2 (11:01)
Broadcast Graphics - Dynamic Width JS (11:38)
Broadcast Graphics - CSS Animations (17:30)
Broadcast Graphics - JS Controls (13:41)
Module 16: Advanced CSS
Bruno (1:32)
Introduction (9:26)
CSS Pseudo Selectors (11:23)
AI Image Generation (6:27)
Gradients and Patterns (10:14)
Note on Unsplash Random
Clipping and Masking (12:43)
Blend Modes and Filters (16:49)
Cursor Types and Custom Cursors (9:40)
CSS Houdini (10:24)
Developer Portfolio V1 - Preview (3:46)
Developer Portfolio V1 - Mockups (9:38)
Developer Portfolio V1 - AI Generation (7:01)
Developer Portfolio V1 - Home - Part 1 (16:25)
Developer Portfolio V1 - Home - Part 2 (8:51)
Developer Portfolio V1 - About (17:04)
Developer Portfolio V1 - Projects (17:27)
Developer Portfolio V1 - Contact - Part 1 (13:01)
Developer Portfolio V1 - Contact - Part 2 (12:34)
Developer Portfolio V1 - Navigation (5:17)
Developer Portfolio - Responsive Design - Part 1 (11:06)
Developer Portfolio - Responsive Design - Part 2 (11:02)
Developer Portfolio - Responsive Design - Part 3 (7:38)
Module 17: Optimization
Bruno (1:19)
Introduction (9:27)
Accessibility Testing - Part 1 (12:26)
Accessibility Testing - Part 2 (9:36)
Typographix V4 - Media Queries - Part 1 (14:01)
Typographix V4 - Media Queries - Part 2 (7:13)
Media Queries - Print Example (7:19)
Developer Portfolio V2 - Media Optimization (19:46)
Module 18: SASS / SCSS
Bruno (1:45)
Introduction (13:40)
Compare CSS, SCSS, SASS (12:54)
Color Adjustments (15:12)
Variables, Nesting, Mixins, Extend/Inheritance (18:55)
Control Directives (for, each, while) - Part 1 (10:24)
Control Directives (for, each, while) - Part 2 (12:36)
Functions (10:42)
Typograhpix Blog V3 - Setup - Part 1 (12:41)
Typograhpix Blog V3 - Setup - Part 2 (10:03)
Typographix Blog V3 - Basic Partials, Dark Mode (18:47)
Typographix Blog V3 - Most Partials - Part 1 (11:32)
Typographix Blog V3 - Most Partials - Part 2 (11:01)
Typographix Blog V3 - Media Queries & Testing (13:10)
Module 19: Final Project
Introduction (3:19)
Bruno (1:28)
Typographix Final - Preview (4:42)
Typographix Final - Gather and Optimize Media (8:29)
Typographix Final - Project Setup (16:36)
Typographix Final - Home Section (15:03)
Typographix Final - About Section (HTML/SCSS) (12:47)
Typographix Final - About Section (JS) (13:14)
Typographix Final - Gallery Section - Part 1 (10:18)
Typographix Final - Gallery Section - Part 2 (12:24)
Typographix Final - Blog Section - Part 1 (14:18)
Typographix Final - Blog Section - Part 2 (13:38)
Typographix Final - Contact Section - Part 1 (13:14)
Typographix Final - Contact Section - Part 2 (8:24)
Typographix Final - Form Functionality - Part 1 (10:48)
Typographix Final - Form Functionality - Part 2 (11:46)
Typographix Final - Footer Section (6:57)
Typographix Final - Navigation Menu (13:09)
Typographix Final - Navigation Menu (Animation) - Part 1 (10:32)
Typographix Final - Navigation Menu (Animation) - Part 2 (7:46)
Typographix Final - Media Queries (Tablets) - Part 1 (12:08)
Typographix Final - Media Queries (Tablets) - Part 2 (9:57)
Typographix Final - Media Queries (Tablets) - Part 3 (8:46)
Typographix Final - Media Queries (Smartphones) - Part 1 (8:34)
Typographix Final - Media Queries (Smartphones) - Part 2 (9:56)
Typographix Final - Media Queries (Smartphones) - Part 3 (11:43)
Typographix Final - Testing & Optimizing (5:50)
Module 20: Course Wrap-up
Bruno (1:47)
Course Wrap-up (11:18)
Preparing for CSS Interviews (8:24)
Challenges (11:40)
Where To Go From Here?
Thank You! (1:17)
Review This Course!
Become An Alumni
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements
Cursor Types and Custom Cursors
This lecture is available exclusively for ZTM Academy members.
If you're already a member,
you'll need to login
.
Join ZTM To Unlock All Lectures