Welcome to the Web

Why this matters

Every time you open a web page, tap a button in an app, or scroll through a feed, you're looking at the result of three technologies working together. Understanding how they divide the work is the single most useful mental model you can build before writing a line of code, because it tells you exactly what to reach for when you want to solve a particular problem.

You don't need special software or a powerful computer to start. A text editor and a web browser are enough to build real, working pages today. This chapter walks through what each piece of the puzzle does, how a browser turns your files into something you can see and click, and how to set up a comfortable place to write and test your own code.

The lesson

Three languages, three jobs

Building a website usually means writing in three different languages, and each one has a distinct job. HTML (HyperText Markup Language) describes the content and structure of a page: which parts are headings, which are paragraphs, which are images, and how they relate to one another. CSS (Cascading Style Sheets) describes how that content looks: colors, spacing, fonts, layout, and how things respond to different screen sizes. JavaScript (JS) describes behavior: what happens when you click a button, type into a form, or scroll down the page. Keeping these jobs separate is not a strict rule you must follow line by line, but it is a powerful habit. When your structure, appearance, and behavior are handled by the right tool, your code stays easier to read, easier to fix, and easier to grow.

A helpful analogy is building a house. HTML is the framing and rooms: walls, doors, and windows in their basic positions. CSS is the interior design: paint colors, furniture placement, and lighting. JavaScript is the electricity and plumbing that makes things actually do something, like turning on a light when you flip a switch. You could technically wire lights into the walls without any plan, but a house built with a clear separation between structure, style, and function is far easier to maintain and expand later. The same is true for a website.

How a browser builds the page you see

When you open a web page, your browser requests a file (usually one ending in .html) from a server or from your own computer's storage. It reads that file from top to bottom and builds an internal model of the page called the DOM, short for Document Object Model. Think of the DOM as a tree of nested boxes: a page contains a body, the body contains sections, sections contain paragraphs and images, and so on. As the browser encounters CSS, it applies visual rules to that tree, deciding colors, sizes, and positions. As it encounters JavaScript, it can run code that changes the tree, react to clicks, fetch new data, and more. This three-stage process, structure first, then style, then behavior, happens every time a page loads, which is why understanding the order matters: JavaScript that tries to change an element before that element exists in the page will fail.

A minimal web page

HTML

1<!DOCTYPE html>2<html lang="en">3  <head>4    <meta charset="UTF-8" />5    <title>My First Page</title>6  </head>7  <body>8    <h1>Hello, Web!</h1>9    <p>This paragraph is content described by HTML.</p>10  </body>11</html>

This is the smallest realistic HTML page. The doctype tells the browser to use modern rendering rules, the head holds metadata like the page title, and everything visible lives inside the body.

Setting up a place to build

To start writing your own pages, you need two things: a text editor for writing code, and a web browser for viewing the result. A code editor such as Visual Studio Code is a great free choice because it understands HTML, CSS, and JavaScript and can highlight syntax, catch typos, and suggest completions as you type. You do not need to install a server or any special software to get started. You can save a file ending in .html on your computer and simply double-click it, or drag it into a browser window, and the browser will render it immediately.

Create a folder on your computer dedicated to your practice projects.
Open that folder in a code editor like Visual Studio Code.
Create a new file named index.html; this is the conventional name browsers look for first.
Save your changes and reopen the file in your browser to see updates (refresh the tab after every save).

Using developer tools to see under the hood

Every modern browser includes built-in developer tools that let you inspect any page, including your own. You can usually open them by right-clicking anywhere on a page and choosing Inspect, or by pressing a keyboard shortcut like F12 or Cmd+Option+I. The Elements (or Inspector) panel shows you the live DOM tree, letting you click on any piece of a page to see exactly which HTML produced it and which CSS is styling it. The Console panel lets you run JavaScript directly and see messages your own scripts print out, which becomes an essential debugging habit once you start writing behavior. Getting comfortable poking around in developer tools early will save you enormous amounts of guesswork later, because you can literally watch the structure, style, and behavior of any page as you learn to build your own.

Printing a message to the console

JavaScript

1console.log("Hello from JavaScript!");2console.log(2 + 2);

Paste these two lines into your browser's console panel and press Enter. console.log is one of the most useful tools you will use throughout this course to check what your code is doing.

As you move through the rest of this course, you'll keep coming back to this same three-part model. HTML chapters will teach you how to describe structure clearly and meaningfully. CSS chapters will teach you how to make that structure look intentional. JavaScript chapters will teach you how to make it respond to people. None of it requires memorizing everything at once. Instead, focus on building the habit of opening your editor, writing a small piece of code, saving it, and immediately checking the result in your browser. That save-and-check loop is the core rhythm of building for the web, and you'll use it in every chapter from here forward.

Describing the page in its head

So far the head of a page has just held a charset declaration and a title, but a real-world page tells browsers, search engines, and social apps a lot more about itself before the body even starts. The lang attribute on the html tag, like lang="en", tells browsers and screen readers what human language the page is written in, which affects things like pronunciation in text-to-speech tools and hyphenation rules. The meta name="viewport" tag controls how the page behaves on phones and tablets: without it, mobile browsers assume your page was designed for a wide desktop screen and shrink everything down, making text tiny; with width=device-width, initial-scale=1 set, the page instead renders at the phone's actual width. A meta name="description" tag supplies the one or two sentence summary that search engines often show under your page's title in search results. Finally, a favicon, set with a link rel="icon" tag pointing at a small image file, is the little icon that shows up in a browser tab.

A complete, real-world head block

HTML

1<!DOCTYPE html>2<html lang="en">3  <head>4    <meta charset="UTF-8" />5    <meta name="viewport" content="width=device-width, initial-scale=1" />6    <meta7      name="description"8      content="A home baker's notebook of tested bread recipes."9    />10    <link rel="icon" href="favicon.ico" />11    <title>The Weekend Baker</title>12  </head>13  <body>14    <h1>The Weekend Baker</h1>15  </body>16</html>

Each meta and link tag adds one more piece of self-description: language, mobile behavior, a search-result summary, and a browser tab icon. None of them affect what's visible in the body directly.

Try it yourself

Edit the heading and paragraph text, then try adding a second paragraph of your own below the first.

<h1>Hello, Web!</h1>
<p>This is my very first web page.</p>

Live preview

Chapter boss project

Build your own about-me starter page

Using only what you've learned so far, plan and describe (in comments if needed) a simple personal page that would introduce you to a visitor. You won't need advanced tags yet; the goal of this project is to get comfortable with the full loop of writing HTML, saving it, and viewing it in a browser, plus practicing with developer tools.

Your page should include a top-level heading with a name or title, and at least two paragraphs of text. Before writing any code, sketch out on paper or in a notes app what content you want in each part of the page, so you're translating a plan into HTML rather than guessing as you go.

Give your page a proper head block: set the lang attribute on html, add a meta name="viewport" tag, and write a one-sentence meta name="description" describing the page.

Once the page is visible in your browser, open developer tools and use the Elements panel to click through your own headings and paragraphs, confirming that what you see in the inspector tree matches what you typed.

Start from the minimal page structure shown in this chapter's first code example.
Remember that everything visible to a viewer belongs inside the body tag.
The viewport meta tag's content value is always the same: width=device-width, initial-scale=1.
Save your file often and refresh the browser tab after every save to see your progress.
If something looks wrong, open developer tools and check the Elements panel before changing your code.

Level-up checklist

Tick these off once each one is true for you.