Homework

The homework for this chapter will make you install, configure, and play around with Visual Studio Code. This will be our main development tool throughout the course, so make sure to carefully follow the instructions below.

Part 1: Installation

Navigate to https://code.visualstudio.com/, download the appropriate version for your platform (the homepage should automatically detect your system), and install it.

Part 2: Extensions

Since Visual Studio Code is just a code editor, it allows developers to work in any programming language. However, it also allows them to build extensions for their favorite languages which they can then share with the world. We will use a few such extensions to improve our experience of building websites. Since we haven't covered any programming so far, you don't have to know what these extensions do yet — just make sure to install all of them. To do so, take a look at this guide: https://code.visualstudio.com/docs/editor/extension-marketplace. Once you have learned how to install and uninstall extensions, search and install the following ones:

  • HTML Snippets (by Mohamed Abusaid): abusaidm.html-snippets.
  • HTML Preview (by Thomas Haakon Townsend): tht13.html-preview-vscode.
  • HTML CSS Support (by ecmel): ecmel.vscode-html-css.
  • Tailwind CSS IntelliSense (by Brad Cornes): bradlc.vscode-tailwindcss.
  • Headwind (by Ryan Heybourn): heybourn.headwind.

Feel free to install other extensions if you find something that you like!

Part 3: Configuration

Click Cmd+Shift+P or Ctrl+Shift+P and go to Preferences: Open Settings (UI) (you may type it). In the Commonly Used tab, set "Tab Size" to 2. Now go to Text Editor → Formatting and enable "Format on Save".

Part 4: Play Around

Now that you have set up Visual Studio Code, try to experiment! Create a new project and create a index.html file. Now, paste the following code:

<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
</head>
<body>
<p>Hello from Oval!</p>
</body>
</html>

If you've set everything up properly, when you save the file (Cmd+S or Ctrl+S), it will be formatted and turn into

<!DOCTYPE html>
<html>
  <head>
    <title>Experiment</title>
  </head>
  <body>
    <p>Hello from Oval!</p>
  </body>
</html>

Now, in the Explorer tab on the left of Visual Studio Code (the top one), right-click on index.html and click "Reveal in Finder" (or "Reveal in File Explorer" on Windows). This will open the directory containing your project outside of VSCode. Run index.html and you will see a browser tab containing a website that just says "Hello from Oval!". Congratulations, you have just written your first website! Don't worry about what the code does — we will cover it in the following lectures.