Welcome to Full Stack Web Development! Before we write HTML, CSS, and JavaScript, we need a modern code editor on our Windows 11 computer.
Visual Studio Code (VS Code) is the world's most popular, free, and lightning-fast code editor built by Microsoft.It includes syntax color highlighting, intelligent auto-completion, integrated terminal, built-in Git, and thousands of powerful developer extensions.
Open Google Chrome and search for: `download visual studio code windows 11`Click the official Microsoft result: Download Visual Studio Code (`https://code.visualstudio.com/Download`).
On the official download page, click the prominent blue "Windows (64-bit User Installer)" button.The installation setup file `VSCodeUserSetup-x64.exe` (~98 MB) will automatically begin downloading in Google Chrome.
Open Windows File Explorer (`Win + E`) and navigate to your Downloads folder.Locate the downloaded file: `VSCodeUserSetup-x64.exe`.Double-click the file to launch the Microsoft Setup Wizard.
Accept the Microsoft software license agreement and click Next.CRITICAL STEP: On the "Select Additional Tasks" screen, make sure you CHECK ALL of these boxes:Add "Open with Code" action to Windows Explorer file context menuAdd "Open with Code" action to Windows Explorer directory context menuRegister Code as an editor for supported file typesAdd to PATH (requires shell restart)Click Install and then click Finish to launch Visual Studio Code!
VS Code extensions supercharge your development workflow:
Press `Ctrl + Shift + X` (or click the Extensions icon on the left Activity Bar).Search and click Install for these essential tools:Live Server *(by Ritwick Dey)*: Launches a local development server with auto-reload for static HTML/CSS/JS pages.Prettier - Code Formatter: Automatically formats your code into clean, beautiful syntax every time you press `Ctrl + S`.Auto Rename Tag: Automatically renames paired HTML tags when you change the opening tag.
In Windows Explorer, create a new folder named `my-first-website`.Right-click the folder ➔ select Show more options (Windows 11) ➔ click "Open with Code".VS Code will immediately open the folder as your active developer workspace!
In the VS Code Explorer panel (left side), click the New File icon and name it `index.html`.Emmet Boilerplate Shortcut: Inside the editor, type `!` (exclamation mark) and press Enter (or Tab).VS Code will automatically generate the standard HTML5 skeleton:5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>My First Website | Nextsem</title>
9 <h1>Hello World! My First Web Page 🚀</h1>
10 <p>I am learning Full Stack Web Development on Nextsem Academy.</p>
`Ctrl + S`: Save current file`Ctrl + `` (backtick): Toggle integrated developer terminal`Ctrl + Shift + P`: Open Command Palette`Alt + Up / Down`: Move the current line of code up or down`Ctrl + /`: Toggle comment (`<!-- code -->`)`Alt + Shift + F`: Auto-format entire document with Prettier
