Create your first website from scratch

Every website, however complicated, ends up as files that a browser reads: HTML for the content, CSS for the look. In this tutorial you’ll write both by hand, check them on your own computer, then upload them so anyone can visit. It’s the best way to understand what WordPress and every other tool are doing for you behind the scenes.

1Step 1: Make a folder for your site

On your computer, create a folder called my-website. Everything for your site goes in here. Inside it, create one more folder called css.

2Step 2: Write your home page

Open your text editor, paste in the following and save it inside my-website as index.html. The name matters: index.html is the file a web server shows when someone visits your domain.

<!doctype html>
<html lang="en-GB">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sam Taylor: illustrator</title>
  <meta name="description" content="Sam Taylor draws maps and book covers in Bristol.">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <p class="name">Sam Taylor</p>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
    </nav>
  </header>
  <main>
    <h1>I draw maps and book covers.</h1>
    <p>I’m an illustrator in Bristol. I work with publishers, charities and anyone who needs a place drawn beautifully.</p>
    <p><a href="mailto:hello@example.co.uk">Email me about your project</a></p>
  </main>
  <footer>
    <p>© Sam Taylor</p>
  </footer>
</body>
</html>

Change the name, the words and the email address to your own. Here’s what the main parts do:

3Step 3: Add a second page

Save a copy of index.html as about.html. In the copy, change the <title>, the <meta name="description">, the <h1> and the paragraphs to tell people about you. Leave the header and footer the same, so both pages share the same navigation.

4Step 4: Give it some style

Create a new file, paste this in and save it as style.css inside the css folder:

:root { --ink: #1d2433; --accent: #c2410c; --paper: #fbfaf7; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 18px/1.6 system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
header, main, footer { max-width: 42rem; margin: 0 auto; padding: 1.5rem; }
header { display: flex; justify-content: space-between; align-items: center; }
.name { font-weight: 700; margin: 0; }
nav a { margin-left: 1rem; color: var(--ink); }
h1 { font-size: 2.4rem; line-height: 1.1; }
a { color: var(--accent); }
footer { color: #667; font-size: .9rem; }

The :root line defines three colours once, so you can change your whole colour scheme by editing one line.

5Step 5: Check it on your computer

Double-click index.html. It opens in your browser straight from your computer. Click between Home and About and check:

• Both pages show your styles (if not, check the file is at css/style.css exactly)
• Both links work
• It looks sensible when you make the browser window narrow, like a phone

Fix anything that’s wrong in your editor, save, and refresh the browser to see the change.

6Step 6: Upload it to Traxio

1. Select everything inside my-website (the two HTML files and the css folder) and compress it into a zip file. On Windows: right-click › Send to › Compressed (zipped) folder. On a Mac: right-click › Compress.
2. Log in to DirectAdmin and open File Manager (type “file” in the search box at the top if you can’t see it).
3. Go to domains › your domain › public_html. If there’s a placeholder index.html already there, delete it.
4. Upload your zip, then select it and choose Extract. Your files should now sit directly inside public_html, not in a subfolder.
5. Delete the zip file to keep things tidy.

Upload a website you’ve built covers this step in more detail, including FTP if you prefer.

7Step 7: Visit your site

Go to your domain in a browser. You should see your home page with your styles. If you see a default page instead, the files are probably in a subfolder of public_html: move them up a level. If the padlock isn’t showing yet, work through Make your site secure with HTTPS.

Check it worked

If something’s wrong

• The page looks plain, with no styles. The stylesheet path is wrong. Check the file is at public_html/css/style.css and that the link in your HTML says css/style.css, with the same capitals.
• “Index of /” or a default page. Your files aren’t directly inside public_html, or your home page isn’t called index.html. Why do I see a default page?
• Changes don’t appear. Your browser is showing a saved copy. Hold Shift and click Refresh. Why does my site show the old version?

Where to go next

You now know what every website is made of. From here you could add more pages, learn more CSS, or try a tool that writes the HTML for you, like WordPress. To edit your site comfortably from your own computer, set up SFTP next.