Tier 2 · CSS/LayoutsBeginner–Intermediate

Build-Your-Own Trading Card

Design your own character or stat card — like a Pokémon or Top Trumps card — with a name, character avatar, and colorful progress bar stats.

TECH STACK:HTMLCSS FlexboxCSS Grid

descriptionComplete Project Brief

Create a custom trading card layout utilizing modern CSS Flexbox and Grid. Customize character attributes, health bars, stat progress meters, and dynamic hover effects to produce a screenshot-worthy collectible card.

checklistRequirements Checklist

check_circleTrading card frame with rounded corners & drop shadow
check_circleName header & artwork display frame
check_circle3 stat bars (Speed, Power, Smarts) in distinct vibrant colors
check_circleVibe background gradient and drop-shadow styling

🚀 Project Workspace Spec Preview

Interactive Coding Sandbox Coming Soon

We are polishing the hands-on environment where you code line-by-line with Kira AI as your Socratic tutor.

helpFrequently Asked Questions

Q:What CSS techniques will I practice?

You will master CSS Grid positioning, custom properties (variables), linear gradients, and box-shadow styling.