Beginner learning guide

Build your first web page with HTML and CSS

Create a simple fictional club page, understand HTML and CSS, and check your learning with a short exercise.

By AI Ka School5 min readFor students ages 8–17

The short answer

What do you need to build a first web page?

You need a text editor, a browser, and a small HTML file. HTML gives your content meaning and structure; CSS changes how it looks. Start with a heading, a paragraph, and a list. You can view the file on your computer without publishing it or buying a domain.

1. Decide what your page should say

Imagine a fictional Moon Explorers club. Its page needs a name, a one-sentence introduction, and a list of activities. Sketch those three parts on paper before styling anything.

Use fictional details for your practice project. A clear page does not need your real name, photo, address, or school timetable.

2. Give the content a structure

Save the example below as index.html in a plain-text editor. Open it in a browser. The title appears in the browser tab; h1 is the main heading; p is a paragraph; ul and li create a list.

Most elements have an opening and closing tag. Keep the content between them. Indentation makes the code easier for a person to read.

Worked example

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Moon Explorers</title>
  </head>
  <body>
    <h1>Moon Explorers</h1>
    <p>A fictional club for curious space fans.</p>
    <ul>
      <li>Draw a moon base</li>
      <li>Design a paper rocket</li>
    </ul>
  </body>
</html>

3. Change the appearance with CSS

Add a style element inside head with the CSS below. The h1 selector matches the heading. The body rule sets a readable font and adds space around the content.

Change one property, save the file, and refresh the browser. Predict what you expect to see first. If nothing changes, check that you saved the same file that the browser opened.

Worked example

<style>
  body {
    font-family: sans-serif;
    max-width: 40rem;
    margin: 2rem auto;
    padding: 0 1rem;
    line-height: 1.6;
  }
  h1 {
    color: #166534;
  }
</style>

4. Check it like a visitor

Shrink the browser window. Is the page still easy to read? Does the heading describe the content? If you add a link, use a label that explains its destination.

JavaScript can add behaviour later, such as responding when a button is pressed. First make sure the content and structure work. Keep a copy of each experiment so you can compare changes.

Add a third activity inside its own li element.
Change the main heading while keeping its h1 tags.
Explain which change affects meaning and which affects appearance.

Your turn

You want every paragraph to have blue text. Which CSS selector should you use: h1, p, or li?

Make your prediction before opening the answer.

Show a hint

Find the HTML element that represents a paragraph in the example.

Check your answer

Use p, for example: p { color: blue; }. The selector chooses paragraphs. It does not change the heading or list items unless another rule applies.

Words to know

HTML: The markup language used to describe the structure and meaning of web content.
Element: A part of an HTML document, such as a heading, paragraph, or list.
CSS selector: A pattern that identifies the elements a style rule applies to.
JavaScript: A programming language often used to add behaviour to web pages.

Sources and further reading

The examples and exercises are written for this guide. Use these original references to explore the underlying concepts.

MDN: HTML — creating the content
Reference for document structure, elements, headings, and lists.
MDN: CSS — styling the content
Reference for selectors and style rules.