Track Your Progress

Create a free account to mark chapters complete and track your learning streak.

Sign Up Free → Log In
← All Courses

CSS Mastery

beginner free

Selectors, Flexbox, Grid, animations, responsive design, CSS variables, BEM, and modern CSS architecture.

Course Materials
Reference Course
Full chapter-by-chapter reference
↗
Projects & Exercises
Capstone + chapter exercises
↗
Practical & Project
Try Your Hands On A Project
↗
Live Playground
Practice with live preview
↗
Guided Tasks

Step-by-step coding challenges with AI-powered feedback. Build real things, prompt by prompt.

Style Your First Page
Apply your first CSS rules using element, class, and ID selectors to turn a plain HTML page into a styled one.
CSS Beginner 2 steps
▶ Start Task
Master the Box Model
Control spacing, borders, and element sizing using padding, margin, border, and box-sizing.
CSS Beginner 2 steps
▶ Start Task
Typography That Looks Professional
Use Google Fonts, control font size with rem, set line-height and letter-spacing, and build a readable text hierarchy.
CSS Beginner 2 steps
▶ Start Task
Build a Flexbox Navigation Bar
Use flexbox to create a professional navigation bar with a logo on the left and links on the right.
CSS Beginner 2 steps
▶ Start Task
Create a Card Component with Flexbox
Build a reusable course card and a responsive card grid — the building block of every modern dashboard.
CSS Beginner 2 steps
▶ Start Task
Responsive Page with Media Queries
Write your first media queries and make a two-column layout collapse to a single column on mobile.
CSS Beginner 1 steps
▶ Start Task
Advanced Flexbox: Align, Order, and Grow
Go beyond the basics — control alignment axes and build a sticky footer layout with flex-direction column.
CSS Intermediate 2 steps
▶ Start Task
CSS Grid: Build a Full Page Layout
Use grid-template-areas to build a classic header/sidebar/main/footer layout with precise two-dimensional control.
CSS Intermediate 2 steps
▶ Start Task
Positioning: Fixed Navbar, Sticky Sidebar, Absolute Badge
Master fixed, sticky, and absolute positioning to build UI patterns that flex and grid cannot achieve.
CSS Intermediate 2 steps
▶ Start Task
Mobile-First Responsive Design
Build a real landing section mobile-first — base styles for small screens, min-width queries that enhance for larger ones.
CSS Intermediate 2 steps
🔒 Upgrade to Unlock
Transitions and Transform Effects
Add smooth hover effects and a 3D flip card using transition and transform — no JavaScript needed.
CSS Intermediate 2 steps
▶ Start Task
CSS Grid: Span, Place, and Overlap
Use grid-column span, grid-row span, and auto-fill to build magazine layouts and responsive galleries.
CSS Intermediate 1 steps
🔒 Upgrade to Unlock
CSS Animations with @keyframes
Build a loading spinner, a pulsing badge, and a skeleton screen using pure CSS keyframe animations.
CSS Advanced 2 steps
🔒 Upgrade to Unlock
CSS Custom Properties: Build a Design System
Create a complete design token system with CSS variables and implement a dark/light theme toggle.
CSS Advanced 2 steps
🔒 Upgrade to Unlock
Pseudo-Classes and Pseudo-Elements
Use ::before, ::after, :nth-child, :not(), and :focus-visible to style without extra HTML.
CSS Advanced 2 steps
🔒 Upgrade to Unlock
CSS Architecture: BEM Naming and Component System
Apply BEM methodology to build a scalable, collision-proof component library.
CSS Advanced 1 steps
🔒 Upgrade to Unlock
Capstone: Build a Full Course Landing Page
Apply every CSS skill — grid, flexbox, variables, transitions, responsive — to build a complete landing page.
CSS Advanced 2 steps
🔒 Upgrade to Unlock
Advanced Animations and CSS-Only Interactions
Build staggered entrance animations and a CSS-only accordion using :checked and sibling selectors.
CSS Advanced 2 steps
🔒 Upgrade to Unlock
How to use this course
  1. Open the Reference Course in a new tab — study each chapter carefully
  2. Open the Projects & Exercises — complete the exercise for each chapter you finish
  3. Use the Playground to practice and test your code live
  4. Tick off chapters above as you complete them — your progress is saved automatically
  5. Once all chapters are done, build the capstone project and submit your GitHub link below
🏗️ Capstone Project
🔒

Sign up to submit your project

Create a free account to track your progress, mark chapters complete, and submit your capstone project for review.

Create Free Account →