Setting Up Your Code Editor (VS Code)

1. Installing Visual Studio Code

First things first, let's get the software on your computer. Visual Studio Code (or VS Code for short) is a free, powerful, and very popular code editor created by Microsoft. It's available for Windows, macOS, and Linux.

For detailed, step-by-step written instructions on how to download and install VS Code for your specific operating system, the following guide from Codecademy is an excellent resource.

If you prefer a video walkthrough, the first minute of this video by Kevin Powell (whom we met in the last lesson) will guide you through the process. He makes an important point about choosing the right software.

Once the installation is complete, you should see a final screen confirming its success. For Windows users, it will look something like this:

2. Your First Look and Essential Configuration

When you open VS Code for the first time, you'll be greeted by a Welcome screen. It can feel like there's a lot going on, but we'll focus on just a few things to get you started.

A Quick Tour and Basic Settings

A few small adjustments can make a big difference in your day-to-day coding experience. Let's change a few settings to make the editor more comfortable. The settings can be accessed from the menu (File > Preferences > Settings on Windows/Linux or Code > Preferences > Settings on Mac) or by using the keyboard shortcut Ctrl+, (Windows/Linux) or Cmd+, (Mac).

This video provides a great tour of the settings you might want to tweak.

Based on the video, here are the three settings I recommend you adjust now:

1. Font Size: In the settings search bar, type font size and change the number to something comfortable for your eyes. You'll be spending a lot of time reading code, so don't strain your eyes! Something between 18 and 22 is often a good starting point.
2. Tab Size: Search for tab size. The default is 4, but many web developers prefer 2. This controls how much space is created when you press the Tab key. A smaller size helps keep your code from shifting too far to the right as you nest elements.
3. Word Wrap: Search for word wrap and set it to on. By default, a long line of text will continue off the side of the screen, forcing you to scroll horizontally. Turning word wrap on makes the line break and wrap to the next line, so all your code is always visible.

3. Personalizing Your Editor with Themes

As you just saw, you can change the entire look of VS Code with themes. This is more than just a fun feature; choosing a color scheme you like can make coding more enjoyable and less fatiguing. Your interest in art and design might make this a particularly appealing part of setting up your workspace.

Themes are a type of extension—small add-ons that customize or add new functionality to VS Code. There are thousands of themes available to install for free.

Let's watch how to find and install a new theme.

Go ahead and explore! Find a theme that you find visually appealing. Some popular ones are "Atom One Dark" (the one Kevin uses), "Cobalt2", "Night Owl", and "Dracula". Don't worry about finding the "perfect" one now; you can easily change it at any time.

We will install other, more functional extensions later in the course as we need them. For now, just knowing how to find and install them is enough.

Conclusion

Great work! You've successfully set up your professional coding environment. You have moved from understanding the concept of a code editor to having a fully functional one on your own computer.

Let's recap what you accomplished:

• You downloaded and installed Visual Studio Code.
• You took a tour of the interface and learned how to access and change settings.
• You personalized your editor by adjusting the font size, word wrap, and color theme.
• You were introduced to the concept of extensions as a way to add features to VS Code.

Your digital workshop is now ready. In our next lesson, we will start organizing your project. You'll learn how to create a dedicated folder for your blog and, most excitingly, create your very first HTML file.