Web Page with Visual Studio Code

this video is going to describe another tool for creating web sites this essentially is a code editor as you can see on the screen Visual Studio code is available from Microsoft it’s a free product and i’m just going to explore this briefly so you can use this potentially is just another tool to create your webpages i really like this tool because it’s got some nice features and so if you search for Visual Studio code you should be able to find it readily it’s available for both Macintosh and windows it may be available for Linux indeed it is so just about every platform it’s supported and it’s very nice because it’s the same on every platform so go ahead and download that i’m going to move onto the code i’ve already downloaded and installed it now to use Visual Studio code essentially it assumes you have all your source files and everything in a project folder so i went out to my Windows Explorer and I created a brand new folder this folder is empty i’ll double click the folder you’ll notice there’s nothing in the folder and so I’m going to use this folder in visual studio and I’m going to add my various files so I’m going to fire up visual studio and when you get into Visual Studio essentially this is what you’re going to see it doesn’t have any folders or files or anything open so i’m going to go to the file menu and i want to say open folder and I have to go find that folder that i had recently created so i’m going to go into my documents where I put it and I go into my classes and I go to CIS 122 and somewhere in here I’ve got a folder for my javascript online class and i just created that recently and you’ll notice I’m stumbling around, there it is and there’s a folder that I created so I’m just going to highlight that folder and click the Select folder button and so here it is and you’ll notice that it says a project 03 that’s the name of my folder and there’s a little drop-down arrow here I could open up and show the files I noticed there aren’t any files open so I’ve got a couple little icons here i can make a new file i can make new subfolders do a refresh and collapse it back down so first what I’m going to do is I’m going to just make make two files i’ll i’ll make my first file my index dot HTML so there we go and you’ll notice it creates this new file here and it’s got a tabbed interface now there’s nothing in this index file so now i’m going to go and i’m gonna create another one and this one I’m going to call it a script dot js that will be for my javascript so now I’ve got my two files and I can start editing those two files well i’m just going to do something kind of quick and dirty hear what I’m going to do is I’m going to pop back over to my browser and i’ll show you what i can do i’m going to go to a brand-new window and i’m going to open up the w3schools w3schools and on the w3schools page again this is a resource I’ve referred you to you’ll notice right on their own page here they have this little sample of HTML so I’m just going to go ahead and copy this little sample HTML it could not get any easier so i’ll just go ahead and do a ctrl C for copy here and I want to go back to my visual studio window and i’m in my HTML so I will now paste that and then there it is and you notice how color codes it and everything I think if I right-click notice it says format document and this right-click menu if i choose that it then starts doing some nice and denting and spacing so kind of cleans up your HTML code so the next thing i want to do is I want to create a link to my javascript file so up here in my HTML you notice they’ve got the title there’s no head tag so i’m going to go ahead and add a head tag here so i just put a head tag in right there and you know whenever we put most tags in we have to close those tags so just down below the title here i’m going to slash close that head tag and we took care of that now I’m going to right-click and i’m going to do format document again let’s see what happens ah yes now notice how the title tag is indented inside my head tag so now I’ll go ahead and add my script source so script dot src there’s a little pop-up menu here notice source equals and I just hit the tab key with the equal sign and the quotes and the name of my file of course we call it script dot js so then I just close that tag and then /script and there’s my closing tag for my script now I’m getting some kind of strange errors there i’m not sure what’s going on with that but as I left the r out on the word script so that’s why I gave me an error that’s nice put the r in there and now everything’s happy so again that’s an advantage of this editor it understands HTML that’s pretty sweet now at this point I don’t have any JavaScript but why don’t we go ahead and just put a button in here so put a button in here and you’ll notice it pops up and it says you know button is my first choice i can just do that and I want the button to have an onclick handler and again notice as soon as i type on it pops up all these different onclick type things so on CL and there it is now I can hit tab it puts the equal sign and puts the quotes in there and so let’s just put in a function call here notice the name is runCode the open parenthesis I gotta close my button tag there and now I need some label for my button so i’ll say click me is just a generic label and then I need to close the button tag and as soon as I took the close / b it gives me the pop-up and I can just hit tab and it completes that so now I’ve got a reference here too a function called run code it will go to look for that in my script file here and notice it says control-click to follow the link so if i didn’t actually have that file open already i could control click and there I am in script dot js so all I need now is a function called runCode so type function runCode open and close parenthesis open curly brace and it puts my closing curly brace on there i always like to hit and enter key and notice it drops that curly brace down indents ready for me to type some code and we’ll just do something simple here with an alert and just say hello world our good classic hello world and then we put a semicolon on the end and so now we actually have some HTML code and we have our script code and so all we need to do now is try this out but the thing that I’m constantly forgetting as I’m constantly forgetting to save my files so i’m going to go to the file menu and choose save oh look at that they added a new feature autosave I’m feeling good about that because I was always forgetting to save things nice so at this point I’ve got a webpage and a little script behind that webpage and I just need to view it so that means i need to go find my index.html so I have my index.html right here in my explorer window and so i can now open this up with a web browser so firefox is my default web browser so just go ahead and double-click that it so here it comes so there is my little HTML page that we just opened you notice it’s got to click me button and it’s got that default text we didn’t change that so i’m gonna go ahead and click the button and it should do the little alert that says hello world click there’s the hello world alert so the javascript is working like a champ so this was a very quick introduction to Visual Studio code if you make any changes let’s just go ahead and make a quick change so i’ll just change this h1 heading and we’ll call this hello Visual Studio code we’ll change our paragraph tag here put some different text in our paragraph tag there let’s say this is a great editor cross-platform and autosave is on so let’s check yes indeed so it’s also saving that that means we should just go back over to the browser window we can do a reload in our browser window here i’m just going to do a ctrl R for reload now it says the low Visual Studio code is a great editor and again the click the button does what it did before and everything’s working like a champ so the process then is simply to create your files and you’ll notice how easy that was to create my files you want to start with a folder that exists though so that you can choose the file menu and say open folder it will be an empty folder to start with of course then you just simply add some files to your folder here we added the index and the script files edit those files to have the content that you want everything gets automatically saved and then you go find that file in it’s folder where you’ve stashed it open that up with your browser and you can view it and then all you need to do to remember after you change it is to do a reload on your browser and reload typically are most browsers just control R to do a quick reload button so anyway quick-and-dirty off you go and I would encourage you to take a look at Visual Studio code it’s a nice little program it’s free and I really applaud microsoft for making this thing available

Written by Michelle Gutierrez

39 comments