02. HTML Editors

To edit HTML and CSS file all you need is a text editor. These can be sophisticated IDE (Integrated Development Environments) like Visual Studio, freeware like Sublime Text or even basic text editors like Notepad. It is recommended that you experiment with different editors to see which suit your workflow. Whichever tool you use it should help you, not hinder you, in your coding. Modern text editors will provide help with syntax and code checking so it is worth investing time to learn the tricks associated with your chosen tool.

For the purposes of this lab we’ll be using Visual Studio Code a light weight version of Visual Studio. It is available via Apps Anywhere and is free to download to use on your own computer.

Visual Studio Code

To open the files for the lab in Visual Studio code simply drag the folder created above into the application. The files will now appear in the side bar. This can be to toggled on and off with Ctrl B.

This is an important step to ensure that you keep a track on the files in your website and saves a lot of problems related to editing the incorrect files.

In Visual Studio Code you can choose to save this as a Workspace.

Use File > Save As Workspace and locate a sensible place to save the file generated. It is recommended you create a folder to store workspace files in a central location that is easily found ie:

someDrive:\year1\web-dev\myWorkspaces\

With a Workspace set up you can easily switch between workspaces by using File > Close Workspace and File > Open Workspace and locating the file saved above.