CodeNewbie Community 🌱

Aaron McCollum
Aaron McCollum

Posted on • Originally published at codingwithaaron.wordpress.com

Basic File Structure

For the past few weeks, I’ve started going through The Odin Project, after it was recommended to me by a friend. It’s been really fun! One thing that is standing out to me is that The Odin Project does more than just teach HTML/CSS/JS as part of it’s course – it’s been teaching other fundamentals of being a developer, like Git and file structure.

The latter is what I’ve been learning today, and below are the general takeaways I’ve gotten from The Odin Project, and by extension Kevin Powell. His video on basic file structures for coding can be found here: https://www.youtube.com/watch?v=ta3Oxx7Yqbo

In general, you want to:

  • Keep your HTML files in the general project directory and name your home page index.html specifically
  • Keep names lowercase, as it will work better with the server
  • Create sub-directories (folders) in your project for CSS style sheets, JavaScript, and images
  • Recommended to keep the names of those sub-directories and file names short, but also descriptive, so that it’s easy to reference and code

Some other cool tidbits I learned today:

To link files in HTML from a subdirectory, the formula you want to follow is href="dir/file.exe" for files and src="dir/img.exe" for images.

If you like a live URL inside an anchor tag, you need to include the http:// at the beginning, otherwise your browser will think it needs to look inside your project directory, not the internet, for the link! I have known that I needed the http at the beginning, but I never knew the reason why.

If you are using a relative link to a file in the same directory your current file is in, you just need to write href="filename.exe". There does not need to be any directory or parent dots (..) listed.

Top comments (0)