Setting Up Your Development Environment

Your Digital Workbench: The Code Editor

You could technically write code in any basic text application, like Notepad on Windows or TextEdit on macOS. However, that would be like a carpenter trying to build a house with only a pocketknife. Professional developers use specialized tools called code editors.

A code editor is a text editor supercharged with features designed specifically for writing software. These features include:

• Syntax Highlighting: Makes code readable by coloring different parts (tags, attributes, text) differently.
• Autocompletion: Suggests code as you type, saving time and reducing typos.
• File and Folder Management: Allows you to easily navigate the entire structure of your project.
• Extensions: A marketplace of plugins to add new features, support new languages, and connect to other tools.
• Integrated Terminal: A command-line interface built directly into the editor, so you don't have to switch windows to run commands.

For this course and your journey into web development, we will use Visual Studio Code (VS Code). It is free, incredibly powerful, and the most popular code editor in the industry.

Installing Visual Studio Code

First things first, let's get the software installed on your computer. It's important to distinguish Visual Studio Code (with a blue logo) from its larger cousin, Visual Studio (with a purple logo). We want the former.

The following video provides a clear walkthrough of the download and installation process, along with an excellent overview of the user interface.

Once you have VS Code installed and open, you should see the Welcome Page, which provides quick links to common actions.

The Golden Rule: Always Open a Folder

This is the single most important habit to build when starting with VS Code. While you can open individual files, you should always open the entire folder that contains your project. This tells VS Code that all the files within that folder are related. It enables features to work correctly, makes file navigation simple, and creates a self-contained "workspace" for your project.

Let's create the folder for our first project now. On your Desktop or in your Documents folder, create a new folder and name it my-first-website.

Now, watch this segment where web developer Kevin Powell passionately explains why this "open folder" approach is so crucial.

Now that you understand the "why," let's do it.

1. In VS Code, go to the File menu and select Open Folder....
2. Navigate to and select the my-first-website folder you just created.
3. VS Code might ask you if you trust the authors of the files in this folder. Since you created it, you can click "Yes, I trust the authors."

Your VS Code window should now show the name of your folder in the "Explorer" view on the left-hand side.

Powering Up with Extensions

One of VS Code's greatest strengths is its ecosystem of extensions. These are add-ons that enhance its functionality. We will install two essential extensions for web development.

1. Live Server: This magical extension launches a small web server on your computer. When you're working on your files, it automatically reloads the web page in your browser every time you save. This creates a seamless workflow where you can see your changes instantly.
2. Prettier - Code Formatter: This extension automatically cleans up your code to follow a consistent set of style rules. It fixes indentation, spacing, and more. It not only makes your code easier to read but also helps you learn good formatting habits without thinking about it.

The following article from freeCodeCamp will guide you through installing Live Server. We'll then use another video to walk through installing both Prettier and Live Server.

Now, let's get a video walkthrough for installing both Prettier and Live Server, and see how to configure Prettier to work automatically.

Creating Your First File

With our environment fully configured, the final step is to create the first file for our website.

1. Make sure you have your my-first-website folder open in VS Code.
2. In the Explorer panel on the left, hover your mouse next to the folder name, and click the "New File" icon.
3. Name the file index.html and press Enter.
4. The file will open in the main editor pane. Type Hello, World! into the file.
5. Save the file by pressing Ctrl+S (on Windows) or Cmd+S (on Mac).

Your screen should look something like this:

This index.html file is the default file that web browsers look for when someone visits a website. It will be the home page of our project.

Conclusion

Congratulations! You have successfully set up a professional-grade development environment. This is a huge and practical step forward. While it may seem like a lot of setup, this initial investment will make the process of building your website significantly smoother and more enjoyable.

Key Takeaways:

• A code editor like VS Code is an essential tool for developers, providing features like syntax highlighting and autocompletion.
• The most important workflow habit is to always open a project folder, not individual files.
• Extensions supercharge VS Code. Live Server provides instant browser previews, and Prettier keeps your code clean and consistently formatted.
• You have created your first project folder (my-first-website) and its main file, index.html.

Your workshop is now ready. In the next lesson, we will put it to immediate use. You'll learn how to write the basic structure of an HTML document, add some content, and use the Live Server extension to view your very first webpage live in your browser.