Lab · Frontend Web Development
Lab: product cards for a kirana shop
The brief
Annapurna Kirana in Indiranagar has a plain HTML page of this week's offers. Write its stylesheet: a sensible base, prices that stand out, neat cards with the box model, and an "Offer" badge whose colours pass the contrast check.
Why it matters
Most front-end work is styling pages that already have HTML: product cards, price tags and badges are on every shopping site from Flipkart to the local store's WhatsApp catalogue. Getting the box model and readable colours right is what makes a page look professional.
Skills you practise
- box-sizing: border-box
- font-family, line-height and rem
- class and descendant selectors
- the box model: padding, border, margin
- colours and contrast
What you will have at the end
styles.css: a clean stylesheet that turns the plain offers page into neat, readable product cards.
How it is marked (rubric, 100 points)
| All checks passBase, prices, cards and badge pass every check. | 45 |
|---|---|
| Good CSS habitsClasses instead of ids, rem for text sizes, no repeated rules, tidy formatting. | 25 |
| Readable for everyoneText contrast is 4.5 or more and the page works on a narrow phone. | 20 |
| Looks like a real shopYou would be happy to show this page to the shop owner. | 10 |
0/4 steps done
Step 1 of 4
A sensible base
In styles.css, every element uses box-sizing: border-box, and body has margin 0, a font-family ending in sans-serif and a unitless line-height of 1.5 or more.
Work in the styles.css tab; the page loads it for you. By default, width does not include padding and border, so a 320px card with 16px padding is really 354px wide. box-sizing: border-box makes width mean the whole box, which is what everyone expects; most sites set it for every element with *.
A font stack lists fonts in order of preference and ends with a generic family (sans-serif) as the fallback. A unitless line-height like 1.5 scales with the font size and makes text easier to read.
Run shows what your code prints. Check runs the step's tests. Ctrl+Enter checks too.