Getting Started with VS Code

Get the VS Code Development Environment

If you will be working on your own computer and if you have not done so already, install VS Code.

Download Sample Files

If you have not done so already, create a course folder.

Opening (or Creating) a Web Page

Bring up VS Code. Open your class folder by choosing File->Open… and navigating to the folder you created. You should see the files you downloaded above in the left panel. (You may need to click on the > symbol next to the folder name to see the files within it.)

The first time you open your class folder you may see a dialog box asking if you trust the author of files in this folder. Since you will be the author of files in this folder, you can answer Yes.

Open the Simple HTML Page by clicking on its name in the left panel. You are now looking at the page source for the page, which includes the page content and formatting information, called tags, in angle brackets (e.g., <html>). A web browser takes that source file and formats to make it look nicer. To see what the formatted page would look like, bring up a web browser such as Chrome or Firefox, choose File->Open…, navigate to your class folder, and select the Simple HTML Page document.

You could create a new web page by choosing New File in the File menu, clicking on the New File icon next to your class folder name in the VS Code EXPLORER pane, or selecting an existing file such as the Simple HTML Page and saving it as a new file with a different name. Any web page files you create should end with the .html extension so that VS Code, your web browser, and other applications know how to interpret it.

Making and Viewing Modifications

Next, make a simple modification that will let you experiment with the Beautify feature and see how to view modifications. You can make this modification in your Simple HTML Page or you can make a copy (choose File->Save As…), double-click on the name of the new file in the EXPLORER pane, and modify the copy.

In VS Code, change the first list item to say "This is a simple sample ordered list."
Modify one of the two lists so that both list items are on the same line rather than being on separate lines. As part of this second modification, be sure that you don't erase any of the content or meta-information in angle-brackets; just get rid of the line breaks.
Save the file (File->Save) in VS Code.
View the modified page in your web browser. (Open the file or do a refresh if it is already open.) You should see the difference in the content of the first list item, but putting two list items on one line in the page source should make no visual difference in the actual page.

In VS Code, "Beautify" your file by typing Shift-Option-F. You should see the two list items on separate lines again in the page source (VS Code). Save the file in VS Code and refresh the page in the browser. You should not see any visible difference in the web page. Web page formatting is driven by the information in the tag fields (the information in angle-brackets), not by the formatting of the HTML page source.

TIP: Previewing Pages

You can preview what a page will look like in a web browser at any time by first saving the file in VS Code, then going to the web browser and refreshing or reloading the page. Most browsers have a circled arrow icon to refresh the page. If it doesn't seem to be showing you any recent changes you have made, you can press the shift key while clicking on the refresh icon; this will force it to look for the most recent saved version of the file. You will find yourself going back and forth between the editor and preview windows frequently as you develop web pages.