techTreksBooks

Folders and file organisation

Beginner-friendly structure

website/
├── index.html
├── about.html
├── contact.html
├── styles/
│   └── main.css
└── images/
    ├── logo.png
    └── beach.jpg
  • Put all HTML files together unless you have many; keep names lowercase with hyphens (e.g. about-us.html).
  • Keep one styles/ folder for CSS and one images/ folder for pictures.
  • Avoid spaces in filenames; stick to letters, numbers, and hyphens.

Relative paths that survive deployment

  • From index.html to the stylesheet: <link rel="stylesheet" href="styles/main.css" />
  • From about.html (same folder) to an image: <img src="images/team.jpg" alt="Team" />
  • If your HTML is in a pages/ subfolder, go up a level with ../: <link rel="stylesheet" href="../styles/main.css" />

Reliable paths prevent broken links when the site is uploaded to a server or LMS.