Preview using visual studio code shows file contents instead of webpage preview as described in tutorial.

Question

I'm following the tutorial to build a simple website in VSCode.

I got to the bit 'to preview using visual studio code, right-click index.html, and select Open in Default Browser.

The tutorial pictures show the simple website site displayed in the browser, like this

But for me all I get is the contents of the index.html file as shown below

The code in the files are exactly the same as those in the tutorial, albeit there is a folder called launch.json that isn't shown in the tutorial. I didn't create it myself and I didn't see it until after I had attempted preview using visual studio code as described above.

Any help that would allow me to view the stuff as shown in the tutorial would be appreciated.

This question is related to the following Learning Module

Answer 1

The easiest thing to do is just open your browser and type in <path to html> file in the address bar. That will show the HTML file.

As for why VS Code won't show it make sure you're right-clicking the .html file in the Explorer window and selecting Open in Default Browser. If you simply click on it then it'll open up in the file itself.

Also make sure the file ends with .html or .htm. I wonder if you created your file and it actually ends with .txt which means the browser will show you the raw text instead. By default Windows will create files without extensions. Depending on how you created the file it may have auto-appended a .txt to the end of the file. In the Explorer window verify the file extension. Just to be safe go to Windows Explorer, go to the Options \ View section and then find the option that says Hide extensions for known file types and uncheck it. This will show you the real filenames. Ensure your file ends with .html.

Answer 2

Hi (s) George,

Thank you for reaching out to Microsoft Q & A forum.   

Previewing your webpage in Visual Studio Code is an essential part of your development process, and we want to ensure that your experience is as smooth as possible. Rest assured; we are dedicated to assisting you in resolving any issues you may encounter effectively. 

To tackle the problem you're facing, we suggest following these steps: 

 1. Verify File Structure: Begin by confirming your index.html file is in your project's root directory. This ensures that Visual Studio Code can accurately locate and render your webpage. 

2.Review HTML Code: Take a thorough look at the content of your index.html file to ensure it aligns with the code provided in the tutorial. Even minor syntax errors can disrupt the proper rendering of your webpage. 

3.Confirm Browser Preview: When using Visual Studio Code to preview your webpage, ensure that you're selecting the correct option to open the file in your default browser. Additionally, confirm that the browser set as your default aligns with your expectations. 

4.Attempt Different Browsers: If the default browser preview option doesn't yield the desired result, try opening the index.html file directly in alternative browsers (such as Chrome or Firefox) by double-clicking on the file in your file explorer. This can help determine if the issue is specific to a particular browser. 

5.Check Visual Studio Code Settings: Explore Visual Studio Code's settings related to HTML files by navigating to File > Preferences > Settings. Review and adjust these settings as needed to ensure they align with your preferences and requirements. 

6.Inspect Browser Console: In the event that your webpage doesn't display as expected, access the developer console in your browser (typically done by pressing F12) to examine any error messages that may provide insight into loading or rendering issues. 

7.Validate Project Dependencies: Ensure that all necessary dependencies, including CSS files referenced in your HTML, are correctly linked and accessible. This ensures that your webpage can fully utilize external resources. 

By carefully following these steps, you should be able to address the issue and seamlessly preview your webpage in Visual Studio Code. 

If you encounter any future issues, please feel free to contact us, and we will be pleased to assist you further.  

If you have found the answer provided to be helpful, please click on the "Accept answer/Upvote" button so that it is useful for other members in the Microsoft Q&A community. 

Thank you.