HTML 5  

How to Build a Simple Website Using Only HTML and CSS (No JavaScript)

How to Build a Simple Website Using Only HTML and CSS (No JavaScript!)

Creating a simple, beautiful website doesn’t require JavaScript—especially if you’re just starting out. Using just HTML (structure) and CSS (styling), you can build a static site that works on any device.

In this guide, you’ll learn:

  • ✅ The folder structure
  • ✅ The essential HTML structure
  • ✅ How to style with CSS
  • ✅ How to make it mobile-friendly
  • ✅ How to host it for free

1️⃣ Set Up Your Project Structure

Create a new folder for your project:

Create these two files manually or using a script:

my-website/
   index.html
   style.css
  • index.html → Your main webpage
  • style.css → Your styles

2️⃣ Write the HTML (index.html)

Here’s a basic HTML template for your site:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A simple website using HTML and CSS only">
    <title>My Simple Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </nav>
    </header>

    <main>
        <section>
            <h2>About This Site</h2>
            <p>This is a simple, responsive website built using only HTML and CSS—no JavaScript required.</p>
        </section>

        <section>
            <h2>My Work</h2>
            <p>Here’s where I showcase my projects and ideas.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 My Simple Website. All rights reserved.</p>
    </footer>
</body>
</html>

3️⃣ Add the CSS (style.css)

/* Reset default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* Header */
header {
    background: #35424a;
    color: white;
    padding: 1rem 0;
    text-align: center;
}

header nav a {
    color: white;
    margin: 0 10px;
    text-decoration: none;
}

header nav a:hover {
    text-decoration: underline;
}

/* Main Content */
main {
    max-width: 900px;
    margin: 20px auto;
    padding: 0 15px;
}

/* Footer */
footer {
    background: #35424a;
    color: white;
    text-align: center;
    padding: 1rem 0;
    margin-top: 20px;
}

/* Responsive Design */
@media (max-width: 600px) {
    header nav {
        display: flex;
        flex-direction: column;
    }

    header nav a {
        margin: 5px 0;
    }
}

4️⃣ Make It Mobile-Friendly

We’ve already included the @media query to adjust the layout for small screens.
Tip: Always test on your phone or use browser dev tools.

5️⃣ Host It for Free

You can host this site without a backend using free services like:

  • GitHub Pages
  • Netlify
  • Vercel

Just upload your two files and you’re live! 🚀

📌 Final Tips

  • Stick to semantic HTML (<header>, <main>, <footer>) for better SEO.
  • Keep your CSS organized in sections.
  • Use free tools like Google Fonts to improve typography.
  • Avoid over-complicating—the beauty of HTML & CSS is in simplicity.

✅ Best Use Cases:

  • Personal portfolio
  • Static company info site
  • Event landing page
  • Resume/CV site

If you want, I can also give you a fully polished, single-file HTML+CSS template so you can copy-paste it and have a professional site ready instantly. That way, you don’t even need two separate files.

Membership not found