HTML Installation

Let's get our hands dirty and start preparing to write some code. In this tutorial, we will install 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 in learning to code.

Tools needed to make an HTML page: 

1) HTML Editor: It's a straightforward tool where every piece of HTML content must be written. You can use any text editor of your choice. In this tutorial, we're using Visual Studio Code because it's 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 Notepad. Text editors like VS code make these things easier.

2) Browser: HTML tags are not displayed by browsers; instead, they are read and interpreted 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 HTML to optimize its 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. You won't regret it; it's one of the best free code editors available in the market.

• Search for "Visual Studio Code download" on Google
• Download Visual Studio Code for your Operating System. I am using Windows so I will install it for Windows

Here is a quick video showing VS Code Installation:

Live Server Extension

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

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

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

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