Welcome to Full Stack Web Development! Before we write HTML, CSS, and JavaScript, we need a modern code editor on our Windows 11 computer.
What is Visual Studio Code (VS Code)?
Method 1: Download & Install via Command Line (CLI - Fastest)
If you prefer Windows Terminal or PowerShell, you can install VS Code with a single command using the official Microsoft Windows Package Manager (winget).
โAdministrator: Windows 11 Command Prompt (cmd.exe)
>winget install Microsoft.VisualStudioCode
โWindows 11 Execution OutputReal PC Match
Microsoft Windows [Version 10.0.22631.3007] (Windows 11 Pro x86_64)
(c) Microsoft Corporation. All rights reserved.
Found Visual Studio Code [Microsoft.VisualStudioCode] Version 1.93.0
This application is licensed to you by its owner.
Downloading https://update.code.visualstudio.com/1.93.0/win32-x64-user/stable...
รขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโหรขโห 98.4 MB / 98.4 MB
Successfully verified installer hash
Starting package install...
Successfully installed Visual Studio Code!
Verify your installation by checking the installed version:
โAdministrator: Windows 11 Command Prompt (cmd.exe)
>code --version
โWindows 11 Execution OutputReal PC Match
Microsoft Windows [Version 10.0.22631.3007] (Windows 11 Pro x86_64)
(c) Microsoft Corporation. All rights reserved.
1.93.0
38c31bc77e0dd6ae88a4e9cc93428cc27a56ba40
x64
Launch VS Code directly into your workspace from the command line:
โAdministrator: Windows 11 Command Prompt (cmd.exe)
>code .
โWindows 11 Execution OutputReal PC Match
Microsoft Windows [Version 10.0.22631.3007] (Windows 11 Pro x86_64)
(c) Microsoft Corporation. All rights reserved.
C:\Users\Student\my-first-website> code .
Opening current directory in Visual Studio Code... Workspace loaded!
Method 2: Direct Download from Official Website (Setup Wizard)
Step 1: Open Google Chrome and Visit Official Site
Step 2: Download the Official Windows 11 User Installer
Step 3: Open Downloads Folder in Windows 11
Step 4: Installation Wizard & Crucial Windows Checkboxes
Step 5: Install Essential Web Developer Extensions
Step 6: Create Your Project Folder & "Open with Code"
โAdministrator: Windows 11 Command Prompt (cmd.exe)
>code .
โWindows 11 Execution OutputReal PC Match
Microsoft Windows [Version 10.0.22631.3007] (Windows 11 Pro x86_64)
(c) Microsoft Corporation. All rights reserved.
C:\Users\Student\my-first-website> code .
Opening current directory in Visual Studio Code... Workspace loaded!
Step 7: Create index.html & Run Google Chrome Live Server
Example
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
<title>My First Website | Nextsem</title>
7
</head>
8
<body>
9
<h1>Hello World! My First Web Page</h1>
10
<p>I am learning Full Stack Web Development on Nextsem Academy.</p>
11
</body>
12
</html>