Introduction
What do you need to get started building HTML pages? While it might be tempting to use a WYSIWYG editor, it’s much better to write the source code by hand. By looking at and typing the code yourself, you’ll become more comfortable interacting with the code written by other developers. This hands-on experience makes you more capable of understanding and modifying code because you’ll know exactly what you’re looking at. On the other hand, using a WYSIWYG editor creates a layer between you and the code, which can make it harder to fix issues the editor can’t handle. It also limits the kind of functionality you can implement.
So, what editor should you use? While I personally prefer tools like PHPStorm, I recommend beginners start with Visual Studio Code. It supports various languages, feels lightweight, includes many plugins, and significantly speeds up the coding process. In this article, I’ll guide you through downloading, installing, and setting up Visual Studio Code to view webpages live within the editor. I’ll also recommend plugins to help you get started building web pages efficiently.
Download Visual Studio Code
Download the version for your operating system and complete the steps. I am assuming my readers have a basic understand of using their respective computers.
Install the plugin
Once you have setup the editor, open and then navigate to the plugin screen. You can do that by clicking on the icon of four cubes, with one coming out. So in the Search Extensions in Marketplace box, search for Live Preview. As of the time this post was created, Live Preview 0.4.15, by Microsoft.com, is available and is what I am using to preview any changes I make.
Create a New Project
Mac
Step 1: Create a New Project
- Open Finder.
- Navigate to the location where you want to create your project (e.g.,
DocumentsorDesktop). - Right-click (or Control-click) in the blank space and select New Folder.
- Name the folder (e.g.,
MyFirstProject).
Step 2: Open the Folder in Visual Studio Code
- Open Visual Studio Code.
- From the top menu, click File > Open Folder….
- In the dialog box, navigate to the folder you just created (
MyFirstProject). - Select the folder and click Open. The folder will now open in Visual Studio Code.
Step 3: Create an index.html Page
- In Visual Studio Code, look at the Explorer panel on the left side (press
Cmd + Bif it’s not visible). - Right-click on the folder name in the Explorer panel and select New File.
- Name the file
index.htmland pressEnter.
The file will open in the editor, ready for you to start coding.
Windows
Step 1: Create a New Project
- Open File Explorer.
- Navigate to the location where you want to create your project (e.g.,
DocumentsorDesktop). - Right-click in the blank space and select New > Folder.
- Name the folder (e.g.,
MyFirstProject).
Step 2: Open the Folder in Visual Studio Code
- Open Visual Studio Code.
- From the top menu, click File > Open Folder.
- In the dialog box, navigate to the folder you just created (
MyFirstProject). - Select the folder and click Select Folder. The folder will now open in Visual Studio Code.
Step 3: Create an index.html Page
- In Visual Studio Code, look at the Explorer panel on the left side (press
Ctrl + Bif it’s not visible). - Right-click on the folder name in the Explorer panel and select New File.
- Name the file
index.htmland pressEnter.
The file will open in the editor, ready for you to start coding.
Right click, within the editor area, to open the context menu. Choose Show Preview.
Create an HTML page
Copy the following code into your new index.html page, and save it. You should notice it rendering in the preview.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Hello World!</h1> <p> This is my first paragraph. </p> </body> </html>
Conclusion
Congratulations! You’ve now set up a solid foundation for building web pages using HTML and Visual Studio Code. By creating a project folder, opening it in your editor, and adding an index.html file, you’ve taken the first steps toward learning web development the right way—by working directly with the code.
As you continue, remember to practice frequently, experiment with different tags and styles, and build small projects to grow your skills. Visual Studio Code’s features like live previews, extensions, and auto-complete will make your learning journey smoother and more enjoyable.
If you have any questions or run into challenges, revisit these steps, explore the many resources available online, or reach out to fellow developers. The more you practice and immerse yourself in coding, the more confident and skilled you’ll become.