Skip to content

Help us create more tutorials! Make a donation using the Donate button or become a member using the button below to hide this banner and track your progress.

Project structure – HTML and CSS

Details

If you have a small project, you can keep your HTML and CSS files in your root folder, like this:

  • project-folder/
    • index.html
    • main.css

Add a CSS folder

If your project includes multiple CSS files, you might want to include a separate folder for them to keep your project organized. You can name it whatever you want, but it might be helpful to name it css, like this:

  • project-folder/
    • index.html
    • about.html
    • contact.html
    • css/
      • layout.css
      • fonts.css
      • colors.css

Add an assets folder

If your project includes images and CSS files, you might want to add an assets folder to hold your css and img folders, like this:

  • project-folder/
    • index.html
    • about.html
    • contact.html
    • assets/
      • css/
        • layout.css
        • fonts.css
        • colors.css
      • img/
        • image1.jpg
        • image2.jpg

If you have a lot of images, you can add subfolders to your images folder as well.

Exercises

There are no exercises for this lesson.

References

No references available.

Back to: CSS Course > CSS Building Projects