Before We Begin: Setting Up Your Code Editor
TL;DR: Get a real code editor before you start typing HTML. I use Visual Studio Code (VS Code); it's free, and it's what the rest of this course assumes you're using.
Before this course starts going tag by tag through HTML, there's one thing to get out of the way: what you're going to write your code in. Notepad or TextEdit will technically save an .html file, but they treat it as plain text: no color, no help, no way to catch a typo before you save and check it in a browser. A real code editor fixes that.
This is the written version of my "Before We Begin" video, a short setup lesson between the crash course and the deeper tag-by-tag lessons in this HTML beginners course.
Key Takeaways
- Use a real code editor, not Notepad or TextEdit. I use Visual Studio Code, and it's free.
- VS Code runs on Windows, Mac, and Linux, and gets syntax highlighting and autocomplete for HTML right out of the box.
- The color theme is just preference. Switch it any time from the editor's settings; it has zero effect on your code.
Why not just use Notepad or TextEdit?
They'll save the file, but that's where the help stops. Every tag renders as the same plain black text, so a missing closing bracket or a misspelled attribute looks identical to code that works. A real editor color-codes your tags, attributes, and strings differently, called syntax highlighting, so mistakes tend to visually stick out before you even load the page.
Download and install VS Code
Visual Studio Code is free, and it's what I use throughout this course. If you follow along in the same editor, whatever you see on screen here will match what you see on yours.
- Go to code.visualstudio.com and download the installer for your operating system. Windows, Mac, and Linux are all supported.
- Run the installer and accept the defaults. There's nothing to configure yet.
- Open the folder you're keeping your course files in with File, Open Folder, so you can see all your project files in one sidebar as you go.
Make it easier to look at
The color theme, light or dark, is entirely cosmetic. I switch between them depending on the lighting in the room, whatever's easier to read on screen at the time. To change yours, open the Command Palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on Mac) and search for "Color Theme." Pick whichever reads best to you; it has no effect on how your code runs.
Where to go next
If you haven't gone through Basic HTML Tutorial: Build Your First Web Page in 10 Minutes yet, start there. Once your editor's set up, Basic HTML Structure: DOCTYPE, html, head, and body Explained is the next lesson, where this course starts going tag by tag.
FAQ
Do I have to use VS Code specifically?
No. Any real code editor with HTML syntax highlighting works. VS Code is free and it's what this course uses, so following along is easiest if you use it too, but the HTML itself runs exactly the same no matter which editor you write it in.
What if I already have a code editor installed?
Skip this lesson and move on to the next one. It's only here for anyone starting completely from zero.
Does the color theme affect how my code works?
No, it's purely visual. Change it as often as you want; your HTML runs exactly the same either way.
Do I need any extensions before starting?
Not for this course. VS Code's built-in HTML support, syntax highlighting and basic autocomplete, is enough to follow along. Extensions are worth exploring later, but none are required to get started.
