For the remainder of the course, we will be using VS Code as our code editor. VS Code is the editor of choice for web development, with tons of helpful extensions and autocomplete features.

Step 1: Install VS Code

Download Visual Studio Code - Mac, Linux, Windows

Step 2 (optional): Install some extensions

Hack4Impact VSCode Extension

Hack4Impact's Recommendations - Visual Studio Marketplace

Auto close tag → auto-insert the closing tag for your HTML elements

Auto Close Tag

Auto rename tag → change the closing HTML tag name when you edit the opening tag

Auto Rename Tag

<aside> 💡 If you want to see which extensions you have installed or search for new ones, click the pile of blocks in the lefthand toolbar!

</aside>

Step 3: Create a new project

If you got confused when you couldn't find a "new project" button, I don't blame you! This is because VS Code is a "text editor" rather than an IDE, so it's missing all of those project setup features you might have seen building mobile apps, python apps, or whatever else.

Here's what you should do

  1. Make an empty directory (folder) wherever you want from your "Finder," "File Explorer," or your terminal if you're fancy 😁

  2. Head to VS Code go to to File → Open...

  3. Find your directory and open it

  4. You will see a directory inspector on the side. Right now, it should be empty. To add a file, hover over the dropdown with your folder's name and choose the first option (New File)

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/06b0e03a-180c-4f47-b8a7-5b640181bd45/Untitled.png

  5. Type the file name and the file extension! I'd recommend making a basic HTML file to start, so type index.html

  6. This file should now open in the editor view!