Why are the index.html file and the index.js and style.css file usually put in different folders?

I have found, from doing projects in fcc, that the typical way to structure files when creating a web app of some sort is as follows:
image

Why is this the case? Why not put them all in the same folder? And why are they named ‘public’ and ‘views’?

So in short: “views” refers to the page(s) the user is viewing - hence html.
“public” are files that are loaded directly into the view and as such visible to the client - usually JS and (s)css.
“private” (not present) are files which are NOT loaded into the view and as such not visible to the public - stuff executed on the server like php.

That’s also why it’s kept apart.
Also it’s kept in different folders to keep it clean. Larger project can have dozens of css and js files and that can get troublesome to navigate. Especially if the page also happens to have more than one page to view and thus several html files.
In larger projects, the folder system can get quite large, if it utilizes frameworks and modules and whatnot. So even these small project start with a best-practice of already creating folders.

1 Like

The views folder is usually because a templating engine is used with Express.

The public name I’m guessing is just some convention that was decided on.

2 Likes

The best practice in web design is to separate out the CSS into a separate stylesheet. The reason for this is that the CSS stylesheet exists for the purpose of defining the presentation style of the document . The HTML file exists to define the structure and content of the document.