Installation

Let's get our hands dirty and start preparing to write some code. In this tutorial, we will install Visual Studio Code (VS Code) and some related extensions for faster and more efficient HTML development.

What Are the Prerequisites to Learning HTML?

I can safely say that there are no prerequisites to learning HTML. HTML is the language of the web and is often the first step that web developers take when learning to code.

Tools Needed to Make an HTML Page

HTML Editor

An HTML editor is a straightforward tool where every piece of HTML content can be written. You can use any text editor of your choice. In this tutorial, we're using Visual Studio Code because it is lightweight and open-source.

Popular editors for HTML development include text editors like Notepad++ and TextEdit, code editors such as Sublime Text and Visual Studio Code, and full-fledged IDEs like WebStorm and Eclipse.

Online platforms like CodePen and JSFiddle are also commonly used for quick HTML editing and testing.

Note: You can write HTML even in a simple text editor such as Notepad. Text editors like VS Code simply make the development process easier and more efficient.

Browser

HTML tags are not directly displayed by browsers. Instead, they are read and interpreted by the browser to render the web page.

In a web browser, HTML structures are displayed in a styled and visually appealing form.

In this tutorial, we are using Google Chrome. Other commonly used browsers include Chromium, Firefox, Safari on Mac, and Microsoft Edge.

Installation & Setup of Visual Studio Code for HTML

We will install and set up the necessary tools to optimize their utility for creating web pages. Additionally, we'll install extensions in Visual Studio Code to enhance its functionality.

If you're unsure about which editor to use, you can confidently start with Visual Studio Code. It's one of the best free code editors available for web development.

Step 1: Search for Visual Studio Code

Search for "Visual Studio Code download" on Google.

Step 2: Download Visual Studio Code

Download Visual Studio Code for your operating system. In this tutorial, I'm using Windows, so I will install the Windows version.

VS Code Installation Video

Here is a quick video showing how to install Visual Studio Code:

▶

VS Code Installation Video placeholder — add the lesson video here.

Live Server Extension

In addition, we'll be installing the Live Server extension in our Visual Studio Code editor to view live-reloading web pages.

The Live Server extension is used to launch a local development server with a live reload feature for HTML pages.

Installing Live Server

Open Visual Studio Code, go to the Extensions section, and search for "Live Server". Install the extension and use it to launch your HTML pages with live reloading.

Live Server Installation Video

Here is a quick video showing the installation of the VS Code Live Server extension:

▶

Installing the VS Code Live Server Extension Video placeholder — add the lesson video here.

What's Next?

In the next lesson, we will start writing some code and review the document structure of HTML pages.