Getting Set Up for the Web Programming Course

This lesson is part of the Web Programming 1 Course.

Get the course files

Download the course files. Extract the zip file and put it somewhere on your computer (I put it on my desktop).

Install VS Code

Here's the link to download Visual Studio Code

After installing VS Code you can launch it by clicking on the Windows Start Button and typing 'vs' and you should see it show up as your first option.

You may also want to pin it to your task bar. To do this, press the Windows Start Button, then type 'vs' and you should see VSCode appear as the first item in the list. Right-click on the VSCode icon and choose Pin to task bar

Open the course files in VSCode

To open the web-programming folder in VSCode:

  1. Click File, then choose Open folder..
  2. An explorer window will appear, use it to browse to the web-programming folder, then click on the folder.
  3. Press the Select Folder button

Note that there a multiple files named index.html inside the web-programming folder.

In a typical website, each folder will include a web page named index.html, which acts as the default page for the folder. This page usually acts as a table of contents for the folder, and includes hyperlinks to the other pages in the folder.

Install the Open in Browser extension

In order to quickly open (launch) a web page in the browser, you'll want to install the open in browser extension. To do that:

  1. Click on the Extensions icon (or press Ctrl + Shift + X), which is on left side of the VSCode window.
  2. Type 'open in browser' in the search bar
  3. Click the blue Install button that appears under 'open in browser'

Once the extension is installed you will be able to right-click on any .html file and choose Open in Default Browser. This will open/run the page in your default browser.

VSCode takes care of (most of) the syntax

When you want to add an element, you just have to type in the 'tag name' (for example: html, head, title, body, etc.) and VS code will add the code for the opening and closing tags, including the syntax.

Alt + Tab

We will be using VSCode to edit our code, and a browser to run the code (I encourage my students to use Chrome). To easily toggle between your VSCode and browser windows, you the Alt + Tab short-cut.