Project · Frontend Web Development
Project: a website for a sweet shop
The brief
Mithaas Sweets in Jaipur's Johari Bazaar wants a one-page website before Diwali: a menu of sweets with photos, an order form for functions and weddings, and the address. Build it in semantic HTML, then style it with CSS so it is readable, tidy and easy to use on a phone.
Why it matters
One-page sites for shops, clinics and tutors are the most common first freelance job in India, often paid ₹5,000 to ₹20,000. The client cares about three things: it looks good, people can order, and it works on every phone. This project is all three.
Skills you practise
- semantic layout with sections and in-page links
- image cards
- form inputs: tel, number, date, select, textarea
- CSS base styles and colour contrast
- the box model for cards
- focus styles and touch targets
What you will have at the end
A one-page website (index.html and styles.css) for Mithaas Sweets that you can open on a phone, put on GitHub Pages and show to a real shop.
How it is marked (rubric, 100 points)
| Works and validatesEvery check passes; the in-page links jump to the right section and the form refuses bad data. | 35 |
|---|---|
| Semantic and accessibleRight tags, headings in order, alt text, labels, contrast 4.5 or more, a visible focus ring. | 25 |
| Looks professionalConsistent spacing and colours, tidy cards, readable on a phone and on a laptop. | 25 |
| Clean codeIndented HTML, no inline styles, CSS grouped by section with comments. | 15 |
0/6 steps done
Step 1 of 6
The page outline
The page has a <header> with the <h1> and a <nav>, a <main> with sections whose ids are menu, order and visit (each with an <h2>), and a <footer>; every nav link points to one of those sections.
Plan the page as an outline first. A <section> is a themed part of the page with its own heading. Give each section an id, and a link with href="#menu" jumps to it: that is how one-page sites work. The nav goes in the header, and the footer holds the small print.
Keep the shop's address in the visit section as a paragraph.
Run shows what your code prints. Check runs the step's tests. Ctrl+Enter checks too.