How to make a website with HTML, from empty folder to live site

Pick a code editor

HTML is plain text, so Notepad would technically do. A code editor is far more pleasant. It colours tags so a typo jumps out, closes tags for you, indents nested code and lists your project files in a sidebar.

Plenty of good editors are free on Windows, macOS and Linux. Choose one that still gets updates, install it, and your setup is done. Do not use a word processor. Word and its cousins save hidden formatting and curly "smart" quotes, and both break HTML.

You also need a browser, and any current one will do. Press F12 (or right-click and choose Inspect) to open its developer tools, where you can see the HTML as the browser parsed it and try CSS changes live.

Set up one folder for the whole site

Everything for the site lives in one folder. For Sam's bakery it looks like this:

my-site/
  index.html
  about.html
  style.css
  images/
    photo.jpg

Three naming habits will spare you a confusing afternoon once the files are on a real server:

• Keep names lowercase. Many servers treat Photo.jpg and photo.jpg as two different files, and your laptop probably does not, so the bug only appears after publishing.
• Use hyphens where you would type a space, so my-trip.html and never my trip.html.
• Call the home page index.html. A server sends that file when someone visits a folder address, a convention called the directory index (opens in a new tab), which is why example.com/ shows index.html.

Then open the folder itself in your editor (File, then Open Folder in most editors) so every file is one click away.

Write the skeleton of index.html

Create index.html and type out the skeleton. Typing it yourself the first few times helps it stick:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sam's Bakery - Fresh Bread Daily</title>
    <meta name="description" content="A small neighbourhood bakery baking bread and pastries every morning.">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  </body>
</html>

Nothing here is decoration. The doctype turns on standards mode, and lang tells screen readers and translation tools what language they are reading. The charset meta stops accented letters from turning into garbage. Without the viewport meta, a phone renders the page at desktop width and shrinks it until the text is unreadable. The title shows in the browser tab and as the blue headline in search results, and Google often uses the description as the grey snippet under it. The link pulls in the stylesheet we write further down.

Save and double-click the file. You should see the bakery's name in the tab and nothing else, which is correct for now. If you would prefer a finished layout to start from, the free minimalist HTML5 templates (opens in a new tab) on html5-templates.com use this same skeleton. The lessons on the page skeleton and viewport and description cover each line in depth.

Fill the body with real content

Now the <body>. Divide it into regions with the semantic layout elements, then put headings, paragraphs and lists inside:

<body>
  <header>
    <h1>Sam's Bakery</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
    </nav>
  </header>
  <main>
    <h2>Fresh every morning</h2>
    <p>We bake bread, rolls and pastries from 6 am, six days a week.</p>
    <h2>Today's favourites</h2>
    <ul>
      <li>Sourdough loaf</li>
      <li>Cinnamon rolls</li>
      <li>Seeded rye</li>
    </ul>
  </main>
  <footer>
    <p>12 Market Street. Open Monday to Saturday.</p>
  </footer>
</body>

One <h1> per page for the main topic, <h2> for each section, and no skipped levels in between. Choose elements by meaning and leave sizes to the CSS. Some people like to draft text visually first; HTML5 Editor (opens in a new tab) lets you write body content online and copy the clean source into your file. The header, nav, main and footer lesson explains how these landmarks let keyboard and screen reader users skip straight to the part they want.

Add the bread photo

Drop the photo into the images folder and point an <img> element at it:

<img src="images/photo.jpg" alt="Loaves of sourdough bread cooling on a wooden rack" width="800" height="533">

The src attribute is the path from this HTML file to the image, so images/photo.jpg reads as "photo.jpg, inside the images folder that sits next to this page". The alt text is what a screen reader announces and what appears if the file fails to load. Describe what the picture is doing on this page; a purely decorative image gets an empty alt="". Set width and height to the real pixel size so the browser can reserve the space before the file arrives and your text does not jump when it does.

Shrink photos before you use them. A picture straight off a phone is often 4 MB or more, and 1200 pixels wide covers most layouts at a tenth of the weight. If the photo needs a caption, wrap it in <figure> and add a <figcaption>. More in the images lesson, the lesson on good alt text and the img reference.

Link the two pages

One page is a flyer, and a site needs at least two. Copy index.html to about.html, then change the title, the description and the main content. Leave the <header> and <footer> alone so both pages feel like the same site.

The nav you already wrote uses relative paths. href="about.html" means "the file named about.html in this same folder". From a page inside a subfolder you would climb one level with ../, as in href="../index.html". Links to other sites need the full address:

<a href="about.html">About us</a>
<a href="https://www.example.com/">Our flour supplier</a>
<a href="mailto:[email protected]">Email us</a>

Link text should make sense read on its own. "About us" works; "click here" tells a screen reader user nothing. Then click every link, in both directions, because a broken nav link is the most common bug on a first site. The lessons on links and relative and absolute paths go further.

Give both pages one stylesheet

Create style.css in the main folder. Both pages already link to it, so each rule you add styles the whole site at once:

body {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #222;
}
img {
  max-width: 100%;
  height: auto;
}
nav a {
  margin-right: 12px;
}

The body rule centres the content and caps the line length at a comfortable 720 pixels. Do not skip the img rule. max-width: 100% lets an 800-pixel photo shrink to fit a 375-pixel phone, and height: auto stops it from being squashed. Try changing the text colour to a dark brown, save, refresh, and both pages change together. The external stylesheets lesson and the rest of module 9 teach enough CSS for a tidy site.

Check it on a phone before anyone else does

Over half of all web visits come from phones, and Sam's customers are mostly checking opening hours on the way to work. Test on a small screen first.

The quick way is device mode in developer tools: turn on the device toolbar and pick a phone size. An online previewer such as HTML Preview (opens in a new tab) does the same with custom viewport sizes and no menus to dig through. Once the site is live, open it on your own phone as well. You want text you can read without zooming, no sideways scrolling and links big enough for a thumb.

Then a short code check:

• Paste the HTML into the free W3C Markup Validation Service (opens in a new tab) to catch unclosed tags and typos.
• Put the mouse away and press Tab through the page. Every link should be reachable, with a visible focus outline.
• Confirm that every meaningful image has alt text and that each page has its own <title>.

The HTML best practices guide has a longer checklist.

Publish it for free

To be online, your files need hosting, meaning a server that is always on and hands the files to visitors. Sam's site is static (HTML, CSS and images, no database), and static sites are cheap to host. Usually they cost nothing.

Several static hosting services have free plans where you drag your folder onto a web page and get a public address within a minute. Code hosting platforms that store Git repositories can publish a repository as a website at no cost, which is a natural next step once you use version control. Schools, universities and clubs sometimes give members web space too.

A free plan gives you an address on the provider's domain, something like yourname.provider-name.app. For samsbakery.com you register the name with a domain name registrar (opens in a new tab), typically for a small yearly fee, and point it at your host. Before uploading, check that every file name matches its links exactly, capitals included, and that the home page is index.html.

Once it is live, send the link to a friend and ask them to find the opening hours on their phone. Then start the one-page portfolio project to practise again on a site of your own.