How to Setup VS Code for Web Development (2025) | HTML, CSS, JavaScript + Live Server

Want to build websites using HTML, CSS, and JavaScript? In this step-by-step tutorial, I’ll show you how to set up Visual Studio Code (VS Code) for web development in 2025 using essential extensions like Live Server, Prettier, and JavaScript (ES6) Code Snippets.

Perfect for beginners, this video covers everything from installing VS Code to writing and previewing your first website project.

✅ What You’ll Learn:
- How to download & install VS Code correctly
- Add powerful extensions for web development:
• Live Server – Instantly preview websites
• Prettier – Auto-format your code
• JavaScript (ES6) Code Snippets – Write JS faster
- Set up project folders and organize files (HTML, CSS, JS)
- Write basic code and launch with Live Server

🔎 Timestamps:
00:00 Introduction
00:15 Download & Install VS Code
00:38 Install Extensions
01:20 Create Project Folder
01:36 Create HTML, CSS & JavaScript Files
01:50 Write HTML Code
02:05 Add CSS Styling
02:20 Write JavaScript
02:35 Preview with Live Server
02:50 Test JavaScript in Developer Tools

🔔 If this video helped, please like, subscribe, and turn on notifications for more easy-to-follow tutorials on web development and coding!

#VSCode #WebDevelopment #HTML #CSS #JavaScript #LiveServer #Prettier #CodeSnippets #FrontendDevelopment #CodingTutorial #VSCodeSetup2025

[abdullahkhanabdullah]

Thanks Teacher.
U explained it very well👍🏻

[RBRECON]

A bit rushed, so adds to confusion and not clear when you state "Type this" do we type the complete content on the html, js and css pages or only type in a word that brings up the rest of the text? No explanation how to get the box on the style sheets page that adds the solid BOX after the words background color, (I got a wrench to add hex colors, but no clear info what to click to implement.) looks like some of the text you are adding is covered on the example for Style.css page at the top.

[charlesdavis]

I use visual studio, my GUI looks different, I do not have live viewer in my extensions, I typed my html code out but won't run when I try to view it in the webpage. I never been able to get visual studio to run properly.