Watch this on Youtube
What is a Project Structure ?
A project structure refers to having a clear structure and a logical way of arranging all the different types of files and folders that make up a project, in this example, our project is a “website”.
The structure should separate the files based on their types and functionality, such as :
- HTML files for the structure,
- CSS files for styling, and
- JavaScript files for interactivity.
Furthermore, it is important to group similar files together, for example, all the images should be in one folder, all the text files in another, and so on.
What are the different parts that make up a basic website project structure?
A basic project structure for a website can include the following directories and files:
- index.html: This is the main file and Home page of a website.
- css folder: This folder contains all the CSS files, these files control the look and style of a website.
- js folder: This folder contains all the JavaScript files, these files control the interactive elements of a website, such as buttons and forms.
- img folder: This folder contains all the images, such as logos and photos.
This is a very simple structure, and as you build more complex websites, you may need to add more folders and files, but having a clear structure like this makes it easy to understand and maintain the website in the future.
Here is an example that illustrates a project structure:
What are the rules and guidelines for naming files and folders in a website project?
When organizing your files and folders for a website, It’s important to be mindful of how you name your files and folders when building a website because some computers and web servers are case-sensitive.
which means that they distinguish between upper and lowercase letters. This means that if you put an image on your website at my-site/MyImage.jpg and then in a different file you try to invoke the image as my-site/myimage.jpg, it may not work.
Another thing to be aware of is that browsers, web servers, and programming languages do not handle spaces consistently.
For example, if you use spaces in your filename, some systems may treat the filename as two filenames. Some servers will replace the spaces in your filenames with “%20” (the character code for spaces in URLs), resulting in all your links being broken.
It’s best to separate words with hyphens (-), rather than underscores ( _ ).
In summary, it is best to get into the habit of writing your folder and file names lowercase with no spaces and with words separated by hyphens.
What are the advantages of having a well-organized project structure?
Having a good project structure makes the following tasks easier:
- Navigation: A well-organized project structure makes it easy to find the files and folders you need, which improves your ability to navigate through the project.
- Understanding: A clear project structure makes it easy to understand the different parts of the project and how they work together, which improves your ability to understand the project.
- Maintenance: A well-organized project structure makes it easy to update, fix and maintain the project, which saves time and reduces the risk of errors.
- Collaboration: A clear project structure makes it easy for a team (multiple people) to work on the project at the same time, which improves collaboration and productivity.
- Scalability: A well-organized project structure makes it easy to scale the project and add new features, which allows the project to grow and evolve over time.
- SEO (Search Engine Optimisation): A good project structure with lowercase, no spaces and words separated by hyphens is beneficial for search engines optimisation.
- Portability: A clear project structure makes it easy to move the project from one location to another, which allows the project to be used in different environments.
Overall, having a good project structure can save you time and headaches, and make your website development process more efficient and smooth.