How to Build Your First Website - Sahasransu Satpathy

Introduction

Building your first website is an exciting step in your web development journey. This tutorial will guide you from zero to a live website, covering HTML, CSS, and JavaScript basics.

Step 1: Setting Up Your Project

Create a project folder and basic files:

index.html
style.css
script.js

mkdir my-first-website
cd my-first-website
touch index.html style.css script.js

Step 2: HTML Structure

Create the basic structure of your webpage:

<!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>
    <h1>Welcome to My Website</h1>
  </header>
  <main>
    <p>This is my first website built from scratch!</p>
    <button id="clickMeBtn">Click Me</button>
  </main>
  <script src="script.js"></script>
</body>
</html>

Step 3: CSS Styling

Add some basic styles in style.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  text-align: center;
  margin: 0;
  padding: 0;
}

header {
  background-color: #4CAF50;
  color: white;
  padding: 20px 0;
}

button {
  padding: 10px 20px;
  margin-top: 20px;
  cursor: pointer;
}

Step 4: JavaScript Interaction

Make your button interactive with script.js:

const button = document.getElementById("clickMeBtn");

button.addEventListener("click", () => {
  alert("Congratulations! Your website is working!");
});

Step 5: Testing Your Website

Open index.html in your browser.
Click the button to verify the JavaScript works.
Modify content and styles to practice.

Step 6: Going Live

Use GitHub Pages or Netlify to host your first website online.
Commit your files and follow platform instructions to deploy.

Conclusion

By following this tutorial, you’ve built and deployed your first functional website. Continue experimenting with HTML, CSS, and JavaScript to improve your skills.

SEO Suggestions:

Main keywords: build first website, beginner web development, HTML CSS JS tutorial, website tutorial 2025
Meta description: Learn how to build your first website from scratch using HTML, CSS, and JavaScript. Step-by-step guide for beginners in 2025.
Catchy title suggestions: "Build Your First Website – Step-by-Step Guide 2025", "Create Your First Website from Scratch"