Set up the structure of your web app
There are different ways to create and manage website projects. Some variation occurs depending on the specific tools you have, and also the preferences of your organization. When creating a website, it's not uncommon for your project structure to change over time as it becomes more complicated. The key is to keep a semblance of organization, and there are common strategies to help. Large projects often require a higher degree of care and attention so that many people can keep everything straight.
Create a new folder
Open Visual Studio Code
When you open Visual Studio Code, the Welcome page opens. Notice you can create a new file or open a folder. You can also accomplish this by going to File > New File.
If not visible, you can display the Welcome window by navigating to Help > Welcome. Alternately, select View > Command Palette or the keyboard shortcut Shift+Command+P. Then in the search field enter >Help: Welcome.
Select Open folder in the Start section of the Welcome page, or go to Folder > Open.
When opening a folder, the operating system provides a button to create a New Folder.
Go to the location where you want to create the new folder, and select New Folder. Name the folder simple-website.
Create some files
Select File > New File.
Save the file using Control+S (Windows) or Command+S (macOS). Name the file
Repeat the preceding steps to create two more files,
app.js. When you're finished, your project folder will contain the following files that make up your web site:
Under the folder name in the Explorer window, you see the three files that comprise your web site.
Install extensions or packages
You can extend the functionality of Visual Studio Code using the extensions marketplace. Keep in mind these are community developed resources. There are often a few solutions for the same type of feature. You can install extensions individually in your editor, or several at once with the command line.
For web development, all you need right now is open-in-browser. This extension helps you to quickly open the website in your default browser, instead of copying and pasting the file URL into your browser.
To install this extension:
Select the Extensions icon on the Activity Bar (left pane).
Type "open in" in the search bar, then select open in browser, published by TechER, and choose Install. The extension gets installed.
Switch back to the Explorer window.
Way to go! Installation and setup takes a little extra time, but you only need to install and setup once. Now we're ready to create a website.