Getting started with HTML is easier than you think! In this chapter, we’ll show you how to set up everything you need to start writing HTML code. We’ll help you pick the right code editor and guide you step-by-step through creating your very first HTML document. Whether you’re just starting out or brushing up your skills, these simple steps will get you on the right track!
Start with Visual Studio Code (VS Code)
Visual Studio Code (VS Code) is a free, lightweight, and powerful source-code editor developed by Microsoft.
Step 1: Download VS Code
Go to the official Visual Studio Code website: https://code.visualstudio.com.
Click on the "Download" button.
Select the correct version for your operating system (Windows, macOS, or Linux).
Step 2: Install VS Code
After downloading the file, open the installer.
For Windows: Follow the setup wizard, agree to the terms, and click "Next" until the installation completes.
For macOS: Drag the VS Code application to the Applications folder.
For Linux: Use your package manager or the .deb/.rpm file provided on the site.
Step 3: Launch and Set Up VS Code
Open Visual Studio Code.
Install the "Live Server" extension to preview HTML changes in real-time.
From Extensions Tab search for "Live Server" and click Install.
Install the "HTML Preview" extension to preview HTML coding result in VS Code.
From Extensions Tab Search for "HTML Preview" and click Install.
Set up your first HTML file:
Click File > New File.
Save the file with a .html extension.
Write basic HTML code, right-click, and choose "Open with Live Server" or "HTML Preview" to preview.
Start with Sublime Text
Sublime Text is a fast, lightweight, and versatile code editor known for its speed and simplicity
Step 1: Download Sublime Text
Go to the official website: https://www.sublimetext.com.
Download the correct version for your Operating System.
Step 2: Install Sublime Text
Open the installer file and follow the instructions (similar for all OS).
Step 3: Set Up Sublime Text
Open Sublime Text.
To make it HTML-friendly:
Press Ctrl+N to open a new file.
Save the file with a .html extension.
Start writing HTML code.
Notepad++
Notepad++ is a free, open-source text and code editor for Windows, known for its simplicity, speed. Windows users can use Notepad++ for lightweight HTML editing.
Download from: https://notepad-plus-plus.org.
Install and open Notepad++, create a new file, and save it with a .html extension.
Tips for Beginners
Best Practices for HTML Name:
Use lowercase letters for file names (e.g., index.html, about.html).
Avoid spaces; use hyphens instead for readability and SEO (e.g., contact-us.html).
Organizing Your HTML Project Files:
Store your HTML files in a dedicated folder.
Use subfolders for assets like images, CSS, and JavaScript.
Notes for Professionals
Even if you’re experienced, using modern tools like VS Code with extensions can improve productivity.
Keep your HTML clean and well-structured to make it easier to debug or collaborate with others.
