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

so I have a website here index HTML and HTML page that contains JavaScript CSS and normal HTML now typically if I have to see what this page is doing or run this page what I do is click on run and click on start debugging and this page is opened in a web browser so as you can see I have a page here now how can we see this live so whatever changes we are doing it will be shown to us live so to do that go to your extensions click on this or click control shift X Now search for live server now click on this first one by rri day this is the one with 43.6 million installs with this icon click on install so now the extension is installed now what you can do is go back to your code l or HTML now we need to open command pallet so the shortcut is control shift p or what you can do is you can go to view and click on command pallet and this command palette will open now now type live server and click on this live preview start server and this as you can see is shown here now let's say we want to change this to my website so let me write my website here as you can see I'm typing here and changes are being reflected live here so whatever you do will be shown here and let's say I call this item one and it is shown here here this is how you can live preview your changes and make your debugging and testing a lot faster if you have any questions St in on the comments below

Channel: The Code City

Views: 4,568

Keywords: live preview in vscode, html live preview in vscode, html visual studio code, run html visual studio code, get live html preview in vscode, run live website in vscode

Id: QmQFVghf0H4

Length: 1min 40sec (100 seconds)

Published: Sun Jan 14 2024