If you will be working on your own computer and if you have not done so already, install VS Code.
If you have not done so already, create a course folder.
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.
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.
File->Save
) in VS Code.
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.