Get Live HTML Preview in VSCode (2024 ) - Live Server Tutorial Visual Studio Code

In this video, I'll show you how you can get live preview of your HTML/CSS/Javascript project in vscode (visual studio code). Live preview helps you to easily see the changes in your HTML project live within vscode itself. It makes very easy to debug and speeds up development process.
☕Buy me a coffee: www.buymeacoff...
🌐Connect with me:
TikTok: tiktok.com/@thecodecity
Twitter: / thecodecity
Instagram: / thecodecity
Website: thecodecity.com
By using live html preview in visual studio code, you don't need to manually run the project in the browser and see the changes in your code immediately within vscode. If you have any problems with getting live html preview in vscode, let me know in the comments below.
#vscode #webdevelopment #vscodetutorial

[@DreanPetruza]

Creator mentions the plugin Live Server by Ritwick Dey, but shows a different plugin, Live Preview by Microsoft. That's the only one you need. It's easy to confuse the two if you have both installed and not sure which does what.

[@rachit_joshi]

tq buddy !

[@TheCodeCity]

Yep.

[@TINYMCDUDEFAN]

I did all the steps up to when you search Live Server on the command pallet. Mine didn't have a Live Preview:Start server. Can you please help me out

[@herby2526]

Just install the next extension called "Live Server Preview", then go to View-->Command Palette, type "Show live" and select "Show live server preview"

[@معاذالبوسيفي-س6ش]

@@herby2526 you are the best thank you

[@mikec-c4m]

@@herby2526 Thank you!

[@MM.MischiefManaged]

@@herby2526 That only shows the change after I click save. Its not actually live?

[@danishwritesofficial]

​@@MM.MischiefManaged Just install the next extension called "Live Server Preview", then go to View-->Command Palette, type "Show live server preview" and hit enter.

[@MM.MischiefManaged]

The output is not live. This tutorial is incomplete.

[@Nebulacreator]

Thank you bro, i was finding way of live server and i see your video. Thank you very much.

[@autentikum]

Thanks, saved me! quick and easy! 💪

[@TheCodeCity]

Thank you for watching! Glad it helped :)

[@pratyushshukla5049]

How to create a shortcut key for live preview?

[@MyloMusica]

It opens it in another external window

[@skiiiworld6205]

it only shows me file index page only

[@erwinfernault]

Thanks buddy, it helped me a lot.

[@TheCodeCity]

Thanks for watching, glad it helped!

[@luzciernaga6968]

Thanks!

[@trantrungnghia9642]

if you don't know how, DON'T WASTE OTHERS' TIME

[@justsomeguy898]

I was hoping this wouldn't require another extension based on the title

[@TheCodeCity]

How did you come to that conclusion based on the title?

[@DreanPetruza]

@@TheCodeCity the title is confusing because you mention two different plugins; Live server and Live preview, but you actually show only one of them (albeit claiming it's the other one)

[@AayanThakur-ee3zh]

bro deserve a like

[@toddgilbey3979]

I have seen some shitty, inaccurate videos on here in my time, but this one tops it. First I just get the directory map for my site, then I get the HTML but not the CSS that goes with it. If it was a a few years old I'd forgive this, as new software releases occur and things change, but at the time of writing this comment, this view is sign months old if you're going to uploads videos like this, do it properly or stop wasting our time. What a joke.

[@basavaprabhu46]

The output is not live

[@danishwritesofficial]

Just install the next extension called "Live Server Preview", then go to View-->Command Palette, type "Show live server preview" and hit enter.

[@gilangadysaputra]

nice bro thank u so much

[@TheCodeCity]

Thank you for watching, glad it helped. Have you checked this on our new channel? kzbin.info/www/bejne/lZeqi5dnodqGhJosi=G9iVRwfmvK5wnTn_

[@gilangadysaputra]

@@TheCodeCity ofc my man!!

[@earthcitizen57]

thanks 👍

[@TheCodeCity]

Thank you for watching! Glad it helped :)

[@jacobzak7494]

Not working

[@razaxaidi1]

Creator mentions the plugin Live Server by Ritwick Dey, but shows a different plugin, Live Preview by Microsoft. That's the only one you need. It's easy to confuse the two if you have both installed and not sure which does what.