Satyapriya Mahato
Getting Started with HTML using VS Code

Getting Started with HTML using VS Code

Get familiar with HTML and write your first HTML code

Satyapriya Mahato's photo
Satyapriya Mahato
·

4 min read

Table of contents

Introduction

In this blog, we are going to discuss the very basics of HTML and write our first code in HTML using VS Code. So let's get started.

Installing Visual Studio Code

Steps to install Visual Studio Code:

  1. Go to the official Visual Studio Code website at code.visualstudio.com.

  2. Click on the "Download for [Your Operating System]" button (e.g. "Download for Windows," "Download for Mac," etc.).

  3. Once the download is complete, open the installer.

  4. Follow the installation wizard instructions, including accepting the license agreement and choosing where to install Visual Studio Code.

  5. You may be prompted to add Visual Studio Code to your PATH. If you're not sure, it's usually best to select "Add to PATH" so you can easily access it from your command line or terminal.

Setting up our project

Once the installation is complete, you can open Visual Studio Code by searching for it in your applications folder or by clicking on the icon that may have been created on your desktop (depending on your operating system).

  1. Create a folder giving it a name as you like.

  2. After that drag that folder to the vs code window to open the folder in vs code.

  3. Now create a file named index.html.

    • Now the question may arise why do we name index.html, and why not anything else? So in the early days, apache2 software was used as a web server, and the default configuration of the software was that if we do not have any file name then it will serve the index files available in the server be index.js or index.html and so on. Many web servers used to serve the default.html when index.html was not there. But now standard industry practice is index.html only.

  1. If we will simply open our file index.html and type ! and hit tab, we will get the HTML boiler plate template.

    • This happened due to the extension Emmet that is built-in in Visual Studio Code which allows us to write code faster. You can learn more about it in the documentation at docs.emmet.io/cheat-sheet.

    • Many times, this does not work when you open a separate file on Visual Studio Code because Emmet needs a proper folder to work on.

Writing the first line of code

  1. Before writing our first code, go to the title section and change it to whatever title you want to give your webpage.

  2. Then go to the body section and type h1 and hit the tab which will automatically give us an h1 opening and closing tag.

    • Inside that, we can write out the heading of the webpage.

  3. Save the file using ctrl + s Windows or cmd +s Mac.

  4. Open up the project folder that you have created and click on the index.html file to open it.

  1. Now index.html will be opened in our browser.

Now, if we make changes to our code and want to see that code run, we need to again save and open up the browser and refresh it, which is tedious. So to tackle this, we are going to use Visual Studio Code extensions.

Visual Studio Code Extensions

Live Server

  1. Click on the "Extensions" icon on the left-hand side of the screen. It looks like four boxes with one of them being slightly larger than the others.

  2. In the search bar at the top of the screen, type in "Live Server" and hit enter.

  3. The first result should be "Live Server" by Ritwick Dey. Click on the green "Install" button to install it.

  4. Now go to your HTML file and right-click and click on "Open with Live Server". This will allow you to see the changes without refreshing the page.

Let's see how it's doing that. If we go to our index page, right-click, and click on "Page Source", we can see that there is some script added at the bottom of our HTML which allows us to refresh the page whenever we make any change on our index file and save it.

Live Server Preview

Live server preview is a feature of live server that allows us to see the changes inside VS Code, but we cannot use the browser features like inspect and all, and it will not show the title of our page, but we can see the changes. To use this feature, we need to use the shortcut Ctrl+Shift+P in VS Code, which will open a dialog box on the top. Search for "Live Server Preview" and click on it.

Conclusion

So this was the basic setup process of VS Code and getting started with HTML. In the next blog, we will take a look at different HTML tags and how to use them. What is the importance of the different tags while making the structure of any webpage?

I hope this blog helped anyone who is looking to get started in HTML. Thank you.

HTML5codingvscode extensionsvscodeBeginner Developers