dev.to

Setting Up Your First HTML Project (Without Any Framework)

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: My First HTML Project Welcome to My Website About | Services | Contact About Me This is a simple introduction about who I am and what I do. Services Here are the services I offer. Contact Reach out to me through email or phone. © 2025 My Website. All rights reserved.

Apr 19, 2025 - 12:29
 0
Setting Up Your First HTML Project (Without Any Framework)

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:


 lang="en">

   charset="UTF-8">
   name="viewport" content="width=device-width, initial-scale=1.0">
  </span>My First HTML Project<span class="nt">
   rel="stylesheet" href="css/style.css">



  

    
Welcome to My Website

    
  


  

     id="about">
      
About Me

      
This is a simple introduction about who I am and what I do.