How to setup Code Editor to Write HTML Code
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 -
- Notepad++ - https://notepad-plus-plus.org/downloads/
- Sublime Text 4 - https://www.sublimetext.com/download
- 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>
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 -
¶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.
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 - 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 - We can make any name, like -
test.html. For now, let’s go with
index.html. Please check the screenshot 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 -
¶Let’s run this code in Browser -
- Go to that html-class folder.
- Select the file - index.html.
- Right click and
- Open it with Google chrome
- It will be opened in Google chrome.
- Go to Google chrome and you’ll see something like this
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.
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 -
- Beautify https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
- Night Owl Theme https://marketplace.visualstudio.com/items?itemName=sdras.night-owl
- Prettier Code Formatter https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- VS Code Icons https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
- Path Intellisense https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
- 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.
HTML Basic Tags
All Tutorials in this playlist
Design Pattern in PHP
Laravel PHP Framework
Windows Operating system
- Bash Scripting
- C-sharp programming
- Code Editor
- Design pattern
- Express JS
- Git Commands
- Node JS
- React Js
- Vue JS
- Windows terminal
- WordPress Plugin Development