Practical learning · 10 projects
Frontend Web Development: projects and labs
Learn by doing: labs for each module, a project for each level, a capstone and a project exam. Every step is checked, and your work stays on this device.
Beginner
- Lab1 h · 5 stepsLab: follow a web request from your laptopSet up the folder every website starts from, then follow a real request the way a browser does: look up the IRCTC server's address, watch GitHub send you from http to https, read the response headers, and check it all again in DevTools.Not started
- Lab1.5 h · 5 stepsLab: a menu page for a chai stallChai 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.Not started
- Lab1.5 h · 5 stepsLab: a college admission enquiry formShivaji College in Kolhapur gets hundreds of admission enquiries every June. Build the enquiry form: labelled fields, built-in validation for an Indian mobile number, choices for course and shift, a semantic page layout, and the small touches that make it usable with a screen reader.Not started
- Lab1.5 h · 4 stepsLab: product cards for a kirana shopAnnapurna 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.Not started
- Lab1.5 h · 5 stepsLab: split the hostel dinner billFive hostel friends eat at a South Indian restaurant in Chennai and want to split the bill fairly. Write small JavaScript functions: add up the items, add GST, apply a coupon, split the total into whole-rupee shares that add up exactly, and print a price list.Not started
- Project4 h · 6 stepsProject: a website for a sweet shopMithaas 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.Not started
Intermediate
- Project5 h · 6 stepsProject: Kharcha, a monthly expense trackerBuild Kharcha, a small web app to track monthly spending: a responsive two-column layout, safe parsing of amounts like "1,250.50", a list drawn from data, a form that adds expenses, a category filter with totals, and saving to the browser with JSON.Not started
- Project exam1.5 h · 6 tasksProject exam: a tech fest registration pageIn 90 minutes, build the registration page for Techno Utsav, a college tech fest in Nagpur: the semantic page and form, a responsive layout, validation, an event list drawn from data, a working registration flow that updates seats, and a CSV export for the committee.Not taken
Expert
- Project5 h · 6 stepsProject: a typed shopping cart in TypeScriptWrite the cart logic of BazaarKart, an online store, in TypeScript: totals in paise, GST by category with Record, discounts as a discriminated union, a generic groupBy, a React-style reducer that never mutates state, and Indian currency formatting for the invoice.Not started
- Capstone14 h · 10 stepsCapstone: an online catalogue for a handloom storeBuild 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.Not started