VS Code Localhost Tutorial

Prerequisites

This tutorial assumes you have:

• Downloaded and installed the most recent version of VS Code.
• Completed the XAMPP installation and configuration on your own machine.
• Cleaned up the HTDOCS folder inside of XAMPP on your local machine.

Video Version

Create a Domain Project

A project is a web site for the purposes of this tutorial. It is where all files and folders reside that pertain to a web site. VS Code, like other development tools, then uses its functionality to keep track of those resources and assists you to manage the site as a whole.

This tutorial takes you through the process of creating a project for your classwork on your local machine.

1. Launch VS Code.
2. Click the File > Open Folder menu option.
3. Navigate to the htdocs folder within the XAMPP folder on your local machine (in the Applications folder on Mac, in the C: drive on Windows).
4. Click the "Select Folder" button in the dialog box.
5. The htdocs folder will open in the File Manager panel of VS Code on the left and any existing folders or files will appear beneath it and slightly indented.
6. All work for our class will occur in this project and location.
7. Notice that there are tool buttons to the right of the "htdocs" name that can be used to create new folders or files in the project.

Test

At the end of the video a test is shown that you are encouraged to complete to ensure that the environment and tools are setup and working correctly.