Easy and Organized Folder Structure for Static Sites 🫡

Note: Folder structures & steps are subjective, so feel free to differ, update or reject.

Everything will be in this article will be according to me by default whether it is mentioned or not. Here is my try, to explain you the process in simpler way.

We should have a separate folder for each type of project, e.g. :

• Static/ Web
• React
• Laravel
• PHP
• React Native
• Electron, etc.

Here are the points:

1. Name the folder with all small and as short as possible with only ‘-’ separating words.

2. Now open the folder in VS Code just to visualize better.

3. Now, the first file will be in the root folder which is ‘name’, without any or inside any folder The file is none other than the index.html and .gitignore also

4. Do not make any src folder here

5. then we make folder name assets.

6. Inside the assets folder, make a different folder for different language files

1. css → all CSS files go here.
2. js → all Javascript files go here.
3. imgs → All Images goes here.
4. docs → for PDF, DOCX, etc.
5. fonts → TTF, etc.
6. Folder for each page with an index.html inside it.

Note: if you are moving tailwind.config.js inside js folder make sure to updates paths in tailwind.config.js accordingly

7. Always make a folder per page and put an index.html inside the folder this make route more readable and SEO friendly

7. Try to avoid package.json from root if possible

8. Make node_modules entry in .gitignore.

Done

Let me know in comment below if anything wrong, or needs to be updated in this article or email me at kashifwahaj@gmail.com