How to setup Visual Studio Code for HTML CSS and Javascript with extensions tutorial for beginners

hi everyone in this video I will be showing  you how to set up and run HTML and CSS code   in Windows 10 as well I'll be showing you the  necessary extensions that you can install in   Visual Studio code so let's get started so just  go to Google and type download visual studio   code you will be getting the first link over  here as code visual studio.com just click that   and here you will be having Visual Studio code  for different OS that is for Windows Linux and   Mac I am going to download it for Windows  so I'll just click on this Windows okay   so download will get automatically started so  it is about 88.8 MB in size so just be patient   so once the download is  complete just click on open   and you'll be getting like this  license agreement just click on accept   you can just scroll down and read it next so this  is the location where Visual Studio code will be   installed so if you want you can just browse  and change the location I am fine with the   default one just click on next and next as well  and here you can like create a desktop icon and   it's always good to have this one just check this  okay action to Windows Explorer yeah better to   give check everything and just click on next and  install such a simple installation process okay   yeah so once things this is done just click on  launch Visual Studio code and click on finish so this is the first interface that you will be  getting after you launch Visual Studio code so   you can like change the theme there is light dark  contrast light contrast dark is the standard stuff   so after opening Visual Studio code I want you  to create a new folder in your system so just   right click in local disk any of your disk new  folder I will name it as code and enter it and in   the visual studio code you'll be having the file  option over here just click file you'll be having   the open folder and go to the folder that you have  created right now so it's code click it and click   on select folder okay yeah just click on trust so  we'll be getting the code folder over here which   is now empty so now we will be creating the HTML  as well as the CSS files so I'll just right click   so I'll just name it as my Pro dot HTML and you'll  be getting the HTML file and if I just now right   click again I will just click styles dot CSS so  this is a way like you can create HTML CSS files   at first so first let me go over the extensions  that are needed so just click on this you'll be   having the extensions over here click it and here  you need to install the live server extension   first so it's going to be live server here we have  this live server really important thing because   like whenever you create and or make any changes  in your HTML file you need to go and refresh it   again in the browser but using this live server  that can be avoided and it automatically gets   refreshed okay so that's the live server at  first and next one is going to be the prettier   yeah this is that extension you'll be  having this prettier code formatter   so it basically formats our code so this is  also like super useful just click on install so I think these two extensions are pretty much  enough I am having live server prettier code and   rest are all like Auto formatted because so here  you can see that I'm HTML over here and CSS is   like Auto formatted and the intellisense  automatically Works in Visual Studio code   so that's the best thing about this IDE so once  you're done with that we will need to change the   size of our code so here you can say it the text  size is so small so for changing the text size   you'll be having the settings icon over here or  it's called as manage click that you'll be having   settings and in the settings you'll be having the  control the font size in pixels I will go with 30   so you can just give whatever the size you want  and hit enter yeah so I will now go to style so   here you can see right the text size has now  increased drastically so save it and after the   text size next one is going to be the theme so  now it is like a black color the theme so I will   go with manage the same icon and here you will  be having the color theme click that so we are   having like these many color themes available  so you can see that you can just select it out   again so I will go with yeah so you can just like  have a preview of that each and every color theme   that is available so this is a default one  I will go with the default you can like have   the preferred choice of your own okay I'll just  go with this one okay the default one itself so   another important tip that I want to show you  in HTML is that the use of this automatic or   default code so for this you need to just type  the exclamatory Mark or the exclamation symbol so   shift and press the one key okay the exclamation  symbol so if you press that you will be having   this emmet abbreviation okay you'll be having the  option like this and if you just now hit enter   you'll be getting this boilerplate code  automatically generated so everything is   like automatically created for you by  default and you need to just have some   body content so I'll just go with H1 so here  you can see right everything is intellisense   automatically I'm getting all the tags that are  in starting with the letter H so this is how it   works I'll go with H1 automatically  closes as well I will go with hello world like that yeah so after entering the  necessary code we need to view this in the output   right we need to see the output what this code  does so what's the normal way of doing it we will   be going to the folder where we have our HTML file  which is code and we will just double click on it   so this will basically open it in the browser but  whenever I make any change so now I am just like   hello world I'm adding D like this and I'm saving  it now but in the output it won't change we need   to like refresh it again so then only it changes  so what if I don't want to refresh it okay so   you don't okay for that we will be using the live  server the extension that we had installed earlier   this one okay so now I will just now close my  browser completely okay so once you are done   installing live server you'll be having this  option called as go live okay you'll be having   like click to run live server just click that go  live and just click on allow access or something   yeah so now the server is on so here you can see  right it's like the Local Host the server is on   our localhost so it's running locally so if I make  any changes and Save in my visual studio code the   changes will be getting automatically reflected in  my browser I don't need to like click on refresh   multiple times even after making a simple change  so I will go with rather than saying hello world   I will go with hello everyone like that and  I'm just saving it in my visual studio code   I'm saving it and if I go to my browser so here  you can see right I didn't refresh it the changes   are getting automatically reflected in my browser  if I make any in my visual studio code so this is   the purpose of this particular live server it's  super useful and rest it's fine we have the auto   intellisense so here you can see that for all  the tags we will be having the intellisense   working so I iframe image so the intellisense is  fine no worries about that so here you can see   that all the tags will be coming and now let's  see about some CSS so let's add and check some   CSS so I'll go with Styles and I will have ID tag  he hs heading so for those who don't know what is   uh id tag is used to uniquely refer a particular  tag or element in HTML so if I give ID as heading   this refers to this particular h1 tag so with the  help of this ID we can add Styles and change any   properties for this text or the heading H1 so  I hope that made sense so ID I will give it as   heading so I'm just saving it now and I will go  to my styles.css so in my case both are present   in the same folder it's always good to have in  the same folder so I'm going in Styles so for ID   we will be referencing it with hashtag and we will  type heading curly bracket and here we need to add   any changes that we want so I will just go with  color at first so it's going to be so everything   has auto complete over here intellisense works by  default so that's the best thing so I'll go with   color and here you can see that so many colors  varieties are displayed I will go with blue and if   I just now save it and after saving it I need to  reference this particular CSS file in my DOT HTML   file so for that just within the head tag okay  you need to add this particular link tag I hope   you know these things link will be having that  link rel style sheet link and after that we'll   be having Rel yeah equal to we need to specify  the file type which is style sheet yeah style   sheet be careful with the spelling and after that  you will be using the href for referencing and   inside that we need to like pass the name of this  file which is styles dot CSS in my case and just   close okay doesn't have a closing tag like a slash  it is just normal open and close angular brackets   so I'm just now saving it so if everything  goes well we need to have a blue color hello   everyone in our browser so here you can see  that I'm having a blue color hello everyone   so yeah pretty much simple guys only these two  for like what you call these two extensions and   everything is just taken care by Visual Studio  code and don't forget about this Auto like I told   you write the emmet abbreviation for generating  boilerplate code it's super helpful so I think   you would have found this video useful mine is a  programming Channel I've done many tutorials in   C C++ Java python node.js react JS mongodb MySQL  so do check them subscribe me thanks for watching

Channel: United Top Tech

Views: 10,402

Keywords: How to setup visual studio code for html css and javascript, Visual Studio Code setup for HTML CSS and JavaScript, Visual studio code tutorial for html css javascript, setup for web development, how to run html and css and javascript in vs code, Vscode tutorial, setup for visual studio code, Html css tutorial

Id: NFE_avBNGfU

Length: 9min 8sec (548 seconds)

Published: Sun Feb 19 2023