Getting Started with Visual Studio Code and Building HTML Websites
In this article, we will go over the steps necessary to download a popular text editor called Visual Studio Code, also referred to as “VS Code.” By the end of the article you will be able to create a folder in Visual Studio Code that contains an HTML document that you can open in your web browser.
I. Introduction
What are ‘text editors’.
Text editors, also called code editors, are applications used by developers to write code. They can highlight and format your code so that it’s easier to read and understand. If you’ve used Codecademy, you’re already familiar with a text editor. It’s the area you write your code in.
Using a text editor is part of creating your “development environment,” the set of tools that you use for working on coding projects. It will allow you to take what you’ve learned on Codecademy and put it into practice as you work on projects on your computer. Not only will this introduce you to tools that are commonly used by professional developers but it also means that you’ve grown as a developer and are ready to start working on your own—great work!
Specific to writing code, text editors provide a number of advantages:
- Language-specific syntax highlighting
- Automatic code indentation
- Color schemes to suit your preferences and make code easier to read
- Plug-ins, or add-on programs, to catch errors in code
- A tree view, or visual representation, of a project’s folders and files, so you can conveniently navigate your project
- Key shortcuts, or combinations, for faster development
You may also have read or heard about IDEs, or “integrated development editors.” An IDE allows you to not only edit, but also compile, and debug your code through one application or interface. While the text editor we recommend isn’t considered an IDE, it has many IDE-like features that make life as a developer easier without needing a lot of resources that an IDE usually requires. The best of both worlds!
Choosing a Text Editor
There are a number of text editors to choose from. For example, Visual Studio Code is one of the most popular text editors used by developers. (That’s Visual Studio Code and not Visual Studio, which is slightly different. We want the former, the one with ‘Code’ in the name.) Other popular text editors you may have heard of are Atom and Sublime Text.
Any of these text editors mentioned are great for development but to make things easier, we suggest you start off with Visual Studio Code. Some of the benefits of this editor are:
- Free to use
- Open-source, (meaning a program’s code can be viewed, modified, and shared)
- IDE-like features
- Supported by a large community of users and Microsoft
When you are further along in your coding career, you can try other code editors to see what features work best with your personal development workflow.
II. Installing Visual Studio Code
So, we’ve chosen our text editor, now we just need to install it on our computer!
Video Instructions
For the visual learners, this video details how to download and install Visual Studio Code. Written instructions are below.
Installation Steps
The installation process for computers running macOS, Windows, and Linux, (specifically Ubuntu and Debian), will be very similar and using Visual Studio Code across all of them will be the same.
Visit the Visual Studio Code website to download the latest version of Visual Studio Code.
You should see your computer’s operating system displayed, but if it’s not correct, click on the down arrow and find the option that matches your operating system from the drop down menu and click on the down arrow icon under “Stable.”
Windows users: This will download the latest version of Visual Studio Code as an .exe file.
Mac users: This will download the latest version of Visual Studio Code for Mac as a .zip file.
Linux users: .deb and .rpm are different file types for storing data. We suggest you download the .deb file so auto-updates work as the Visual Studio Code documentation suggests.
Once the Visual Studio Code file is finished downloading, we need to install it. Find the Visual Studio Code file in your file manager, the program that lets you see the files and folders on your computer.
Windows users: Open the .exe file by clicking on it and on run the installer. Keep clicking ‘Next’ and then finally ‘Finish.’
Mac users: The downloaded .zip file should be in your ‘Downloads’ folder. Open the file. If you see this message choose “Open.”
Linux users: The downloaded file should be in your ‘Downloads’ folder.
Find it in your file manager, double click and choose ‘Install’ in the GUI software center, or run the following commands, one at a time, in the terminal:
Make sure you have your Visual Studio Code application saved in a place you know you will easily be able to find it.
Windows users: It will automatically be placed in your Start menu.
Mac users: Click and drag the Visual Studio Code icon from the Downloads folder to the Applications folder.
Linux users: It should appear in your task bar of programs.
That’s it, you’ve successfully installed your text editor and are ready to start coding!
III. Practice: Use Visual Studio Code to start an off platform project
As you move through various lessons and paths here on Codecademy, you may find yourself needing to create a project on your own computer and not on the Codecademy learning environment. This can be tricky, but it’s an exciting step that signals that you are ready to work independently.
To do this, we’ll need to use the text editor we installed above. Let’s take a moment to try out Visual Studio Code.
What are ‘development folders’?
Before using your text editor, it’s important to establish an organized file system. As the number and size of your projects grow, it becomes increasingly important to know where to save new projects and find old projects.
Most developers store their projects in an easy-to-find directory, (what you might be used to calling a ‘folder’). Here at Codecademy, we recommend naming this directory projects . It will store all of your coding projects. Whenever you create a new project, no matter how small, you should always make a new folder inside your projects directory. You will find that single-file projects can quickly turn into large, multi-folder projects.
Practice: Let’s make a project
Below are the steps you need to follow to create a new folder for all of your programming projects. You will also learn how to load a new project folder into Visual Studio Code and make your very first “hello world” HTML project.
We’d recommend that you watch the above video and then follow the written steps below.
1. Make a development folder.
Navigate to a folder using your file manager or the terminal. Make sure it is a folder you visit regularly and will remember. Create a new folder called projects .
Mac users: This may be your User account or “Home” folder.
Windows users: You may want to save this on your C drive.
Linux users: You may want to save this in your User folder inside of the “Home” folder.
Inside the projects folder, create a new folder called HelloWorld . Everything you add to this folder will be part of your HelloWorld project.
2. Open Visual Studio Code
3. open your development folder.
Click on the ‘Explorer’ icon on the left hand menu and click on the button ‘Open Folder’ and choose your development folder. This will launch your file manager.
Navigate to the HelloWorld folder and select Open. The folder will open in Visual Studio Code’s side pane. At this point, there should not be any contents in the folder. We’ll add a file in the next step.
4. Add a file.
Before you learn how to add files to a project folder, it is important to understand the purpose of file extensions. A file extension is the suffix of a filename (the last 3 or 4 characters in a filename, preceded by a period) and describes the type of content the file contains. For example, the HTML file extension is .html, and it tells the browser (and other applications) to interpret the contents of the file as an HTML document. Once Visual Studio Code loads a project folder, you can add files. The steps below describe how to add files. Don’t worry about doing this on your own computer. We’ll get to that next.
In Visual Studio Code’s Explorer pane, click on your development folder’s name. You’ll see four icons appear to the right of the folder name. Click the ’New File’ icon. Type the new file’s name with its appropriate file extension ( for example, .html, .css, .csv). It is critical that you include the correct file extension, so programs like linters know how to interpret its contents. Press Enter when done.
5. Begin coding!
Copy and paste the following boilerplate HTML code:
Save your file often with the Auto Save feature and track changes with a version control system if you know how to use one. (To turn Auto Save on, click on ‘File’ then ‘Auto Save’. When it’s on, you’ll see a check mark next to ‘Auto Save’.) This will decrease the chances of losing unsaved work.
File Extensions and Syntax Highlighting
Syntax is the set of rules that tell us how to create correctly written code. Visual Studio Code and other text editors are able to interpret file extensions and provide language-specific syntax highlighting. Syntax highlighting is a tool for making code easier to read. Take a look at your index.html file. The text and tags are different colors. This is how Visual Studio Code highlights .html syntax. With each new language you learn, Visual Studio Code will highlight text in a way that makes your code easy to read. This may be different than other text editors and also different than the way your code is highlighted on Codecademy.
Optional: Change the color scheme
Although Visual Studio Code comes with default syntax highlighting, you may want to change the colors used. Good color themes will make reading all those lines of code easy on your eyes. (Try out low contrast, dark themes like “Solarized Dark” or “Dracula Dark.”)
To do this, select Color Theme from the Welcome page when you first open Visual Studio Code, or click on Code in the menu bar at the top of your desktop window, then click on Preferences, followed by Color Theme. You can also search for color themes to install using the Extensions menu .
6. View your HTML file in the browser
At this point, your file is ready to be viewed in a web browser. The following steps should be taken outside of Visual Studio Code:
Navigate to the index.html file in your Hello World folder through your file manager or terminal.
Double click or open index.html . The page should open in your default web browser. Take second to marvel at your handiwork—you made your first project with Visual Studio Code.
Go further with Visual Studio Code’s features
If you already feel comfortable with the previous steps, explore the following features to further customize your development environment. You don’t need to use these suggestions to complete the projects on Codecademy but they can help make you more efficient when writing code and are what make Visual Studio Code such a useful editor!
Debugging code in the editor: That’s right, you can run and test code from the editor!
Version control: You don’t need to switch to the terminal on your computer to track changes with Git.
Integrated terminal: You can run command line commands from your editor with Visual Studio Code.
IV. Wrapping up
Congratulations! You’ve successfully set up your text editor and are ready to create websites on your own computer.
Happy coding!
Learn More on Codecademy
Create a front-end app with react, create an advanced web app with react and redux.
Version 1.76 is now available! Read about the new features and fixes from February.
HTML in Visual Studio Code
Visual Studio Code provides basic support for HTML programming out of the box. There is syntax highlighting, smart completions with IntelliSense, and customizable formatting. VS Code also includes great Emmet support.
IntelliSense
As you type in HTML, we offer suggestions via HTML IntelliSense. In the image below, you can see a suggested HTML element closure </div> as well as a context specific list of suggested elements.
Document symbols are also available for HTML, allowing you to quickly navigate to DOM nodes by id and class name.
You can also work with embedded CSS and JavaScript. However, note that script and style includes from other files are not followed, the language support only looks at the content of the HTML file.
You can trigger suggestions at any time by pressing ⌃Space (Windows, Linux Ctrl+Space ) .
You can also control which built-in code completion providers are active. Override these in your user or workspace settings if you prefer not to see the corresponding suggestions.
Tag elements are automatically closed when > of the opening tag is typed.
The matching closing tag is inserted when / of the closing tag is entered.
You can turn off autoclosing tags with the following setting :
Auto update tags
When modifying a tag, the linked editing feature automatically updates the matching closing tag. The feature is optional and can be enabled by setting:
Color picker
The VS Code color picker UI is now available in HTML style sections.
It supports configuration of hue, saturation and opacity for the color that is picked up from the editor. It also provides the ability to trigger between different color modes by clicking on the color string at the top of the picker. The picker appears on a hover when you are over a color definition.
Move the mouse over HTML tags or embedded styles and JavaScript to get more information on the symbol under the cursor.
The HTML language support performs validation on all embedded JavaScript and CSS.
You can turn that validation off with the following settings:
You can fold regions of source code using the folding icons on the gutter between line numbers and line start. Folding regions are available for all HTML elements for multiline comments in the source code.
Additionally you can use the following region markers to define a folding region: <!-- #region --> and <!-- endregion -->
If you prefer to switch to indentation based folding for HTML use:
To improve the formatting of your HTML source code, you can use the Format Document command ⇧⌥F (Windows Shift+Alt+F , Linux Ctrl+Shift+I ) to format the entire file or Format Selection ⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F ) to just format the selected text.
The HTML formatter is based on js-beautify . The formatting options offered by that library are surfaced in the VS Code settings :
- html.format.wrapLineLength : Maximum amount of characters per line.
- html.format.unformatted : List of tags that shouldn't be reformatted.
- html.format.contentUnformatted : List of tags, comma separated, where the content shouldn't be reformatted.
- html.format.extraLiners : List of tags that should have an extra newline before them.
- html.format.preserveNewLines : Whether existing line breaks before elements should be preserved.
- html.format.maxPreserveNewLines : Maximum number of line breaks to be preserved in one chunk.
- html.format.indentInnerHtml : Indent <head> and <body> sections.
- auto : Wrap when the line length is exceeded
- force : Wrap all attributes, except first
- force-aligned : Wrap all attributes, except first, and align attributes
- force-expand-multiline : Wrap all attributes
- aligned-multiple : Wrap when line length is exceeded, align attributes vertically
- preserve : Preserve wrapping of attributes
- preserve-aligned : Preserve wrapping of attributes but align
- html.format.wrapAttributesIndentSize : Alignment size when using force aligned and aligned multiple in html.format.wrapAttributes or null to use the default indent size.
- html.format.templating : Honor django, erb, handlebars and php templating language tags.
- html.format.unformattedContentDelimiter : Keep text content together between this string.
Tip: The formatter doesn't format the tags listed in the html.format.unformatted and html.format.contentUnformatted settings. Embedded JavaScript is formatted unless 'script' tags are excluded.
The Marketplace has several alternative formatters to choose from. If you want to use a different formatter, define "html.format.enable": false in your settings to turn off the built-in formatter.
Emmet snippets
VS Code supports Emmet snippet expansion. Emmet abbreviations are listed along with other suggestions and snippets in the editor auto-completion list.
Tip: See the HTML section of the Emmet cheat sheet for valid abbreviations.
If you'd like to use HTML Emmet abbreviations with other languages, you can associate one of the Emmet modes (such as css , html ) with other languages with the emmet.includeLanguages setting . The setting takes a language identifier and associates it with the language ID of an Emmet supported mode.
For example, to use Emmet HTML abbreviations inside JavaScript:
We also support User Defined Snippets .
HTML custom data
You can extend VS Code's HTML support through a declarative custom data format . By setting html.customData to a list of JSON files following the custom data format, you can enhance VS Code's understanding of new HTML tags, attributes and attribute values. VS Code will then offer language support such as completion & hover information for the provided tags, attributes and attribute values.
You can read more about using custom data in the vscode-custom-data repository.
HTML extensions
Install an extension to add more functionality. Go to the Extensions view ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ) and type 'html' to see a list of relevant extensions to help with creating and editing HTML.
Tip: Click on an extension tile above to read the description and reviews to decide which extension is best for you. See more in the Marketplace .
Read on to find out about:
- CSS, SCSS, and Less - VS Code has first class support for CSS including Less and SCSS.
- Emmet - Learn about VS Code's powerful built-in Emmet support.
- Emmet official documentation - Emmet, the essential toolkit for web-developers.
Common questions
Does vs code have html preview.
No, VS Code doesn't have built-in support for HTML preview but there are extensions available in the VS Code Marketplace . Open the Extensions view ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ) and search on 'live preview' or 'html preview' to see a list of available HTML preview extensions.
- EXPLORE Coupons Tech Help Pro Random Article About Us Quizzes Contribute Train Your Brain Game Improve Your English Popular Categories Arts and Entertainment Artwork Books Movies Computers and Electronics Computers Phone Skills Technology Hacks Health Men's Health Mental Health Women's Health Relationships Dating Love Relationship Issues Hobbies and Crafts Crafts Drawing Games Education & Communication Communication Skills Personal Development Studying Personal Care and Style Fashion Hair Care Personal Hygiene Youth Personal Care School Stuff Dating All Categories Arts and Entertainment Finance and Business Home and Garden Relationship Quizzes Cars & Other Vehicles Food and Entertaining Personal Care and Style Sports and Fitness Computers and Electronics Health Pets and Animals Travel Education & Communication Hobbies and Crafts Philosophy and Religion Work World Family Life Holidays and Traditions Relationships Youth
- HELP US Support wikiHow Community Dashboard Write an Article Request a New Article More Ideas...
- EDIT Edit this Article
- PRO Courses New Guides Tech Help Pro New Expert Videos About wikiHow Pro Coupons Quizzes Upgrade Sign In
- Premium wikiHow Guides
- Browse Articles
- Quizzes New
- Train Your Brain New
- Improve Your English New
- Support wikiHow
- About wikiHow
- Easy Ways to Help
- Approve Questions
- Fix Spelling
- More Things to Try...
- H&M Coupons
- Hotwire Promo Codes
- StubHub Discount Codes
- Ashley Furniture Coupons
- Blue Nile Promo Codes
- NordVPN Coupons
- Samsung Promo Codes
- Chewy Promo Codes
- Ulta Coupons
- Vistaprint Promo Codes
- Shutterfly Promo Codes
- DoorDash Promo Codes
- Office Depot Coupons
- adidas Promo Codes
- Home Depot Coupons
- DSW Coupons
- Bed Bath and Beyond Coupons
- Lowe's Coupons
- Surfshark Coupons
- Nordstrom Coupons
- Walmart Promo Codes
- Dick's Sporting Goods Coupons
- Fanatics Coupons
- Edible Arrangements Coupons
- eBay Coupons
- Log in / Sign up
- Computers and Electronics
- Website and Blog Creation
- Markup Languages
How to Run a HTML File in Visual Studio Code
Last Updated: February 13, 2023
This article was written by Stan Kats and by wikiHow staff writer, Travis Boylls . Stan Kats is the COO and Chief Technologist for The STG IT Consulting Group in West Hollywood, California. Stan provides comprehensive technology & cybersecurity solutions to businesses through managed IT services, and for individuals through his consumer service business, Stan's Tech Garage. Stan has over 7 years of cybersecurity experience, holding senior positions in information security at General Motors, AIG, and Aramark over his career. Stan received a BA in International Relations from The University of Southern California. This article has been viewed 168,385 times.
Visual Studio Code is a source code editor made by Microsoft. It is available for Windows, macOS, and Linux. It allows you to write and edit code in a variety of coding languages, including HTML. But what do you do when you want to run your HTML code to see how it looks. Luckily there are a number of extensions for Visual Studio Code that allow you to easily run HTML code from within Visual Studio Code. You can also use the Terminal to run an HTML file. This wikiHow article teaches you how to run an HTML file in Visual Studio Code.
Creating, Opening, and Saving an HTML File
- If you have not already done so, you can download Visual Studio Code for free from https://code.visualstudio.com/ . Simply click the Download button on the web page and open the installation file from within your web browser or Downloads folder. Follow the instructions to complete the installation.
- To create a new file, click File in the menu bar at the top. Then click New File . Begin typing your HTML code .
- To open an existing file, click File in the menu bar at the top. Then click Open File . Navigate to the HTML file you want to open and click it to select it. Then click Open .
- Click File in the menu bar at the top.
- Click Save as .
- Enter a file name next to "File Name."
- Use the drop-down menu next to "Save as type" to select " HTML ".
- Click Save .
Using the Terminal
- Alternatively, you can click View at the top, and then click Terminal .
- If your HTML file is saved to a different drive letter than your operating system, you will need to change to that drive letter in the terminal before you can navigate to the path of the HTML file. To do so, simply type the drive letter (i.e D: for a D: drive) and press Enter .
- If you are not sure where the HTML file is saved, you can right-click the tab for your HTML file at the top of the screen and click Copy Path . Type cd in the Terminal and then paste the path immediately after. Delete the file name at the end of the path and then press Enter .
- If any of the folders in the path to your HTML file have a space in the name, the Terminal will not be able to navigate to that folder. Use File Explorer on Windows or Finder on Mac to navigate to any folders that have a space in their name and rename those folders to remove any spaces (i.e, if you have a folder called "HTML Files," change it to "HTML_Files" instead.)
- To close the preview, simply click the "x" icon at the top of the window. [1] X Research source
Using the "HTML Preview" Extension
- Hold Alt and click the preview button to see a full-screen preview of the HTML code.
- To close the preview, simply click the "x" icon in the preview tab at the top of the screen.
Using the "Open in Browser" Extension
- Alternatively, you can click Open in Other Browser and double-click the web browser of your choice.
- If you are asked to select a default browser, click the browser you want to open the file in and click Ok .
Expert Q&A
You might also like.
Expert Interview
Thanks for reading our article! If you'd like to learn more about Computer Networking, check out our in-depth interview with Stan Kats .
- ↑ http://www.techtutorhub.com/article/How-to-Create-Run-HTML-Website-from-Visual-Studio-Code/80
- ↑ https://medium.com/geekculture/how-to-run-html-in-visual-studio-code-ba4c6818c919
About This Article
1. Open or create an HTML file in Visual Studio Code. 2. Click the Extensions button on the left side. 3. Search for "HTML Preview" and install it. 4. Click the tab for your HTML file at the top. 5. Click the icon that resembles a split-screen with a magnifying glass at the top. Did this summary help you? Yes No
- Send fan mail to authors
Is this article up to date?
Featured Articles
Trending Articles
Watch Articles
- Terms of Use
- Privacy Policy
- Do Not Sell or Share My Info
- Not Selling Info
Keep up with tech in just 5 minutes a week!
// Tutorial //
How to set up your html project with vs code.
By Erin Glass
Senior Manager, DevEd
To explore HTML in practice and begin building an HTML website, we’ll need to set up a new project using a text editor. This tutorial series uses Visual Studio Code , a free code editor available for Mac, Windows, or Linux, but you may use whichever code editor you prefer.
After opening your preferred text editor, open up a new project folder and name it html-practice . We’ll use this folder to store all the files and folders we create in the course of this tutorial series.
To create a new project folder in Visual Studio Code, navigate to the “File” menu item in the top menu and select “Add Folder to Workspace.” In the new window, click the “New Folder” button and create a new folder called html-practice as illustrated in the gif below:
Next, create a new file called index.html inside the html-practice folder. We’ll use this file through the tutorial series to experiment with HTML. If you are using Visual Studio Code, you can create a new file by using Right Click (on Windows) or CTRL + Left Click (on Mac) on the html-practice folder, selecting “New File”, and creating the file index.html as illustrated in the gif below:
You now have a project folder and file for exploring HTML. We’ll return to this file in the tutorials ahead.
Debugging and Troubleshooting CSS and HTML
Before we get started with our HTML exercises, be aware that precision is important when writing HTML. Even an extra space or mistyped character can keep your code from working as expected.
If your HTML code is not rendering in the browser as intended, make sure you have written the code exactly. To troubleshoot errors, check for extra or missing spaces, missing or misspelled tags, and missing or incorrect punctuation or characters. Each time you change your code, make sure to save your file before reloading it in the browser to check your results.
A Quick Note on Automatic HTML Support Features
Some code editors—such as the Visual Studio Code editor that we’re using in this series—provide automatic support for writing HTML code. For Visual Studio Code, that support includes smart suggestions and auto completions . While this support is often useful, be aware that you might generate extra code that will create errors if you’re not used to working with these support features. If you find these features distracting, you can turn them off in the code editor’s preferences.
We are now ready to begin learning how the CSS language works. In the next tutorial, we’ll begin exploring how CSS rules are used to control the style and layout of HTML content on a webpage.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Learn more about us
Tutorial Series: How To Build a Website with HTML
This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.
At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.
- 1/23 How To Set Up Your HTML Project With VS Code
- 2/23 How To View the Source Code of an HTML Document
- 3/23 How To Use and Understand HTML Elements
Open source advocate and lover of education, culture, and community.
Still looking for an answer?
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Popular Topics
- Linux Basics
- All tutorials
- Free Managed Hosting
Try DigitalOcean for free
Join the tech talk.
Please complete your information!
IMAGES
VIDEO
COMMENTS
1. Make a development folder. · 2. Open Visual Studio Code · 3. Open your development folder · 4. Add a file. · 5. Begin coding! · 6. View your HTML file in the
HTML in Visual Studio Code · "html.suggest.html5" true · "html.autoClosingTags" false · "editor.linkedEditing" true · "html.validate.styles" true
How to create Html Project in Visual Studio 2019 | Visual Studio community edition 2019 beginners tutorial on how to use visual studio 2019
Run HTML in visual studio code on Windows 10Hey, guys in this video I'm going to show you how you can configure visual studio code (#vscode)
SUPPORT US: https://bit.ly/32UCmzmLearn how to create a simple modern website with HTML5 and CSS using Visual Studio Code editor - Web
How to create html project in visual studio 2022 is a tutorial in HTML suitable for beginners or people who are new to Visual Studio world.
In this Video I am going to show How To Open Browser Or Run Program Directly From Visual Studio Code. In addition I am also going to show
In this video, I will show you how to Setup Visual Studio Code for HTML, JS, and CSS. Enjoy the video! ⏰Timestamps⏰ 00:00 Intro 00:30
To create a new file, click File in the menu bar at the top. Then click New File. Begin typing your HTML code. To open an existing file, click File in the menu
Some code editors—such as the Visual Studio Code editor that we're using in this series—provide automatic support for writing HTML code. For