Skip to main content

Practice Projects

The best way to solidify everything you have learned is to build real things. Below are projects ordered from beginner to advanced - including modern extras (scroll-snap carousel, anchored tooltip). Each one lists what you will build, which skills it practises, and a few hints to get you started.

No step-by-step hand-holding; that is the point. Apply the knowledge from chapters 1-17, use DevTools to debug, and figure things out.

Project 1: Personal Profile Card​

Difficulty: Beginner

What you will build​

A centred card showing a profile photo (or placeholder), name, a short bio, and links to social profiles. Think of it as a mini "about me" page - a single card floating in the centre of the screen.

Skills practised​

  • Box model (padding, margin, border)
  • Typography (font-family, font-size, line-height)
  • Colours and backgrounds
  • border-radius (circular profile image)
  • Centring with Flexbox
  • Hover effects on links

Hints​

  • Start with the HTML structure: a container div with an img, h2, p, and a list of links
  • Use border-radius: 50% on the image with a fixed width and height for a circular photo
  • Centre the card with display: flex; justify-content: center; align-items: center; min-height: 100dvh on the body
  • Add a subtle box-shadow to the card
  • Style the social links as inline-block buttons with background-color, padding, and border-radius
  • Add a transition on hover to change the button colour smoothly

Chapters used​

1 (Introduction), 3 (Box Model), 4 (Colours & Typography), 7 (Flexbox), 10 (Backgrounds & Shadows), 11 (Transitions)

Project 2: Navigation Bar​

Difficulty: Beginner

What you will build​

A responsive navigation bar with a logo on the left, links in the middle or right, and a mobile-friendly layout. On small screens, the links stack vertically or hide behind a toggle.

Skills practised​

  • Flexbox for horizontal layout
  • Responsive design (media queries, mobile-first)
  • Pseudo-classes (:hover, :focus-visible)
  • Transitions for smooth hover effects
  • position: sticky for scroll behaviour
  • Link styling

Hints​

  • Use display: flex; justify-content: space-between; align-items: center on the nav container
  • Style links as display: inline-block with padding and remove default underlines
  • Add :hover and :focus-visible styles for accessibility
  • At small screen widths, switch to flex-direction: column and show a hamburger icon (or use a checkbox hack for a pure-CSS toggle)
  • Make the nav sticky with position: sticky; top: 0; z-index: 100
  • Give the nav a background colour so content does not show through when scrolling

Chapters used​

2 (Selectors), 6 (Display & Positioning), 7 (Flexbox), 9 (Responsive Design), 11 (Transitions), 12 (Pseudo-classes)

Difficulty: Intermediate

What you will build​

A responsive photo gallery that displays images in a grid. On hover, each image shows a caption overlay. The grid adapts to the screen size - four columns on desktop, two on tablet, one on mobile.

Skills practised​

  • CSS Grid with auto-fit and minmax()
  • Responsive images (object-fit: cover)
  • Positioning (overlay with position: absolute)
  • Transitions and transforms (hover effects)
  • Media queries or auto-fit for responsive columns

Hints​

  • Use display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px for a responsive grid with no media queries
  • Each gallery item is position: relative with overflow: hidden
  • The caption is position: absolute; bottom: 0; left: 0; right: 0 with a semi-transparent background
  • Start the caption off-screen with transform: translateY(100%) and transition it to translateY(0) on hover
  • Use object-fit: cover on images with a fixed height to maintain consistent card sizes
  • Add border-radius to the gallery items for rounded corners

Chapters used​

3 (Box Model), 8 (CSS Grid), 9 (Responsive Design), 10 (Backgrounds & Shadows), 11 (Transitions)

Project 4: Landing Page​

Difficulty: Intermediate

What you will build​

A complete landing page with: a full-screen hero section, a features grid, a testimonial carousel (or list), a pricing table, and a footer. Use a custom colour scheme with CSS custom properties and make it fully responsive.

Skills practised​

  • Full page layout (Grid and/or Flexbox)
  • CSS custom properties (design tokens)
  • Responsive design (mobile-first, clamp() for fluid typography)
  • Gradients and shadows for visual depth
  • min-height: 100dvh for the hero section
  • Multiple backgrounds (gradient overlay on hero image)

Hints​

  • Start by defining your design tokens in :root - primary colour, text colour, background, spacing scale, fonts
  • The hero section uses min-height: 100dvh, a background image with a dark gradient overlay, and centred white text
  • The features section uses CSS Grid: repeat(auto-fit, minmax(280px, 1fr))
  • Use clamp() for all heading font sizes so they scale smoothly
  • The pricing table is a flex row (or grid) with cards. Highlight the recommended plan with a modifier class (e.g., .pricing-card--recommended)
  • The footer uses a multi-column flex layout for link groups

Chapters used​

4 (Colours & Typography), 5 (Units & Sizing), 7 (Flexbox), 8 (CSS Grid), 9 (Responsive Design), 10 (Backgrounds & Shadows), 13 (Custom Properties)

Project 5: Dashboard Layout​

Difficulty: Advanced

What you will build​

An admin dashboard with: a fixed sidebar navigation, a top bar, a main content area with stat cards and a data table, and a dark mode toggle. The sidebar collapses on mobile.

Skills practised​

  • CSS Grid with grid-template-areas for the overall layout
  • Custom properties for theming (light/dark mode)
  • position: sticky for the top bar
  • Media queries for responsive sidebar
  • Pseudo-classes and pseudo-elements for UI details
  • Transitions for dark mode colour changes

Hints​

  • Define the layout with grid-template-areas: 
    "sidebar topbar"
    "sidebar main"
  • The sidebar has grid-area: sidebar with a fixed width. On mobile, hide it or transform it off-screen
  • Use data-theme="dark" on the <html> element and redefine all colour custom properties in a [data-theme="dark"] rule
  • Add transition: background-color 0.3s, color 0.3s to body for smooth theme switching
  • Stat cards use Flexbox or Grid inside the main area
  • The data table uses :nth-child(even) for striped rows and :hover for row highlighting
  • The dark mode toggle is a simple button that adds/removes the data-theme attribute via JavaScript

Chapters used​

6 (Display & Positioning), 7 (Flexbox), 8 (CSS Grid), 9 (Responsive Design), 12 (Pseudo-classes), 13 (Custom Properties), 14 (Specificity & Cascade)

Project 6: CSS Art Challenge​

Difficulty: Advanced

What you will build​

A purely decorative illustration made entirely with CSS - no images, no SVGs, no JavaScript. Ideas: a landscape scene (mountains, sun, clouds), an animal face, a retro game character, or a geometric pattern.

Skills practised​

  • Pseudo-elements (::before, ::after) for extra shapes
  • Gradients (linear, radial, conic) for colour and texture
  • border-radius for circles and organic shapes
  • Transforms (rotate, scale, skew, translate) for positioning shapes
  • clip-path for complex shapes
  • box-shadow for duplication and glow effects
  • Animations for movement (optional)

Hints​

  • Start with a single div as your canvas. Use its ::before and ::after for additional shapes - that gives you three elements from one HTML tag
  • clip-path: polygon(...) creates triangles, pentagons, and custom shapes
  • box-shadow can be used without blur or spread to duplicate shapes (multiple comma-separated values)
  • Gradients can create stripes, circles, and complex patterns
  • Use position: absolute on everything inside a position: relative container for pixel-perfect placement
  • Build iteratively: start with simple shapes, layer on details
  • Browse CSS-Tricks and CodePen for inspiration

Chapters used​

6 (Display & Positioning), 10 (Backgrounds & Shadows), 11 (Transitions & Animations), 12 (Pseudo-elements)

Difficulty: Intermediate

What you will build​

A horizontal card carousel that snaps from slide to slide using CSS scroll snap - no carousel library. Include optional previous/next buttons that call scrollBy, but make sure trackpad / touch scrolling works without them.

Skills practised​

  • overflow-x + Flexbox or Grid auto-columns
  • scroll-snap-type / scroll-snap-align / scroll-padding
  • Accessible labelling of the scroller region
  • Progressive enhancement for controls
  • Optional: fade slides with scroll-driven animations

Hints​

  • Start from the patterns in Scroll Snap & Carousels
  • Use grid-auto-columns: min(20rem, 85%) so slides peek on small screens
  • Respect prefers-reduced-motion if you add autoplay (prefer no autoplay)
  • Test keyboard focus on links inside slides

Chapters / guides used​

9 (Responsive), 7/8 (Flex/Grid), Scroll Snap & Carousels

Project 8: Anchored tooltip​

Difficulty: Intermediate / Advanced

What you will build​

A help tooltip or dropdown that opens with the Popover API and sits next to its trigger using CSS anchor positioning, including at least one position-try fallback so it flips when near the viewport edge.

Skills practised​

  • popover / popovertarget
  • anchor-name, position-anchor, position-area or anchor()
  • position-try-fallbacks
  • Focus and keyboard dismiss behaviour
  • Fallback layout when anchor positioning is missing

Hints​

  • Follow Anchor Positioning & Popover
  • Keep the trigger a real <button>
  • Provide a static below-trigger fallback inside @supports or accept top-layer centred popover as degradation
  • Do not put essential instructions in a hover-only tip

Chapters / guides used​

12 (Pseudo-classes), Anchor Positioning & Popover, Native Overlays & Dialogs

Tips for all projects​

  1. Start with HTML - get the structure right before writing CSS
  2. Add the CSS reset from chapter 3 to every project
  3. Define custom properties first - colours, fonts, spacing, radii
  4. Work mobile-first - base styles for small screens, enhance for larger
  5. Use DevTools constantly - inspect, edit live, then copy values back
  6. Commit often - save working states so you can revert mistakes
  7. Do not copy solutions - the struggle is where the learning happens

Pick one that interests you and start building. When you finish it, move to the next difficulty level.

Hobby project ideas​

The six projects above are structured exercises. Below is a looser collection of smaller builds you can tackle whenever you want extra practice. Each one focuses on a specific slice of CSS and can be finished in an afternoon or a weekend.

Recreate a favourite website's header​

Pick any website you visit daily - a news site, a streaming service, a social platform - and recreate just the header and navigation from scratch. Do not look at their source code; work from a screenshot. You will be surprised how many layout details you only notice when you try to reproduce them.

You will practise: Flexbox, positioning, responsive nav, font matching, spacing precision.

Build a "style this page" challenge​

Write a single plain HTML file with a heading, a few paragraphs, a list, a table, a blockquote, a form, and some images. Save it. Then create three completely different stylesheets for the same HTML - one minimal and modern, one bold and colourful, one dark and moody. Switch between them by swapping the <link> tag. The constraint of not changing the HTML forces you to think creatively about what CSS alone can achieve.

You will practise: Typography, colour systems, custom properties, selector variety, the separation of structure and presentation.

Animated loading screen​

Build a full-screen loading animation using only CSS - no JavaScript, no images. Ideas: spinning rings, bouncing dots, a progress bar that fills, morphing shapes, a pulsing logo. The goal is to push @keyframes, transforms, and timing functions as far as you can.

You will practise: Keyframe animations, transforms, timing functions, pseudo-elements, animation-delay for staggered effects.

Responsive email template​

Email clients have notoriously limited CSS support - no Grid, limited Flexbox, no custom properties. Build a simple newsletter layout (header, hero image, two-column content block, footer) using only <table> for layout and inline styles. Then test it by sending it to yourself. It is a humbling exercise that deepens your appreciation for modern CSS.

You will practise: Table-based layout, inline styles, the box model under constraints, cross-client testing.

CSS-only toggle components​

Build a set of interactive UI elements using no JavaScript - only the :checked pseudo-class and hidden checkbox inputs. Ideas: an accordion (expandable sections), a tab component, a star rating widget, a dropdown menu, or a light/dark mode switch. The checkbox hack teaches you a lot about selector combinators and creative state management.

You will practise: Adjacent sibling selectors, :checked, pseudo-elements, transitions, display toggling.

Pixel-perfect clone of a design mockup​

Find a free design mockup on Dribbble, Figma Community, or a CSS challenge site like Frontend Mentor. Build it pixel-for-pixel. Overlay your result on the mockup to compare. This is the closest exercise to real-world front-end work, where designers hand you a Figma file and expect an exact match.

You will practise: Every chapter - spacing, typography, colours, layout, responsive breakpoints, shadows, transitions.

Personal blog theme​

Design and build a simple blog layout: a homepage listing post titles and dates, and a single-post page with a readable article layout. Focus on typography - pick a font pairing (one for headings, one for body), set a comfortable max-width with ch units, tune line-height, and add a dark mode toggle with custom properties. Keep it minimal but polished.

You will practise: Typography, ch units, custom properties, dark mode, Grid or Flexbox for layout, responsive design.

Form styling deep dive​

Build a registration or checkout form and make it look polished. Style every native input type: text, email, password, number, date, checkbox, radio, select, textarea, and a submit button. Add focus states, validation states (:valid, :invalid), placeholder styling, and disabled states. Form styling exercises many CSS features that other projects skip.

You will practise: Form pseudo-classes, :focus-visible, accent-color, custom checkbox/radio (pseudo-elements), transitions, outline.

CSS Zen Garden revisited​

The classic CSS Zen Garden challenge: take an existing HTML file and create a completely unique design using only CSS. Download the HTML from the site and build your own stylesheet. It is the ultimate test of CSS creativity under constraints.

You will practise: Everything. Selectors, the cascade, backgrounds, positioning, transforms, animations, pseudo- elements - all without touching the HTML.