Need Advice on Project Folder Structure

HTML-CSS
1

Being the ignorant noob that I am, I have allowed the structure for my project to become cluttered as I’ve been writing code. I want to fix that.

My thought is to create a folder at the project level with sub-folders for each Document that I create. I could do that easily enough, but most of the documents use CSS stying that is the same. I’m trying to come up with a way to prevent multiple instances of the same styling.

I’ve tried placing a “Styles” sub-folder within the project folder and a sub-folder for each Document. The styling I need isn’t being pulled in to format the screens despite each Document having a link rel=stylesheet href=/Styles/*commonName*.css statement in its<head> . . . </head> section.

My folders look like this:

Project Structure
Project Structure399×531 6.21 KB

What am I doing wrong? I can’t see it.

1 Like
2

It looks like you will need to traverse up to the parent folder and then to the Styles folder.

Your html is might be looking in it’s relative folder for BiographyPage/Styles/*commonName*.css

1 Like
3

Given the directory tree in the ss below, what is wrong with this statement? I have verified that entry.css exists in the Styles folder.

<link
        rel="stylesheet"
        href="/Hutchins_Clan_Project/Styles/entry.css" >

It is coded in the marriages.html file which lives within the Marriages_Input folder.

Directory Tree
Directory Tree1316×472 32.6 KB

4 
"/Hutchins_Clan_Project/Styles/entry.css"

For a file in the folder Marriages_Input this path will appear relative. "Marriages_Input/Hutchins_Clan_Project/Styles/entry.css" It doesn’t understand what you perceive to be the root folder.

You need to add a . to traverse to the parent folder first. "./Styles/entry.css"

Sometimes preceding with a/ as you have done indicates the “root” folder but that doesn’t seem to be working.

1 Like
5

Hi @ahraitch

You could reduce the number of folders like this:

  • birth
  • marriage: everything related to matrimony is in a separate sub folder (spouses, off-spring, divorce, et cetera)
  • death

Happy coding

1 Like
6

I figured it out. I had a type that I saw copying.

My link now looks like this in all HTML files:

        rel="stylesheet"
        href="/Styles/entry.css" >

The all work. No periods required.

1 Like