HTML Course | Starting the Project - Creating Directories

Now we have understood the important concepts of HTML, it's time to start building a structured web project. In this chapter, you’ll learn how to set up directories and organize files efficiently. It is important to have a well-structured directory for both small and large projects, as it makes your code more manageable, scalable, and easy to navigate.

Course Navigation 

We already have learned a lot of things about HTML. We know

• The structure of an HTML Page.
• What are Tags and Elements?
• Detailed explanation about some of the Basic Tags that are most commonly used.
• Created our First Web Page to print "Hello World!" in different sizes.

Let us now begin with the project that we saw at the introduction of this course. 

Suggested Directory Layout

Here’s a standard layout to get started

Explanation of Each Folder

• index.html: The main HTML file for the homepage.
• CSS/: Contains all CSS files to style your HTML. Typically, there will be one main stylesheet (e.g., styles.css), but larger projects may have multiple CSS files.
• JS/: Stores JavaScript files for added interactivity and dynamic content on the webpage.
• Images/: Holds images used on the website, keeping them organized and easy to access.
• Assets/: Stores additional files like custom fonts, icons, or videos.

Steps to Creating the Directory Structure

1. Create the Project Folder: First, create a folder for your project, which will hold all the files and folders you’ll be working with. Name it something relevant, like HTML-Course or project-folder.
2. Add the Main HTML File: Inside the project folder, create the main HTML file, usually called index.html. This will be the homepage, which is the entry point for your website.
3. Set Up CSS and JavaScript Folders: Inside the project folder, create two folders: one named CSS for your CSS files and another named JS for JavaScript files.
4. Create the Images Folder: Add a folder named Images to store all images for the project. This keeps your images organized and avoids clutter in your main project folder.
5. Create an Assets Folder (Optional): If you have additional media, such as fonts or videos, add an Assets folder to store these files separately.

But here arise a few questions

• Why is it important to create so many folders?
• What is the convention to follow for creating folders?
• Are there any naming conventions for naming the folders and files?

So, these are a few basic questions that arise in the mind of everyone who is creating a project for the first time. 

Answers: 

• If you don't want to create any folders and instead keep all the files, images, etc in the root directory and link them properly wherever needed, your project will still work fine. But that's not enough. Making separate folders for a separate set of files makes things organized and easily understandable for others. For example, keeping all the images in a separate folder with the name "image", keeping all stylesheets in a folder named "CSS" etc.
• There is no standard convention of doing this. Every organization creates its own set of rules to keep things structured. But the basic approach which is followed is to keep separate folders for a separate set of files as explained above.
• Again there is not any standard convention of naming the files and folders except "index.html". The page named "index.html" is the base of a project which the browser considers as the homepage. So, you must name your homepage as "index.html" and for the rest of the files and folders, you can name them anything which best describes the content they have.

harsh.agarwal0

Follow

Improve

Article Tags :

• Web Technologies
• HTML
• HTML Course Basic