Create Save and Execute HTML Files in Visual Studio Code | Lesson 7 |
In this class we will understand How to Create Save and Execute HTML Files in Visual Studio Code.
IN THIS CLASS:
00:00 - Introduction
00:20 - Adding A Workspace to the folder
01:14 - Create and Save File in Workspace Folder
02:02 - Execute HTML File in Visual Studio Code
02:20 - Live Server Extension Installation
03:14 - Next Class Intro
IMPORTANT LINKS:
Wisdomers Learning Agent Link: https://www.wisdomers.in
HTML5 & CSS3 Free Full Course Link: • HTML5 and CSS3
--
ABOUT THIS COURSE:
This course is part of The Digital Product Architecture Specialization. This Channel Digital Product Architect is the masterclass for developers who want to design, build, and operate scalable digital products. In this specialization this course HTML 5 and CSS 3 is to master the architecture of the Presentation Layer. The student will learn to architect a robust, scalable, and meaningful foundation for a digital product, thinking in terms of semantic blueprints (HTML) and scalable design systems (Advanced CSS).
--:
DETAILED DESCRIPTION:
In this class, we will learn how to Create, Save, and Execute HTML files directly inside Visual Studio Code. From this point forward, I highly encourage you to code along with me. Writing and executing the code yourself is the only way to become an efficient Developer. Let’s get started.
First, open your freshly installed Visual Studio Code. Before we create an HTML file, we need to create a project folder. Why? Because VS Code is designed around the concept of a 'Workspace'—which is essentially a folder opened within the editor where all your project files live. For now, let's create a new folder on our Desktop and name it 'Examples'. Next, we need to bring this folder into VS Code. On the left-hand side menu, click the very first icon, which is the Explorer tab. Then, click the Open Folder button. Browse to your Desktop, select the 'Examples' folder, and click Select Folder. With that single click, your entire folder is brought into the VS Code Workspace. Because of built-in security features, VS Code will ask if you trust the authors of the files in this folder. Simply click on the 'Yes, I trust the authors' button. Now, let's create our first HTML file inside this folder. In the Explorer panel, click on the New File icon right next to the folder name. It will ask you to name the file. Let's name it example1.html. Remember, providing the .html extension is absolutely mandatory; otherwise, it will just be created as a plain text file.
Let's write some quick HTML code—I am just creating a simple Paragraph Element here. Once we type our code, we must save the file. The fastest way is using the keyboard shortcut Ctrl + S. Alternatively, you can click the Hamburger Menu at the top, select the File menu, and click Save. That’s it, your file is now saved. Our final step is to execute this file and display the output in the browser. One way to do this is to right-click the file, select 'Copy Path', paste that path into your browser, and hit Enter. But as a professional, this is not an efficient practice. Instead, we will install a powerful add-on called Live Server. We can install extensions from the Extensions tab in the left menu. These extensions massively customize and enhance the editor's capabilities. Click on the Extensions tab and search for 'Live Server'. You will see many options, but choose the one with the highest number of downloads. Click the Install button. It takes just a few seconds. After installation, look at the bottom right corner of your VS Code window. You will see a new Go Live button. Click it! That’s it; our file is now live in the browser. The huge benefit of installing this extension is that whenever you save your file, the changes are immediately reflected in the browser. Without this extension, you would have to manually refresh the browser every single time you made a change to the HTML file.