How to setup Code Editor to Write HTML Code Efficiently For Beginners

How to setup Code Editor to Write HTML Code Efficiently For Beginners

In this Tutorial, we’ll going to learn how to setup Code Editor to write our HTML code.

Popular Code Editors

There are many code editors on the internet you would find. But as a beginner, we would suggest these code editors -

  1. Notepad++ - https://notepad-plus-plus.org/downloads/
  2. Sublime Text 4 - https://www.sublimetext.com/download
  3. Visual Studio Code (VS Code) - https://code.visualstudio.com

Install Code Editor - VS Code

In our entire HTML series, we would install VS code as our code editor. Let’s install visual Studio Code from https://code.visualstudio.com<br>

Download-VS-Code

Based on your operating system, you would choose that from the dropdown mentioned in the above screenshot.

Run VS Code

After Installing the VS Code as a normal software, You’ll see a page like this - Vs-code-entry

Create First HTML File and Project

Go to your Desktop. Create a folder called - html-class. We can actually add our HTML code in this folder.

Desktop-HTML-folder

Now Drag and Drop this folder to VS Code. Please see the above image.

Explore VS Code

After drop the folder inside the VS code, we can see some of the button. Please check the below screenshot - VS-Code-New-File-Folder We can create a file and folder from the VS Code, we don’t need to do that from folder anymore, now.

Create index.html file

Create a new file from VS Code by clicking the above showed button - index.html. Why index.html - We can make any name, like - class1.html, test.html. For now, let’s go with index.html. Please check the screenshot file. VS-Code-New-file

Write our First HTML Code on that Editor

Let’s write something in that HTML file and save it. Let’s write some HTML code inside that HTML file -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First Class - HTML</title>
</head>
<body>
    <h2>Welcome to First HTML Class</h2>
    <p>It's a simple paragraph of HTML. We can write long text in this paragraph</p>
</body>
</html>

Please save the file by pressing - ctrl + s ( Windows) or cmd + s(Mac). Please check the screenshot of the codes - Index-html-codes

Let’s run this code in Browser -

  1. Go to that html-class folder.
  2. Select the file - index.html.
  3. Right click and
  4. Open it with Google chrome
  5. It will be opened in Google chrome.
  6. Go to Google chrome and you’ll see something like this
HTML-code-run

Wow. We’ve just finished basics of code editor, how to run, setup our HTML file and run.

Some advanced things -

In VS Code, there is extensive Extension, you could find. Using those extension, you can make VS code a real IDE. Let’s install some of the Extensions of VS code to make easier our HTML code writings. On VS code, in the left sidebar, there is a icon for Extension. Click on that and then, you would see many extensions. You can install and make a Real-life IDE. Check the screenshot. VS-Code-extension

Only for this extension support and lot amount of extension, VS code has become one of the most popular code editor in the world, right now.

Install Extensions for our series -

  1. Beautify https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
  2. Night Owl Theme https://marketplace.visualstudio.com/items?itemName=sdras.night-owl
  3. Prettier Code Formatter https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
  4. VS Code Icons https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
  5. Path Intellisense https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
  6. Auto Close Tag https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

For more about those extension, you could search and learn on your own. That’s it for today and next day, we’ll learn the real tags of HTML.

Next
HTML Basic Tags