Getting Started with Visual Studio Code and Building HTML Websites

adminMarch 20, 2023

0 88 8 minutes read

YOU ARE READING: Getting Started with Visual Studio Code and Building HTML Websites AT Vccidata_En

In this article, we’ll walk through the steps required to download a popular text editor called Visual Studio Code, also known as VS Code. At the end of the article, you can 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 known as code editors, are applications used by developers to write code. You can highlight and format your code to make it easier to read and understand. If you’ve used Codecademy, you’re already familiar with a text editor. It’s where you write your code.

Reading: How to create a website using vs code

Using a text editor is part of creating your “development environment,” the collection of tools you use to work on coding projects. It allows you to put into practice what you learned on Codecademy while working on projects on your computer. Not only will this introduce you to tools commonly used by professional developers, but it also means that you’ve grown as a developer and are ready to start your own work – great work!

Specific to writing code, text editors offer a number of advantages:

Language-specific syntax highlighting
Automatic code indentation
Color schemes according to your wishes and ideas, easier to read Code
Plug-ins or add-ons to find errors in code
A tree view or visual representation of a project’s folders and files to help you easily navigate your project
Keyboard shortcuts or shortcuts for faster development

You may also have read or heard about IDEs or “integrated development editors”. With an IDE, you can not only edit your code through an application or interface, but also compile and debug it. Although the text editor we recommend is not considered an IDE, it has many IDE-like features that make life as a developer easier without using 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, not Visual Studio, which is a little 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 mentioned text editors are great for development, but to make things easier we recommend you start with Visual Studio Code. Some of the advantages 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

If you are more advanced in your programming career, you can try other code editors to to see which features best fit your personal development workflow.

II. Installing Visual Studio Code

So we’ve chosen our text editor, now we just have to install it on our computer!

Video Instructions

For the visual learners, this video describes how to download and install Visual Studio Code. Written instructions are below.

Installation Steps

The installation process for computers running macOS, Windows and Linux (especially Ubuntu and Debian) is very similar and using Visual Studio Code on all computers will be very similar .

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 is incorrect, click the down arrow and find the option that matches your operating system from the drop-down menu and click 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 recommend downloading the .deb file for automatic updates to work as suggested in the Visual Studio Code documentation.
Once the Visual Studio Code file has finished downloading, we need to install them . Locate the Visual Studio Code file in your file manager, the program that lets you view the files and folders on your computer.

Windows users: Open the .exe file by clicking on it and run the installer. Continue clicking Next and finally Finish.

Mac users: The downloaded ZIP file should be in your Downloads folder. Open the file. When you see this message, choose Open.”

See also: How To Run A Blog Series

Linux users: The downloaded file should be in your Downloads folder.

Locate it in your file manager, double click and select “Install” in the GUI software center or run the following commands one by one in the terminal:

sudo dpkg -i downloaded_filename.deb sudo apt-get install -f
Make sure you have saved your Visual Studio Code application in a location where you know you can find it easily.

Windows users: It will automatically be placed in your Start menu.

Mac users: Click on the Visual Studio Code icon and drag it from the Downloads folder to the Applications folder.

Linux users: It should appear in your system tray with programs.

That’s it, you’ve successfully installed your text editor and can start coding!

III. Exercise: Use Visual Studio Code to start an off-platform project

As you progress through various lessons and paths here on Codecademy, you may find that you are starting a project on your own computer and do not need to create the Codecademy learning environment. This can be tricky, but it’s an exciting step that signals you’re ready to work independently.

For this we must use the text editor 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 set up an organized file system. As your projects grow in number and size, it becomes increasingly important to know where to save new projects and where to find old projects.

Most developers save their projects in an easy-to-find directory (which you might be used to be naming a ‘folder’). Here at Codecademy, we recommend naming this directory projects. It saves all your coding projects. Whenever you create a new project, no matter how small, you should always create a new folder in your project directory. You’ll find that single-file projects can quickly become large multi-folder projects.

Exercise: Let’s create a project

Following are the steps that You need to follow to create a project new folder for all your programming projects. You will also learn how to load a new project folder in Visual Studio Code and create your very first “Hello World” HTML project.

We recommend watching the video above and then following the steps outlined below.

1. Create a development folder.

Browse to a folder using your file manager or terminal. Make sure it’s in a folder that you visit regularly and will remember. Create a new folder named Projects.

Mac users: This can be your user account or the “home” folder.

Windows users: You may want to save this to your C drive.

Linux users: You may want to save this to your home folder in your home folder.

Within the Projects strong > folder create a new folder named HelloWorld. Anything you add to this folder becomes part of your HelloWorld project.

2. Open Visual Studio Code

3. Open your development folder

Click the “Explorer” icon in the left menu and click the “Open Folder” button and select your development folder. This will launch your file manager.

Browse to the HelloWorld folder and select Open. The folder opens in the side panel of Visual Studio Code. At this point, the folder should not contain any content. In the next step we add a file.

4. Add a file.

Before you learn how to add files to a project folder, it’s 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, which tells the browser (and other applications) to interpret the file’s contents as an HTML document. Once Visual Studio Code loads a project folder, you can add files. The following steps describe how to add files. Don’t worry about doing this on your own computer. We’ll get to that next.

In the Visual Studio Code explorer pane, click the name of your development folder. Four icons appear to the right of the folder name. Click the New File icon. Enter the name of the new file with the appropriate file extension (e.g. .html, .css, .csv). It’s important that you include the correct file extension so programs like Linters know how to interpret the contents. Press Enter when finished.

5. Start coding!

Copy and paste the following standard HTML code:

Save your file often with the autosave feature and track changes with a version control system if you know how to use one. (To turn on autosave, click File, then click AutoSave. When it’s on, you’ll see a check mark next to AutoSave.) This reduces the chance of losing unsaved work.

File extensions and syntax highlighting

Syntax is the set of rules that tells us how to create correctly written code. Visual Studio Code and other text editors can interpret file extensions and provide language-specific syntax highlighting. Syntax highlighting is a tool to make code easier to read. Look at your index.html file. The text and the tags have different colors. Here’s how Visual Studio Code highlights HTML syntax. With each new language you learn, Visual Studio Code highlights the text so that your code is easy to read. This may differ from other text editors and also from the highlighting of your code in Codecademy.

Optional: Change the color scheme

Although Visual Studio Code includes syntax highlighting by default, you may want the used ones change colors. Good color themes make reading all those lines of code easier on your eyes. (Try low-contrast, dark themes like Solarized Dark or Dracula Dark.)

To do this, select Color Theme from the Welcome page the first time you open Visual Studio Code, or click Code “. From the menu bar at the top of your desktop window, click Settings, then click Color Theme. You can also search for color themes to install from the Extensions menu.

6. Viewing Your HTML File in a Browser

Your file is now ready to be viewed in a web browser. The following steps should be performed outside of Visual Studio Code:

Using your file manager or terminal, navigate to the index.html file in your Hello World folder.

Double-click or open index.html. The page should open in your default web browser. Second, marvel at your handiwork—you’ve created your first project using Visual Studio Code.

Advance Visual Studio Code features

If you’re already comfortable with the previous steps, explore the following features to further customize your development environment. You don’t have to use these suggestions to complete the projects on Codecademy, but they can help you write code more efficiently and make Visual Studio Code such a useful editor!

Debug code in the editor: That’s right, you can run and test code in the editor!
Version control: You don’t need to go to the terminal on your computer to track changes with Git.
Built-in Terminal: You can run command line commands from your editor using Visual Studio Code.