Show file extensions

Before you do anything else in this course, we need to make sure that extensions (e.g., .html, .zip, .jpeg) show up at the ends of files.

If you use a Mac, do the following:

1. Click on the Finder.
2. Click on Finder > Preferences.
3. Click on the Advanced tab.
4. Check the box next to Show All Filename Extensions.
5. Close the Preferences window.

If you use Windows, please refer to Configuring Windows To Show Extensions & follow those directions.

Install Visual Studio Code (VSCode)

Download Visual Studio Code & install it on your computer.

VSCode settings

When you change the settings in most apps, you click on buttons & check checkboxes & so on. VSCode provides an interface like that to change settings, but it’s not the only method. In VSCode (& many other developers’ text editors), you can instead edit text files¹.

I have already created settings for you. To use them, do the following:

1. Press ⌘⇧P (Mac) or Ctrl+Shift+P (Windows), & then, in the Command Palette that appears, type in open settings json & press Enter/Return. A new tab will open in VSCode labeled User Settings, with Default Settings on the left & User Settings on the right.
2. Go to VSCode Settings & click on the Raw button. A new webpage will open with just the settings I have created & nothing else.
3. Press ⌘A (Mac) or Ctrl+A (Windows) to select all the text.
4. Press ⌘C (Mac) or Ctrl+C (Windows) to copy the settings (everything from — & including! — the first { to the last }, including those characters. You can now close this tab in your Web browser.
5. Go back to VSCode & click in your User Settings on the right. We are about to replace all that with what you just copied.
6. Select all of the content in your User Settings by pressing ⌘A (Mac) or Ctrl-A (Windows).
7. Paste the settings you copied with ⌘V (Mac) or Ctrl+V (Windows), overwriting what was formerly in your User Settings.
8. Press ⌘S (Mac) or Ctrl+S (Windows) to save what you just pasted in.
9. Close User Settings by clicking the × on the tab at the top of VSCode.

HTML snippets

VSCode has a fantastic feature (shared by other editors) that allows you to type a few letters (a snippet) & have them expand into code for you. I have created some HTML snippets for you to use, but you have to install them first.

1. Select Code > Preferences > User Snippets. The Select Language for Snippet palette will appear.
2. Either type HTML & press Enter, or click on HTML in the palette. A file named html.json will open.
3. Go to VSCode HTML Snippets & click on the Raw button. A new webpage will open with just the snippets I have created & nothing else.
4. Press ⌘A (Mac) or Ctrl+A (Windows) to select all the text.
5. Press ⌘C (Mac) or Ctrl+C (Windows) to copy the snippets (everything from — & including! — the first { to the last }, including those characters. You can now close this tab in your Web browser.
6. Go back to VSCode & click inside html.json.
7. Select all of the content in html.json by pressing ⌘A (Mac) or Ctrl-A (Windows).
8. Paste the snippets you copied with ⌘V (Mac) or Ctrl+V (Windows), overwriting what was formerly in html.json.
9. Press ⌘S (Mac) or Ctrl+S (Windows) to save what you just pasted in.
10. Close html.json by clicking the × on the tab at the top of VSCode.

CSS snippets

In addition to the HTML snippets you just copied, I have also created some CSS snippets for you to use.

1. Select Code > Preferences > User Snippets. The Select Language for Snippet palette will appear.
2. Either type CSS & press Enter, or click on CSS in the palette. A file named css.json will open.
3. Go to VSCode CSS Snippets & click on the Raw button. A new webpage will open with just the snippets I have created & nothing else.
4. Press ⌘A (Mac) or Ctrl+A (Windows) to select all the text.
5. Press ⌘C (Mac) or Ctrl+C (Windows) to copy the snippets (everything from — & including! — the first { to the last }, including those characters. You can now close this tab in your Web browser.
6. Go back to VSCode & click inside css.json.
7. Select all of the content in css.json by pressing ⌘A (Mac) or Ctrl-A (Windows).
8. Paste the snippets you copied with ⌘V (Mac) or Ctrl+V (Windows), overwriting what was formerly in css.json.
9. Press ⌘S (Mac) or Ctrl+S (Windows) to save what you just pasted in.
10. Close css.json by clicking the × on the tab at the top of VSCode.

Extensions

Now you need to install some necessary extensions. Get to the Extensions View of VSCode in one of the following ways:

• Go to View > Extensions.
• Press ⌘⇧X if you use a Mac & Ctrl+Shift+X if you use Windows.
• On the left side is the Activity Bar, which shows 5 icons running from top to bottom. Click on the bottom icon, which looks like 4 boxes, with the northeast box separated from the others. If you hover over it, it should say Extensions.

To find an extension, type the name of the extension in the Search box at the top of the Extensions View. You will see a list of extensions that match what you typed. To find out more about an extension, click on it in the list of results. To actually install it, click on the Install button.

Install the following extensions:

• GrannePack HTML, which will install several extensions for HTML I have picked for my students
• GrannePack CSS, which will likewise install several extensions for CSS I have chosen

Themes

I want you to make VSCode into your workspace. One way to do that is to install Color Themes & File Icon Themes. A color theme changes the colors of everything in VSCode, while a file icon theme puts little icons to the left of your files when you are in Explorer View. You install these themes as extensions.

When you installed GrannePack HTML, you received 2 themes, so feel free to try them:

• Monokai Dark Soda, a dark theme with bright colors
• Material Icon Theme

To find others, search for color theme to see the full list. I suggest searching for these in particular (e.g., color theme monokai), as they are widely supported by almost all code editors:

• Solarized (both light & dark)
• Soda (weirdly, there aren’t any light Soda themes)
• Monokai (As I said, Monokai Dark Soda comes with GrannePack HTML, as it combines the best of Monokai & Dark Soda, but there are plenty of other Monokai variants)
• Material
• GitHub
• Dracula

To apply your color theme, go to Code > Preferences > Color Theme. The Select Color Theme palette will open. Make your selection & press Return.

Search for icon theme to see the full list. I suggest looking at one of these:

• vscode-icons by Roberto Huertas

To apply your file icon theme, go to Code > Preferences > File Icon Theme. The Select File Icon Theme palette will open. Make your selection & press Return.