Loading Multiple HTML pages and CSS

Hi everybody,

I've used the p5.js online editor with my students for remote teaching during the covid19 period. And it's really a great tool that simplify programming learning! Thanks a lot all its developpers!

Teaching not only programming but also HTML/CSS, p5js editor is also very nice to create a first HTML/CSS page, to test it and publish it online. After having learned how to make an HTML page formatted with a .css file, we then create other HTML pages and a small website. So we've got a p5.js sketch into online editor with multiple web pages, all of them applying the same 'styles.css' styles :

https://editor.p5js.org/bardyl/present/J4ZS_c853

Nature of issue?

• Found a bug

Details about the bug:

• Web browser and version: Chrome Version 83.0.4103.116 (Build officiel) (64 bits)
• Operating System: Windows 10 Pro 64 bits
• Steps to reproduce this bug:

We have two problems:

1. when we click in the first html loaded page on a link to another web page of this mini website, the other HTML page loads in the browser BUT the 'styles.css' files is not applied to this second HTML page (even if apparently the browser loads it correctly). The problem is the same for all the other web page of the site/sketch. Chrome warns this problem in its console: "Resource interpreted as Stylesheet but transferred with MIME type text/html"

2. when running the sketch from editor or accessing to the mini website with the shared fullscreen link of the project, it's not the index.html page that is loaded (it's another HTML page, always the same one, but not the default

It would be great if we could use editor.p5js.org to also learn a little bit of HTML/CSS and make small sample mini website in order to learn these topics. That means, making little project with multiples HTML pages and css file applying to all of them.

Any idea? Thanks a lot for your precious input! 😃

Laurent

Start by reproducing the linked project in Chrome, checking index.html, the other HTML pages, and styles.css through the editor and fullscreen link. Compare the browser console and loaded resources when navigating between pages. Done means the default index.html loads first and styles.css is applied to every HTML page.