What a web page is made of

Think of a house. It has walls, paint, and light switches. A web page has three parts that work the same way.

The walls: HTML

HTML holds the words and pictures. It says “this is a heading” and “this is a paragraph” and “put a picture here”.

Here’s a tiny bit of HTML:

<h1>My garden</h1>
<p>I grow tomatoes and beans.</p>

The parts in angle brackets are called tags. <h1> means “big heading”. <p> means “paragraph”. Every tag opens, and then closes with a slash: </p>.

Don’t worry about remembering tags. You’ll only use a handful, and you’ll copy them at first.

The paint: CSS

CSS says how things look. Colours, sizes, spacing, fonts. Without CSS, every page would be black text on white.

h1 {
  color: green;
}

This says: make every big heading green. That’s it. You can read it almost like English.

The light switches: JavaScript

JavaScript makes things happen when you click or type. A menu that opens. A button that counts. A box that searches.

Many pages don’t need any. A page of words and pictures works with none at all. Astro is built around that idea, and it’s why Astro sites feel fast.

You don’t write all of this by hand

Here’s the part people miss. You won’t type every tag. Astro gives you starting files. AI tools can write code for you. And most of what you write will be plain text, like a letter.

Your job is to understand what the three parts do, so you know what to change. Now you do.

Try it, if you like

Right-click any web page and choose “View page source”. That’s the HTML. It looks busy, but find a <p> and you’ll see a paragraph you just read. The page is just text, written for a browser.