Web Basics

Your first webpage — HTML tags

HTML tags are like the section signs in a newspaper. The editor does not just dump text on a page — they label each piece: "HEADLINE," "SUBHEADING," "BODY TEXT," "CAPTION." The layout team reads those labels and formats accordingly. HTML tags are those labels, and the browser is the layout team.

Adding structure — headings, lists, links, images

Think of a webpage like a well-organized bookshelf. Headings are the shelf labels ("Fiction," "Science," "History"). Lists are the books lined up in order. Links are bookmarks that jump you to another shelf or another library entirely. Images are the illustrations pinned to the shelf.

CSS basics — making it look good

If HTML is the skeleton of a building — walls, floors, rooms — then CSS is the interior design. Same floor plan, completely different feel depending on the paint colors, furniture, and lighting. CSS is the paint and furniture of the web.

CSS layout — flexbox and cards

Flexbox is like arranging photos on a bulletin board. Without flexbox, you are taping each photo at exact coordinates. With flexbox, you tell the board: "spread these photos evenly across the row with equal gaps." The board figures out the math. You describe the intent, CSS handles the details.

JavaScript basics — making pages think

If HTML is the set of a theater play and CSS is the costumes and lighting, then JavaScript is the actors. The set and costumes are static — they sit there looking nice. But the actors bring the play to life: they move, speak, react to the audience. JavaScript is what makes a webpage come alive.

Responding to clicks — event handling

Event listeners are like motion-sensor lights. The light does not stay on all the time — it waits. When someone walks by (the event), the sensor detects it and triggers the light (the handler). Your code waits quietly until the user does something, then springs into action.

Building a component — HTML + CSS + JS together

A component is like a LEGO brick. Each brick has a shape (HTML), a color (CSS), and sometimes a moving part like a hinge or wheel (JavaScript). You build complex structures by snapping simple, self-contained bricks together. No one builds a LEGO castle from raw plastic — they use pre-designed pieces.

Your first mini-app — a todo list

A todo app is like a library checkout system. The librarian has a list of borrowed books (state). When someone returns a book, it gets crossed off (toggled). When someone borrows a new one, it gets added. The display board in the lobby always reflects the current list. Your app works the same way: state changes, display updates.