Help Creating a Proper Directory in VS Code

Hi, I’m on this page of my path and am having a hard time creating a “css” file inside of a “resources” file in VS Code, as instructed.

In finder the files show correctly as “DevProject”>“resources”>“css”>“index.css”. But in VS code it shows as “DevProject”>“resources/css”>“index.css”. Brendan, in the video, doesn’t have this problem. I’ve tried creating the folders in finder and in VS Code, but either way it changes the VS Code folder “resources” to “resources/css”.

I’m sure there must be a simple fix I’m just not finding, can anyone help me?

Could you post a screenshot of the VS Code window, please?

@codeneutrino In the left sidebar, the file name is “resources/css” instead of being a “css” file inside of “resources”. Does that help?

Hm. Perhaps it’s just doing that since there’s nothing in resources other than the css file. Try using the file path suggested by Finder.

@codeneutrino It’s displaying correctly in finder, which makes the VS Code issue extra frustrating. I tried creating the file path in finder, instead of VS Code, and had the same issue. Is that what you meant by using the file path suggested by finder?

I meant just carry on writing the code as you planned, and when it comes time to link your HTML to your CSS, use the file path that finder provides (somethingIdon'tknow/resources/css/index.css).

Ah, I see. That would be a way to get around the issue. I guess I’m just hung up because I’m doing it exactly like Brendan in the Codecademy video is doing, and not getting the same result. Is this something not worth being hung up about? Am I being pedantic about a non-issue?

Thanks a bunch for your responses, I really appreciate it!

1 Like

Honestly, I don’t really know how big a deal this issue is; I don’t really use VS Code much (gasp!) It’s possible VS Code is just condensing the folders that have nothing in them (resources only has the folder css in it). If the CSS links with the HTML, then I’d say there’s nothing to worry about. If it doesn’t, then there is…

1 Like

That’s a very solid point, I guess I’ll find out when I try to link them. Thank you for helping to calm the perfectionist in me!

1 Like

Total aside

When the root directory is well maintained and contains nothing that is not required, it will be small. It makes perfect sense to tuck support and content files away in another directory and not have them clutter up the root.

What would we expect to find in a typical root directory?

  • index.html else .php, .htm, &c.
  • robots.txt
  • favicon.ico as well as perhaps .png, &c.
  • search engine verification tokens
  • .htaccess

Little else needs to reside in the root. That said, do we need a resources folder?

+ site root/
  - index.html
  - favicon.ico
  - robots.text
  - .htaccess
  + css/
    - sitewide.css
    - custom.css
    - plugin.css
    + skin/
      - bgrd.png
      - logo.png
      - decor.png
    + lib/
      - vendor.css (jqery, bootstrap, &c.)
  + js/
    - sitewide.js
    - custom.js
    - plugin.js
    + lib/
      - vendor.js (jquery, angular, bootstrap, &c.)
  + images/
    - tiger.jpg
    - brown_bear.jpg
  + content/
    - index.html

We can have all the resources we want in the respective folders.

 /css/custom.css

is accessible from everywhere as would be any CSS file. If their skin graphics are all in the skin directory, they are directly accessible from the CSS directory. We can manage an entire site on this simple file structure, as far as supporting resources is concerned.

1 Like