Introduction
Before diving into libraries, frameworks, or complex tooling, it's essential to understand how to set up a pure HTML project from scratch.
No React, no Bootstrap, no heavy tools — just you, your editor, and the browser.
In this guide, you'll learn step-by-step how to structure, create, and organize your first real-world HTML project manually, just like developers used to do — and still often do for simple websites, prototypes, or quick projects.
Why Start Without a Framework?
- Foundation First: You understand the basics deeply without tool abstraction.
- Better Control: Full command over your codebase and file structure.
- Framework Readiness: Frameworks are built on top of HTML/CSS/JS — knowing the base makes learning frameworks easier.
- Performance: Lightweight websites without unnecessary bloat.
Step 1: Setting Up the Project Folder
Real-world developers always start with organized folders.
Project Structure Example:
my-first-html-project/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
├── images/
│ └── (your images here)
└── README.md (optional documentation)
- index.html → Main HTML file.
- css/ → All your CSS files go here.
- js/ → All your JavaScript files.
- images/ → Images and media assets.
Tip:
Even small projects benefit from early organization — it saves time later.
Step 2: Creating Your First HTML File
Create a new file named index.html
inside your project folder.
Basic Boilerplate Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Project</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<a href="#about">About</a> |
<a href="#services">Services</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>This is a simple introduction about who I am and what I do.</p>
</section>
<section id="services">
<h2>Services</h2>
<p>Here are the services I offer.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Reach out to me through email or phone.</p>
</section>
</main>
<footer>
<p>© 2025 My Website. All rights reserved.</p>
</footer>
<script src="js/script.js"></script>
</body>
</html>
Top comments (0)