Tutorial: your first web page with HTML and CSS

In this tutorial you'll build your first web page from scratch, no frameworks or complicated tools: just a text editor and a browser. Yes, really, it's that easy. No, you don't need a PhD.

Step 1: create the project folder

Create a folder called my-first-page and open a new file called index.html. Naming a folder: difficulty level, zero.

Step 2: write the basic structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My first page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Save the file and double-click to open it: you already have a working web page in your browser. Congratulations, you're technically a "web developer" now (maybe don't put that on your resume just yet).

Step 3: add some styles

Create a styles.css file in the same folder:

body {
  font-family: sans-serif;
  background-color: #0e1e25;
  color: #ffffff;
  text-align: center;
  padding: 4rem;
}

h1 {
  color: #00e5bf;
}

Reload the page in the browser: you should see the dark background and the teal-colored title. If you see something else, don't panic: check that you actually saved the file (we've all been there, no judgment).

Step 4: add an image and a link

<img src="https://placekitten.com/300/200" alt="A cat" />
<p>
  Learn more at
  <a href="https://developer.mozilla.org/en-US/">MDN Web Docs</a>.
</p>

What did you just learn?

• How to structure a page with HTML.
• How to link a CSS file to style it.
• How to add images and links.

In the next tutorial we'll bring this page to life with JavaScript, because a pretty page that can't do anything is just... an expensive poster.