HTML Setup

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.
  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.


Setting Up Visual Studio Code

Setting up an HTML project in Visual Studio Code (VS Code) is straightforward. Here’s a step-by-step guide to get you started:


Step 1: Download VS Code

  1. Open your browser and search for VS Code Download, then press Enter.
  2. Click on the first website in the search results.
  3. Click the Download button.

Step 2: Installation of VS Code

  1. Open the Downloads folder in your file manager.
  2. Select the VS Code Setup file, then right-click it and choose the Open option from the pop-up menu.
  3. In the setup window, check the box indicating I accept the agreement, then click the Next button.
  4. Select all the checkbox options, then click the Next button.
  5. The installer will automatically start the Preparing to Install process.
  6. Wait for the installation process to complete.
  7. Once the installation process is complete, uncheck the box for Launch Visual Studio Code.
  8. Finally, click the Finish button.

Step 3: Set Up Your Project Folder

  1. Create a New Project Folder:
    • Open your file explorer and create a new folder for your project (e.g., html-project).
  2. Open the Project Folder in VS Code:
    • Right click on created New Folder. then bottom side select show more options.
    • After that select Open with Code.
  3. Create a New File:
    • In the Explorer sidebar (usually on the left), right-click on your project folder and select New File.
    • Name your file with a .html extension (e.g., index.html).
    • Open your index.html file and add the following basic HTML template: 
      <!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>MSK Institute</h1>
        <p>Best for learn coding in Shikohabad.</p>
    </body>
</html>

Step 4: Install Live Server (Optional)

To view your HTML file in the browser and see changes in real time, you can use the Live Server extension.

  1. Install Live Server:
    • Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or pressing Ctrl + Shift + X.
    • Search for "Live Server".
    • Click on the Install button for the Live Server extension by Ritwick Dey.
  2. Run Live Server:
    • After installation, right-click on your index.html file in the Explorer and select Open with Live Server.
    • Your default web browser will open, displaying your HTML file. Any changes you make to the HTML will automatically refresh in the browser.

Step 5: Organize Your Project (Optional)

For larger projects, consider organizing your files by creating subfolders such as:

Step 6: Customize VS Code (Optional)

You can further customize VS Code with:

Now you have a basic HTML setup in VS Code, ready for development! Happy coding!

<<< Back Next >>>