BEGINNER'S GUIDE

Build Your First Website
in 5 Days or Less

This free guide walks you through everything from opening Notepad to uploading a live website — using only free tools already on your computer. No subscriptions, no drag-and-drop builders, no experience required.

🎯 What you'll build

A real, multi-page website with your own content — hosted live on the internet at your own URL. You'll understand every line of code you write.

🛠️ What you need

A Windows or Mac computer, a web browser (Chrome, Firefox, Safari — any works), and about 30–60 minutes per day. Everything else is covered in this guide.

Day 1

📁 Day 1 — Set Up Your Workspace

What is HTML?

HTML stands for HyperText Markup Language. It's the skeleton of every webpage on the internet — it tells your browser what content to show and how to organize it. When you visit a website, your browser is reading an HTML file and drawing what it says on screen.

HTML uses tags — short codes wrapped in angle brackets like <h1> and <p> — to mark up your content. Most tags come in pairs: an opening tag and a closing tag with a slash.

<h1>This is a big heading</h1>
<p>This is a paragraph of text.</p>
<a href="about.html">Click here</a>

Setting up your workspace

You only need two things: a text editor and a browser. On Windows, Notepad is already installed. On Mac, use TextEdit (set it to plain text mode under Format → Make Plain Text).

Create a new folder on your Desktop — call it my-website.
Open Notepad (Windows) or TextEdit (Mac).
Type (or paste) the HTML below into the editor.
Save the file as index.html inside your my-website folder. Important: make sure the filename ends in .html, not .txt.
Find the file in your folder and double-click it — it will open in your browser.

<!-- Save this as: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
</head>
<body>

    <h1>Hello, World!</h1>
    <p>Welcome to my first website.</p>

</body>
</html>

💡 Key Concept: The two sections

Every HTML page has two main sections. The <head> holds invisible information — the title that appears on your browser tab, links to stylesheets, etc. The <body> holds everything visible on the page.

Common HTML tags you'll use every day

<!-- Headings (h1 is biggest, h6 is smallest) -->
<h1>Page Title</h1>
<h2>Section Title</h2>
<h3>Sub-section</h3>

<!-- Paragraph -->
<p>A block of text goes here.</p>

<!-- Link -->
<a href="about.html">About Me</a>

<!-- Image -->
<img src="photo.jpg" alt="A description of the photo">

<!-- Lists -->
<ul>  <!-- unordered (bullet) list -->
    <li>Item one</li>
    <li>Item two</li>
</ul>

<ol>  <!-- ordered (numbered) list -->
    <li>Step one</li>
    <li>Step two</li>
</ol>

✅ Day 1 Checklist

Created a my-website folder
Wrote your first HTML file in Notepad
Saved it as index.html
Opened it in a browser and saw "Hello, World!"

Day 2

🏗️ Day 2 — Build Your First Real Page

Adding real content

Now that you know the basics, let's build a real homepage. You'll add a navigation bar, a hero section with your name and a photo, and a short about blurb. Keep editing your index.html file.

A good homepage answers three questions immediately: Who are you? What do you do? How do I contact you? Add a heading with your name, a short description, and links to your other pages.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jane Smith — Web Developer</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Navigation -->
    <nav>
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
    </nav>

    <!-- Hero / intro -->
    <header>
        <img src="photo.jpg" alt="Photo of Jane">
        <h1>Hi, I'm Jane Smith</h1>
        <p>I'm learning to build websites and this is my practice site.</p>
        <a href="about.html">Learn more about me</a>
    </header>

    <!-- Main content -->
    <main>
        <h2>What I'm working on</h2>
        <p>Currently learning HTML and CSS. Goals: build a portfolio site by the end of the month.</p>
    </main>

</body>
</html>

Adding an image

Save a photo into your my-website folder and reference it with the <img> tag. The src attribute points to the file name, and alt is a text description for screen readers and search engines. Always include alt text.

⚠️ Image file names

Use lowercase letters and hyphens for file names: my-photo.jpg not My Photo.JPG. Spaces and capital letters cause broken image links when you go live.

✅ Day 2 Checklist

Added a <nav> bar with links to other pages
Added a heading with your name
Added a photo with an alt attribute
Added a paragraph about yourself

Day 3

🎨 Day 3 — Style It With CSS

What is CSS?

CSS stands for Cascading Style Sheets. While HTML gives your page structure, CSS gives it style — colors, fonts, spacing, layout, borders, and everything visual. Without CSS, a webpage is plain black text on a white background.

You write CSS in a separate file called style.css (or any name ending in .css), then link it from your HTML page inside the <head> tag.

/* style.css — link with <link rel="stylesheet" href="style.css"> */

/* Target elements by tag name */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}

h1 {
    font-size: 36px;
    color: #1d4ed8;
}

p {
    font-size: 16px;
    line-height: 1.7;
}

/* Target by class name (use class="..." in HTML) */
.hero {
    background: #eff6ff;
    padding: 60px 20px;
    text-align: center;
}

/* Target by ID (use id="..." in HTML) */
#nav {
    background: #1e293b;
    padding: 16px 24px;
    display: flex;
    gap: 20px;
}
#nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

Colors in CSS

CSS supports colors in several formats. The most common are hex codes like #2563eb (a blue), named colors like red or navy, and RGB like rgb(37, 99, 235). You can find any color's hex code by searching "color picker" in Google.

The Box Model — spacing made simple

Every HTML element is a box. You control the space around and inside it with four properties:

padding — space inside the box, between content and border
border — the line around the box
margin — space outside the box, between it and other elements
width / height — the size of the box itself

.card {
    width: 300px;
    padding: 20px;
    margin: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;          /* rounded corners */
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

Flexbox — side-by-side layouts

The most practical CSS skill for beginners is Flexbox. Add display: flex to a container and its children line up horizontally.

/* HTML: <div class="nav"><a>Home</a><a>About</a></div> */
.nav {
    display: flex;
    gap: 20px;                   /* space between items */
    align-items: center;        /* vertically center */
    justify-content: space-between; /* spread them out */
    padding: 16px 24px;
    background: #1e293b;
}

✅ Day 3 Checklist

Created a style.css file in your project folder
Linked it with <link rel="stylesheet" href="style.css">
Changed the font, colors, and background of your page
Used padding and margin to add some breathing room

Day 4

📑 Day 4 — Add More Pages

Linking pages together

A real website has more than one page. Create new HTML files in the same folder and link between them with <a href="..."> tags. Links are relative — about.html means "a file called about.html in the same folder."

In Notepad, create a new file. Copy your index.html structure (doctype, head, body).
Change the <title> to "About Me".
Add your content inside <body>.
Save it as about.html in the same folder as index.html.

Your folder should now look like this:

my-website/
├── index.html         ← your homepage
├── about.html         ← about page
├── contact.html       ← contact page
├── style.css          ← shared stylesheet
└── photo.jpg          ← your image

💡 One stylesheet, many pages

Put the same <link rel="stylesheet" href="style.css"> in the <head> of every page. They'll all share the same look, and updating one CSS file updates every page at once.

A simple contact page

Contact pages are often the most important page — it's how people reach you. Use the <form> tag to collect information, or simply list your email with a mailto: link:

<!-- Simple mailto link -->
<a href="mailto:you@email.com">Send me an email</a>

<!-- Or use our Form Generator to build a real contact form! -->

Want a real contact form with fields? Use the Form Generator — click a field type, configure it, and copy the HTML straight into your contact.html page.

✅ Day 4 Checklist

Created about.html and contact.html
Added the same <nav> to every page
Linked the stylesheet on every page
Tested all links by clicking through in your browser

Day 5

🌐 Day 5 — Go Live

What is web hosting?

Right now your website only works on your own computer. To make it available to anyone on the internet, you need a web server — a computer that's always on and connected to the internet. Companies that rent space on these servers are called web hosts.

When you host a website, you're essentially renting a folder on someone else's server. You upload your HTML, CSS, and image files to that folder, and the hosting company makes them accessible at a web address (URL).

Option 1: StartingSites (free — no upload needed)

The easiest way to get live right now is to use the StartingSites site editor. Sign up for a free account and you get a live URL at yourname.startingsites.com — no FTP, no uploads. Just paste your HTML into the editor and click Save.

🚀 Claim Your Free Site

Option 2: FTP upload to a paid host

Most web hosts give you an FTP (File Transfer Protocol) address to connect and upload files. You need a free FTP program — FileZilla (filezilla-project.org) is the most popular option and works on Windows and Mac.

Sign up for a hosting account (1&1 IONOS, Bluehost, and SiteGround are popular beginner options).
Download and install FileZilla.
Open FileZilla, enter your host's FTP address, username, and password (provided in your hosting welcome email).
On the right side of FileZilla you'll see your server's files. Find the public_html or www folder — that's where your site goes.
On the left side, navigate to your my-website folder on your computer.
Select all your files and drag them to the right side (the server folder).
Visit your domain in a browser — your site is live!

⚠️ File names matter

Your homepage must be named index.html. Web servers automatically serve a file named index.html when someone visits your domain. Any other name won't work as a homepage.

Option 3: GitHub Pages (free, technical)

GitHub Pages lets you host a static website for free from a GitHub repository. It's a great next step once you've mastered the basics and want to learn version control. Search "GitHub Pages tutorial" for step-by-step instructions.

✅ Day 5 Checklist

Chose a hosting option
Uploaded your files (or used the StartingSites editor)
Visited your live URL in a browser
Tested all links and images on the live site
Shared the link with someone! 🎉

Ready to publish your site for free?

Sign up for StartingSites and get a live URL at yourname.startingsites.com instantly — no FTP, no setup, no credit card.

🚀 Get My Free Site

🛠️ Free tools to speed you up

Don't type table HTML by hand — use the Table Generator to build it visually and copy the code. Same for forms: the Form Generator lets you add fields and copy ready-to-use HTML in seconds.

Build Your First Websitein 5 Days or Less

What is HTML?

Setting up your workspace

Common HTML tags you'll use every day

✅ Day 1 Checklist

Adding real content

Adding an image

✅ Day 2 Checklist

What is CSS?

Colors in CSS

The Box Model — spacing made simple

Flexbox — side-by-side layouts

✅ Day 3 Checklist

Linking pages together

A simple contact page

✅ Day 4 Checklist

What is web hosting?

Option 1: StartingSites (free — no upload needed)

Option 2: FTP upload to a paid host

Option 3: GitHub Pages (free, technical)

✅ Day 5 Checklist

Ready to publish your site for free?

Build Your First Website
in 5 Days or Less