In this short video we'll talk about our workflow. It's important that you know exactly how we're going to do something so that you can replicate it or practice by yourself.

Step 1: Setting Up Your Workspace

Create a Project Folder

1. Start by creating an empty directory anywhere on your system. This will store all the files we create.
2. Drag and drop this directory into Visual Studio Code (VS Code).

Create Essential Files

1. Open the file explorer in VS Code (the first icon on the left sidebar).
2. Right-click and create two new files: index.html and script.js.

Connect Your Files

To ensure your JavaScript file works with your HTML:

1. Open .

2. Type and select the HTML5 boilerplate suggestion.

3. Just before the closing tag, add this line:

   <script src="script.js"></script>

Step 2: Running Your Code

To see your JavaScript code in action:

1. Write the following in :

   console.log('Hello, World!');

2. Save your changes (Cmd/Ctrl + S).

3. Right-click on index.html in the file explorer, select Reveal in Finder/Explorer, and open the file in your browser.

Open the Console

• On Mac, press .
• On Windows, press .

You should see “Hello, World!” in the browser’s console. Congratulations, you’ve written your first JavaScript program!

Step 3: Enhancing with Extensions

To make coding easier and more enjoyable, we’ll use a few VS Code extensions.

To install them, go to the Extensions tab, search for them, and click Install.

1. One Dark Pro: A modern theme for better visuals. Or find the one that you like.
2. Live Server: Allows you to see live changes in your browser as you edit. Install it, then click Go Live in the bottom-right corner of VS Code while is open.

Step 4: Organizing Your Workspace

Dock the Console

To keep the console and your code side by side:

1. Open the console ( on Mac, on Windows).
2. Click the three dots in the top-right corner of the console.
3. Choose the option to dock it to the right or bottom of the browser window.
4. Resize the windows to keep both the editor and console visible.

Tidy Up VS Code

Customize VS Code for clarity:

1. Minimize unused panels like Docker, Live Share, or GitHub Actions.
2. Rearrange your sidebar to have Explorer, Search, Source Control, and Extensions in that order.
3. Adjust font size for better readability ().

Step 5: Testing Your Workflow

Let’s make sure everything is working:

1. In , replace the existing code with:

   alert('Connected!');

2. Save the file and reload the browser. If you see an alert pop up, your files are connected correctly.

A Quick Note on Practicing

You’ll spend most of your time in VS Code and your browser. Get comfortable experimenting with the setup:

• Change the alert message and see the new result.
• Write new statements and test them.
• Tweak settings to suit your preferences.
• Install additional extensions if you find something helpful.

That’s it for now! Take a moment to grab your favorite drink, relax, and get ready to dive into real programming.