Back to Basics: Build Your First Web Page with Nothing but HTML

Part 1 of 6 in the series “Hand-Code Your CV: From Empty Folder to Live on Azure”

Before you learn a web framework, it helps to know what a web page looks like under the covers.

This series walks through building a personal CV website using only vanilla HTML, CSS and JavaScript, then putting it live on Azure. Along the way we’ll look at hosting options and how each affects cost and performance.

Why bother with the basics when frameworks exist? Because every framework, whether React, Angular, Vue or anything else, is a way of producing HTML, CSS and JavaScript. If you understand the raw ingredients, you understand what the tools are doing for you, and what they’re costing you.

Think of it as boiling an egg in your home economics class. Nobody thinks it’s the height of cuisine, but there is a simple art to it, and you need it before you attempt a soufflé.

A static page is not what most people build any more. But there are still good uses for one: a homepage in the style of your choice, a portfolio, or an online CV. That’s what we’ll build.

In this first post we’re not even going to style it. That comes in Part 2.

What you’ll need

A text editor and a browser. That’s it.

Any text editor will do. I’ll use Visual Studio Code, but use what you like. If you’re not sure what a text editor is, try one of these:

A word processor is not a text editor. Don’t use Word, Google Docs or Apple Pages. If it can’t save a plain file with a .txt extension, it’s the wrong tool. Your text editor is like your underwear: different folks find different things comfortable, and it’s nobody’s business but your own.

A quick word about text files

Lots of file formats are just text. A .csv file is text with comma-separated values. A .sql file is text containing instructions for a database. The extension we’ll use is .html, which stands for HyperText Markup Language. It tells your computer that this is a text file for a browser to interpret.

Step 1: Create a folder

Create an empty folder called my-cv. The whole website lives in a folder rather than a single file, because later we’ll add a stylesheet, a script and possibly images.

Inside it, create a file named index.html.

The name index.html is a convention: when a web server is asked for a folder, it looks for index.html by default. We’ll rely on that when we host the site.

Step 2: The bare minimum

Type this into index.html. Type it rather than pasting it, because typing makes you notice things.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>A simple page</title>
  </head>
  <body>
  </body>
</html>

HTML is a text format made of tagged elements. The tags are the bits in angle brackets. Elements come in two shapes:

<tag>content goes here</tag>
<tag />

The first has an opening tag, some content, and a closing tag (the one with the slash). The content might be text or other elements. The second is a self-closing (or “void”) element with no content. In HTML you’ll often see these written without the trailing slash, for example <meta charset="utf-8">. Both work.

Here’s what each part of our file does:

Notice that elements nest inside each other, and each one must be closed in the reverse order it was opened. Indentation isn’t required, but it makes the nesting visible and I’d strongly recommend it.

Step 3: See it in a browser

Save the file, find it in your file explorer, and open it with your browser. Or drag it onto an open browser window.

There’s one thing to watch. Double-clicking a file opens it in whatever program your computer has chosen for that file type. When you’re editing, open it in your text editor. When you’re viewing, open it in your browser. It’s the same file, opened two ways.

You should see a blank page, but look at the browser tab: it says “A simple page”. That’s your <title>. The head contains information about the page, and the title is the most visible piece.

The page is blank because we haven’t put anything in the body yet.

Step 4: Warm-up with a poem

Let’s put something in the body. Copy a poem you like from a site such as the Poetry Foundation (I like “Jabberwocky”) and paste it between the body tags:

<body>
  Paste your poem here, line breaks and all.
</body>
</html>

Save, switch to the browser, and refresh.

Something odd happens: all the line breaks vanish and the poem runs together as one paragraph. HTML ignores the line breaks and extra spaces in your source file. That’s the first big lesson about HTML: you describe the meaning of the content, not how it looks. The layout is worked out by the browser.

To fix it, we tell the browser what the pieces are. A heading, then paragraphs, with <br> for a line break inside a paragraph:

<body>
  <h1>Jabberwocky</h1>
  <p>
    First line of the verse,<br>
    second line of the verse,<br>
    and so on.
  </p>
  <p>
    The next verse goes in its own paragraph.
  </p>
</body>

Refresh, and the structure appears. <h1> is the main heading, <p> is a paragraph. Browsers give these sensible default styling, which is why even an “unstyled” page isn’t entirely plain.

Step 5: From poem to CV

Now let’s do what we came for. Replace the body with the skeleton of a CV. Here’s the complete file for this stage:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alex Morgan | Software Developer</title>
  </head>
  <body>
    <header>
      <h1>Alex Morgan</h1>
      <p>Software developer who likes understanding how things work.</p>
    </header>

    <main>
      <section id="about">
        <h2>About me</h2>
        <p>
          I build things for the web. I started with plain HTML, CSS and
          JavaScript, and I still think that is the best place to begin.
        </p>
      </section>

      <section id="experience">
        <h2>Experience</h2>
        <article>
          <h3>Software Developer, Example Ltd</h3>
          <p>2022 to present</p>
          <ul>
            <li>Built and maintained customer-facing web applications.</li>
            <li>Introduced automated deployment for the team.</li>
          </ul>
        </article>
        <article>
          <h3>Junior Developer, Sample &amp; Co</h3>
          <p>2020 to 2022</p>
          <ul>
            <li>Fixed a great many bugs, and learned from all of them.</li>
          </ul>
        </article>
      </section>

      <section id="contact">
        <h2>Contact</h2>
        <p>
          Email me at
          <a href="mailto:alex@example.com">alex@example.com</a>
          or find me on
          <a href="https://github.com/">GitHub</a>.
        </p>
      </section>
    </main>

    <footer>
      <p>Alex Morgan</p>
    </footer>
  </body>
</html>

Swap in your own details as you go. Here’s what’s new:

Save and refresh. It’s plain, it’s black on white, and the bullets are the default ones. But it’s a real web page with real structure, and you wrote every character of it.

Checkpoint

You now have a folder, my-cv, containing one file, index.html. If something isn’t showing up, check for these common mistakes:

What’s next

It works, but it looks like a document from 1995. In Part 2 we’ll add a stylesheet, learn how CSS chooses what to style, and make the CV look good on both a phone and a widescreen monitor.

Next: Part 2, Making it Look Good with CSS.