Skip to content
AI Exercises
–points–day streak

What is a component in web design?

A component is a reusable building block of a page, like a product card or a button, built once and used in many places.

In real life

Like a cookie cutter: make the shape once, then press out as many identical cookies as you need.

Try it yourself

Screen size

Switches

This lesson
rosas-bakery.example
Rosa's Bakery
Basket (0)

Fresh bread, baked at 6am

Order by 10am, collect after lunch.

  • ProductCard

    Sourdough loaf

    £4.00

  • ProductCard

    Cinnamon bun

    £2.50

  • ProductCard

    Lemon cake

    £3.00

All three cards come from one ProductCard component. Change the component once and every card updates.

Where you will use this

  • Track 2, lesson 3: Generate your first appComing soon
  • Module 4: Code without fearComing soon

Quick check: Component

Question 1 of 3

A shop page shows 20 product cards that all look the same. How is it most likely built?

A shop page shows 20 product cards that all look the same. How is it most likely built?