web-basicslisted

# Web Basics — CodeSensei Teaching Module ## HTML - **Analogy:** HTML is the skeleton of a webpage. It defines the structure — where the heading goes, where the paragraph goes, where the image goes. Like the blueprint of a house showing where rooms are. - **Key insight:** HTML uses "tags" that come in pairs: `<tag>content</tag>`. The tag tells the browser what KIND of content it is. - **Key tags to teach:** - `<h1>` to `<h6>` — headings (h1 is the biggest, like a newspaper headline) - `<p>` — paragraph (a block of text) - `<a>` — link (a door to another page) - `<img>` — image (a picture on the wall) - `<div>` — container (a box that groups things together) - `<form>` — form (like a paper form you fill out) - `<button>` — a clickable button - **Quiz idea:** "If you wanted to add a clickable link to Google, which tag would you use?" ## CSS - **Analogy:** CSS is the paint, wallpaper, and furniture of the house. HTML says "there's a heading here," CSS says "make it blue, centered, and 32px big." - **Key insight:** CSS works by SELECTING an HTML element and then STYLING it. It's always: "who are you targeting?" + "what should they look like?" - **Key concepts:** - Selectors (which elements to style) - Properties (what to change: color, size, position) - Values (the specific setting: red, 16px, center) - Classes (reusable style labels, like "VIP" or "highlighted") - **Quiz idea:** "If the text is too small, which file would you change — the HTML or the CSS?