Manual
Webpage: Anyone Can Build It
Read it to believe it! · A hands-on course for absolute beginners · 81 modules · 15–30 min lessons
0 / 81

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.