How to Setup Visual Studio Code for HTML, CSS, and JavaScript

in today's video we are going to talk about how to set up visual studio code for HTML CSS and JavaScript myself Muhammad zubair and this channel is all about showing you how to become a highly paid IIT Pro really fast so without any further Ado let's get started [Music] well first of all we need to download and include some of the extensions and files in order to run HTML CSS and JavaScript so first of all I'll download a file for my JavaScript and that is node.js so open your favorite browser and just search for download node js and hit enter click on the first link that is from nodejs.org and it will take you to a page something like this from here I will download a file for Windows installer and I'll go with Windows installer dot MSI extension I have 64-bit version system that is why I'll just click on that one I have already downloaded this file that is why I'm not going to download it again so I'll just cancel it and I'll go to the folder where I have this file so here I have my node.js file I'll just double click on it I have already installed it but I'll show you that how you can do that just click on next and here it says if you want to change repair or remove well as I have already installed it that is why it is giving me this message so I'll just click on change and I will just click on next in case if you want to install the necessary tool along with your node.js just click on this check box and just click on next now click on change in your case it will be install so just click on yes and now the installation process has just begun we are done with this one now I'll close this window and I will open my command prompt so I'll just search for CMD and it'll enter and here I'll write node space hyphen hyphen version hit enter so here if you see here I have the version as 16.16.0 along with node.js we also get to install npm so I'll write here npm space hyphen hyphen version I will hit enter now so here we have npm version installed as well I'll just close this one and now it's time to open our Visual Studio code so I'll head to that so this is my visual studio code as we have downloaded node.js for our JavaScript we have to include some of the extensions for HTML and CSS so first of all I'll click on this extension section and in the search bar I'll write here HTML space CSS and here you can see we have many extensions available in terms of HTML CSS but we need to download and install this one that says HTML CSS support click on that one and just click on install I have already installed it that is why it shows uninstall and disable option after you are done with this extension you have to do one more and that is live server this extension will help you to run your HTML code just click on it and click on install I am done with this installation as well now we need to download and install one extension for JavaScript and that is Javascript space es6 and here it is I have already installed it and now the last one is code Runner so just right here code Runner and here we have I have installed this one as well so just install all these extensions and now you are good to go I'll close my extensions now I'll close this window as well and I'll click on my Explorer here I'll create a new workspace for that purpose I'll click on file and I'll click on add folder to workspace go to the directory where you want to create a folder I'll go to my desktop and I'll click on new folder and I will name it as HTML hit enter click on ADD and we are good to go now click on this HTML section and click on this new file icon and I will create a file for my HTML so I'll write here file dot HTML and make sure to write HTML as an extension otherwise it will not recognize what type of file it is after that click on it again and this time we'll create a file for our CSS so I'll write here style dot CSS we are done with this one and I'll create one more now and for that purpose I'll name it as script dot JS and this file is for JavaScript and as you can see the JavaScript icon has appeared on its own so how goal is Visual Studio code now let's enter some of the codes into our HTML file and let's try to run and let's see if we are able to run our HTML CSS and JavaScript code so first of all I'll write here HTML I will try to enter and I will try to write the simplest of code after HTML I will have my head tag so I'll just write here head and inside my head tag let's have a title for this website or for this page so I'll write here title and in my title I can name it anything I'll name it as skills build training we are done with the title now we can add as many things as we want now after the head tag let's have our body tag I'll write here body I'll close this one and inside my body tag I'll write here H1 and inside the H1 I will write here welcome to first HTML file after that let's have a paragraph so I'll write here p and inside it I will write this is a paragraph now we are good to go now let's add some of the code into our style.css file I'll write here body and I'll have my braces and inside my braces I'll write here background color and you can choose any color as per your liking you can write the name of the color you can give the hexa value or you can select from the list as well let's go with this one that says blue violet now we are done with our style.css file I'll just save this one let's head to our script.js file so let's have a simplest of message in here so I will write here document Dot right and inside my braces I'll have a string that will say this is a JavaScript code after that I'll have my semicolon I'll save this file now and now I'll head back to my file.html so as we have added some of the code in both of these files now we have to link both of them into my file.html so first of all what I'll do after my title I'll have my link so I'll write here link and inside my link I write here Rel equals style sheet after that I'll give it a space and I'll have my href and href will be equals to name of the file and file in my case is style dot CSS we are good to go with this one now let's link our other file which is from JavaScript so for that purpose I'll write here script and inside my script I will write here Source equals now I'll write the name of the file which is script dot JS in my case we are good to go with this one as well now let's save this file and now let's try to run our program and let's see if it works or not so for that purpose go to run and click on run without debugging from here select the browser that you want to use for this particular file I have Edge and promo available I'll go with chrome so here if you see here we have all the code and here it says welcome to First HTML5 then we have our paragraph tag and this is the code from JavaScript and if you see we have the color that we had in our style dot CSS file and this is how you can run your JavaScript CSS an HTML code into your Visual Studio code and that brings us to the end of today's video please leave a like And subscribe to our Channel along with pressing the Bell icon I'll see you in the next video till then take care

Channel: SkillsBuild Training

Views: 156,425

Keywords: Visual studio code, Vscode setup for html and css, Visual studio code tutorial, Vs code tutorial, Vs code for html, Setup for visual studio code, Vs code for css, Vs code for javascript, Vscode tutoria for html css and javascript, Best setup for visual studio, Web development, Vscode extensions, How to setup visual studio code for html css and javascript, Setup for web development

Id: 5deeCvboSos

Length: 9min 47sec (587 seconds)

Published: Mon Nov 14 2022