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 the are most commonly used.
- Created our First Web Page to print “Hello World!” in different sizes.
And a lot more!
Let us now begin with the project that we saw at the introduction of this course.
The very first step to do that 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?
- Is 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 of 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 organised and easily understandable for others. For example, keeping all of the images in a separate folder with name “image”, keeping all stylesheets in a folder named “CSS” etc.
- There is no standard convention of doing this. Every organisation creates there 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 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 of the folders and files which we will be creating during building the project.
- css: This folder will contain all of 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 of the font files used in the project.
- images: This folder will contain all of the images that we will be using the project. For now, this is empty.
- index.html: The page named “index.html” is the base of a project which the browser considers as the homepage. Everything inside this will be rendered when our website will load in the browser.