Give each folder a clear purpose
Start with one homepage and a small set of shared assets. Put styles in a CSS folder, behavior in a JavaScript folder, and images in an assets folder. A predictable structure makes the next change easier to locate.
my-website/
index.html
about/index.html
css/styles.css
js/main.js
assets/Reuse the shared pieces
Use one shared stylesheet for common typography, colors, and layout. Keep navigation labels consistent across pages. When you introduce a new page, check that its links still work from its own folder.
Make one change at a time
Write down the change you want, save a recoverable copy or version-control checkpoint, and check the result before moving on. Separate a visual adjustment from a behavior change so a problem is easier to trace.
Check the visitor’s path
- Open the homepage and follow each navigation link.
- Try the same journey at a narrow window width.
- Use the keyboard to reach links, buttons, and form inputs.
- Open a nested page directly and check its styles and images.
A small project does not need an elaborate structure. It needs a structure you can understand and maintain.
← All technology tutorials