HTML/CSSBeginner45–60 minutes

Personal Website

Students learn the basic structure of the web by creating a page that opens directly in a browser. No server, account, database, or internet connection is required after the file is saved.

Starter code

Read it. Run it. Change it.

Save the code below as index.html. The example is intentionally small enough for a student to explain line by line before adding new features.

index.htmlHTML/CSS

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My First Website</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 40px auto;
      padding: 0 20px;
      line-height: 1.6;
      background: #f7f9fc;
      color: #17324d;
    }
    .card {
      background: white;
      padding: 28px;
      border-radius: 18px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }
    a { color: #0b5ee8; }
  </style>
</head>
<body>
  <div class="card">
    <h1>Hello! I'm Anaya.</h1>
    <p>I am learning how websites are built.</p>
    <h2>Things I enjoy</h2>
    <ul>
      <li>Science</li>
      <li>Cricket</li>
      <li>Drawing</li>
    </ul>
    <p>My next goal is to learn Python and build a quiz game.</p>
  </div>
</body>
</html>

How to run it on a laptop

1. Open Notepad, VS Code, or another text editor.
2. Copy the code into a file named index.html.
3. Save it, then double-click the file to open it in a web browser.
4. Edit the text or styles, save again, and refresh the browser to see the change.

Build it step by step

Create index.html

Make one text file and save it with the .html extension.

Add page structure

Use headings, paragraphs, and lists to organize content.

Add simple style

Use CSS to control spacing, fonts, and the card appearance.

Open it locally

Double-click index.html and view the website in any modern browser.

Make it your own

Add a photo from the same folder using an img tag.
Add a link to a useful learning website.
Create a second page and connect it with a navigation link.