Chunk 1 · Unit snapshot · ≈5 min
The whole of Unit 1.
One sitting. Nothing cut.
This fast-track revision path compresses every concept, every worked example and every previous-year exam question from Unit 1 into 36 guided chunks. Each chunk teaches, shows working code line by line, quizzes you, and closes with a checkpoint you tick — the course map (bottom-left button) remembers where you are.
chai-point/ site + git & push35 MINhostel-mess-feedback/ form page25 MINstudy-cafe/ full stylesheet35 MINEverything here also exists at full classroom pace across Classes 1–12 and Labs 1–3, with more repetition and more practice time. This crash course is the same syllabus at revision speed — perfect for a self-paced deep dive or getting exam-ready in one sitting. Wherever a topic deserves a slower second pass, a chip points you to the exact class page.
START FROM ZERO — "WHAT EVEN IS A WEBSITE?" (OPTIONAL, 2 MIN)
A website is a set of files sitting on a computer that never sleeps (a server). When you type an address into a browser (Chrome, Firefox…), the browser fetches those files and draws them on your screen.
The files are mostly plain text written in two languages you'll master today: HTML (what the page contains) and CSS (what the page looks like). No installs, no frameworks — a text editor and a browser are the entire toolkit for Unit 1.
Three chunks in this resource use real image files — the city-guide photo (charminar.png, M3), the fest logo (fest-logo.png, M4) and the café logo used in the final sprint's background-image pass (poshtik-campus-logo.jpg, M13). One ZIP carries all three plus a WHERE-THESE-GO.txt telling you exactly which practice folder each file belongs in. Everything else in this unit is typed from scratch — that's the point of the sprints.
You know the shape of the unit and how the course map tracks you. Tick it and move on.
Chunk 2 · Concept map · ≈5 min
One picture of the whole unit
Unit 1 is two stacked layers: an HTML layer (what the page contains) feeding a CSS layer (what it looks like), with git running underneath as your safety net. Every chunk ahead lives somewhere on this map.
Say the two layers out loud: HTML = structure, CSS = presentation, git = safety net. That order never changes.
Chunk 3 · Clients, servers & HTTP · ≈15 min
What actually happens when your Amazon cart appears
You open the browser, tap the cart icon on amazon.in, and the cart page appears in under a second. That one everyday moment contains the entire theory of this module: a client asked, a server answered, and HTTP was the language they spoke.
START FROM ZERO — "INTERNET vs WEB, AREN'T THEY THE SAME?" (2 MIN)
The Internet is the physical network — cables, routers, Wi-Fi radios — that lets computers exchange data at all. The Web is one service that runs on top of the Internet: documents (web pages) linked to each other, fetched with HTTP. Email and video calls also ride the Internet, but they are not the Web.
How we got here — the syllabus's opening line, in four stops
"Evolution of the Internet and World Wide Web" is the very first phrase of Unit I — and it makes a tidy 2-mark answer. Four dates carry the whole story:
Hold the punchline: the internet is the roads (1969–83); the Web is one service driving on them (1989–91) — and the Web's three inventions (HTML to write pages, URLs to address them, HTTP to fetch them) are literally the table of contents of this crash course. If a 2-mark "trace the evolution of the Internet/WWW" appears, these four stops with their dates are the full answer.
The request, line by line
HTTP is plain text. Here is (a trimmed version of) what your browser really sends when you open your Amazon cart — read it once and requests stop being magic.
GET /gp/cart/view.html HTTP/1.1Host: www.amazon.inUser-Agent: Mozilla/5.0 (your browser's name)line 1 = the verb (GET = "give me"), the path, the HTTP version — the other lines are extra details called headersHTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 1284(blank line, then the page itself:)<!DOCTYPE html> … the cart page HTML …200 OK = "found it, here it is". You have met its famous cousin: 404 Not Found = "no such page here"These request/response messages are not theory — your browser will show you the live ones. Do this once and the whole chunk becomes permanent memory:
- Open any site (say
www.amazon.in) and press F12 — or right-click → Inspect — to open DevTools. - Click the Network tab, then reload the page with Ctrl+R.
- A list of requests floods in — click the top one (that row IS the page itself).
- In the Headers panel, spot the REAL versions of both panels above:
Request Method: GET,Host:,User-Agent:— and below themStatus Code: 200 OK,Content-Type: text/html. - Now visit a wrong address like
amazon.in/nosuchpage9— the 404 appears in the same panel. The "famous cousin", live.
Works in Chrome, Edge and Firefox — nothing to install. Every exam answer in this chunk is now something you have seen with your own eyes.
2 marks = 2 solid points!Q1. What is HTTP? Why is it needed? [2M]
Model answer — write both points:
The Amazon cart page took a second to load. During that second, which machine was doing the asking?
Clients ask, servers answer — always. The router only carries the messages; it never speaks HTTP itself.
You can define HTTP, name who asks and who answers, and read a request line. That's the 2-mark question banked.
Chunk 4 · Web servers & the URL · ≈15 min
The machine that never sleeps — and the address that finds it
Amazon's server answered you at 2 a.m. during exam week and at 9 a.m. on a Monday. That is the defining property of a web server: software on an always-on machine whose only job is answering HTTP requests. To reach it, you used a URL — an address with fixed, nameable parts.
Software (Apache, Nginx…) running on an always-on computer. It listens for HTTP requests, finds the requested file on its disk, and returns it with a status code. One server can host many sites; a busy site can spread across many servers.
It is not the browser (that's the client), not the Internet (that's the road between them), and not your own laptop while you build — though your machine plays server later when you open your files locally. Exams love these confusions; you now don't have them.
asked in TWO papers — bank it!Q2. What is a web server? Mention its role with an example. [2M]
Model answer — definition + role + example:
www.amazon.in/gp/cart/view.html, Amazon's server finds view.html in its gp/cart folder and sends it back. ✓ full marksIn https://www.amazon.in/gp/cart/view.html — which part names the machine?
The domain names the server machine; the scheme picks the protocol; path and file locate the page inside that machine.
This module compresses the material covered at classroom pace in class-01.html and class-02.html — head there any time for the full-length treatment with more repetition and in-class activities.
Client vs server vs HTTP vs URL — all four defined, both M2 exam questions banked. Next: writing your first HTML.
Chunk 5 · The skeleton · ≈15 min
Every page ever made starts with these ten lines
New scenario for this module: you're building "Hyderabad Weekend" — a one-page guide to the city's best two days. Before any content, every HTML file needs the same skeleton. Learn it once here; you will type it from muscle memory by M5.
START FROM ZERO — "WHAT IS A TAG?" (2 MIN)
HTML marks meaning with tags: labels in angle brackets. Most come in pairs — <h1> opens, </h1> (note the slash) closes, and everything between is the element's content. The browser never shows the tags; it shows what they mean.
Some elements carry attributes — extra settings inside the opening tag, like lang="en". Attribute = name, equals sign, value in quotes.
Any plain-text editor works, but use VS Code (free, code.visualstudio.com) — it colours your tags, auto-closes them, and typing ! then Tab generates this entire skeleton instantly (the "Emmet" shortcut). Workflow: create a file ending in .html → type the code → save → double-click the file to open it in Chrome/Edge → edit, save, and press Ctrl+R in the browser to see changes. Notepad works in a pinch; full VS Code installation and setup is covered step-by-step in the regular classes — for this crash course, any editor you already have is enough. Remember the goal here: maximum marks in minimum time — the exam asks you to WRITE the code on paper, so the editor is just your practice ground.
The full skeleton, one line at a time
<!DOCTYPE html>line 1 tells the browser "this is modern HTML5" — always the first line, never anything above it<html lang="en">the root element wraps EVERYTHING; lang="en" tells screen readers and search engines the language <head> <meta charset="UTF-8">head = information ABOUT the page, invisible on screen; charset UTF-8 makes ₹, é and emoji render correctly <title>Hyderabad Weekend</title>title shows on the browser TAB, not in the page — the most-forgotten line in exams </head> <body> <h1>Hyderabad Weekend</h1>body = everything the visitor actually SEES; our first visible element is the main heading </body></html>Hyderabad Weekend
hyd-weekend/ somewhere you can find againhyd-weekend.html — lowercase, no spaces, .html extensionYour friend's page shows the heading fine, but the browser tab reads "Untitled". Which element did they forget?
The tab text comes from <title> inside <head>. The h1 is page content; DOCTYPE only declares the HTML version.
Close your eyes and recite: DOCTYPE, html, head (meta + title), body. If you can, tick and continue.
Chunk 6 · Text & lists · ≈13 min
Filling the guide: headings, paragraphs, lists
A city guide is headings ("Day 1 — Old City"), paragraphs (what to expect), and lists (what to eat, in what order). Those three element families carry ninety percent of the text on the entire web.
Micro-example ladder — three steps up
<h1> to <h6> — importance, not size. One <h1> per page ("Hyderabad Weekend"), <h2> for days, <h3> for stops within a day. Never skip levels to "look smaller" — that's CSS's job later.
<ul> = unordered (bullets — foods to try, any order). <ol> = ordered (numbers — the route walks stop 1 → 2 → 3). Both hold only <li> children.
Inside a paragraph: <strong> = important (browsers bold it), <em> = stressed (browsers italicise it), <br> = a forced line break — one of the few tags with no closing pair.
The full reveal — Day 1 of the guide
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hyderabad Weekend</title></head> (the skeleton from Chunk 5)<body><h1>Hyderabad Weekend</h1><p>Two days. One city. <strong>Come hungry.</strong></p><h2>Day 1 — Old City</h2>h2 under h1: a section inside the page — the heading ladder never skips a rung<p>Start early. The <em>real</em> Charminar crowd arrives by ten.</p><h3>The route, in order</h3><ol> <li>Charminar at sunrise</li> <li>Laad Bazaar bangle lane</li> <li>Chowmahalla Palace</li></ol>ol because the ORDER matters — it's a walking route. The food list next is ul: eat in any order you like<h3>Eat at least two</h3><ul> <li>Irani chai and Osmania biscuits</li> <li>Haleem (seasonal!)</li> <li>Double ka meetha</li></ul></body></html>Hyderabad Weekend
Two days. One city. Come hungry.
Day 1 — Old City
Start early. The real Charminar crowd arrives by ten.
The route, in order
- Charminar at sunrise
- Laad Bazaar bangle lane
- Chowmahalla Palace
Eat at least two
- Irani chai and Osmania biscuits
- Haleem (seasonal!)
- Double ka meetha
"Top 5 biryanis, ranked best to worst." Which list element?
"Ranked" means position carries meaning → ordered list. Ask "does shuffling it break it?" — if yes, <ol>.
Headings rank, paragraphs flow, ol vs ul is a meaning decision. On to the tags that made the web the web.
Chunk 7 · Links & images · ≈12 min
The two tags that made it a web
Pages became a web the day one page could point at another. <a> makes the pointer; <img> pulls a picture into the flow. Each has one attribute it cannot live without.
<a href="day2.html">Day 2 plan</a> — the text between the tags is what you click; href is where you go. Full URLs reach other sites; bare filenames reach files sitting next to this one (a relative link — the workhorse of multipage sites, coming in M4).
<img src="charminar.png" alt="Charminar at sunrise"> — no closing tag. src names the picture file; alt is the text spoken by screen readers and shown if the image fails. Exams award marks for alt; so do real users. (The photo itself is in today's asset pack — Chunk 1's download button.)
Full reveal — the guide gets a photo and a booking link
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hyderabad Weekend</title></head> (skeleton — Chunk 5)<body><h1>Hyderabad Weekend</h1>… lines 9–22: the paragraphs, h2/h3 headings and the two lists typed in Chunk 6 … (already in your file — unchanged)</ul><h2>The postcard shot</h2><img src="charminar.png" alt="Charminar at sunrise" width="420">src = which file (sitting in the same folder), alt = what it shows in words, width = display size in pixels<p>Trains fill up fast — <a href="https://www.irctc.co.in">book on IRCTC</a>.</p>a full https:// URL leaves your site; only the words "book on IRCTC" are clickable<p><a href="day2.html">Continue to Day 2 →</a></p>a relative link — no https://, no domain — points at day2.html in the SAME folder. That file doesn't exist yet… M4 fixes that</body></html>The postcard shot
Trains fill up fast — book on IRCTC.
Continue to Day 2 →
If the photo shows as a broken icon, check three things in order: is charminar.png really in the same folder as the HTML file? Is the filename spelled exactly the same, including case and extension (.png, not .jpg)? Did you write src= (not href= — that's for links)? Ninety percent of broken images are one of these three.
Which attribute pair is correct?
Links reference (href = hypertext reference); images name their source file (src). Swapping them is the most common exam trap.
Classroom-pace coverage of this module lives in class-03.html and class-04.html, with extra in-class activities and more practice reps.
Skeleton, text, lists, links, images — you can now write a complete single page from a blank file. M4 turns one page into a site.
Chunk 8 · Relative paths · ≈10 min
One page is a poster. Three pages are a site.
New scenario: the college fest committee needs a microsite — home, events, register. The moment you have more than one file, everything depends on one skill: describing where a file lives relative to the file that's asking.
START FROM ZERO — "WHAT'S A FOLDER PATH?" (2 MIN)
Your computer stores files in folders, folders in folders. A path is the written route to a file: fest/img/logo.png means "inside fest, inside img, the file logo.png". A relative path starts from wherever the current file already is — no drive letters, no domain.
| FROM index.html, YOU WANT… | WRITE | WHY |
|---|---|---|
| the events page | href="events.html" | same folder — just the name |
| the logo image | src="img/fest-logo.png" | go into img/ first |
| back to home from events.html | href="index.html" | they're neighbours — same folder |
| another website | href="https://…" | full URL = leave the site |
From events.html, the logo lives in img/. What goes in src?
Relative paths start from the asking file's own folder. events.html already lives inside fest/ — naming fest/ again would look for fest/fest/img/…
Same folder = bare name; subfolder = folder/name; other site = full URL. That's the entire theory.
Chunk 9 · Wiring the pages · ≈12 min
Three files, six links, one site
Every page carries the same tiny nav — links to the other two pages. Step through the code, then actually click around the preview: it's a real working microsite.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>VIBRANZA '26</title></head> (the usual skeleton) <body> <p><a href="events.html">Events</a> | <a href="register.html">Register</a></p>the nav row — every page of the site carries this same line so a visitor is never stranded <img src="img/fest-logo.png" alt="College Fest logo" width="180">the Chunk-8 path table, cashed in: the logo lives one folder DOWN, so the src steps INTO img/ first. The file itself is in the asset pack <h1>VIBRANZA '26</h1> <p>Two days of music, code and food. March 6–7.</p> </body></html>events.html and register.html reuse the same skeleton + nav, swapping only the h1 and the content below itEvents | Register
VIBRANZA '26
Two days of music, code and food. March 6–7.
Home | Register
Events
- Battle of Bands — main stage, 6 pm
- 24-hour hackathon — CS block
- Food street — parking lot P2
Home | Events
Register
Registration opens with the form module (M7) — for now this page just exists, and that's enough to link to it.
index.html
When a browser asks a server for a folder ("give me fest/"), the server hands back the file named index.html by convention — no filename needed in the address. Name your home page anything else and visitors to your site's root see an error. It's the one filename on the web you don't get to choose.
You can plan a folder, wire pages with relative links and explain index.html. Time to prove it — build sprint next.
Chunk 10 · Sprint: a real site from zero · ≈15 min
Build chai-point/ — every M2–M4 skill, one artefact
Your friend runs a tea stall and wants a site: a home page, a menu, a "find us". You have every skill this needs. Close the reveals, open your editor, type. The solution is gated below — earn it first.
The brief. Build the complete site in a fresh chai-point/ folder:
index.html— proper skeleton, title "Chai Point", h1, one welcoming paragraph with a strong word, nav links to both other pages.menu.html— same skeleton + nav; an h2 "Today's menu"; an unordered list of 4 drinks; an ordered list "How we brew" with 3 steps.find-us.html— same skeleton + nav; an address paragraph; one full-URL link to Google Maps.- Every page's nav must reach the other two pages; test every link in the browser before you peek below.
Built and clicked through all three pages? Then compare, don't copy.
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Menu — Chai Point</title> </head> <body> <p><a href="index.html">Home</a> | <a href="find-us.html">Find us</a></p> <h1>Chai Point</h1> <h2>Today's menu</h2> <ul> <li>Masala chai — ₹15</li> <li>Ginger chai — ₹15</li> <li>Lemon tea — ₹12</li> <li>Filter coffee — ₹20</li> </ul> <h2>How we brew</h2> <ol> <li>Boil milk with crushed ginger</li> <li>Add tea dust, simmer two minutes</li> <li>Strain high, serve hot</li> </ol> </body></html>Home | Find us
Chai Point
Today's menu
- Masala chai — ₹15
- Ginger chai — ₹15
- Lemon tea — ₹12
- Filter coffee — ₹20
How we brew
- Boil milk with crushed ginger
- Add tea dust, simmer two minutes
- Strain high, serve hot
Three pages, all links tested. Don't lose this folder — the next chunk puts it under version control.
Chunk 11 · git init → add → commit → push · ≈20 min
Give chai-point/ a memory
Right now one bad save could destroy your site. git fixes that: it takes named snapshots (commits) of the whole folder, forever rewindable — and push copies them to GitHub so even a dead laptop can't take them.
START FROM ZERO — "NEVER USED A TERMINAL?" (3 MIN)
The terminal is a text box where you type commands instead of clicking. On Windows open Git Bash (installed with git), on Mac open Terminal. Two commands cover navigation: cd foldername steps into a folder, ls lists what's here. The $ at line start is the prompt — the computer saying "your turn". You never type the $.
$ cd chai-pointstep INTO the site folder first — git commands act on wherever you're standing$ git initInitialized empty Git repository in …/chai-point/.git/done ONCE per project — git now watches this folder via a hidden .git/ subfolder$ git add ."stage everything" — the dot means all changed files. Staging = putting files in the photo frame$ git commit -m "Chai Point site: home, menu, find-us"[main (root-commit) 3f1a9c2] Chai Point site: home, menu, find-usthe snapshot. The -m message says WHAT this save point contains — future-you reads these like a diary$ git remote add origin https://github.com/YOU/chai-point.gitconnect the folder to an empty repository you created on github.com (done once)$ git push -u origin mainTo https://github.com/YOU/chai-point.git * [new branch] main -> mainyour commits now live in the cloud too. From tomorrow the loop is just: edit → add → commit → pushgit init · git remote add origin …git add . → git commit -m "what changed"git pushadd → commit → pushYou fixed a broken link and the site works again. What's the correct next move?
Working state = save point, immediately. init is once per project ever; and "perfect" never arrives — commits are cheap, losses aren't.
The regular track's fswd_lab_01.html runs this whole build-and-git journey at classroom pace with more practice reps and troubleshooting help.
A real site, built and version-controlled by you. One third of the unit done — tables are next, and they're quick.
Chunk 12 · Tables · ≈20 min
Data that lives in rows and columns
The campus shuttle timetable is a grid: routes down, timings across. HTML tables are built row by row — you never declare columns; the columns emerge from cells lining up.
<table> wraps it all · <tr> = one row · <th> = a header cell (bold + centred by default) · <td> = a data cell. Nothing else is required.
Write the first row completely, then the next. A 3-column table is simply every <tr> containing exactly 3 cells. Miscount one row and the grid visibly staggers — instant feedback.
Full reveal — the shuttle timetable
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Campus Shuttle</title></head><body><h1>Campus Shuttle — Morning Runs</h1><table border="1">border="1" draws visible grid lines — the quick classroom way; CSS takes this job over in M10 <tr> <th>Route</th> <th>First bus</th> <th>Every</th>row 1 is all th — the header row. Three header cells = this table has three columns, decided right here </tr> <tr> <td>Hostel → Main block</td> <td>7:40 am</td> <td>20 min</td> </tr> <tr> <td>Metro gate → CS block</td> <td>8:00 am</td> <td>15 min</td> </tr></table></body></html>Campus Shuttle — Morning Runs
| Route | First bus | Every |
|---|---|---|
| Hostel → Main block | 7:40 am | 20 min |
| Metro gate → CS block | 8:00 am | 15 min |
<th colspan="2"> makes ONE cell claim two column slots in its own row. That row then types one cell fewer — the span already paid for the missing one.
<td rowspan="2"> makes one cell claim its own slot plus the same slot in the row below. That next row must NOT type the cell — the reaching cell already owns it.
Full reveal — merging cells in the timetable
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Shuttle — merged cells</title></head><body><table border="1"> <tr> <th colspan="2">Morning Shuttle</th>colspan="2" — this ONE cell claims BOTH column slots, so its row types only ONE cell </tr> <tr> <td rowspan="2">Hostel gate</td>rowspan="2" — claims this row's slot AND the same slot in the row below <td>7:40 am</td> </tr> <tr> <td>8:00 am</td>NO first cell typed here — Hostel gate still owns that slot from the row above </tr></table></body></html>| Morning Shuttle | |
|---|---|
| Hostel gate | 7:40 am |
| 8:00 am | |
Row 1 of a 2-column table is <tr><th colspan="2">Fares</th></tr>. How many cells must row 2 type?
colspan widens a cell sideways in that row alone; the next row starts fresh and types both cells. Only rowspan reaches DOWN into later rows — and then the invaded row types one fewer.
old-style attributes — still asked!Q1. How do you set the background colour and text colour of a table row in HTML? Give an example. [2M]
Model answer — name the attributes + show one row:
<tr bgcolor="yellow"> <td><font color="red">Hostel route</font></td></tr><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>PYQ — table row</title></head><body><table border="1"> <tr><th>Route</th><th>Departure</th></tr> <tr bgcolor="yellow"> <!-- the exam's row --> <td><font color="red">Hostel route</font></td><td>7:30 AM</td> </tr> <tr><td>Library loop</td><td>8:00 AM</td></tr></table></body></html>| Route | Departure |
|---|---|
| Hostel route | 7:30 AM |
| Library loop | 8:00 AM |
bgcolor on the tr paints the whole row, font color paints only its own cell's text.A table renders with its second row shifted one cell left. Most likely cause?
Columns are made by cells lining up — a missing cell drags everything after it leftward. Count the cells in each tr.
table / tr / th / td, row-major thinking, colspan/rowspan merges with the row arithmetic, and the bgcolor PYQ banked with its modern-CSS bonus line. Forms next — the unit's biggest module.
Chunk 13 · The form & text inputs · ≈17 min
The page finally talks back
The NSS unit is running a blood-donation camp and needs donors registered: name, phone, email, date of birth. Until now visitors could only read your pages. A form lets them type into your page — and every control follows one repeating pattern.
All controls live inside <form>. Its action attribute names where the data goes on submit — a server URL in real life. Ours stays action="#" ("this page") until the server units.
Every control is a pair: <label for="phone"> names it for humans, <input id="phone"> collects the value. The matching for/id means clicking the words focuses the box — and screen readers announce it. Marks AND usability.
name="phone" is the label the data travels under when submitted — no name, no data. Rule of thumb: every input gets id (for its label) and name (for its data).
Full reveal — the text-family half of the form
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Donate Blood</title></head><body><h1>Blood Donation Camp — Register</h1><form action="#" method="post">method="post" sends data privately in the request body (get would expose it in the URL — wrong for personal data) <p><label for="dname">Full name:</label> <input type="text" id="dname" name="dname" required></p>type="text" = one free-typed line. required = the browser refuses to submit while it's empty — validation with zero code <p><label for="dphone">Phone:</label> <input type="tel" id="dphone" name="dphone"></p>type="tel" — on a phone this pops the NUMBER keypad instead of the letter keyboard. Same box on desktop; better manners on mobile <p><label for="demail">Email:</label> <input type="email" id="demail" name="demail"></p>type="email" auto-checks the shape (needs an @) before allowing submit — try it in the live preview <p><label for="ddob">Date of birth:</label> <input type="date" id="ddob" name="ddob"></p>type="date" gives a whole calendar picker free of charge. The form continues in the next chunk…… lines 18–28: the choice controls + submit (Chunks 14–15) … (typed in the coming chunks) </form></body></html>Blood Donation Camp — Register
An input has an id but no name. What breaks?
id serves the label; name labels the submitted data. No name → the server never receives that field, and nothing warns you. Classic silent bug.
form / label / input, the id-vs-name split, and four text-family types. Choice controls next.
Chunk 14 · Choice controls · ≈17 min
Pick one, pick many, pick from a list
Blood group: exactly one of eight — radio buttons. "I've donated before / I'm on medication": tick any that apply — checkboxes. Camp slot from a long list — select. Three controls, three decision shapes.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Donate Blood</title></head><body> <form action="#" method="post">… lines 9–17: the four text-family inputs typed in Chunk 13 … (already in your file — unchanged) <p>Blood group: <input type="radio" id="bg-op" name="bgroup" value="O+"><label for="bg-op">O+</label> <input type="radio" id="bg-ap" name="bgroup" value="A+"><label for="bg-ap">A+</label> <input type="radio" id="bg-bp" name="bgroup" value="B+"><label for="bg-bp">B+</label></p>THE rule: all radios in one question share the SAME name ("bgroup") — the shared name is what makes them exclusive. Each has its own id and value <p><input type="checkbox" id="prev" name="prev"><label for="prev">I have donated before</label></p>checkboxes are independent — each its own name, tick any combination <p><label for="slot">Camp slot:</label> <select id="slot" name="slot"> <option>9–11 am</option> <option>11–1 pm</option> <option>2–4 pm</option> </select></p>select = a dropdown; each option is one row of it. Great when the list is long — eight blood groups as radios is fine, thirty districts is not… lines 27–28: textarea + submit come next (Chunk 15) … </form></body></html>you just learned the fix!Q1. A student's form lets users select BOTH "Male" and "Female" radio buttons at once. Identify the bug and write the corrected code. [2M]
Model answer — name the bug, show the fix:
<input type="radio" name="gender" value="male"> Male<input type="radio" name="gender" value="female"> Female<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>PYQ — radio fix</title></head><body><!-- THE BUG — two different names = two separate groups --><input type="radio" name="m"> Male <input type="radio" name="f"> Female<!-- THE FIX — one shared name = one exclusive group --><input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female</body></html>BUGGY — click both: BOTH stay selected ✗
FIXED — click both: only ONE holds ✓
Radio = one of many (shared name!), checkbox = any, select = dropdown. The broken-radios PYQ is banked.
Chunk 15 · Finishing the form · ≈16 min
Long answers, the big button, and the exam's favourite list
Two controls finish the registration: <textarea> for the multi-line "any medical conditions?" answer, and the submit button that fires the whole form off. Then we bank the most-asked forms PYQ.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Donate Blood</title></head><body> <form action="#" method="post">… lines 9–26: every control from Chunks 13–14 (text inputs, radios, checkbox, select) … (already in your file — unchanged) <p><label for="med">Any medical conditions?</label> <textarea id="med" name="med" rows="3"></textarea></p>textarea has a CLOSING tag (unlike input) — anything between the tags becomes pre-filled text. rows sets visible height <p><button type="submit">Register as donor</button></p>the trigger: clicking it runs every required/email check, and only if ALL pass does the browser send the data to the form's action</form></body></html>a list question — rattle them offQ2. List any four input types in HTML5 forms and state the purpose of each. [2M]
Model answer — any four, one line each (you know seven):
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>PYQ — input types</title></head><body><p><label>Name: <input type="text"></label></p><p><label>Email: <input type="email"></label></p><p><label>DOB: <input type="date"></label></p><p><label>Age: <input type="number" min="16" max="60"></label></p></body></html>Which control needs a closing tag?
input is a void element — no closing tag ever. textarea closes because its content (the pre-filled text) lives between the tags.
The regular track spreads forms across class-06.html and class-07.html with a full fieldset/legend treatment and more validation practice.
Every form control, the label pattern, both forms PYQs banked. Next: semantic HTML — including the div/span add-on.
Chunk 16 · div & span · ≈10 min
The two tags that mean… nothing
New scenario: the college newsroom wants its top story on the web. Before the meaningful tags, meet the two deliberately meaningless ones — <div> and <span>. They exist to group things when no better tag fits, and knowing them makes the next chunk's upgrade make sense.
A plain container that starts on a new line and stretches full width. It says nothing about its contents — it's an empty cardboard box you group other elements into, usually so you can style or position them together later with CSS.
The same idea at word level: it wraps a few words inside a line without breaking the flow. Perfect for colouring one phrase or tagging one date — invisible until CSS gives it a job.
Block elements (div, h1, p, ul, table…) stack downward, each claiming its own row. Inline elements (span, a, strong, em…) sit inside a line of text like words do. div is the generic block; span is the generic inline. Every layout decision in M10–M12 builds on this pair of behaviours.
Micro-example — grouping with div, highlighting with span
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Campus News</title></head><body> <div>a box around the whole story — starts a new line, spans full width, means nothing yet <h1>Robotics team wins nationals</h1> <p>Reported on <span>24 August 2026</span> from the tech fest.</p>the span wraps just the date INSIDE the sentence — no line break, no visible change… yet. CSS will find it by this handle in M10 <p>The team beat 42 colleges in the final round.</p> </div>Robotics team wins nationals
Reported on 24 August 2026 from the tech fest.
The team beat 42 colleges in the final round.
You want to colour just the words "42 colleges" inside a paragraph. Which wrapper?
A div would break the sentence into three stacked rows — it's a block. span is the inline sleeve made exactly for this.
div = generic block, span = generic inline. Now watch what happens when a page is built from NOTHING but divs…
Chunk 17 · The semantic rebuild · ≈12 min
Same page, but now every part says what it is
A page built only from divs works — but nothing on it is named. HTML5 added a family of tags that carry their meaning in the tag itself: header, nav, main, section, article, aside, footer. Watch the news page rebuild, one meaningful region per step.
| TAG | MEANS | ON THE NEWS PAGE |
|---|---|---|
<header> | introductory strip of a page (or section) | paper name + tagline |
<nav> | a block of navigation links | Home · Sports · Tech |
<main> | THE main content — one per page | everything below the nav |
<article> | self-contained piece that could stand alone | the robotics story |
<section> | a themed grouping of content | the "more headlines" block |
<aside> | related but tangential content | "about the team" side box |
<footer> | closing strip — credits, contact | © Campus News 2026 |
Full reveal — the rebuild, region by region
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Campus News</title></head><body> <header> <h1>Campus News</h1> </header>was <div> — now the tag ITSELF says "I introduce this page" <nav><a href="index.html">Home</a> <a href="sports.html">Sports</a></nav>a screen reader can now announce "navigation" and jump straight past it — a div could never promise that <main> <article> <h2>Robotics team wins nationals</h2> <p>The team beat 42 colleges in the final round.</p> </article>article = "this piece could be lifted out and still make sense" — exactly what a news story is <aside><p>The team: 6 students, 2 years of building.</p></aside> </main> <footer><p>© Campus News 2026</p></footer></body></html>Campus News
Home Sports
Robotics team wins nationals
The team beat 42 colleges in the final round.
The team: 6 students, 2 years of building.
© Campus News 2026
The HTML5 feature everyone forgets in the exam: native <video> & <audio>
Before HTML5, playing a video needed a plugin (Flash). HTML5 made video and audio first-class tags — the browser plays them natively. Examiners love this feature because it has visible attributes to name. Here it is inside a complete page skeleton, ready to copy:
<!DOCTYPE html><html><head> <title>Campus News — video report</title> </head><body> <video controls width="480" playsinline> <source src="report.mp4" type="video/mp4"> Your browser does not support video. </video> <audio controls src="interview.mp3"></audio></body></html>controls = show play/pause bar · width = size · playsinline = play in place on phones · the text inside is the fallback for old browsers"List new features of HTML5" appears again and again. The safest full-credit answer names FOUR families: (1) semantic tags (<header> <nav> <section> <article> <footer>), (2) native multimedia (<video> <audio> — no plugin needed), (3) new form input types (email, date, tel, number) with built-in validation, (4) <canvas> for drawing graphics with JavaScript. Two are asked — knowing four means you can always pick the two you remember best.
name features + know one tag wellQ2. List any two new features of HTML5. What is the purpose of the <section> tag? [2M]
Model answer — two features, then the tag:
Seven region tags, each placed on a real page, and the HTML5-features PYQ banked. One question left: WHY does this matter enough for 4 marks?
Chunk 18 · Why it matters · ≈8 min
Three readers, one page
Every page you publish is read by three very different audiences — and only one of them has eyes. Semantic tags are how the other two understand you.
A screen-reader user can say "jump to main" or "skip navigation" — but only if <main> and <nav> exist. In a div-only page there is nothing to jump to; the page must be read top to bottom.
Google's crawler weighs what it finds in an <article> more heavily than sidebar or footer text. Semantic structure literally changes how your content ranks.
Opening a file and seeing <footer> beats decoding <div class="bt-wrp2">. Teams onboard faster; bugs hide less.
4 marks = 4 developed pointsQ11a. Explain the importance of semantic elements in HTML5 with suitable examples. [4M]
Model answer — definition, then three developed benefits:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>PYQ — semantic page</title></head><body><header><h1>Campus News</h1></header><nav>Home · Sports · Events</nav><main> <article><h2>Robotics team wins</h2><p>…story…</p></article> <aside>Trending this week</aside></main><footer>© 2026 Campus News Club</footer></body></html>A semantic page and its div-only twin are opened side by side. What differs on screen?
Semantic tags don't change default rendering (main, section, article all render like divs). They change what machines and assistive tech can UNDERSTAND.
The regular track's class-08.html runs this module at classroom pace, with the X-ray layout simulation and a full audit activity.
Half the unit done! div/span, seven semantic regions, both PYQs banked. Build Sprint 2 next — a complete form file, typed by you.
Chunk 19 · Sprint: a complete form file · ≈13 min
Build hostel-mess-feedback/ — every M7–M8 skill, one file
The hostel warden wants the mess feedback on the web. One page, one form, every control family you own: text inputs, radios, checkboxes, a select, a textarea, a submit. Semantic regions wrap it. Close the reveals and type.
The brief. One file, feedback.html, in a fresh hostel-mess-feedback/ folder:
- Semantic shell:
header(h1 "Mess Feedback — August"),mainholding the form,footer("Hostel Office · Block C"). - Text family: name (
text, required) · room number (number) · email (email). - Exactly-one choice: "Which mess?" — radios North / South sharing
name="mess". - Any-that-apply: checkboxes "veg counter", "juice counter" — each its own name.
- A
selectrating 1–5, a 3-rowtextareafor suggestions, and a submit button "Send feedback". - Every input labelled with a matching
for/idpair — click the words, the control must focus.
Clicked every label? Tried submitting with an empty name? Then compare, don't copy.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Mess Feedback</title></head><body> <header><h1>Mess Feedback — August</h1></header> <main> <form action="#" method="post"> <p><label for="fname">Name:</label> <input type="text" id="fname" name="fname" required></p> <p><label for="room">Room no:</label> <input type="number" id="room" name="room"></p> <p><label for="femail">Email:</label> <input type="email" id="femail" name="femail"></p> <p>Which mess? <input type="radio" id="mn" name="mess" value="north"><label for="mn">North</label> <input type="radio" id="ms" name="mess" value="south"><label for="ms">South</label></p>the M7 law applied: ONE shared name ("mess") makes them exclusive; ids stay unique for the labels <p><input type="checkbox" id="veg" name="veg"><label for="veg">Uses veg counter</label> <input type="checkbox" id="juice" name="juice"><label for="juice">Uses juice counter</label></p> <p><label for="rate">Rating:</label> <select id="rate" name="rate"><option>5</option><option>4</option><option>3</option><option>2</option><option>1</option></select></p> <p><label for="sugg">Suggestions:</label> <textarea id="sugg" name="sugg" rows="3"></textarea></p> <p><button type="submit">Send feedback</button></p> </form> </main> <footer><p>Hostel Office · Block C</p></footer></body></html>Mess Feedback — August
Hostel Office · Block C
A complete, semantic, validated form — typed by you. Now bank the exam question that is almost exactly this file.
Chunk 20 · The survey-form PYQ · ≈12 min
You just built the exam answer
The heaviest forms question in the bank asks for a survey form — the very shape you typed in the last chunk. Here is how to present it for full marks under exam time pressure.
the sprint, renamed!Q11a. Design an HTML form for a student survey collecting: name, branch (dropdown), year (radio), hobbies (checkboxes) and feedback (multi-line), with a submit button. Explain the controls used. [4+4M]
Model answer — the code (4M), then the explanation table (4M):
<form action="#" method="post"> <p><label for="sname">Name:</label> <input type="text" id="sname" name="sname" required></p> <p><label for="branch">Branch:</label> <select id="branch" name="branch"> <option>CSE</option><option>ECE</option><option>MECH</option> </select></p> <p>Year: <input type="radio" name="year" value="2"> II <input type="radio" name="year" value="3"> III</p> <p>Hobbies: <input type="checkbox" name="music"> Music <input type="checkbox" name="sports"> Sports</p> <p><textarea name="fb" rows="3"></textarea></p> <p><button type="submit">Submit</button></p></form><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Student Survey</title></head><body><form action="#" method="post"> <p><label for="sname">Name:</label> <input type="text" id="sname" name="sname" required></p> <p><label for="branch">Branch:</label> <select id="branch" name="branch"><option>CSE</option><option>ECE</option><option>MECH</option></select></p> <p>Year: <input type="radio" name="year" value="2"> II <input type="radio" name="year" value="3"> III</p> <p>Hobbies: <input type="checkbox" name="music"> Music <input type="checkbox" name="sports"> Sports</p> <p><label for="fb">Feedback:</label> <textarea id="fb" name="fb" rows="3"></textarea></p> <p><button type="submit">Submit</button></p></form></body></html>The regular track's fswd_lab_02.html is a full session on exactly this build, with more variations and the query-string submit demonstration.
The 8-mark survey-form question is banked with its explanation half. HTML is done — everything from here is CSS.
Chunk 21 · Attaching CSS · ≈10 min
One playlist page, three ways to paint it
The campus radio club typed their Friday playlist in plain HTML — correct, complete, and grey. CSS is the language that paints it. Before any painting, one decision: where does the CSS live? There are exactly three answers, and the exam loves asking for all three.
START FROM ZERO — "WHAT EVEN IS CSS?" (OPTIONAL, 2 MIN)
CSS — Cascading Style Sheets — is a second language that sits beside HTML. HTML says what is on the page (a heading, a list of songs); CSS says how it looks (orange, centred, in a rounded card). A CSS rule has a fixed shape: a selector (who gets styled), then declarations inside braces (property: value; pairs).
"Cascading" means several rules can apply to one element, and the browser merges them by a fixed set of tie-break laws — you'll meet those laws where they matter.
| METHOD | WHERE IT LIVES | REACH | WHEN IT'S RIGHT |
|---|---|---|---|
| Inline | style="…" attribute on one tag | that one element only | quick one-off test; avoid in real projects |
| Internal | <style> block inside <head> | the whole page | single-page sites, exam answers |
| External | separate .css file, joined by <link> | every page that links it | real multi-page sites — one file styles all |
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="radio.css"> <!-- 3 · EXTERNAL --> <style> /* 2 · INTERNAL */ h1 { color: darkorange; } </style></head><body> <h1>Friday Telugu Hits</h1> <p style="color:seagreen;">Curated by the Radio Club</p> <!-- 1 · INLINE -->and radio.css (the external file) holds: body { font-family: Arial; background-color: oldlace; }</body></html>Friday Telugu Hits
Curated by the Radio Club
The radio club adds a second page, archive.html. Which attach method styles it with zero new CSS written?
That is the whole argument for external CSS: one radio.css, linked from every page. Change the file once, every page updates. Copying (inline or internal) means editing every page forever.
Inline / internal / external, with where each lives and when each is right — a table the exam asks for almost every year.
Chunk 22 · Selectors · ≈12 min
Pointing at things — the five selectors that matter
Every CSS rule starts by pointing: which elements get this style? The playlist gives us a perfect test bed — songs, one featured song, one "now playing" song. Five selector types cover the entire Unit-1 exam.
<!DOCTYPE html><html lang="en"><head> <title>Friday Playlist</title> <style> li /* 1 · ELEMENT — every li, no marking needed */ { color: dimgray; } .featured /* 2 · CLASS — the dot: "anything marked featured" */ { color: darkorange; } #now-playing /* 3 · ID — the hash: "THE one element with this id" */ { background-color: lemonchiffon; } h1, h2 /* 4 · GROUP — comma: one rule, several targets */ { font-family: Georgia, serif; } footer p /* 5 · DESCENDANT — space: "p INSIDE footer only" */ { font-size: 12px; }read the marks: nothing = tag name · dot = class (many allowed) · hash = id (exactly one) · comma = list · space = inside </style></head><body> <h1>Raagam Radio</h1> <h2>Friday queue</h2> <ul> <li>Samajavaragamana</li> <li class="featured">Naatu Naatu</li> <li id="now-playing">Butta Bomma</li> <li class="featured">Oo Antava</li> <li>Inkem Inkem</li> </ul> <p>Requests close at 4 pm.</p> <footer> <p>Radio Club · Studio 2 · Vasavi College of Engineering</p> </footer></body></html>notice line 38: that p is NOT inside footer, so footer p leaves it alone — the descendant SPACE is doing real work. Line 40's p IS inside, and shrinks to 12pxFriday queue
- Samajavaragamana
- Naatu Naatu class="featured"
- Butta Bomma id="now-playing"
- Oo Antava class="featured"
Radio Club · Studio 2 footer p
featured repeats — two songs carry it, one rule paints both. now-playing can only ever be one song at a time — that uniqueness is exactly what id promises.you just used all five!Q11b. What is a CSS selector? List the types of selectors with an example each. [4M]
Model answer — definition first, then the five-row list:
p { } all paragraphs · class — .featured { } any element with that class · id — #now-playing { } the single element with that id.h1, h2 { } several targets, one rule · descendant — footer p { } only p elements inside a footer. Exam craft: for 2 marks, the definition plus any three types with syntax is full credit — but knowing all five costs nothing now. ✓ 2/2Element, class, id, group, descendant — plus the 2-mark definition question, answered. Next: what goes inside the braces.
Chunk 23 · Core properties · ≈10 min
Inside the braces — the ten properties that answer every question
CSS has hundreds of properties; Unit 1 is scored on about ten. Watch the plain playlist card become a finished one, one declaration at a time — each line is a property you'll reuse in the box-model and responsive chunks ahead.
.song-card{ color: #7C2D12; /* text colour — name, hex or rgb() */ background-color: oldlace; font-family: Verdana, Arial, sans-serif; /* fallback chain */ font-size: 16px; font-weight: bold; text-align: center; text-decoration: none; /* kills link underlines */ border: 2px solid darkorange; /* width · style · colour */ border-radius: 12px; line-height: 1.6;}every declaration is property : value ; — forget the semicolon and the NEXT line silently dies (the classic viva trap)M. M. Keeravani · 3:35
class="song-card" — the class-selector payoff from the last chunk.The club wrote font-family: Verdana, Arial, sans-serif;. A listener's phone has no Verdana. What happens?
The comma list is a fallback chain — the browser walks left to right and uses the first font it actually has. Always end with a generic family (sans-serif or serif) so there's a guaranteed landing.
Colour, background, fonts, alignment, borders, radius, line-height — the working vocabulary for every remaining chunk.
Chunk 24 · The role-of-CSS PYQ · ≈8 min
The 4-marker that joins M7 and M10
This question is a bridge: half theory (what CSS is for), half code (centre a form — your M9 skill plus today's properties). It has appeared with small wording changes across papers; the answer skeleton never changes.
theory 2M + code 2MQ16a. Explain the role of CSS in web design. Write CSS to display a login form at the centre of the page. [4M]
Model answer — four theory points, then the centring rule:
form{ width: 320px; margin: 80px auto; /* auto splits leftover space equally */ text-align: center; /* centres the text INSIDE it */ border: 1px solid gray; padding: 20px;}<!DOCTYPE html><html lang="en"><head> <title>Login</title> <style> form { width: 320px; margin: 80px auto; /* THE centring line */ text-align: center; border: 1px solid gray; padding: 20px; } </style></head><body> <form> <h3>Login</h3> <label>Username <input type="text"></label><br><br> <label>Password <input type="password"></label><br><br> <input type="submit" value="Sign in"> </form></body></html>Login
Username
Password
margin: auto splitting the leftover width — the box stays centred at any window size. Type in the fields; it's a real form.The regular track's fswd_lab_03.html spends a full session on selectors and the cascade with live experiments — ideal if the dot-vs-hash distinction still feels new.
CSS attach methods, selectors, core properties, and two PYQs banked. Next module: the box model — the diagram question worth guaranteed marks.
Chunk 25 · The box model · ≈13 min
Every element is a box — and every box has four layers
The admin office wants a printable student ID card — an element with exact size, breathing room inside, a border, and space around it. Those four ideas have exact CSS names, and drawing them correctly is a guaranteed exam question.
.id-card{ width: 300px; /* the CONTENT box */ padding: 16px; /* inside gap — all four sides */ border: 3px solid #EA580C; margin: 24px auto; /* outside gap — and auto centres it */}total width ON SCREEN = 300 + 16·2 + 3·2 = 338px — width alone is NOT the full story (next chunk fixes this)auto margins centre it — the same trick the M10 PYQ used for the form.draw the 4 rectangles!Q16a. Explain the CSS box model with a neat diagram. How does it help in designing page layouts for both screen and print? [4M]
Model answer — diagram + four layers + the screen/print line:
width/height; padding — transparent space inside the border; border — the visible edge; margin — transparent space outside, separating the element from its neighbours.margin: auto).Four layers, in order, with the diagram PYQ answered. One leftover puzzle: that 338px surprise. Next chunk kills it.
Chunk 26 · box-sizing · ≈10 min
Why your 300px card printed 338px wide
The office printed the ID cards and the cutter ruined a whole sheet — every card came out 38px wider than planned. The culprit is the default box-sizing, and the fix is one line that almost every real stylesheet starts with.
width: 300px sizes only the content. Padding and border are added on top: 300 + 32 + 6 = 338px on screen. Maths you must redo every time padding changes.
width: 300px is the total — border to border. Padding and border are carved out of the 300, content shrinks to fit. What you write is what you measure.
* /* the universal selector — EVERY element */{ box-sizing: border-box;}.id-card{ width: 300px; /* NOW it truly occupies 300px */ padding: 16px; border: 3px solid #EA580C;}with border-box: content shrinks to 300 − 32 − 6 = 262px, and the card measures exactly 300 — the cutter is happywidth: 300px in both rules — only box-sizing differs. This * { box-sizing: border-box; } reset is the first line of this very page's stylesheet.With box-sizing: border-box, width: 200px and padding: 20px, how wide is the element on screen?
border-box makes width mean the outer measurement (through the border). The 20px padding each side comes out of the 200, leaving 160px of content — the total stays 200.
content-box vs border-box, the width maths, and the universal reset. Last layout tool: making boxes sit where you want.
Chunk 27 · display & position · ≈12 min
Stacking, flowing, pinning — the traffic laws of boxes
Two last controls finish the layout kit. display decides how a box flows with its neighbours; position lets you take a box out of the flow entirely — like the "VALID 2026" stamp that must sit on the ID card's corner.
| VALUE | BEHAVIOUR | ID-CARD EXAMPLE |
|---|---|---|
display: block | full width, starts a new line | the card itself, headings, paragraphs |
display: inline | flows within text; width/height ignored | a span highlighting the roll number |
display: inline-block | flows in a line but accepts width/height | the row of small course badges |
display: none | removed completely — takes no space | the "print instructions" note when printing |
position: relative | stays in flow; becomes the anchor for children | the card, so the stamp can pin to it |
position: absolute | out of flow; pinned to nearest positioned ancestor | the VALID stamp, top-right corner |
position: fixed | pinned to the screen; ignores scrolling | a "back to top" button on long pages |
.id-card{ position: relative; /* "children may pin to ME" */}.stamp{ position: absolute; /* leave the flow */ top: 8px; right: 8px; /* measured from the card's corner */}the pair to memorise: parent = relative, child = absolute + top/right — the child pins to the parent, not the pageposition: relative. Remove that one line and the stamp would pin to the whole page instead. Try predicting that before you ever debug it.You want a chat button that stays at the bottom-right of the screen even while the user scrolls a long page. Which position?
absolute scrolls away with the page; fixed is glued to the glass of the screen itself. (The TOPICS button floating on this very page is position: fixed.)
Box model, border-box, display values, and the relative/absolute pinning pair. Next: making one page work on every screen size.
Chunk 28 · The viewport tag · ≈9 min
Why your ticket page looks like a postage stamp on a phone
The film club's movie-ticket page is perfect on a laptop. On a phone it renders as a tiny, zoomed-out miniature you have to pinch at. Nothing is wrong with the CSS — the page is missing one line in the head.
START FROM ZERO — "WHY DO PHONES ZOOM OUT?" (OPTIONAL, 2 MIN)
Old websites were built for 980px-wide desktop screens. So phone browsers adopted a survival trick: pretend to be 980px wide, render the page, then shrink the whole picture to fit the real screen. Result: everything is technically visible and nothing is readable.
The viewport meta tag is the page telling the browser: "I'm built for small screens too — don't pretend, use your real width." Only then do phone-friendly styles get a chance to act.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Movie Night — Book a Seat</title></head>width=device-width → "use the REAL screen width" · initial-scale=1.0 → "start at 100% zoom, no shrinking"<body> <h1>Movie Night</h1> <p class="tagline">Sat 7 PM · Auditorium · Film Club screening</p> <div class="ticket">Seat H-12 · ₹120</div> <div class="book">BOOK NOW</div> <p class="smallprint">Doors open 6:30 PM. Carry your student ID.</p></body></html>this is the real ticket.html from your folder — open it in the frame at chunk 31 and press 390px to watch line 5 do its jobA classmate wrote perfect phone-width media queries, but the phone still shows the zoomed-out desktop view. Most likely cause?
Without the viewport tag the phone reports a fake 980px width, so a query like max-width: 600px never fires. Tag first, queries second — always.
You can write the tag from memory and explain both halves of its content value. Now the styles that respond to it.
Chunk 29 · @media queries · ≈11 min
CSS with an if-condition
A media query wraps ordinary rules in a condition: "apply these only if the screen is at most 600px wide" — or "only when printing". The ticket page uses one to stack its seat map on phones.
.seat-map{ width: 60%; /* desktop: map beside the details */}@media (max-width: 600px) /* the CONDITION */{ .seat-map { width: 100%; /* phone: full width, stacked */ }}read it aloud: "IF the viewport is 600px or narrower, THEN seat-map is full width" — the desktop rule still applies everywhere else4 conditions = 4 marksQ11b. Write CSS media queries to change a page's background colour on: mobile (<600px), tablet (600–992px), desktop (>992px), and when the page is printed. [4M]
Model answer — four blocks, one mark each:
@media (max-width: 599px){ body { background-color: lightyellow; }}@media (min-width: 600px) and (max-width: 992px){ body { background-color: lightblue; }}@media (min-width: 993px){ body { background-color: lightgreen; }}@media print{ body { background-color: white; }}<!DOCTYPE html><html lang="en"><head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Backgrounds</title> <style> body { font-family: Arial; text-align: center; } @media (max-width: 599px) { body { background-color: lightyellow; } } @media (min-width: 600px) and (max-width: 992px) { body { background-color: lightblue; } } @media (min-width: 993px) { body { background-color: lightgreen; } } @media print { body { background-color: white; } } </style> </head> <body> <h2>Resize me — or print me</h2>599/600 and 992/993 — the boundaries never overlap, so exactly ONE background wins at every width</body></html>max-width, min-width, ranges with and, and @media print — the 4-mark question is banked.
Chunk 30 · Mobile-first · ≈10 min
Design for the phone, enhance for the desktop
Mobile-first is a strategy, not a property: write your base CSS for the smallest screen (one column, big touch targets), then use min-width queries to add the desktop luxuries. Most of your ticket buyers are on phones anyway.
Base CSS assumes a wide screen; max-width queries then undo column layouts, shrink fonts, hide things. You spend your queries subtracting.
Base CSS is the phone layout — naturally simple. min-width queries then add columns and side panels as space appears. You spend your queries enhancing.
define + 3 pillars + whyQ16a. What is responsive web design? Explain the role of the viewport and media queries in achieving it. [4M]
Model answer — definition, three pillars, and the payoff:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> makes the phone report its real width instead of simulating a desktop — the switch that lets everything else work.max-width: 100%) let content stretch and shrink between the query breakpoints.The regular track's class-11.html and class-12.html build a fully responsive page step by step with live resize demos — the long-form version of this module.
Viewport, queries, mobile-first, and both responsive PYQs banked. All theory done — one final build sprint remains.
Chunk 31 · Sprint: a complete stylesheet · ≈15 min
Build study-cafe/ — every CSS skill, one file
The Poshtik campus café is opening a quiet study corner and wants a one-page site. The HTML is simple — the whole exercise is the stylesheet: selectors, box model, a background image, and a phone breakpoint. From the asset pack you'll need poshtik-campus-logo.jpg (put it in study-cafe/img/). Close the reveals and type.
The brief. Folder study-cafe/ with index.html, css/style.css and img/poshtik-campus-logo.jpg. The page: header (h1 + tagline), a menu list where two items carry class="today", one id="wifi-note" paragraph, footer. The stylesheet must:
- External only — one
<link>, zero inline styles (the M10 lesson, enforced). - Start with
* { box-sizing: border-box; }(the M11 reset). body: Verdana fallback chain, oldlace background.header: the café logo as abackground-image, no-repeat, positioned right..todayitems orange + bold;#wifi-noteon a lemonchiffon strip.- A 700px card centred with
margin: auto— and amax-width: 600pxmedia query making it full-width on phones.
Logo showing? Card centred? Query firing when you narrow the window? Then compare, don't copy.
* { box-sizing: border-box; }body{ font-family: Verdana, Arial, sans-serif; background-color: oldlace; margin: 0;}header{ background-image: url("../img/poshtik-campus-logo.jpg"); /* path from the CSS file! */ background-repeat: no-repeat; background-position: right center; background-size: 90px; padding: 24px;}the classic trap: url() resolves relative to the CSS FILE (css/), so the logo needs ../img/ to climb out first — the M4 dot-dot rule returns.card{ width: 700px; margin: 24px auto; background: white; padding: 20px; border-radius: 12px;}.today { color: darkorange; font-weight: bold; }#wifi-note { background-color: lemonchiffon; padding: 8px; }@media (max-width: 600px){ .card { width: 100%; } /* the phone override */}- Filter coffee — ₹25 .today
- Masala chai — ₹15
- Millet cookies — ₹30 .today
Wi-Fi: PoshtikStudy · ask at the counter #wifi-note
background-image), not an <img> tag — decoration belongs to the stylesheet, content belongs to the HTML. That one sentence is exam gold.Now the real thing — those files, running in a browser.
Everything above was a preview of the target. Below are the genuine files in a real browser frame: study-cafe/index.html, the css/style.css it links, and the logo in img/. Nothing here is drawn. The card is white and centred because that stylesheet says so; the logo sits at the header's right because background-position really put it there — through a ../img/ path that genuinely had to climb out of css/ to find it.
width: 700px for 100%, and the ID card drops 300px — because narrowing the frame really does cross the max-width: 600px threshold. Switch to playlist.html to see all five selector types painting one page, to id-card.html to see two cards measuring exactly 300px thanks to the border-box reset, and to ticket.html — chunk 28's movie page — where 390px turns the 435px ticket block into a readable full-width one. This is your CSS executing, not an illustration of it.External file, reset, selectors, background image, centred card, breakpoint — the whole CSS half of Unit 1 in one file you typed.
Chunk 32 · Two style PYQs · ≈10 min
The sprint, re-asked two ways
Both of these questions are the study-cafe stylesheet wearing exam clothes. Watch how each maps straight back to lines you just typed.
body rule + centring — you own bothQ16a. Write CSS to style a student profile page: all text in Verdana, page background light grey, the profile card centred with a rounded border and inner spacing. [4M]
Model answer — two rules do everything:
body{ font-family: Verdana, Arial, sans-serif; background-color: #EEEEEE;}.profile{ width: 400px; margin: 50px auto; /* centred */ padding: 20px; /* inner spacing */ border: 2px solid gray; border-radius: 15px; /* rounded */ background-color: white;}<!DOCTYPE html><html lang="en"><head> <title>My Profile</title> <style> body { font-family: Verdana, Arial, sans-serif; background-color: #EEEEEE; } .profile { width: 400px; margin: 50px auto; padding: 20px; border: 2px solid gray; border-radius: 15px; background-color: white; } </style></head><body> <div class="profile"> <h2>Priya Sharma</h2> <p>CSE · III Year · loves CSS grids and filter coffee.</p> </div></body></html>Priya Sharma
CSE · III Year · loves CSS grids and filter coffee.
body), grey page, the card centred with equal grey on both sides, rounded corners with padding keeping the text off the border. ✓"cascading" made concreteQ11b. An element is targeted by an inline style, an internal rule and an external rule, each setting a different colour. Which wins, and why? Also write the CSS to place a logo image as a page background that does not repeat. [4M]
Model answer — the priority ladder, then the background rule:
body{ background-image: url("img/poshtik-campus-logo.jpg"); background-repeat: no-repeat; background-position: center top;}<!DOCTYPE html><html lang="en"><head> <title>Cascade Proof</title> <link rel="stylesheet" href="ext.css"> <!-- ext.css: h1 { color: green; } --> <style> h1 { color: blue; } /* internal */ body { background-image: url("img/poshtik-campus-logo.jpg"); background-repeat: no-repeat; background-position: center top; } </style></head><body> <h1 style="color: red;">Which colour am I?</h1> <!-- inline --></body></html>three rules target the h1: external green, internal blue, inline red — run it and see who winsWhich colour am I?
RED wins — inline beats internal & external · logo sits once at centre-top, no tiling
no-repeat overrides the tile-everything default.Inline > specific > later-in-order, plus two 4-mark code answers that are your sprint lines rearranged.
Chunk 33 · The last two PYQs · ≈10 min
Closing the question bank — 17 of 17
Two more and every previous-year question mapped to Unit 1 is answered inside this resource. One reaches back to forms (M7–M9), one forward from responsive (M12) — proof the unit is a single connected skill.
the mess form, re-skinnedQ11a. Create an HTML form for an insurance claim: policy number (text), date of incident (date), claim type (dropdown), description (multi-line) and a submit button. [4+4M]
Model answer — the M9 skeleton with new labels + one new input type:
<form action="#" method="post"> <p><label for="pno">Policy no:</label> <input type="text" id="pno" name="pno" required></p> <p><label for="doi">Date of incident:</label> <input type="date" id="doi" name="doi"></p> <p><label for="ctype">Claim type:</label> <select id="ctype" name="ctype"> <option>Health</option><option>Vehicle</option><option>Property</option> </select></p> <p><textarea name="desc" rows="4"></textarea></p> <p><button type="submit">Submit claim</button></p></form><!DOCTYPE html><html lang="en"><head> <title>Insurance Claim</title></head><body> <form action="#" method="post"> <p><label for="pno">Policy no:</label> <input type="text" id="pno" name="pno" required></p> <p><label for="doi">Date of incident:</label> <input type="date" id="doi" name="doi"></p> <p><label for="ctype">Claim type:</label> <select id="ctype" name="ctype"><option>Health</option><option>Vehicle</option><option>Property</option></select></p> <p><label for="desc">Description:</label><br> <textarea id="desc" name="desc" rows="4"></textarea></p> <p><button type="submit">Submit claim</button></p> </form></body></html>
type="date" is worth naming in your answer. Every control here is the model code, running.the ticket must print cleanQ11b. Write CSS so that when a page is printed: the navigation bar and buttons are hidden, the background is white, and text is black in a serif font. [4M]
Model answer — one @media print block:
@media print{ nav, button /* group selector from M10 */ { display: none; /* removed entirely — no gap left */ } body { background-color: white; color: black; font-family: Georgia, "Times New Roman", serif; }}<!DOCTYPE html><html lang="en"><head> <title>My Ticket</title> <style> body { background: #0F172A; color: white; font-family: Arial; } /* screen look */ @media print { nav, button { display: none; } body { background-color: white; color: black; font-family: Georgia, serif; } } </style> </head> <body> <nav>Home · My bookings · Help</nav> <h2>Movie ticket — seat F14</h2> <button>Cancel booking</button></body></html>Every mapped previous-year question for Unit 1 now has a model answer you've stepped through. Two chunks left: the recap and the test.
Chunk 34 · Rapid recap · ≈8 min
The whole unit on one screen
Every fact below was earned in a chunk above. If a row feels foggy, its chunk number is right there — tap TOPICS and jump back. If every row feels obvious, you're ready for the test.
| TOPIC | THE ONE-LINE VERSION | CHUNK |
|---|---|---|
| HTTP | clients ask, servers answer — request/response, stateless | 3 |
| URL | scheme :// domain / path / file | 4 |
| Skeleton | doctype → html → head (title, meta) → body | 5 |
| Text tags | h1–h6 by importance · p · ul/ol → li | 6 |
| Links & images | a href wraps · img src alt is empty | 7 |
| Paths | same folder = name · into = folder/ · up = ../ | 8–9 |
| Tables | table → tr → th/td · rowspan/colspan merge | 12 |
| Forms | label for = input id · radios share one name · checkboxes don't | 13–15 |
| Semantics | header nav main article aside footer — tags that mean something | 16–18 |
| Attach CSS | inline (one tag) · internal (one page) · external (whole site — best) | 21 |
| Selectors | tag · .class · #id · a, b group · a b descendant | 22 |
| Cascade | inline > more specific > later in source order | 32 |
| Box model | content → padding → border → margin (draw it!) | 25 |
| border-box | width means the TOTAL — padding/border carved out | 26 |
| display / position | block · inline · none — relative parent + absolute child pins | 27 |
| Responsive | viewport meta + @media (max/min-width) + % widths · mobile-first | 28–30 |
| @media print | hide nav/buttons · white background · serif | 33 |
① "alt shows when the image can't." ② "Radios are exclusive because they share one name." ③ "Semantic tags describe meaning, helping accessibility and SEO." ④ "margin: auto centres a fixed-width block." ⑤ "Without the viewport tag, media queries never fire on phones."
① Forgetting alt. ② Different names on radio pairs. ③ <li> outside a list. ④ Counting padding into width without border-box. ⑤ Writing @media answers without the closing extra brace.
Seventeen rows, five golden sentences, five traps. One thing left: prove it under the clock.
Chunk 35 · The timed paper · 20 min sharp
Twenty minutes, pen on paper, no scrolling up
Take an actual sheet of paper. Start the clock, answer all five, and do not scroll back — the exam hall won't let you either. The mix mirrors the real paper: two short, two code, one diagram.
Q1. Define HTTP. Who sends the request and who sends the response? [2M]
Q2. Differentiate <div> and <span> with one example each. [2M]
Q3. Create an HTML form for a library membership: name (text, required), branch (dropdown), membership type (radio: monthly/annual) and a submit button. Explain why the radios need a shared name. [4M]
Q4. Explain the CSS box model with a neat labelled diagram. With box-sizing: border-box, width: 250px and padding: 15px, what is the on-screen width? [4M]
Q5. Write media queries to give a page a light-yellow background below 600px and light-green above 992px, and to hide the nav when printed. [4M]
Whatever the result, that was the real rehearsal. Now grade yourself honestly against the key.
Chunk 36 · Mark yourself · ≈10 min
The key — and what your score means
Grade like a strict examiner: no half-sympathy marks. Each answer's checklist is below; a point earns its mark only if it's actually on your paper.
Only open this after the clock stopped. Grading mid-test teaches you nothing.
| Q | FULL MARKS REQUIRE… | REVISIT |
|---|---|---|
| Q1 [2M] | HTTP = HyperText Transfer Protocol, the request/response rules between browser and server (1M) · client/browser sends the request, server sends the response (1M) | chunk 3 |
| Q2 [2M] | div = block-level generic container, starts a new line (1M) · span = inline generic wrapper inside text (1M) · one example each, e.g. a div grouping a card vs a span colouring one word | chunk 16 |
| Q3 [4M] | form tag with method (1M) · labelled text input with required + select with options (1M) · two radios sharing name="mtype" + submit (1M) · the sentence: "a shared name makes the browser treat them as one exclusive group" (1M) | chunks 13–15, 19 |
| Q4 [4M] | diagram: four labelled nested boxes in order (2M) · one-line definition of each layer (1M) · answer: 250px — border-box carves the padding out of the stated width (1M) | chunks 25–26 |
| Q5 [4M] | @media (max-width: 599px) body lightyellow (1M) · @media (min-width: 993px) body lightgreen (1M) · @media print { nav { display: none; } } (1M) · correct double-brace nesting everywhere (1M) | chunks 29, 33 |
Keep it warm: reread the chunk-34 cheat sheet the night before, and re-type one build sprint folder from memory. You're done here.
Each lost mark names its chunk in the REVISIT column — redo only those chunks, then retake this paper tomorrow. Two focused passes beat one long one.
36 chunks, 3 typed builds, 17 previous-year questions, 1 timed paper. Web basics, HTML5 and CSS — revised end to end.