Live server only shows blank white screen instead of black background

I am trying to set up my three.js according to tutorials I found on Youtube. I use Visual Studio Code and I copy the script exactly but for whatever reason when I check the live server it always shows me a blank white page when it’s supposed to be black.

I have not been able to install the recommended npm to my software so I am wondering if the issue is the bootstrap CDN from Cloudflare that I put in the html section ?

I also notice when I input text like
const renderer = new THREE.WebGLRenderer();
or
const scene = new THREE.Scene();

the script turns blue.
All of the tutorials I watch online show this line of the code turning green not blue.

https://codepen.io/m0nam0nam0na/pen/qBKXvpb

Could any of this be the reason I am not getting a black background when I access the live server?

UPDATE:
I put http://127.0.0.1:5500/index.html (the white page) in the web browser clicked on "inspect element’ and received

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (mains.js, line 0)
[Error] Refused to execute http://127.0.0.1:5500/mains.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.

> Selected Element
< <html lang="en">…</html>

any input helps - thanks!

Please provide a live version of your code in jsfiddle or codepen where it can be checked for errors and then you can try to transfer it to your server and see if it works there.

Thank you will do.

I put http://127.0.0.1:5500/index.html (the white page) in the web browser clicked on "inspect element’ and received

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (mains.js, line 0)
[Error] Refused to execute http://127.0.0.1:5500/mains.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.

> Selected Element
< <html lang="en">…</html>

I have no idea what this means