Frontend Master

JavaScript Curriculum

Capstone — Build a Profile Card
+120 XP

Capstone — Build a Profile Card

hard
~60 min·120 XP

You've learned every skill. Now build something real — a profile card page for yourself. Semantic, accessible, responsive, themed, and animated. This is your proof of work.

Capstone — Build a Profile Card

You've covered every building block. This lesson is your synthesis — one project that uses all 19 lessons worth of skills together. A profile card might sound simple, but doing it properly touches every skill in the chapter.

What You're Building

A profile card page with:

  • A header with your name and a dark mode toggle
  • A hero section with your avatar, name, role, and bio
  • A skills grid showing your tech skills
  • A stats row showing numbers (lessons, XP, projects)
  • A footer with links

Your Checklist

Track your progress against every Chapter 00 skill:

capstone-checklist.md0/20 · 0%
💡Build in this order
1. Write the HTML first — structure and semantics. 2. Add CSS variables. 3. Style mobile layout. 4. Add Flexbox/Grid. 5. Add breakpoints. 6. Add transitions and animation. 7. Wire dark mode. 8. Test and polish. This order prevents you from fighting your own CSS.

Profile Card Preview

Explore different layouts and themes to see what's possible:

profile-card-builder.html
Name
Role
Theme
Layout
JL
Jordan Lee
Frontend Developer

Building interfaces that feel natural. CSS enthusiast and coffee drinker.

HTMLCSSFlexboxGridResponsiveA11y
ℹ️Make it yours
The starter code gives you the structure. Replace the placeholder content with your actual name, role, bio, and skills. Add your own colour theme using the CSS variable system from Lesson 18. Make it a card you'd actually share.

Chapter 00 Complete

Once your capstone is done, you've covered the full HTML & CSS chapter:

🏆
Chapter 00 — HTML & CSS
20 lessons · everything you need to build any web page
1,200+ XP
total available
20/20 lessons complete

You know how the web is built. Chapter 01 → JavaScript is next.

Your Challenge

Build the complete profile card page. Every item on the checklist should be ticked before you submit.

Challenge

Build a profile card page using all Chapter 00 skills. Requirements: semantic HTML (no div soup), CSS variables for all tokens, dark mode toggle, responsive layout (mobile-first, 2 breakpoints), Flexbox for the card internals, Grid for the skills section, transitions on all interactive elements, @keyframes entrance animation, and prefers-reduced-motion support.

capstonesemantic-htmlcss-variablesdark-modeflexboxgridresponsivetransitionskeyframesaccessibilityreduced-motionmobile-first
Capstone — Build a Profile Card | Nexus Learn