HTML
How to setup Code Editor to Write HTML Code Efficiently For Beginners
- Popular Code Editors
- Install Code Editor - VS Code
- Run VS Code
- Create First HTML File and Project
- Explore VS Code
- Create index.html file
- Write our First HTML Code on that Editor
- Let’s run this code in Browser -
- Some advanced things -
- Install Extensions for our series -
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
. 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.
¶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
Popular Tutorials
Categories
-
Artificial Intelligence (AI)
11
-
Bash Scripting
1
-
Bootstrap CSS
0
-
C Programming
14
-
C#
0
-
ChatGPT
1
-
Code Editor
2
-
Computer Engineering
3
-
CSS
28
-
Data Structure and Algorithm
18
-
Design Pattern in PHP
2
-
Design Patterns - Clean Code
1
-
E-Book
1
-
Git Commands
1
-
HTML
19
-
Interview Prepration
2
-
Java Programming
0
-
JavaScript
12
-
Laravel PHP Framework
37
-
Mysql
1
-
Node JS
1
-
Online Business
0
-
PHP
28
-
Programming
8
-
Python
12
-
React Js
19
-
React Native
1
-
Redux
2
-
Rust Programming
15
-
SEO - Search Engine Optimization
1
-
Tailwind CSS
1
-
Typescript
10
-
Uncategorized
0
-
Vue JS
1
-
Windows Operating system
1
-
Woocommerce
1
-
WordPress Development
2
Tags
- Artificial Intelligence (AI)
- Bash Scripting
- Business
- C
- C Programming
- C-sharp programming
- C++
- Code Editor
- Computer Engineering
- CSS
- Data Structure and Algorithm
- Database
- Design pattern
- Express JS
- git
- Git Commands
- github
- HTML
- Java
- JavaScript
- Laravel
- Mathematics
- MongoDB
- Mysql
- Node JS
- PHP
- Programming
- Python
- React Js
- Redux
- Rust Programming Language
- SEO
- TypeScript
- Vue JS
- Windows terminal
- Woocommerce
- WordPress
- WordPress Plugin Development