Setting Up VS Code for Web Development

Hello! Welcome to the first lesson of our second module, "Setting Up the Creative Environment."

In our last module, we built a solid foundation by connecting core design and animation principles—like timing and easing—to their technical counterparts in CSS. We demystified SVG structure and the powerful cubic-bezier() function, giving you the vocabulary to understand and describe motion in code.

Now, it's time to move from theory to practice. In this lesson, we will set up our primary tool: the digital workshop where we'll bring our creative ideas to life. Our goal is to install and configure Visual Studio Code (VS Code) with essential extensions for web development, including a live preview server. By the end of this session, you'll have a professional-grade setup ready for creating and iterating on animations.

Think of VS Code as the equivalent of Figma or your favorite design software, but for code. And the "live server" we'll install is like Figma's real-time preview—it lets you see the results of your work instantly.

Step 1: Installing and Exploring Visual Studio Code

First things first, let's get VS Code onto your computer. It's a free, lightweight, and incredibly popular code editor from Microsoft. It's important not to confuse it with its older, larger sibling, "Visual Studio," which is a different tool primarily for other types of software development.

The best way to get started is with a guided video tour.

Once you have VS Code open, take a moment to click around the different icons in the Activity Bar on the left. You've just set up the main workbench; next, we'll add the specialized tools we need.

Step 2: Adding Essential Extensions

One of the most powerful features of VS Code is its ecosystem of extensions. Think of them like plugins for Figma—they add new capabilities to the core application. For our work, two extensions are particularly crucial: Live Server and Prettier.

• Live Server: This is the magic ingredient for a fast, iterative workflow. It runs a small local web server and automatically refreshes your browser whenever you save a file. This means no more manual reloading to see your animation changes.
• Prettier: This is a code formatter. Since you'll be working with code generated by Claude, Prettier will automatically clean it up, ensuring consistent indentation and spacing. This makes the code much easier to read and understand, which is vital when you need to find and tweak specific animation values.

Here's an image showing exactly what to look for when installing Live Server.

The same video we just watched has an excellent section on installing these extensions.

Step 3: Testing Your Live Server Setup

Now that you've installed the tools, let's make sure everything is working correctly. This is the most common point where beginners run into small hitches, so we'll walk through it step-by-step.

1. Create a Project Folder: On your computer's Desktop or in your Documents, create a new folder. Let's call it my-first-animation.

2. Open the Folder in VS Code: In VS Code, go to the top menu and select File > Open Folder... and choose the my-first-animation folder you just created. The Explorer panel on the left should now show your folder's name.

3. Create an HTML File: In the Explorer panel, hover over the my-first-animation folder name and click the "New File" icon. Name the file index.html.

4. Add Some Content: Copy the code block below and paste it into your new index.html file.

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Live Server Test</title>
   </head>
   <body>
       <h1>Hello, Live Server!</h1>
       <p>If you can see this, your setup is working.</p>
   </body>
   </html>
   

5. Go Live!: Look at the blue Status Bar at the bottom of your VS Code window. You should see a button that says "Go Live". Click it.

Your default web browser should automatically open a new tab showing your "Hello, Live Server!" message. Try changing the text in the <h1> tag in VS Code and save the file (Cmd/Ctrl + S). The browser page should update instantly without you doing anything!

Having trouble? If the "Go Live" button doesn't appear or doesn't work, don't worry. This is a common issue. Here's a great resource to help you troubleshoot.

Key Takeaways

• Visual Studio Code (VS Code) is a free, powerful code editor that will be our primary tool for this course.
• Extensions are like plugins that add new features to VS Code, allowing us to customize our workflow.
• Live Server is an essential extension that creates a local development server, enabling an instant, real-time preview of our web-based animations in a browser.
• Prettier is a code formatter that helps keep AI-generated code clean, organized, and easy to read.

Next Up

Congratulations, your digital workshop is now fully equipped! You have the editor installed and the crucial live preview feedback loop is up and running.

In our next lesson, we'll introduce our AI creative partner to this setup. We will integrate Claude into VS Code and use your first prompt to generate a basic project structure. This will be the first step in moving from a blank canvas to a fully coded scene, all directed by you.