Get live HTML Preview in VS Code (Live Server Tutorial)

Подписаться 842

Просмотров 365 тыс.

50% 1

Want this useful live server extension on your Visual Studio Code? here you Go!
If you want more tutorials about web development and web design that include HTML, CSS, JavaScript, Bootstrap, Login Forms, Registration Forms, Responsive Websites, Animations, Hover Effects and more web design stuff then don't forget to subscribe to Soap Js and Thanks for watching this video.
Hash Tags
#HTML #CSS #JavaScript #WebDevelopment #WebDesign #Bootstrap #Jquerry #Web #VsCode #Live Server
IGNORE THIS
Get live server,vs code,visual studio code,live prevew,html live preview,tutorial,how to get live html preview,atom,code editors,html,css,javascript,bootstrap,web developement,html website,css website,programming,visual studio,extensions,how to

Наука

Опубликовано:

30 мар 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 137

@Soap_js 3 года назад

It only Refreshes once you save your html file

@yandeu 3 года назад

You should try "Five Server" for instant refreshing!

@Soap_js 3 года назад

Gotta pin :)

@justignorethis4168 2 года назад

@@yandeu where is that?

@yandeu 2 года назад

@@justignorethis4168 vscode Marketplace

@Soap_js 2 года назад

The thing i showed in the tutorial works just fine and it is what i use myself

@jamesblankenship1 Год назад

For all those struggling to figure out how to have two tabs open at once; You need to open your web preview, then right click the tab and select the split up/down/left/right. This will allow you to split up your workspace and have as many tabs as you want open at once. Cheers. 🎉

@Anjalisharma-pd9ii Год назад

Where is web preview located

@JustMeMaydo 11 месяцев назад

@@Anjalisharma-pd9ii for me i swipe up with 3 fingers

@michaelsazz3545 9 месяцев назад

@@JustMeMaydo what about for ppl that don't have touch screen systems

@rupchowdhury1999 Год назад

Thanks a lot. My problem is solved. Also adding, if you turn on the auto save option and give it a short time, then it will automatically update in the preview.

@peter-jb Год назад

so simple and direct to the point, thanks dude :D

@MsCellobass 5 месяцев назад

thats a lie you already knew how to launch it. thhis was not clear in this video like a lot of the crappy vids on YT

@alicia8294 Год назад

Thank you so much!!! I spend 2 hours thinking I code something wrong!

@sfwnsft 3 месяца назад

Amazing video. Straight to the point!

@cezarlupescu9021 2 года назад

Too easy 😁 thanks!

@Gigaxann 8 месяцев назад

thank youuuuuuu!!!!

@a7mibr206 2 месяца назад

Thanks a lot, I was trying to figure out how to enable the auto reload for days

@Dkny2001 3 месяца назад

extremely valuable, saved me a lot of time and frustration! thank you!!!

@Soap_js 2 месяца назад

I'm glad to hear that ❤️

@snow6037 6 месяцев назад

Thank youuuu I was struggling new subscriber 😊

@didlycantsnipe4403 Год назад

Pls help it shows "Command 'Live Server: Change Live Server workspace' resulted in an error (Cannot read properties of undefined (reading 'map')"

@femed1283 Год назад

thank you, for the short video, lifesaver

@Idzi005 Год назад

Cool. Thanks!

@miositv549 Год назад

I appreciate it man

@keerthivasan138 Год назад

bro how to use two tabs simultaneuosly in windows In my laptop one minimized tab closes automatically when i click on other

@user-xg4lu2ft8x 4 месяца назад

I did by this video.May Allah make this coding journey easy for me.

@_MANDADDY Год назад

Thanks for this.

@mustafa-oz8fg 10 месяцев назад

Worth to watch. hundred videos not result i found . 1.5 min is less effort . Thanks my boy you earn my like

@Soap_js 10 месяцев назад

Thank you mate, i try not to waste any time in all of my videos ❤

@miidoo443 9 месяцев назад

dude litterally same here i looked everywhere and watched long ass videos and it all here in less than 2 mnts ... GOOD job Mr SOap

@geoafrikana 2 года назад

Thanks so much.

@ethiopianenawdsetube3465 Месяц назад

you have helped me with my problem

@exeohe Год назад

Thank you !

@yaasindahir7314 Год назад

Thanks pro👍

@JoseFlores-oi6zy 2 года назад

Thanks 🙏

@MikeRotchHertz Месяц назад

Hey, sorry for being hella late, but what version of vs studio is this, I am using 2019 right now, and it looks alot diferent from what you have

@aravindi7838 2 месяца назад

Bow to you! ❤

@believe478 4 месяца назад

thanks bro....thanks alot....love u......

@msh7mood351 Год назад

thx bro love you so much thx my bro ❤❤

@MrPikachu53 14 дней назад

Thanks man

@bijesh619 Год назад

whenever I change some value in css the page refreshe and all the css styling vanishes for fraction of sec and comes back causing the screen to flash, do you have any solution? I am using firefox browser

@nashaeshantell2082 9 дней назад

Mines isn’t syncing. Example the browser pops up.. say I type extremely excited , it’ll pop up in the browser the exact same way with the brackets instead of the words being bolded. Any suggestions anyone?

@markgordon6513 2 года назад

goat !

@biataborda4099 10 месяцев назад

foi o unico lugar que eu aprendi . muito obrigada

@k_thee_man2479 19 дней назад

Greetings.Can you please help I have downloaded the live preview but it doesn't show up when I right click it only says Show preview Not Show preview: Live preview

@R94XS 9 месяцев назад

thank you pro 👌

@InfoTechnicall 3 месяца назад

Thanks bro thanks thanks thanks

@guruprakash3466 2 года назад

I am not getting browser window side by side of vs code rather its opening separately so how can i see both at a time?

@w0wn 2 года назад

align it like any other window

@jamesblankenship1 Год назад

Right click the preview tab and select split right/left/up/down to split up your workspace.

@SuriyaWNL57 3 месяца назад

Hold windows + and click right or left keys as your wish

@joshua-sg4qm Месяц назад

@@w0wnguh

@vinodalaparthi9794 9 месяцев назад

Thank you so much

@krishanpeiris8526 Год назад

Thanks bro

@TheHalalStudent 10 месяцев назад

thank you. you're the best

@Soap_js 10 месяцев назад

Thanks 👍

@believersone9863 2 года назад

thanks

@alemstudent224 Год назад

thank you

@prasadkumardeshmukh Год назад

very nice brother but simultaneously two tab kaise record karate ho o batao please

@okipullup5299 Год назад

I can't take it live!!!! How do i fix it? A fter I installed live server, I couldn't take it live. It says nothing! Is there anything that I can do for it?

@gooditer Год назад

thank you✨

@Soap_js Год назад

You're welcome 😊

@LOOPYT97 4 месяца назад

thanks a lot :)

@RealityCheck6969 6 месяцев назад

thx!

@abwa1941 Год назад

Note if the Preview option not showing to you for HTML file do the following :- 1- you need to install Live Server extenuation 2- make a file that you want it to be your work space 3- from VS software from file select openWork Space ... 4-go to view command palette... then select open with server live option 5- then try it is the option will show to you

@kothadeepakreddy6555 Год назад

Ya bro , i dont know this option So i am not getting preview of my output in live server

@Soap_js Год назад

Open your html file then try to run the server it should open your browser

@kothadeepakreddy6555 Год назад

@@Soap_js after opening html file Clicking on open with live server option it is not showing me preview

@Soap_js Год назад

Are you getting any notification, normally shows at bottom right corner

@Soap_js Год назад

Also did you restart vs code after installation

@MullaSpeaks1 Месяц назад

Thanks

@parshva7082 Год назад

when i select open with live preview it redirects to browser and shows me the file what should i do

@qwerty20917 3 месяца назад

did you got a solution..?? facing same issue

@Kawusz0 Год назад

thx bro

@PROFESSOR_SURAJ Год назад

Bro please help me i can hide my live server throw the right click and hide it please tell me how I unhide the go live server?

@shobhapatil9934 4 месяца назад

Tysmm

@bluestar3639 Год назад

Bracket code editor is far better. It does not need to refresh... Typing in code editor and appearing in live server... I love this... Instant mistake can be judged....

@Baarachh Год назад

True

@michaelsazz3545 9 месяцев назад

You can also do this in vs code I have used both and don't u dare say that again

@biswajitdas9519 23 дня назад

I am not getting 3 side circle signals

@OthmaneEl-ux1bt 10 месяцев назад

thank you so much

@peter0739 Год назад

omg the song rocks

@Soap_js 10 месяцев назад

yehe boy

@bestofworld21 11 месяцев назад

Thanks for helping

@Soap_js 10 месяцев назад

Happy to help

@thermon6945 2 года назад

Can't get it to work. For me it says "Server is Started at port : 5500" and doesn't open any preview. Tried in safari and Google Chrome too

@peraperas4314 Год назад

same, did you manage to solve this problem?

@thermon6945 Год назад

@@peraperas4314 Hey, as far as I remember, for Live Server to work you need to have the folder containing the HTML file open in VSCode. Let me explain: If you have a folder “dir” containing another folder “project”, which contains your html file, you MUST have the “project” folder open in VSCode, not the “dir” folder. Hope that helps (📁dir - 📁project - 📄index.html)

@soluschristus96 Год назад

Alternatively, go to your folder, drag your html file into chrome address bar and it should open it. In vscode, enable autosave (it saves after every key input), now go to chrome, search for and add Tab reloader in chrome extensions and enable it. Set it to reload every 10s (that's minimum). Hope this helps

@hairuoxiatan7130 2 года назад

thank you. just start using VS code.

@ykkizzle6753 Год назад

How far have you gone in coding now?

@ATGBrewing 6 месяцев назад

Morning @Soap_js. Apologies for this incredible feeble question but a newbie to all this coding lark and I can't even figure out how you're getting Live Server to preview on the right within Visual Code. Mine keeps opening up a new tab on my default browser. How do I solve this?

@Soap_js 3 месяца назад

It opens in the browser for everyone. For me too. You just need to resize your both windows of VS code and Browser side by side.

@ATGBrewing 3 месяца назад

Thank you hugely for the reply @@Soap_js

@Soap_js 3 месяца назад

Happy to help, my friend