🏆 PHASE 3 · ADVANCED CSS

Phase 3 Capstone Projects

Four advanced builds that demonstrate everything you've learned — animations, custom properties, modern selectors, and responsive polish. These are portfolio pieces, not practice drills.

Lesson 10: Transitions & Animations ✓
Lesson 11: CSS Variables & Theming ✓
Lesson 12: Modern CSS & Best Practices ✓
🏆 Final Capstone — Complete all 4 to graduate the course
Hello, World! 👋
CSS-only entrance animations & scroll reveals
Get Started
Learn More
Skills
HTML/CSS
UI/UX
Design
JS
Basics
CAPSTONE 01 · ANIMATIONS + KEYFRAMES
Animated Landing Page
Build a stunning one-page portfolio hero section with a staggered entrance animation sequence, animated gradient text, floating elements, scroll-triggered reveal sections, and a CSS-only skill bar animation. No JavaScript animation libraries — pure @keyframes and animation-delay.
@keyframes animation-delay Gradient Text Scroll Reveal (JS) Floating Elements Skill Bars
🟢 Intermediate ⏱️ ~90 min
1
Build the hero HTML with headline, subtext, and CTA buttons
2
Write a fadeUpIn keyframe and apply it with staggered animation-delay to each element
3
Animate skill bars with width: 0 → target% triggered by animation-play-state
4
Add IntersectionObserver JS to add a class that triggers CSS animations on scroll
🌙 Appearance
Dark
Light
Transitions on all colors via CSS variables
CAPSTONE 02 · CSS VARIABLES + JS
Dark / Light Theme Toggle
Build a full website that switches seamlessly between dark and light themes using CSS custom properties. A single JavaScript one-liner toggles a class on <body>, and CSS variables handle the entire color transition. Persists preference using localStorage and respects prefers-color-scheme.
CSS Variables :root theming color transitions localStorage prefers-color-scheme
🟢 Intermediate ⏱️ ~75 min
1
Define --bg, --txt, --card variables in :root and [data-theme="light"]
2
Add transition: background 0.3s, color 0.3s to * for smooth switching
3
One JS line: body.dataset.theme = body.dataset.theme === 'light' ? 'dark' : 'light'
4
Persist to localStorage and auto-detect user's OS preference with matchMedia
What is HTML? ▼
HTML (HyperText Markup Language) is the standard language for creating web pages. It defines the structure and content of a page using elements and tags.
What is CSS? ▼
Do I need JavaScript? ▼
How does :has() work? ▼
CAPSTONE 03 · :HAS() + CSS-ONLY INTERACTIVITY
CSS-only Accordion
Build a fully animated FAQ accordion with zero JavaScript using the hidden checkbox trick and the :has() pseudo-class. When a checkbox inside an accordion item is checked, :has(input:checked) lets you style the parent — opening the panel with a smooth max-height transition and rotating the arrow icon.
:has() selector max-height transition Hidden checkbox trick CSS-only toggle Arrow rotation
🟡 Advanced ⏱️ ~60 min
1
Build accordion HTML with a hidden checkbox input inside each item
2
Set .content { max-height: 0; overflow: hidden; } as the closed state
3
Use .item:has(input:checked) .content { max-height: 300px; } to open
4
Rotate the arrow icon with .item:has(input:checked) .arrow { transform: rotate(180deg); }
Jane Developer
Frontend Developer · Designer · Builder
Hire Me
Projects ↓
🛒 Shop UI
E-commerce product grid
📊 Dashboard
Admin analytics panel
🌙 Theme App
Dark/light toggle site
📝 Blog
Responsive article layout
HTML
CSS
JS
CAPSTONE 04 · FINAL PROJECT 🏆
Full Portfolio Website
Your final project and course graduation piece. Build a complete personal portfolio website with a sticky navigation, animated hero section, project showcase grid, skills section, and contact form — all responsive, accessible, and polished. Every technique from all 12 lessons applies here.
Everything HTML Structure Flexbox + Grid Animations Dark Mode Responsive Accessibility
🏆 Course Capstone ⏱️ 3–5 hours
1
Plan sections: Nav → Hero → About → Projects → Skills → Contact → Footer
2
Build semantic HTML first — one section at a time, mobile-first
3
Style with CSS variables, animate the hero, add hover states to project cards
4
Add dark/light toggle, test at 320px, 768px, 1280px, deploy to GitHub Pages
🎓
You've graduated the course.

Complete all four capstone projects and you've gone from zero to a full HTML & CSS developer. You can build real websites, structure pages semantically, write modern CSS with confidence, and deploy to the web.

HTML Structure CSS Selectors Box Model Flexbox CSS Grid Responsive Design Animations CSS Variables :has() / :is() Container Queries Accessibility Performance