Built by Hand.
Evaluated by AI.
Every challenge on this page was coded from scratch — no scaffolding, no templates, no copy-paste. Just HTML, CSS, and deliberate practice.
Product Preview Card
A responsive product card component showcasing a perfume bottle with pricing and a call to action. Focuses on responsive images using the picture element, robust CSS variables, and modern media queries.
View challenge
Recipe Page Component
A responsive recipe card layout built with clean, semantic HTML elements. Focuses on typography, list styling with custom markers, table structuring, and using CSS variables for standard design tokens.
View challenge
Social Links Profile
A centred profile card with a circular avatar, name, location, bio, and a stack of social link buttons with a hover state. Focuses on CSS custom properties, fluid sizing, and interactive states.
View challenge
Blog Preview Card
A classic blog preview card showcasing typography, imagery, and box shadows. Focuses on CSS custom properties, grid/flexbox layouts, and precise visual matching.
View challenge
QR Code Component
A centred card displaying a QR code image with heading and descriptive text. Focuses on layout centring, CSS custom properties, and typography.
View challenge