Lab · Frontend Web Development
Lab: a menu page for a chai stall
The brief
Chai Point on FC Road in Pune wants a simple web page that people can open from a QR code on the counter. Build it in plain HTML: a proper page skeleton, text, a menu table, a photo, phone and map links, and a numbered list.
Why it matters
Small shops in every Indian city ask for exactly this: one fast page with the menu, timings, a phone number and a map link. It is often the first paid job of a freelance web developer, and the same tags are inside every big site.
Skills you practise
- the page skeleton (doctype, lang, meta, title)
- headings and paragraphs
- strong and em
- tables with caption, thead and tbody
- images with alt text
- tel: and https links
- ordered lists
What you will have at the end
index.html: a complete, valid menu page for Chai Point that opens fast on any phone.
How it is marked (rubric, 100 points)
| Correct HTMLEvery check passes, and the page has no unclosed tags (try the W3C validator at validator.w3.org). | 45 |
|---|---|
| Right tag for each jobHeadings in order, a real table for the menu, ol for steps, strong for important words. | 25 |
| AccessibleUseful alt text, a caption and th cells in the table, lang="en" on the page. | 20 |
| Useful to the shopTimings, phone and map are easy to find on a phone screen. | 10 |
0/5 steps done
Step 1 of 5
The page skeleton
index.html is a full HTML page: doctype, <html lang="en">, a head with charset, viewport and a title containing "Chai Point", and a body with one <h1>Chai Point</h1>.
<!doctype html> tells the browser to use modern standards mode. lang="en" helps screen readers and Google. <meta charset="utf-8"> makes the ₹ sign and Hindi or Marathi text show correctly, and the viewport tag stops phones from showing a tiny zoomed-out page. The <title> is the text on the browser tab and in Google results.
Keep the address as a <p> under the <h1>. A page has one h1: its main heading.
Run shows what your code prints. Check runs the step's tests. Ctrl+Enter checks too.