How to Build and Run Your First Single-Page Website in 2026 – Zero to Live in Under 10 Minutes

Every website you visit started with someone turning an idea into something a browser could display. You can do the same with just three technologies: HTML, CSS, and JavaScript.

In this tutorial, we'll build a small, modern landing page from scratch. You'll understand what each technology does, how to run your website locally, and how to prepare it for publishing online.

01 Understand the three building blocks

Before writing code, understand the role of each technology. They work together, but each has a different responsibility.

02 Create your project

Create a new folder on your computer named my-first-website.

Inside the folder, create these three files:

my-first-website/
├── index.html
├── style.css
└── script.js

The index.html file will contain the page structure. The stylesheet will control the design, while script.js will handle a small interactive feature.

03 Build the page with HTML

Open index.html and add the following code. This creates a simple landing page for a fictional digital community.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Digital Future</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>

<body>
  <header class="navbar">
    <a class="brand" href="#">digital.</a>
    <span>Ideas into reality.</span>
  </header>

  <main class="hero">
    <p class="eyebrow">YOUR NEXT CHAPTER STARTS HERE</p>

    <h1>
      Build something
      <span>that matters.</span>
    </h1>

    <p class="description">
      Explore technology, develop your skills,
      and turn your ideas into digital experiences.
    </p>

    <button id="exploreBtn">
      Explore the possibilities →
    </button>

    <p id="message" aria-live="polite"></p>
  </main>

  <footer>
    &copy; 2026 Digital Future. Built to learn.
  </footer>
</body>
</html>

Notice the class attributes. They give CSS a way to select and style specific elements. The id attributes give JavaScript a straightforward way to find the button and message.

04 Give it a modern design with CSS

Open style.css. We'll use a clean layout, bold typography, generous spacing, and a teal-to-blue accent.

* {
  box-sizing: border-box;
}

:root {
  --accent: #0d9488;
  --text: #172126;
  --muted: #66767d;
  --background: #f7fafb;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--text);
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 8%;
  border-bottom: 1px solid #e1e9eb;
}

.brand {
  color: var(--accent);
  font-size: 25px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -1px;
}

.navbar span {
  color: var(--muted);
  font-size: 14px;
}

.hero {
  width: min(850px, 88%);
  margin: auto;
  padding: 90px 0;
}

.eyebrow {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
}

h1 {
  font-size: clamp(42px, 7vw, 76px);
  line-height: 1.05;
  letter-spacing: -3px;
  margin: 22px 0;
}

h1 span {
  display: block;
  background: linear-gradient(90deg, #0d9488, #4776e6);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.description {
  max-width: 570px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.8;
}

button {
  margin-top: 24px;
  padding: 15px 22px;
  border: none;
  border-radius: 9px;
  background: var(--accent);
  color: white;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}

button:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

#message {
  color: var(--accent);
  font-weight: 600;
}

footer {
  padding: 24px 8%;
  border-top: 1px solid #e1e9eb;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 600px) {
  .navbar {
    padding: 20px 6%;
  }

  .hero {
    padding: 65px 0;
  }

  h1 {
    letter-spacing: -1.5px;
  }

  .description {
    font-size: 16px;
  }
}

The clamp() function makes the main heading scale with the screen size. The media query adjusts spacing on smaller screens, helping the page remain readable on mobile devices.

05 Add interaction with JavaScript

Now open script.js. We'll make the button display a message when someone clicks it.

const exploreBtn = document.querySelector("#exploreBtn");
const message = document.querySelector("#message");

exploreBtn.addEventListener("click", () => {
  message.textContent =
    "Your journey into web development starts now.";

  exploreBtn.textContent = "Let's build something →";
});

The code selects the button and message using their IDs. An event listener waits for a click, then updates the page. Because the script uses textContent, the message is inserted as text rather than interpreted as HTML.

06 Run your website

07 Put your website online

A website running on your own computer is not automatically accessible to everyone on the internet. To share it publicly, you need to publish the files using a hosting service.

• GitHub Pages: useful for static websites stored in a GitHub repository.
• Netlify: offers ways to deploy static sites from files or Git repositories.
• Vercel: supports static sites and many modern frontend frameworks.

For this project, you only need to publish index.html, style.css, and script.js. Make sure their paths are correct and that the hosting service is configured for your project.

08 What should you learn next?

Once this first page works, improve it gradually. You don't need to jump into a large framework immediately.

• Build a navigation bar with working section links.
• Add images and improve the layout.
• Create a contact form and learn how form submissions work.
• Learn responsive design and accessibility basics.
• Learn Git and push your project to GitHub.
• Explore React when you understand the JavaScript fundamentals.

Useful learning resources

From an idea to a live website

You've now seen how HTML builds the structure, CSS creates the design, and JavaScript adds interaction. These fundamentals are the starting point for landing pages, portfolios, student projects, and much larger web applications.

The important step is not to memorise every line. Understand what the code does, experiment with it, break things safely, and keep improving your project.