VSC Preview Not Working

For the Fotomatic project in Learn to build websites i’ve been using VSC. I’ve been trying to install a good previewer for my html and css code. I’ve tried html preview, and quick html previewer but both of them have the same problem: It previews my html just fine, but I can’t see the effects of the CSS so it’s just showing me a bare Html webpage. Any ideas?
Here is a screenshot of the preview:

Hi, welcome to the forums!

It’s difficult to tell, based off just that screenshot, but is the path to your stylesheet correct?

Since you are running windows, you can save it as an html file and open it with your google browser to see if the style is working correctly.
I don’t have an Html previewer so that’s what I have to do.

I think they are correct here they are though:
< link href=“https://fonts.googleapis.com/css?family=Damion” rel=“stylesheet”>

< link href=“https://fonts.googleapis.com/css?family=Rubik” rel=“stylesheet”>

< link rel=“stylesheet” href="./resources/css/reset.css">

Thanks, how exactly would that work though? Would I hit open in browser from VSC?

Sorry, what I meant was we can’t see what the folder structure you’re working with looks like.

If you’ve got a single “top-level” folder, you can use the Visual Studio Code “Open Folder” command (CTRL + SHIFT + O) to have VSC enumerate every file and folder below it in the Explorer on the left. Here’s a snippet of what Explorer looks like if I open one of the projects I have on this PC:

image

See how you can see the subfolders, and the contents of those subfolders, relative to the parent wwwroot folder?

Without being able to see where your Fotomatic Broken code.html file is relative to your style.css file, we can’t be sure that your path is right.

(A quicker way of checking whether the path is right would be to open Fotomatic Broken code.html in any browser, hit F12 for the dev tools, and check for a 404 Not Found against the GET request for style.css… because if you’re getting a 404, the path is wrong.)

Ok. I realized I hadn’t actually opened an existing folder yet so after that I got this file tree:


I also renamed fotomatic broken code to just index.html so those two are the same do I have a problem with my tree?

Okay, I’ve been dealing with this forever and I believe I’ve found the issue. Neither the broken code or the solution code links to the style.css stylesheet ONLY the reset.css stylesheet. If you link it in your html it should make more sense.

To start it only has this link:

Afterward it should have these links:

<link rel="stylesheet" href="./resources/css/reset.css">

<link rel="stylesheet" href="resources/css/style.css">
<link rel="stylesheet" href="./resources/css/reset.css">

Sorry I never answered, our wifi has been down.

I use windows seven, so probably a bit outdated, but for me to run a HTML file from my browser I just save the HTML file with the .html extension, and tell the computer to open with windows explorer.

I have it working in VSC with the george-alisson.html-preview-vscode extension. This exercise is pretty hard though, still working through it.

Hey, After one hour struggling to fix css features and trying to know why changes weren’t showing…I saw that the stylesheet link is wrong is linked to reset.css and it should be styles.css…I was frustrated and I don’t think is the best way to teach how to debug…(I know we have to be aware of everything in the code, but we are learning and we are studying how to layout, etc…hope this helps

Thanks a lot, I’ll give that a try and let you know if it works

Thanks, I’m going to try that and I’ll let you know if it works for me.

I added a link that linked to styles.css and it worked! Thanks so much for your help!

I did just what you said and it’s working now! I agree with you it is a little bit of a frustrating way to teach debugging, but I think debugging might inherently be frustrating… Anyway thanks so much for your help!

1 Like