How to Start Writing HTML Code: VS Code

Note:
This page is part of the Complete HTML Guide for Beginners. Consult the main index for an overview of all topics.

How to Write
HTML Code

How to Start Writing HTML Code: The Tools

In the previous post, we saw what HTML is and even created our first .html file using a basic text editor like Notepad or TextEdit. It works, sure, but believe me, to write code a bit more seriously and with less frustration, we need a better tool: a code editor.

Don't worry; it's nothing overwhelming. Think of a word processor (like Word or Google Docs) but supercharged specifically for writing languages like HTML. Today I'll introduce the one I've chosen to start this journey: Visual Studio Code.

The Right Tool: Visual Studio Code (VS Code)

After some online research and reading advice for beginners, I decided to go with Visual Studio Code (often shortened to VS Code). But why this one specifically?

It's Free: Which never hurts, especially when you're starting out.
It's Super Popular: This means there's a ton of guides, tutorials, and a huge community if you ever need help.
It's Powerful yet Friendly (even for beginners): It has lots of advanced features, but the ones you need right away are intuitive and help a lot.

Here are the features that, in my opinion, make it great for us beginners:

Syntax Highlighting: You know how grammar books highlight verbs in red and nouns in blue? Well, VS Code does something similar with code. It colors HTML tags, attributes, and text differently. This makes everything much more readable and helps you spot errors at a glance.
Autocomplete (IntelliSense & Emmet): As you type, VS Code suggests code! Start typing a tag (e.g., <bo...) and it will propose <body>. This reduces typos and speeds up writing. Awesome, right?
Simple Error Highlighting: Often, if you write something syntactically wrong, VS Code will underline it, helping you figure out where to fix it.
Extensions: You can add extra functionality by installing "extensions". A very handy one you might want to try right away is "Live Server," which lets you see a live preview of your HTML page in the browser as you modify it.
Integrated Terminal: It has a command-line window right inside the editor. You don't need it for basic HTML, but it will become useful if and when we move on to more complex things.

You can download it for free from the official site; make sure to grab the right version for your operating system: Windows, Mac, or Linux.

Installing VS Code and First Steps

The installation is really simple, don't worry. Once you've downloaded the file (for example, VSCodeUserSetup-x64-....exe for Windows), double-click it to run it.

It will ask you to accept the license agreement (the usual procedure) and where to install the program (the default suggested folder is perfectly fine; no need to change it). Feel free to click "Next".

Then, you'll likely get to a screen called "Select Additional Tasks" or something similar. Here there are a few checkboxes that can be useful, although not essential right away:

"Add to PATH": If it's already checked (it usually is), leave it that way. It's needed to use VS Code-related commands from the terminal later. We're not interested in that directly for now, but it's better to have it enabled.
"Register Code as an editor for supported file types": Leave this checked too. It will ensure that if you double-click an .html file (or .css, .js in the future), it opens directly with VS Code.
"Add 'Open with Code' action..." (to file and folder context menus): I recommend checking these options! They are very convenient: they allow you to right-click directly on a file or folder and choose "Open with Code" to load them immediately into the editor. Very practical!
"Create a desktop icon": This is a personal choice; check it if you want the VS Code icon directly on your desktop.

Once you've sorted out these checkboxes (or left the defaults if you prefer, the "PATH" one is the most important), click "Next" and then "Install". It will do its thing. Finally, click "Finish," and Visual Studio Code will be ready to use! As you can see, nothing particularly strange, but knowing about those options can make using it a bit more convenient right from the start.

Keyboard Shortcuts Useful Right Away

Learning a thousand shortcuts at the beginning is pointless, but these are fundamental and will save you a lot of time and effort.

Ctrl+S (Windows/Linux) / Cmd+S (Mac): SAVE! Get into the habit, save your work often.
Ctrl+N (Win/Linux) / Cmd+N (Mac): Create a new empty file.
Ctrl+Z (Win/Linux) / Cmd+Z (Mac): Undo the last action. Deleted something by mistake? This shortcut is your best friend.
Ctrl+F (Win/Linux) / Cmd+F (Mac): Find text within the open file. Useful for searching for words or code snippets.
Tab: Indent the code (moves the cursor or selected text to the right). Indentation doesn't change how HTML works, but it's FUNDAMENTAL for making code readable (for you and others). We'll talk more about this.
Shift+Tab: Removes one level of indentation (moves left).
Ctrl+/ (Win/Linux) / Cmd+/ (Mac): Toggle Line Comment. Super useful! Perfect for temporarily "disabling" code without deleting it or for adding notes (adds  in HTML).
Shift+Alt+DownArrow (Win/Linux) / Shift+Option+DownArrow (Mac): Duplicate the current line (or selection) and paste it immediately below. Very handy when you need to create similar elements, like many <li> items in a list.
Alt+DownArrow (Win/Linux) / Option+DownArrow (Mac): Move the entire current line (or selection) down, without needing to cut and paste. Useful for quickly rearranging code. (Obviously, Alt/Option+UpArrow moves it up).
Ctrl+D (Win/Linux) / Cmd+D (Mac): Select the word your cursor is on. If you press it again, it selects the next identical occurrence in the file. Keep pressing it, and you'll select all identical occurrences. Fantastic if you need to rename the same thing in multiple places simultaneously: type the change once, and it applies to all selections!
Shift+Alt+F (Windows) / Shift+Option+F (Mac) / Ctrl+Shift+I (Linux): Format Document. VS Code tries to automatically fix the indentation and spacing of your code according to the language's rules (HTML in this case). Helps immensely in keeping code clean and readable!
! + Tab (in an empty HTML file): Generates the basic HTML structure! One of the most useful Emmet shortcuts ever to get started immediately with the page skeleton. Try it!

Now You're Ready to Write HTML Code!

Okay, now you have a great tool (VS Code) installed and you know the basic operations to create, save an HTML file, and some useful shortcuts. You don't need to memorize all of VS Code's features right now; the important thing is to start using it to write the code we'll see in the upcoming posts.

In the next article, we'll dive into the fundamental structure of every HTML page: we'll see what <!DOCTYPE html>, <html>, <head>, and <body> are.

If you have questions or if you also use VS Code and have other tips for beginners, feel free to leave a comment below!

Search This Blog

My Skill Vault - Tutorials and Guides