How to structure an HTML project

Coding is not an alien job, and coding is not just for developers.

Anyone from young to old can do coding. Believe me, it is thrilling. Once you start programming, you will find it engaging and want to master it. The best thing is, there is no end! There are countless programming languages and millions of projects, so learning everything is impossible. If this is your first step, then let us start with HTML.

So today, you will learn how to set up a basic HTML project structure. If you are just starting to learn web development or want to better organize your projects, this guide will explain everything to you step by step. So are you ready?

Table of Content

Create your project folder
Create the HTML file
Live Demo
Create the CSS file
Create the JS file
Open your project in a browser
Conclusion

Step 1: Create your project folder

First, create a new folder on your computer where all your files will be created. Name the folder according to the project. For example, you can name the folder MyFirstHTML.

Inside that folder, you will create your main three files. These files are:

index.html:- this is the main HTML file.
style.css:- the CSS file where you will write the styles.
script.js:- this is a javascript file, inside which you write functions, loops etc.

Step 2: Create the HTML file

After creating the index.html file, open it in a code editor. If your PC doesn’t have a code editor, install one to begin coding. Some popular code editors are suggested below. You can try them.

I recommend using Sublime Text for beginners, because it is lightweight. Otherwise, you can use Notepad. If you don't have Notepad, then use any text editor.

Now open the index.html file. Then copy the code below and paste it into the index.html file. No need to panic, this is a basic HTML coding structure. This type of structure is present on all websites. You can see it by opening the inspect mode of the browser.

HTML code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello, world!</h1>
    <p>This is my first HTML project.</p>
</body>
<script src="script.js"></script>
</html>

How does this HTML code work?

Before you know how this HTML code works, you need to know how HTML is written. HTML code is written using tags, and each tag has a different purpose. For example, the <p> tag is used for a paragraph, or the <button> tag is used for a button. These are the opening tags, and there are two types of tags:

Opening tags (<tag>)
Closing tags (</tag>)

Here, the closing tag is used to close the element. For example, in the above code, you will see two paragraph tags (<p> and </p>). There is text inside the two tags. This text will be displayed as a paragraph in the browser. However, there are many tags that do not require the use of a closing tag. For example, <br>, <img>, and <link>, etc.

So let us see how the above HTML code works.

The document type is set to HTML5 by using the <!DOCTYPE html> tag at the start of the HTML code. This tag does not need to be closed. Then there is the main <html> tag, inside which the entire HTML structure is organized. So many developers compare it to a skeleton. It sounds funny, but really like a skeleton, HTML has a <head> and <body>.

Next, added meta tags for character encoding and responsive design. Then the <title> tag has been set to show the page title. The next tag after the title is <link>. This tag also does not need to be closed. The link tag has been used to create an external link to the style.css file. It creates a concatenation between two files. After that, the head tag is closed.

The body tag is opened after the head tag is closed. In HTML, the entire page structure is done inside this body tag. Now there are two elements inside the body. These are <h1> (heading) and <p> (paragraph). Finally, the <script> tag is used. It connects the Javascript file to the HTML.

Live Demo:

Below is a live demo to help you see how the HTML project works. Click "Run Code" to see the HTML live.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, world!</h1>
    <p>This is my first HTML project.</p>
</body>
</html>

Step 3: Create the CSS file

Now open the style.css file in the code editor. Then paste the below css code in the editor.

body {
    background-color: #f0f8ff;
    text-align: center;
}

h1 {
   color: #333;
}

p {
  color: #555;
}

How does this CSS code work?

CSS stands for Cascading Style Sheets. It is used to give shape, color, and position to HTML elements. In the above code, the body of the HTML is first styled. To set the page background color, the body background-color property is set to #f0f8ff in CSS. Then the text-align is set to center. This CSS text-align property can only center text—see How to center an element using CSS.

Next, the color of the h1 element is set to #333. It will make the heading appear in black. Similarly, the p element is colored black, but it is lighter than the heading.

Step 4: Create the JS file

Copy and paste the js code given below into the script.js file.

console.log("Hello Friends");

JavaScript is a web programming language that adds interactivity to websites. Just as HTML forms the skeleton of a webpage, JavaScript acts like the nervous system—making the site capable of reacting to user actions.

The code above is a simple JavaScript program that prints a message to the console.

Step 5: Open your project in a browser

What is your favorite browser? Now open that browser. Then drag and drop the index.html file into a new tab. You will see a "Hello world" appear in front of you. Now press Ctrl+F12 to see if JavaScript is running in the background. Or, you can right-click anywhere on the webpage, select "Inspect" from the menu, and open the Developer Tools to view the console. You will see the "Hello Friends" message.

Conclusion

Organizing your HTML project well makes your code quick to manage. Using a simple folder system, placing HTML, CSS, JavaScript, and images in separate folders makes it easier to understand.