Folder Structure for Static Websites

Folder Structure for Static Websites

Organizing files properly is essential when working on static websites. A well-structured project not only makes development easier but also improves readability, maintainability, and scalability.

In this article, I’ll share how I structure my static websites, my approach to file linking, and the best practices I follow when writing HTML, CSS, and JavaScript.



Why Folder Structure Matters

A clear folder structure helps with:
✔ Better maintainability – Easy to locate and update files.
✔ Faster debugging – Reduces conflicts between styles and scripts.
✔ Scalability – Easier to add new pages or features.
✔ Consistency – Useful when working on multiple projects or in a team.



Folder Structure for a Static Website

/project-root  
  ├── /static  
  │   ├── /css  
  │   │   ├── variables.css  
  │   │   ├── style.css  
  │   ├── /js  
  │   │   ├── app.js  
  │   ├── /images  
  │   │   ├── about-image.jpg  
  │   │   ├── banner-image.jpg  
  ├── index.html  
  ├── about.html  
  ├── contact.html

Folder & File Breakdown

  • /static → Contains all assets such as CSS, JavaScript, and images.
  • /css → Stores stylesheets.
  • /js → Stores JavaScript files.
  • /images → Contains images (Use proper naming conventions).
  • Root Directory → Contains HTML pages like index.html, about.html, etc.



Project Guidelines

HTML File Structure

When adding links and scripts in an HTML file, follow this sequence:

CSS Linking Order

  • CDN (if any)
  • Downloaded libraries
  • External CSS file
  • Internal CSS (if needed)
  • Custom CSS (optional)

Example:

<!-- CSS CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/...">

<!-- External CSS files -->
<link rel="stylesheet" href="./static/css/style.css">

JavaScript Linking Order

  • CDN scripts (if any)
  • Downloaded libraries
  • External JavaScript file (app.js)
  • Custom JS & function calls

Example:

<!-- JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<!-- External JavaScript -->
<script src="./static/js/app.js"></script>

<!-- Function calls (placed at the end of the body) -->
<script>
  init(); // Calling a function from app.js
</script>



Best Practices for Writing HTML, CSS, and JavaScript

HTML Best Practices

  • Use proper comments before creating a section.
  • Assign clear and meaningful class names to elements.
  • Avoid duplicate IDs to prevent conflicts.

CSS Best Practices

  • variables.css → Contains reset styles, variables, imports, and reusable styles.
  • style.css →
    • Imports variables.css at the top.
    • Proper comments before styling any section.
    • Use parent-child selection to prevent style conflicts.

Example:

/* Reset and Variables */
@import url("variables.css");

/* Header Section */
.header {
  background-color: var(--primary-color);
}

.header .logo {
  font-size: 20px;
}

JavaScript Best Practices

  • app.js → Contains all JavaScript logic and functions.
  • Write functions inside app.js and call them only on pages where needed.
  • Avoid direct function execution in global scope to prevent potential errors.

Example:

function init() {
  console.log("Website Loaded!");
}

document.addEventListener("DOMContentLoaded", init);



File System & Imports

File Linking Best Practices

  • Always use ./link when referencing files (searches from the current directory).
  • Avoid /link or link without ./, as they may cause resolution errors.

Example of Correct File Linking:

<link rel="stylesheet" href="./static/css/style.css">
<script src="./static/js/app.js"></script>



File Naming Conventions

Follow a proper naming convention to avoid confusion:

  • Recommended: custom-file.css, customFile.js
  • Avoid: custom file.css, Custom File.js, customfile.js

File names should be:

  • Consistent
  • Readable
  • Lowercase with hyphens or camelCase



Code Reusability

Avoid redundant code by reusing styles and functions whenever possible.
Structure reusable components efficiently in HTML, CSS, and JavaScript.

Example of reusable button styles in variables.css:

.btn {
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-primary {
  background-color: blue;
  color: white;
}



Final Thoughts

Maintaining a structured folder system and following best practices will save time, reduce errors, and improve collaboration in static website projects.

This approach ensures clean, scalable, and maintainable code, making development smoother.

Follow these guidelines to maintain a clean and organized project structure.

Reference Code for better understanding

Or You can Get the Starter Template from here

You can also check the get started guide here:


Rahul Yadav

Rahul Yadav

Fullstack Developer