How can I organise my HTML and CSS files and still be able to access them across folders?

Question

I have a project that contains multiple pages of HTML, which all have different CSS files to style them. I don't want to have all of the files under one project folder, completely unorganised and just a big mess of randomly ordered files. I have tried putting different folders for different pages, but when I try and use links to travel across pages, an error appears, saying that the file has been moved, edited or deleted. I have tried searching for ways to organise my files, but have found nothing useful. How can I organise my files and pages, while still being able to travel across them with links?

Answer 1

I believe you're trying to organize your files according to their type. As in, let's say you have a lot of CSS files. I'd suggest you bunch all of them under a folder called CSS. Now, go to your HTML files and change the CSS style, link ref, as you changed the destination. Use the following code to change the file destination.

<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href"css/second.css">

I'm assuming your previous link href was "styles.css". When you changed the destination of those files, you got that error. You can even bunch HTML files. However, only shift the files except index.html.

Make a folder called 'pages'. Add all your HTML pages to go there except index.html and you're good to go. In all HTML pages, you need to use the following code to link the stylesheets -

 <link rel="stylesheet" href="css/styles.css">

If you want to link another HTML file in some HTML file, then use the following code -

href="pages/second.html"

Till now, you were directly entering file names. Now, you will follow the procedure mentioned below -

"foldername/filename.html"
"foldername/filename.css"
"foldername/filename.js"

Let me know if you face any issues. I'll help you!