Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Zero To Mastery

The CSS Bootcamp: Zero to Mastery

via Zero To Mastery

Go to class Write review

Overview

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.
  • 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

Syllabus

  •   Introduction
    • The CSS Bootcamp: Zero to Mastery
    • Exercise: Meet Your Classmates and Instructor
    • Course Overview & Bruno's Introduction
    • Where Should You Start?
    • Course Resources
    • ZTM Plugin + Understanding Your Video Player
    • Set Your Learning Streak Goal
  •   Module 1: HTML Overview
    • Introduction to HTML
    • Basic Elements
    • Basic Attributes - Part 1
    • Basic Attributes - Part 2
    • Basic Attributes - Part 3
    • Semantic Website
    • Challenges
  •   Module 2: HTML Forms and Text
    • Introduction
    • HTML Forms and Input Types - Part 1
    • HTML Forms and Input Types - Part 2
    • Form Validation and Accessibility - Part 1
    • Form Validation and Accessibility - Part 2
    • Job Application Form - Part 1
    • Job Application Form - Part 2
    • Text Elements - Part 1
    • Text Elements - Part 2
    • Table Example
    • Challenges
    • Let's Have Some Fun (+ More Resources)
  •   Module 3: HTML Media
    • Introduction
    • Image and Multimedia Elements - Part 1
    • Image and Multimedia Elements - Part 2
    • Audio and Video Examples - Part 1
    • Audio and Video Examples - Part 2
    • Embed Examples
    • Note on Unsplash Random
    • Challenges
    • Unlimited Updates
  •   Module 4: Introduction to Cascading Style Sheets (CSS)
    • Introduction to CSS
    • CSS Syntax and Basic Selectors
    • Basic CSS Properties - Part 1
    • Basic CSS Properties - Part 2
    • Cascade, Specificity, Inheritance - Part 1
    • Cascade, Specificity, Inheritance - Part 2
    • External CSS (Bootstrap Example) - Part 1
    • External CSS (Bootstrap Example) - Part 2
    • Challenges
    • Implement a New Life System
  •   Module 5: CSS Layout Basics
    • Introduction
    • Box Model Properties - Part 1
    • Box Model Properties - Part 2
    • Position Property - Part 1
    • Position Property - Part 2
    • Display Property
    • Video Background
    • Challenges
  •   Module 6: CSS Projects & Practical Examples
    • Introduction
    • Table Example
    • Images and Multimedia Example
    • Audio and Video Example
    • Job Application Example - Part 1
    • Job Application Example - Part 2
    • Semantic Website Example - Part 1
    • Semantic Website Example - Part 2
    • Course Check-In
  •   Module 7: Developer Setup
    • Bruno
    • Introduction
    • Mac / Linux Device Setup
    • Windows Device Setup
    • VSCode Setup & Template
    • VSCode Extensions
    • DevTools
    • GitHub
  •   Module 8: Design & Typography
    • Bruno
    • Introduction
    • Design Games
    • Styling Text with CSS
    • Web Typography Basics - Part 1
    • Web Typography Basics - Part 2
    • Font Awesome
    • Typographix V1 - Part 1
    • Typographix V1 - Part 2
  •   Module 9: Utilizing Color
    • Introduction
    • Bruno
    • Color Game
    • Color Values
    • Color Schemes & Palettes
    • Web Accessibility - Contrast Checker
    • Shadows
    • Border Radius and Shapes
    • CSS Variables and Custom Properties
    • Dark Mode
    • Typographix V2 - Adding Section Content
    • Typographix V2 - Section Styling
    • Typographix V2 - Dark Mode Toggle
  •   Module 10: Responsive Design
    • Bruno
    • Introduction
    • Viewport & Media Queries
    • Responsive Media
    • Responsive Text
    • Navigation Menu
    • Typographix V3 - Custom Scrollbar
    • Typographix V3 - Navigation Menu - Part 1
    • Typographix V3 - Navigation Menu - Part 2
    • Typographix V3 - Media Queries (Tablets) - Part 1
    • Typographix V3 - Media Queries (Tablets) - Part 2
    • Typographix V3 - Media Queries (Smartphones) - Part 1
    • Typographix V3 - Media Queries (Smartphones) - Part 2
  •   Module 11: Flexbox
    • Bruno
    • Introduction
    • Flexbox Game
    • Flexbox Containers
    • Flexbox Items
    • Note on Unsplash Random
    • Common Layouts
    • Flexbox Gallery
    • Typographix Blog V1 - Adding HTML - Part 1
    • Typographix Blog V1 - Adding HTML - Part 2
    • Typographix Blog V1 - ChatGPT and AI
    • Typographix Blog V1 - Styling Main Page - Part 1
    • Typographix Blog V1 - Styling Main Page - Part 2
    • Typographix Blog V1 - Sticky Navigation
    • Typographix Blog V1 - Article Styling
    • Typographix Blog V1 - Mobile Responsiveness - Part 1
    • Typographix Blog V1 - Mobile Responsiveness - Part 2
    • Exercise: Imposter Syndrome
  •   Module 12: CSS Grid
    • Bruno
    • Introduction
    • Grid Garden
    • Grid Containers
    • Grid Items
    • Common Layouts
    • Note on Unsplash Random
    • Gallery Layout
    • Column Masonry
    • Typographix Gallery V1 - Styling - Part 1
    • Typographix Gallery V1 - Styling - Part 2
    • Typographix Gallery V1 - Modal Functionality
  •   Module 13: Transitions
    • Bruno
    • Introduction
    • Transition Properties
    • Timing Functions
    • Transition Tools
    • Riddles Project
    • Transition Steps
    • Typographix Gallery V2 - Transitions
  •   Module 14: Animation
    • Bruno
    • Introduction
    • Animation Properties
    • Animation Loops (Infinite Animations)
    • Animation Tools
    • Typewriter Effect
    • Loading Animations - Part 1
    • Loading Animations - Part 2
    • Note on Unsplash Random
    • Skeleton Screens
    • Typographix Gallery V3 - Add Loading Spinner
    • Typographix Blog V2 - Add Skeleton Screen
  •   Module 15: Broadcast Graphics
    • Bruno
    • Introduction
    • Broadcast Graphics Project
    • Broadcast Graphics - Styling - Part 1
    • Broadcast Graphics - Styling - Part 2
    • Broadcast Graphics - Dynamic Width JS
    • Broadcast Graphics - CSS Animations
    • Broadcast Graphics - JS Controls
  •   Module 16: Advanced CSS
    • Bruno
    • Introduction
    • CSS Pseudo Selectors
    • AI Image Generation
    • Gradients and Patterns
    • Note on Unsplash Random
    • Clipping and Masking
    • Blend Modes and Filters
    • Cursor Types and Custom Cursors
    • CSS Houdini
    • Developer Portfolio V1 - Preview
    • Developer Portfolio V1 - Mockups
    • Developer Portfolio V1 - AI Generation
    • Developer Portfolio V1 - Home - Part 1
    • Developer Portfolio V1 - Home - Part 2
    • Developer Portfolio V1 - About
    • Developer Portfolio V1 - Projects
    • Developer Portfolio V1 - Contact - Part 1
    • Developer Portfolio V1 - Contact - Part 2
    • Developer Portfolio V1 - Navigation
    • Developer Portfolio - Responsive Design - Part 1
    • Developer Portfolio - Responsive Design - Part 2
    • Developer Portfolio - Responsive Design - Part 3
  •   Module 17: Optimization
    • Bruno
    • Introduction
    • Accessibility Testing - Part 1
    • Accessibility Testing - Part 2
    • Typographix V4 - Media Queries - Part 1
    • Typographix V4 - Media Queries - Part 2
    • Media Queries - Print Example
    • Developer Portfolio V2 - Media Optimization
  •   Module 18: SASS / SCSS
    • Bruno
    • Introduction
    • Compare CSS, SCSS, SASS
    • Color Adjustments
    • Variables, Nesting, Mixins, Extend/Inheritance
    • Control Directives (for, each, while) - Part 1
    • Control Directives (for, each, while) - Part 2
    • Functions
    • Typograhpix Blog V3 - Setup - Part 1
    • Typograhpix Blog V3 - Setup - Part 2
    • Typographix Blog V3 - Basic Partials, Dark Mode
    • Typographix Blog V3 - Most Partials - Part 1
    • Typographix Blog V3 - Most Partials - Part 2
    • Typographix Blog V3 - Media Queries & Testing
  •   Module 19: Final Project
    • Introduction
    • Bruno
    • Typographix Final - Preview
    • Typographix Final - Gather and Optimize Media
    • Typographix Final - Project Setup
    • Typographix Final - Home Section
    • Typographix Final - About Section (HTML/SCSS)
    • Typographix Final - About Section (JS)
    • Typographix Final - Gallery Section - Part 1
    • Typographix Final - Gallery Section - Part 2
    • Typographix Final - Blog Section - Part 1
    • Typographix Final - Blog Section - Part 2
    • Typographix Final - Contact Section - Part 1
    • Typographix Final - Contact Section - Part 2
    • Typographix Final - Form Functionality - Part 1
    • Typographix Final - Form Functionality - Part 2
    • Typographix Final - Footer Section
    • Typographix Final - Navigation Menu
    • Typographix Final - Navigation Menu (Animation) - Part 1
    • Typographix Final - Navigation Menu (Animation) - Part 2
    • Typographix Final - Media Queries (Tablets) - Part 1
    • Typographix Final - Media Queries (Tablets) - Part 2
    • Typographix Final - Media Queries (Tablets) - Part 3
    • Typographix Final - Media Queries (Smartphones) - Part 1
    • Typographix Final - Media Queries (Smartphones) - Part 2
    • Typographix Final - Media Queries (Smartphones) - Part 3
    • Typographix Final - Testing & Optimizing
  •   Module 20: Course Wrap-up
    • Bruno
    • Course Wrap-up
    • Preparing for CSS Interviews
    • Challenges
  •   Where To Go From Here?
    • Thank You!
    • Review This Course!
    • Become An Alumni
    • Learning Guideline
    • ZTM Events Every Month
    • LinkedIn Endorsements

Taught by

Jacinto Wong

Reviews

Start your review of The CSS Bootcamp: Zero to Mastery

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.