Advertisement
Mini Course

Build Your First Website: Complete Step-by-Step Guide

2.5 hour course • Updated: January 2024

Want to build a website but don't know where to start? This guide walks you through creating your first website from scratch. No experience needed - I'll explain everything step by step.

By the end, you'll have a working website you can show off. We'll use HTML for structure, CSS for styling, and a bit of JavaScript for interactivity.

What You'll Build

We'll create a simple personal portfolio website with:

  • Header with navigation
  • About section
  • Projects section
  • Contact form
  • Responsive design (works on mobile)

It's a complete, functional website you can customize and expand.

What You Need

Software:

  • Text editor (Visual Studio Code recommended, or any text editor)
  • Web browser (Chrome, Firefox, Edge, Safari - any works)

That's it. No expensive software, no complicated setup. Just a text editor and browser.

Step 1: Create Your Project Folder

Create a folder on your computer called "my-website" (or whatever you want). This is where all your website files will live.

Inside this folder, create three files:

  • index.html - Main HTML file
  • style.css - CSS styling file
  • script.js - JavaScript file (optional, for interactivity)

Step 2: Build the HTML Structure

Open index.html and add this basic structure: 

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">My Website</div>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home">
            <h1>Welcome to My Website</h1>
            <p>This is my first website. I built it from scratch!</p>
        </section>

        <section id="about">
            <h2>About Me</h2>
            <p>Write something about yourself here. What do you do? What are your interests?</p>
        </section>

        <section id="projects">
            <h2>My Projects</h2>
            <div class="project-grid">
                <div class="project-card">
                    <h3>Project 1</h3>
                    <p>Description of your first project.</p>
                </div>
                <div class="project-card">
                    <h3>Project 2</h3>
                    <p>Description of your second project.</p>
                </div>
            </div>
        </section>

        <section id="contact">
            <h2>Contact Me</h2>
            <form>
                <input type="text" placeholder="Your Name" required>
                <input type="email" placeholder="Your Email" required>
                <textarea placeholder="Your Message" rows="5" required></textarea>
                <button type="submit">Send Message</button>
            </form>
        </section>
    </main>

    <footer>
        <p>© 2024 My Website. All rights reserved.</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

Save the file and open it in your browser. You'll see a basic page with no styling yet. That's normal - we'll add CSS next.

Advertisement

Step 3: Add CSS Styling

Open style.css and add this: 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

header {
    background-color: #333;
    color: white;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.nav-links a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #4CAF50;
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

section {
    margin-bottom: 4rem;
    padding: 2rem 0;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #333;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.project-card {
    background-color: #f4f4f4;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.project-card h3 {
    margin-bottom: 1rem;
    color: #333;
}

form {
    max-width: 600px;
    margin-top: 2rem;
}

input, textarea {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #45a049;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 2rem;
    margin-top: 4rem;
}

@media (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        gap: 1rem;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
}

Save and refresh your browser. Your website should look much better now with colors, spacing, and a modern layout.

Step 4: Add JavaScript Interactivity

Open script.js and add this for smooth scrolling and form handling: 

// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Form submission
document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    alert('Thank you for your message! (This is just a demo - form doesn\'t actually send emails yet)');
    this.reset();
});

This adds smooth scrolling when clicking navigation links and handles form submission (currently just shows an alert).

Step 5: Customize Your Content

Now make it yours:

  • Replace "My Website" with your name or brand
  • Write your own about section
  • Add your actual projects
  • Change colors in CSS (look for color codes like #333 and #4CAF50)
  • Add your own images

To add images, create an "images" folder in your project, put images there, then use: 

<img src="images/your-image.jpg" alt="Description">

Step 6: Test Your Website

Before publishing, test everything:

  • Click all navigation links
  • Test the contact form
  • Resize your browser window (check mobile view)
  • Check for typos
  • Make sure all images load

Use browser developer tools (F12) to test mobile view. Click the device icon to see how it looks on phones.

Step 7: Publish Your Website

To put your website online, you have several options:

Free options:

  • GitHub Pages: Free hosting for static websites. Learn how to set up Git and GitHub
  • Netlify: Drag and drop your folder, get a free URL
  • Vercel: Similar to Netlify, very easy to use

Paid options (for later):

  • Buy a domain name (like yourname.com)
  • Use web hosting services (Bluehost, HostGator, etc.)

For your first website, GitHub Pages or Netlify are perfect - they're free and easy.

Common Issues and Fixes

Styles not showing:

  • Check that style.css is in the same folder as index.html
  • Make sure the link tag in HTML says href="style.css"
  • Hard refresh: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac)

Images not showing:

  • Check file path is correct
  • Make sure image file exists
  • Check file name matches exactly (case-sensitive on some servers)

JavaScript not working:

  • Open browser console (F12) to see errors
  • Make sure script.js is in the same folder
  • Check that script tag is before closing </body>

Pro Tip: Start simple, then add features. Don't try to build everything at once. Get the basic structure working, then add styling, then add interactivity. Also, use browser developer tools (F12) - they're your best friend for debugging and learning how websites work.

Next Steps

Now that you have a working website:

  • Learn more HTML and CSS (check out our HTML/CSS course)
  • Add more JavaScript features
  • Learn about responsive design
  • Study other websites (view source code to see how they're built)
  • Build more projects to practice

Common Questions

Do I need to know programming to build a website?

Not really. HTML and CSS aren't programming languages - they're markup and styling. JavaScript is programming, but you can build a nice website with just HTML and CSS. Start there, then learn JavaScript when you want interactivity.

How long does it take to build a website?

This simple website takes a few hours. More complex sites take days or weeks. Start with something simple, get it working, then add features. Don't try to build Facebook on your first try.

Can I make money from my website?

Eventually, yes. But focus on learning first. Once you can build good websites, you can freelance, get a job, or monetize your own sites. But start by learning and building.

Start Building

Open your text editor and start creating. Follow the steps above, customize it to make it yours, and publish it online. Every website starts with a single HTML file. You've got this!

Related Articles

Advertisement