FSWD · MERN Stack · Where it all begins
Before a single line of React or Node, you learn what the web actually is — then build and style real pages with your own hands. By this unit's end, a three-page website you wrote yourself is styled, responsive, and pushed to your own GitHub.
Your 15 sessions, in order
Unit 1 runs in three rounds. Each round is four classroom sessions followed by one hands-on lab — and each lab leaves your own project visibly better than it started.
No code today — just the big picture. Networks, the internet vs the web, clients and servers, and why any of it matters to you. You leave knowing exactly what happens when you open a website.
2CLASS HTTP, Web Servers & Your Very First HTML FileThe request-and-response conversation every page load makes, what a web server actually is — then you write and open your first HTML file in Chrome.
3CLASS Core HTML Tags — Skeleton, Headings, Lists & ImagesThe full document skeleton explained line by line, then headings, paragraphs, lists and images — plus your first taste of debugging a silently broken page.
4CLASS Linking — Anchors, Navigation & Multi-Page StructureThe idea that made it a "web" at all. Relative vs absolute paths, a real three-page mini-site, jump-to-section links on a full-length menu page, and your first look inside DevTools.
LABONE Your First Real Website — Poshtik Campus Goes LiveThe running project begins. You build a three-page linked site from scratch, meet Git and GitHub for the first time, and push your work to your own public repository before you leave.
Rows, cells, headers and merged cells — built around a real price list. Plus the classic old-web mistake of using tables for layout, and why we don't.
6CLASS Forms, Part 1 — Structure & Common Input TypesEvery "sign up" and "order now" you've ever tapped is a form. Text, email, date and number inputs, properly paired labels, and the browser's own built-in validation hints.
7CLASS Forms, Part 2 — Choices, Buttons & Fixing Broken FormsRadio groups, checkboxes, dropdowns and text areas — including the classic radio-button bug that quietly merges two groups into one, which you'll learn to spot and fix yourself.
8CLASS HTML5 Semantic Elements — Goodbye, Div SoupHeader, nav, main, footer, section, article — markup that says what it means. Your project's home page gets rebuilt properly, and looks exactly the same — which is precisely the point.
LABTWO The Order Form — Your Site Starts Collecting InformationBack in your own project folder: the menu page gains a real order form — name, phone, dish choice, quantity and notes — plus a second complete form worked as exam practice.
What CSS is, why it lives apart from HTML, and the selector system — element, class, id, descendant, grouped. You'll feel the power of styling an entire menu with a single rule.
10CLASS CSS Properties, Values & the External StylesheetColours, fonts, alignment — and the moment your project gets its own real stylesheet, linked from every page, the way working developers actually do it.
11CLASS The Box Model & PositioningContent, padding, border, margin — the four layers behind every layout question you'll ever have. Plus positioning, display types, and a classic silent CSS failure to hunt down.
12CLASS Media Queries — One Site, Every Screen SizeThe viewport tag everyone forgets, breakpoints, and mobile-first thinking. Your own site gains its first responsive rules — and you watch it reflow with your own eyes.
LABTHREE The Full Stylesheet — Your Site Becomes a Real ProductThe biggest lab of the unit. Header, nav, menu and form all fully styled and responsive, four complete exam problems worked through, and a whole-unit recap to close.
Meet your running project
Here's the problem it solves: the lunch-break line at the hostel mess is long, and by the time you reach the counter, the sprouts and millet bowls are gone — fried snacks become the only quick option. Poshtik Campus lets a student browse a genuinely healthy menu — jonna rotte wraps, ragi sangati bowls, pesarattu with sprouts — order during a lecture break, and have it delivered to their hostel block before the break ends. Eating well becomes the fast option.
You'll build this app yourself across all five units of the course. It starts right here, in Lab 1 — and everything Unit 1 teaches lands somewhere real inside it:
index.html, menu.html, about.html — written entirely by youstyle.css — making the whole site styled, spaced and responsiveReal dish photographs arrive with each session's image pack — these frames hold their place until then.