The brief
Toko Kita is a small Indonesian online shop that sells coffee, kitchen equipment, stationery, home goods and a few electronics. Its current home page came from a template, and it shows. On a phone the products squash into one tiny column of text, the newsletter form can't be used with a keyboard or a screen reader, and half the page is a block of <div>s that nobody on the team can find their way around.
Most of Toko Kita's customers shop on their phones, so the new page has to work on a narrow screen first and then make good use of a wide one. And it has to work for everyone: people who navigate with a keyboard, people using screen readers, and people on slow connections. You'll build it in three parts. Each task is one section of the page, written with the right elements for the job, then styled.
How the tasks work
Each task has an HTML tab and a CSS tab, and a live preview next to them. The checker reads the page the way a browser does: it looks at which elements you used and how they're connected (a label to its input, for example), and at the styles the browser actually computed. Where a ticket gives an exact class name, text or value, that's what gets checked. There are hints if you get stuck, but try each task without opening the solution first.
The tasks
| # | Task | Main skills |
|---|---|---|
| 1 | A responsive product grid | Semantic cards, img attributes, CSS grid with auto-fill, focus styles |
| 2 | The newsletter form | Labels, input types, fieldset and legend, validation attributes |
| 3 | The page layout | header/nav/main/aside/footer, flexbox, a mobile-first media query |
When you're ready, open Task 1.