Client-side and server-side in the term of web development, describes where application code runs. Web developers will also refer to this distinction as the frontend vs. the backend. In web development, the client-side refers to everything in a web application displayed on the client end (end-user device). The browser interprets HTML and CSS on the client-side. Whereas, the server-side is where all the request coming from client-side is handled. The working which is performing on the server-side is not visible to the end-user. The Server-side has the business logic for dynamic webpages.
For this series, we will use the VS Code. Visual Studio Code is a free and powerful source-code editor that runs on the desktop. It is made by Microsoft for Windows, Linux, and macOS. Features include support for debugging, syntax highlighting, embedded Git, snippets, and intelligent code completion. It is written in ElectronJS technology. Following is the guide to install the VS Code.
Let us start the installation process. First, we are going to see the installation of VS Code. For that, search "VS Code download" on google or directly visit the URL given below:
Figure1: Virtual Studio Download
Click on the download option. After the download is completed, open the setup and run it by saving the VS Code in the default location without changing any settings at all. Just click the next button until the "Select Additional Task" dialog box appears. Check to mark the following options.
Figure 2: Addition Task dialog box
Then click next and install the setup. Now after the VS Code is downloaded on the system. Click on the VS Code icon. To open the folder, click on the "Open Folder" option on the left side of the screen or right-click on the folder and select the option "Open with Code."
Figure 3: Open folder with VS Code
Click on the extension icon on the left of the screen or press Ctrl+Shift+X. After clicking on the extension option, write the name of the extension, and download it.
For this series, we will download "Live Server." It will Launch a local development Server with a live reload feature for static & dynamic pages.
Figure4: Live Server
To stop the live server, click on Port at the bottom of the screen. It will dispose and then close the live server.
Emmet snippets and expansion is built right into Visual Studio Code; no extension is required. Emmet 2.0 has support for the majority of the Emmet Actions, including expanding Emmet abbreviations and snippets. When we start typing an Emmet abbreviation, we will see the abbreviation displayed in the suggestion list.