HTML Course : Starting the Project – Creating Directories
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.
Prerequisites: Before starting the project, we first need to download a suitable code editor for writing our code. Some popular HTML text editors are given below:
- VS Code
- Sublime Text 3
Let us now begin with the project that we saw at the introduction of this course.
The very first step to take will be to create the directories. That is, the folders and files which we need to create to write codes and keep them structured for a well-compiled and clean project. Below is the list of files and folders needed:
You can clearly see in the above image the folders and files we have used in the project in the left sidebar of the editor. 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.
- 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.
Let us now dive into details about the directories that we created for our project:
- sample project: This is the root directory of our project which will contain all the folders and files which we will be creating during building the project.
- css: This folder will contain all the CSS files that we will use to style our project. For now, we have kept this folder empty.
- fonts: This folder will contain all the font files used in the project.
- images: This folder consists of all the images that we will be used in the project. For now, this is empty.
- index.html: The page named “index.html” is the base of a project which the browser considers the homepage. Everything inside this will be rendered when our website will load in the browser.