How-To Guide

Make a Simple Website: Quick Start Guide

15 min read • Updated: January 2024

Want to make a website but think it's complicated? It's actually pretty simple. In 15 minutes, you can have a basic website running.

This quick guide shows you how to create a simple website using just HTML and CSS. No fancy tools needed - just a text editor and browser.

What You Need

Just two things:

A text editor (Notepad on Windows, TextEdit on Mac, or Visual Studio Code for a better experience)
A web browser (Chrome, Firefox, Edge, Safari - any works)

That's it. No downloads, no installations (unless you want VS Code).

Step 1: Create Your HTML File

Open your text editor and create a new file. Save it as index.html (make sure it ends with .html, not .txt).

Copy and paste this code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    
    <main>
        <section>
            <h2>About</h2>
            <p>This is my first website. I made it myself!</p>
        </section>
        
        <section>
            <h2>Contact</h2>
            <p>Email me at: your.email@example.com</p>
        </section>
    </main>
    
    <footer>
        <p>© 2024 My Website</p>
    </footer>
</body>
</html>

Save the file. Double-click it to open in your browser. You'll see a basic page with no styling yet.

Step 2: Add Some Style

Create another file called style.css in the same folder. Add this:

body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5;
}

header {
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 20px;
}

h1 {
    margin: 0;
}

main {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

section {
    margin-bottom: 30px;
}

h2 {
    color: #333;
    border-bottom: 2px solid #4CAF50;
    padding-bottom: 10px;
}

footer {
    text-align: center;
    margin-top: 20px;
    color: #666;
}

Save the CSS file. Refresh your browser (F5). Your website should look much better now with colors and styling.

Step 3: Customize It

Now make it yours:

Change the text in the HTML file
Modify colors in the CSS (change #333 and #4CAF50 to colors you like)
Add more sections
Add your own content

To change colors: Use a color picker online or hex codes. For example:

#FF5733 - Red
#3498DB - Blue
#9B59B6 - Purple
#E67E22 - Orange

Step 4: Add More Content

Want to add more? Here are some ideas:

Add an image:

<img src="your-image.jpg" alt="Description" style="max-width: 100%; height: auto;">

Put the image file in the same folder as your HTML file.

Add a link:

<a href="https://example.com">Visit Example</a>

Add a list:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Step 5: Make It Live (Optional)

To put your website online for free:

Option 1: GitHub Pages

Create a GitHub account (free)
Create a new repository
Upload your files
Go to Settings → Pages
Select "main" branch
Your site will be live at yourusername.github.io/repo-name

Option 2: Netlify

Go to netlify.com
Sign up (free)
Drag and drop your folder
Get a free URL instantly

Both options are free and take just a few minutes.

Common Issues

Styles not showing:

Make sure style.css is in the same folder as index.html
Check the file name is exactly style.css (case-sensitive on some systems)
Hard refresh: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac)

Page looks broken:

Check for typos in your HTML
Make sure all tags are closed properly
Open browser console (F12) to see errors

Changes not showing:

Make sure you saved the file
Refresh the browser
Close and reopen the HTML file

Next Steps

You now have a working website. Want to learn more?

Start simple, then add features as you learn. Every website starts with a single HTML file.

Pro Tip: Keep experimenting. Change colors, add content, try different layouts. The best way to learn is by doing. Don't worry about making it perfect - just get something working, then improve it.

Common Questions

Do I need to know programming?

Not really. HTML and CSS aren't programming languages - HTML is markup (structure) and CSS is styling. You can make a nice website with just these two. JavaScript is programming, but you don't need it for a simple website.

How long does it take?

This simple website takes about 15 minutes. More complex sites take longer, but start with something simple and build from there.

Can I make money from this?

Eventually, yes. But start by learning. Once you can build good websites, you can freelance, get a job, or create your own projects. Focus on learning first.

Start Building

Open your text editor right now and create that HTML file. Follow the steps above, customize it, and see your website come to life. It's easier than you think!