Learning to Code

A gentle, practical HTML book for beginners

Chapter 1 – What Is Code?

Code is a set of instructions you give a computer so it can do something useful: display a web page, calculate a result, store data, or respond to a button click. You write these instructions in programming languages like HTML, CSS, JavaScript, Python, and many others.

At its core, learning to code is learning how to break problems into small, clear steps that a computer can follow. You don’t need to be a “math genius”— you need patience, curiosity, and a willingness to experiment.

Tip: When you feel overwhelmed, zoom back out: “What am I trying to make the computer do, in plain language?”

Chapter 2 – Your First Tools

Text editor

To write code, you need a text editor. You can start with something simple like Notepad (Windows) or TextEdit (macOS in plain text mode), or install a dedicated editor like VS Code, Sublime Text, or Atom.

Web browser

For web development, your browser (Chrome, Edge, Firefox, Safari) is where you see your code come to life. You’ll open your .html files in the browser to test and refine your work.

Creating your first file

Try this:

  1. Create a new file: Save it as hello.html.
  2. Paste this code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>You just wrote your first web page.</p>
</body>
</html>
  1. Open it in your browser: double-click the file.
Exercise: Change the text inside <h1> and <p>, save the file, and refresh the browser. Notice how the page updates.

Chapter 3 – Thinking Like a Programmer

Breaking problems into steps

Programmers rarely solve big problems in one leap. Instead, they break them into smaller steps. For example: “Build a website” becomes “create a page,” “add a title,” “add navigation,” “add content,” and so on.

Inputs, processing, outputs

Many programs follow a simple pattern: they take input, do some processing, and produce an output. A calculator app takes numbers (input), performs math (processing), and shows the result (output).

Exercise: Pick something you use daily (a to-do list app, a search bar, a game) and write down its inputs, processing, and outputs in plain language.

Chapter 4 – HTML Basics

HTML (HyperText Markup Language) is the structure of a web page. It uses elements like headings, paragraphs, links, and images to describe what appears on the page.

Elements and tags

Most HTML elements have an opening tag and a closing tag: <p>This is a paragraph.</p>.

Common elements

<h1>My First Page</h1>
<p>I am learning HTML.</p>
<a href="https://example.com">Visit a site</a>
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>
Exercise: Add a heading, two paragraphs, and a list of three things you want to build with code.

Chapter 5 – CSS Basics

CSS (Cascading Style Sheets) controls how your page looks: colors, fonts, spacing, layout, and more.

Inline vs. internal styles

You can write CSS inside a <style> tag in your HTML file, or in a separate .css file. Here’s an internal example: 

<style>
  body {
    font-family: Arial, sans-serif;
    background: #f7f7f7;
  }
  h1 {
    color: #1d4ed8;
  }
</style>

Selectors and properties

A CSS rule has a selector (what to style) and properties (how to style it). For example: p { color: #333; } means “make all paragraphs dark gray.”

Exercise: Change the background color of the page and the color of your main heading. Refresh and see how it feels.

Chapter 6 – JavaScript Basics

JavaScript adds behavior to your page. It lets you respond to clicks, change content, and build interactive experiences.

Your first script

<button id="hello-btn">Click me</button>
<p id="message"></p>

<script>
  const button = document.getElementById("hello-btn");
  const message = document.getElementById("message");

  button.addEventListener("click", () => {
    message.textContent = "You just ran JavaScript!";
  });
</script>

Here, JavaScript “listens” for a click on the button and then changes the text of the paragraph.

Exercise: Change the message text to something personal, like “I am learning to code, one step at a time.”

Chapter 7 – Practice Projects

Small projects help you connect concepts and build confidence. Try:

Exercise: Pick one project and sketch it on paper first. What sections will it have? What text? What buttons?

Chapter 8 – How to Keep Going

Learning to code is a long-term practice, not a one-time event. You’ll forget things, get stuck, and then suddenly something will click. That’s normal.

Final thought: You don’t have to feel “ready” to call yourself a coder. If you’re writing code, experimenting, and learning—you’re already in.
Worldbuilding Teaching Module