Preface

Before you begin

Right now, there is a web page open somewhere in front of you. Maybe it's this one. And I'm going to tell you something that most beginners are never told: you can read it.

A web page looks like magic. Buttons move, pictures appear, a form remembers your name. Many people decide at that moment that this world belongs to someone else, someone who "gets" computers. This book exists to take that idea apart.

Here is the secret. Every instruction that makes a page work is plain text. Not a special code only engineers can see, but ordinary words and symbols that you can read, change, and break on purpose to see what happens. The pictures, the fonts and the videos are the only parts that aren't text. Everything telling the browser what to do is.

The book is laid out as a path. Nine phases take you from how the web works, with no code at all, to building, styling and shipping real apps. Each phase is split into short modules, one sitting each, and every module ends with a short check so you know it landed before you move on. Whenever something new appears, it comes with a picture from ordinary life first: a page's structure is the frame of a house, its styling is the paint and the lighting, and its behavior is the wiring behind the switches. Technical words are kept to the few you really need, and each one is explained in plain words the first time it shows up.

Small labels along the way tell you what you're looking at. Key idea marks the one thing to keep from a module. Take note flags something easy to miss. Try it now means stop reading and do it. On a screen, you click your answer and see right away whether you were right. In print or as an ebook, the same questions are there, with the answers waiting at the end of each module.

So this book doesn't ask you to memorize anything. You'll try things. You'll guess, check, and find out whether you were right. Being wrong is fine; it's how the lesson sticks.

You don't need any experience. By the end you'll have built your first web page, then your first app, and you'll be able to open almost any page, look underneath, and know what you're seeing.

Turn the page. Read it to believe it.

The whole path, laid out

You are going to build things people can use on the internet.

Not by memorizing jargon. By building one small working thing at a time, in the same order a professional would rebuild their knowledge if they lost it all tomorrow.

Here is the honest shape of it. Web development is three skills stacked on top of each other, and almost everybody who quits, quits because they tried to learn all three at once.

The house you already understand

The frame & the rooms: Walls, doors, where the kitchen is. Nobody argues about paint before the walls exist.
The finishes: Paint, tiles, lighting, furniture. Same house, completely different feeling.
The wiring & plumbing: Flip a switch, something happens. This is the part that reacts to people.
The utilities outside: Water, power, the records office. Things that live somewhere else and get delivered.

The web page you are learning to build

HTML — structure: Headings, paragraphs, images, buttons. What things are.
CSS — appearance: Color, spacing, layout, responsiveness. What things look like.
JavaScript — behavior: Click, type, submit, update without reloading. What things do.
The backend — data & accounts: Databases, logins, payments. Things that must outlive the visitor's browser.

Every phase below adds exactly one of those layers and refuses to touch the next one until you have shipped something with the current one. Each lesson is a single sitting — 15 to 30 minutes — and ends with a check so you never advance on a foggy understanding. Many are followed by hands-on practice, shown separately as + practice: do it the same day or the next, but do it — that's where the skill actually forms.

9Phases

81Modules

~36hLesson time

~34hPractice time

5Portfolio projects

100%Assessed

How to use this

Do one module per sitting, in order. Do not read ahead — reading feels like progress and isn't. After each module, take the check. If you score below 4 out of 6, redo the module the same day; you will not remember it tomorrow. Two modules a day gets you through the whole manual in about ten weeks.

The three chips below each module

Quiz means a short set of questions. Build means you must produce a working file — the only real proof. Explain means you say it back in your own words out loud, to a person or an empty room; if you stumble, you don't have it yet.

The signs in the margin

A few small icons mark what matters. Each one always comes with its word, and each means one thing only, everywhere in this manual.

CriticalBreaks things, loses data, costs money or puts people at risk. Rare — read every one.

Take noteAn important detail that's easy to miss.

Key ideaThe one thing to remember from the module. One per module.

Pro tipA shortcut or habit professionals use.

Try it nowA hands-on step to do right now — in the page or on your own machine.

Concept iconsbrowser · internet · server · database · security · code · device

Prefer plain text? Icons can be switched off; labels stay.

After Plate 8

What "pro" actually means here

At the end of this manual you will be able to take a vague idea from a real person — "I want customers to book a table and I want to see the bookings on my phone" — and deliver a working, fast, accessible, secure application on a real domain, with the code in version control, tests that catch your mistakes, and a deployment that updates itself when you push. That is the job.

You will not know everything. Nobody does; the field is too big and moves too fast. What you will have is the thing professionals actually run on: a solid mental model of how the pieces fit, so that anything new you meet is a variation on something you already understand.

Plate 1.1 · Phase 1 — Framing · 20 minutes · First module of Phase 1

Your first web page, from a blank file

Everything up to now was preparation. In this module you create a file that did not exist, type about twelve lines into it, and open it in a browser as a real web page. This is the moment it stops being theoretical.

Warm-up · from Module 0.4You need a new code file. Where do you make it, so no hidden .txt sneaks onto the end?

In VS Code's sidebar, with your project folder open — New File. Notepad and TextEdit can add .txt without showing you; VS Code saves exactly the name you type.

What you're actually about to do

Here is the whole job, and it does not get more complicated than this — only more detailed. You will write text with labels wrapped around it. The browser reads the labels and decides what everything is. That's HTML. There is no third step.

By the end of the module you'll have a page with your name on it — the index.html you created in VS Code in Module 0.4, inside your portfolio folder — open in a Live Preview that updates as you type.

The anatomy of a tag

A tag is a label you wrap around content to say what it is. It comes in a pair — one to open, one to close — and the closing one is the same word with a slash. Click each part below.

Click any colored piece of the tag above.

Take one paragraph and split it into its five parts.

<p class="intro">Welcome to my page.</p>

Piece	Text	What it does
Opening tag	`<p`	Names the element and starts it.
Attribute	`class="intro"`	A name, an equals sign, and a quoted value. It adds detail; it never changes what the element is.
End of the opening tag	`>`	Finishes the label. Leave it out and the browser reads your sentence as part of the tag.
Content	`Welcome to my page.`	The only part a visitor sees.
Closing tag	`</p>`	The same name with a slash. The element ends here.

Notice that only the content is visible on the page. Everything else is an instruction to the browser.

Key idea · Tags and elements

The tags are the labels; the element is the labeled thing.

Opening tag, content, closing tag — the whole thing together is called an element. You will hear "tag" and "element" used loosely, including by professionals.

A few tags don't wrap anything

Most elements surround content. A handful just are — an image, a horizontal rule, a line break. They have no closing tag because there's nothing inside them to close.

Two kinds of markers

A fence around a garden: It encloses something. It has a start and an end, and everything between them is inside it.
A road sign: It stands on its own. Nothing is inside it; it simply is, at that spot.

Two kinds of elements

Normal elements: <p>…</p>, <h1>…</h1>, <li>…</li>. Opening tag, content, closing tag.
Void elements: <img>, <br>, <hr>, <meta>, <link>. One tag, no closing tag, ever. Writing </img> is simply wrong. (Prettier may rewrite them as <img … /> with a slash at the end — that trailing slash is optional and harmless.)

The skeleton every page has

Every HTML document on the internet starts the same way. You will type this so many times that VS Code has a shortcut for it — but type it by hand today, once, so the parts mean something.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0">
  <title>My first page</title>
</head>
<body>

  <h1>Hello, world</h1>

</body>
</html>

Line	What it does	In plain terms
<!DOCTYPE html>	Tells the browser to use modern standards rather than a 1998 compatibility mode.	The building permit. Nobody reads it, but leave it out and things get strange.
<html lang="en">	Wraps the entire document and states its language.	The property line. `lang` matters: screen readers use it to choose a voice, and browsers to offer translation.
<head>	Information about the page. None of it appears on the page itself.	The label on the outside of the box. The browser and Google read it; visitors don't.
<meta charset="UTF-8">	Says which alphabet the file uses.	Leave it out and accented letters, curly quotes and em dashes turn into garbage.
<meta name="viewport"…>	Tells phones to use their real width instead of pretending to be a desktop.	Without it, your site appears zoomed-out and tiny on every phone. Non-negotiable.
<title>	The name of the page.	What shows in the browser tab, in bookmarks, and as the blue headline in Google results.
<body>	Everything a visitor actually sees.	The room people walk into. From here on, almost all your work happens between these two tags.

Pro tip · The shortcut, once you've earned it

In VS Code, in an empty .html file, type a single exclamation mark ! and press Tab. The entire skeleton appears. That's a system called Emmet, built in, no extension needed. Use it from tomorrow — but type the skeleton by hand today, because a shortcut for something you don't understand is just a magic spell.

Nesting: boxes inside boxes

Elements go inside other elements, and the rule is the same as parentheses in arithmetic: whatever you opened last, you close first. Overlap them and you get a page that renders in ways nobody intended.

Correct

<p>This is <strong>important</strong> news.</p>

strong opened last, so it closes first. The bold text sits cleanly inside the paragraph.

Broken

<p>This is <strong>important</p> news.</strong>

The paragraph closes while strong is still open. Every browser repairs this the same way, by fixed rules — but the repair is rarely what you meant: here the paragraph ends early and news. ends up bold outside it. On a real page, one overlap like this can make the layout go strange from that point down.

Indentation is how professionals keep this straight — every level of nesting moves two spaces to the right, so the structure is visible at a glance. The browser doesn't care; humans do, and you will be a human reading your own code next Tuesday. This is also exactly what Prettier does for you automatically, from Module 0.4.

Build it here first

Below is the skeleton, live. Type on the left; the page rebuilds on the right, and the fake browser tab shows your <title>. Four small challenges tick themselves off as you get them right. Nothing can break — it's your copy.

index.html — live

My first page

Challenges0 / 4

Start from this small page and make four changes. Write your answers on the lines beside each step.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My first page</title>
</head>
<body>
  <h1>Hello, world</h1>
</body>
</html>

Change the <h1> text to your own name.
Change the <title>. The browser tab shows it, not the page.
Add a <p> paragraph under the heading.
Add an <h2> and a <ul> holding three <li> items.

When you finish, the body should hold a heading, a paragraph, a second heading, and a list of three items. Type it into a file and open it in a browser to check.

Try it now · Try this, then read the explanation

In the editor above, press Enter five times between two words in the heading, and add ten spaces. Look at the preview: nothing moved. HTML collapses every run of whitespace into a single space. Line breaks and indentation are for you, not for the browser — which is why you cannot lay out a page by pressing Enter, and why Phase 2 exists at all.

Comments: notes to humans

Anything between  is ignored by the browser. Use it to label sections of a long page, or to switch a chunk of HTML off temporarily while you test something — the same move as Ctrl/Cmd + / from Module 0.4.

<!-- Contact section starts here -->
<h2>Get in touch</h2>

One warning: comments are invisible on the page but perfectly visible to anyone who views the source. Never put a password, an internal note about a client, or anything you wouldn't say out loud into a comment.

Three things beginners get wrong

1. Forgetting the closing tag. On most elements, the element then swallows everything after it, and the page looks bizarre in a way that seems unrelated to what you typed. When something goes strange from a certain point downward, look for an unclosed tag just above that point.

2. Expecting Enter and the spacebar to lay things out. They don't, as you just saw. Spacing, columns and gaps are CSS, and that's Phase 2.

3. Saving the file wrong. If your browser shows you the code as text instead of a page, the file isn't really .html — it's index.html.txt. Module 0.3 told you to turn file extensions on; this is the day it pays off.

Words you now own

tag: The label itself: <p> opens, </p> closes.
element: The whole thing — opening tag, content, closing tag.
attribute: Extra detail on an opening tag, as name="value".
void element: An element with no content and no closing tag: <img>, <br>, <hr>.
nesting: Elements inside elements. Close them in the reverse order you opened them.
doctype: The first line, telling the browser to use modern standards.
head: Information about the page. Invisible to visitors.
body: Everything visitors see.
boilerplate: The standard skeleton you start every page with.
Emmet: VS Code's built-in shorthand. ! then Tab writes the skeleton.

Assessment · Module 1.1 · Build

Now do it for real, on your own machine.

Opened the portfolio folder in VS Code with File → Open Folder. Opened index.html, deleted the test line from Module 0.4, and typed the full skeleton by hand — doctype, html, head, the two meta tags, title, body. No copy and paste. Put your own name in the <title> and an <h1> with your name in the <body>. Added a paragraph saying one true sentence about why you're learning this. Right-clicked the file in VS Code and chose Show Preview (Live Preview). The page appears — not the code. Changed the heading and watched the preview update as you typed. Confirmed your name shows in the browser tab, from the <title>. Deliberately deleted a closing </h1>, looked at what happened, then put it back. Break it on purpose once — it's cheaper than breaking it by accident later.

What you should see — one way to do it

Your index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0">
  <title>Maria Lopez</title>
</head>
<body>
  <h1>Maria Lopez</h1>
  <p>
    I'm learning to build websites so I can make one for my
    family's bakery.
  </p>
</body>
</html>

In Live Preview

A large bold name at the top, a plain paragraph beneath it, black text on white, in the browser's default font. That plainness is correct — there's no CSS yet. The preview's tab (or the browser tab, if you open it there) shows your name, from <title>.

When you deleted `</h1>`

The paragraph below turned big and bold too: the unclosed heading swallowed it. That's what "everything after it goes strange" looks like.

If you see code instead of a page

You opened the file in a text viewer, or it's secretly index.html.txt. Use Live Preview from VS Code's right-click menu.

0 / 8 This is the first thing you have built. Do every step in your own editor — the challenges above don't count for this.

Knowledge check · Module 1.1

Six questions. Four correct to move on.

0 / 6 Answer each question — you'll get the reasoning immediately, right or wrong.

Say it out loud before you leave

"A tag is a label. An element is a label plus what's inside it. The head is for the browser, the body is for people. Whitespace collapses." You have written a web page. Everything from here is more elements, better structure, and eventually a lot of CSS — but the shape of the work does not change.