Capstone · Frontend Web Development
Capstone: an online catalogue for a handloom store
The brief
Build and deploy the online catalogue of Bunkar Handloom, a weavers' store in Bhopal: an accessible page structure, a responsive grid, safe HTML from data, search, filter and sort, a cart with GST and a live total, saving to the browser, and a real public link.
Why it matters
This is the project to put at the top of your portfolio and talk through in interviews. It shows every front-end skill an employer checks: semantic HTML, responsive CSS, accessibility, safe DOM updates, state, events, persistence and deployment. Many small businesses on Instagram and WhatsApp need exactly this catalogue.
Skills you practise
- semantic HTML and a skip link
- CSS custom properties, grid and media queries
- focus styles and reduced motion
- escaping HTML against XSS
- filter, sort and immutable updates
- event delegation and aria-live
- JSON storage with validation
- deploying to GitHub Pages or Netlify
You need
- A free GitHub account (for GitHub Pages) or a free Netlify account
- Git installed on your computer
What you will have at the end
A live catalogue site for Bunkar Handloom (public link and GitHub repository with a README), ready to show in your portfolio and walk through in an interview.
How it is marked (rubric, 100 points)
| Works end to endEvery check passes and the live site searches, filters, sorts, adds to the cart and remembers it. | 30 |
|---|---|
| AccessibleSkip link, labels, aria-label on buttons, aria-live status, visible focus, reduced motion, Lighthouse 90+. | 20 |
| Secure and robustAll data is escaped, storage is validated, nothing breaks when storage is blocked. | 15 |
| Code qualityPure functions for logic, one render function per area, event delegation, no repeated code. | 20 |
| PresentationA clear README with a screenshot and live link; you can explain each decision in two minutes. | 15 |
0/10 steps done
Step 1 of 10
The page structure
index.html has: a skip link a.skip-link to #main as the first thing in the body; a header with the <h1> and button#cart-button holding span#cart-count; a div.layout with main#main (labelled #search, #category and #sort controls and ul#products) and aside#cart (an h2, ul#cart-items, #cart-total and #cart-status with aria-live="polite"); and a footer.
Plan the page before styling it. Keyboard and screen-reader users press Tab first, so the first thing in the body is a "Skip to products" link to main#main. Every control needs a label. The cart status paragraph has aria-live="polite": when JavaScript changes its text later ("Added Phulkari dupatta to the cart"), screen readers read it out without moving the focus.
#category needs an option with value="all" and the three categories Sarees, Dupattas and Kurtas; #sort needs the values rating, price-asc and price-desc. The ids matter, because app.js uses them.
Run shows what your code prints. Check runs the step's tests. Ctrl+Enter checks too.