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
Typographix Final - Gather and Optimize Media
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