HTML Tutorial: Installing VS Code & Live Server | Web Development Tutorials #2

HTML Tutorial: Installing VS Code & Live Server | Web Development Tutorials #2

#HTML #Tutorial #Installing #Code #Live #Server #Web #Development #Tutorials

We are going to start HTML tutorial from this video If you haven’t accessed my HTML tutorial playlist Then access because this is place where all videos will upload I will bookmark it and I want you to bookmark it too And will save it By clicking here playlist will get saved and quickly

I will come to the point and before that I want all of you to like this video And show some support and after that open a new tab Let’s recap what we saw in last video In the last video we saw that the websites to built them HTML CSS and JavaScript are needed

And after that we saw what is HTML CSS and JavaScript We saw that we give response to web server and in return it gives HTML CSS and JavaScript Here we will prepare to write HTML You might be thinking what means by preparing to write HTML?

We can write in notepad too. yes we can. But sometimes to make your workflow fast And there are some things in IDE which we want to use And we won’t write in notepad it doesn’t mean you can’t It’s just not recommended to write in notepad Because you have to write everything in notepad

For example IDE like vs code will give you some suggestions Will make your workflow bigger, easier And you can code easily with multiple tabs So let’s install vs code And you have to just write Visual Studio code Write install visual studio code not Visual Studio And it is a free open-source IDE

From Microsoft I want everyone to download it You can see download for Windows stable built is coming I will click on this and it will download According to your Internet connection my connection is pretty fast So it got downloaded quickly 56 MB After that click on show in folder

And then run this installer which was downloaded As I run this it shows me licence agreement we will go through quickly and click on I accept the agreement and then next after this some important thing. Check on add open with code to Windows Explorer file context menu

And check on this too. And here check on add to path Check all the things which I have checked it is very important If you want to create desktop icon check on this too After this click on next and install After you click install it will start installing in your computer

And it might take some time But when it finishes it will notify us and we click on finish And we can use VS code Till this is happening we will come into a folder in our computer As you can see I have come in a folder This is installed so here I will

I won’t launch it I just will finish it I will make a new folder here And I will name the folder complete web development Boot camp because we will learn web development from starting to end I have come inside this folder right click And here you can see open with code is available

You must also have this option This is the one way to open it As soon as you will click it this folder will open up in Visual Studio Here you can see the complete web development folder Is now opened in Visual Studio code

You can open any folder in Visual Studio code or any file If you are new with Visual Studio code then Don’t worry about it just do what I did By any chance if this doesn’t work then I will say from here Run Visual Studio code and then from here

Choose the option open folder And then you can open any folder you want I will close it now I have already opened a folder in Visual Studio code Yeah right click will work here and open with Code will come If it’s not coming then install the Visual Studio code again

And with that restart your computer This should not happen but if you can’t see open with code then You can do that. We did this We can create our website here What is a simple website? A simple website Harry.html if I write this Then this is a simple website

You can say that after harry.html Before this, this is written means this is an HTML file with that to create a CSS file Harry. a simple CSS file harry.css and a simple JavaScript site Harry.js, this is extension and this are different type of files I won’t go in CSS and JS right now

We’ll start from HTML In which time we will see all the things So we created 3 type of files with the help of vs code If you have created this 3 files with the help of Notepad in a folder Then think how much problem you would have faced

You would have to make files one by one And then would have to edit from notepad Then you wouldn’t have the syntax highlighted too For example if I write console in JavaScript it suggest me and if I write .log then it suggests me this Showing me how to pass arguments inside this

I won’t show this much to you I just wanted to show that this suggest me Hence we don’t use Notepad, we can use but We don’t prefer to use notepad We use any IDE or any source code editor And for web browser I will recommend Chrome to you

Google Chrome is a good Browser stable browser and I highly recommend it In this whole course I will be using that browsers only If you want to use anything else you can use Firefox etc But I will use this just for FYI With that we will see about vs code a little more

And want to quickly tell you something because I don’t want to make this course a comprehensive vs code’s tutorial I want to tell you some things about vs code You installed vs code as soon as you write ! You can see Emmet Abbreviation written here

When you clicked this you get a boiler plate for HTML Which you can take forward, by editing it You can make your website like I will write Harry in my title I will explain all this thing to you I just wanted to tell you as you type it gives you suggestion

On pressing enter it autocomplete And here is a gear icon for the the settings of vs code If you are seeing it for first time it looks dangerous You may feel I don’t know anything how I will use it but I will say

Try to use it because if you program in Python in future or in any other programming language Then this Visual Studio code will be very helpful to you Let me tell you about this five buttons among these just focus on Explorer for now You can open close Explorer like this

It contains all files which you have opened You can see the whole folder here You can close or open it, if you want to create a folder click here To create a file click here New file, new folder and this button is for refresh That if you create any file here

Created any file here and not showing here then you can refresh it It will be shown here With that here search and git is there many may not know about git as a beginner, no worries Leave it for now, leave debugger too for now And here are extensions like store in Microsoft,

Play Store in Android app just like that and here you can install extensions So here we are going to install an extension named Live server as soon as you write live server make sure You are connected to internet. I have already installed but you have to click on install

As soon as write live-server and as soon as you click on install your this live server will get installed So by uninstalling I can install it again After uninstalling if I Reload and write live server here So here it gives me an option to install click on this

And by clicking on this that’s it you have to do this much And as soon as you do this you can see a go live button here Reload your vs code if you can’t see it Means close and reopen it but as you click on go live

I clicked on go live and you can see a page with title Harry here And if I write something in body like this, I’ll remove this Harry, not harry, hello world. I wrote hello world and you can see hello world here without reloading

This is the work of live server you don’t need to reload it Simply as you change here instead of hello world, hello Harry and save it. So you can see hello world became hello Harry So as I will work things will get updated here Live server help us in this

And let me tell you more about vs code So here is settings here is command palette Where all commands are available, leave this for now. Will go in settings after clicking settings There are two type of settings in Visual Studio code user setting workspace setting. User setting means the user in this computer

Means person who is using the computer Settings for that user workspace means setting for this folder which is opened So there will be some things you want to apply only on this folder Like live server I don’t want it for any Python project User setting have things which you prefer

For example if I want to zoom Mouse wheel by pressing ctrl So I will tick on this zoom the font of the editor using mouse wheel and holding ctrl so If I check this then by pressing ctrl and scrolling mouse wheel I can do small big

Font, and this is a useful setting for me. So you can override different settings like this So as you will change the settings All your settings gets saved in a file named settings.json So as you click on open settings.json So, there are all the settings which you have override

Which are different from defaults comes here These are user settings if you want to change workspace settings Then click on workspace change this And as you can see as I changed mouse wheel setting this came here. There will be some things you want with

Every project like this mouse wheel setting I want that In every folder, every project I get this setting. So what I did I made editor.mouseWheelZoom true here If I make any other project in this computer That you I want this setting like this. So this was settings

And if you want to learn more about VS code Very integrated in very detailed everything So I have made a video for that too I will tell you where you will find it You will get that in my Python course even if you are not learning Python then too I’ll say

If you want to learn vs code in detail then Watch this video, learn vs code in one video. Vs code tutorial + Python setup In this I have mainly talked on vs code, less about python So you can watch this I have explained everything in detail here

But here keeping this video in mind Till the topic of HTML CSS and JavaScript This much was enough if anything was missed I’ll tell you later If I use anything else I will tell you during this course So let’s close settings here One more important thing keyboard shortcuts

There are by default keyboard shortcuts in your vs code But you will want to override some keyboard shortcuts Like Ctrl + D shortcut I have kept for replicating line. Let me show you here if I show you my keyboard json file What happen is the default keyboard shortcuts Stays in your vs code

If you add any other keyboard shortcut then this Means if you change it then in your keybindings.json it will come there in your json file. See I have kept ctrl+D for editor.action.copylinesdownaction So, here you’ll write copylinesdown So, I have kept it as ctrl+D here.

I have override it by default it was something else What happens from this is when I press ctrl + D I can replicate this. And I can copy many line by selecting like this. So this is very useful for me I used sublime text earlier

This was the shortcut in that so I had habit For using this shortcut There will be many shortcuts of IDEs which you have habit of It can’t happen if you are a programmer If you have interest even a little bit in programming then

There’ll be some shortcut which you want to bring from other IDE Find that in this list and override it You will overwrite it will automatically get in keybinding.json You won’t need to edit this file So close this keybinding for now you can change shortcut here

If there will be something else I will tell you I won’t talk about users snippets right now And we have talked about extensions already we have talked about settings If we talk about command palette then a command opens up here You can type all the commands and use here

But for now I will close it and not talk much about it Our life server is still running and until I click on this Till then my server will not get closed I clicked on this now my server is closed Let me show you if I reload this it will show not found

Site can’t be reached because I close the server So this was my vs code, live server I hope you have understood clearly. All the things I have said, the foundation You might have understood I want to say one thing for Linux and Mac users

Don’t think like I am saying each and everything to you I know I don’t have to teach you software installation You already know that but Linux and Mac users Don’t get scared thinking I am using Windows so you can’t follow this tutorial. Window is just an Operating System

So, I am using window doesn’t mean you can’t follow All the rest of the things will be same All the vs code concerns and keyboard shortcuts It will run parallel for Mac and LINUX you can smoothly follow this tutorial Shortcut I have already told you

The shortcuts which you have used till now and have habit for Use them And I believe you need two hands to press any shortcut Then I don’t think it as a shortcut according to me common shortcuts should work with one hand Like ctrl+D ctrl+esc, ctrl+c, ctrl+v I keep same for copy paste

But you can override anything and take benefit of VS code’s power A thing before ending this video terminal As you click on new terminal an integrated terminal opens here And I have set my terminal as gitbash Clicking here and setting as default shell You can set your default terminal

If you want command prompt or powershell you can do that By default it will be powershell which I have selected too So if I open my terminal now it will open Windows powershell And it is to make your life easy You don’t have to open terminal separately

If you don’t know what terminal means or why we need it Then don’t worry I will tell you everything in this video But just understand we need to keep our terminal here And keep everything else same If you need to change any setting I will tell you

I hope you have accessed this playlist and You will wait for the upcoming videos And will follow this course properly And will become a successful web developer If you liked this video then do like And tell me in comments your suggestion during this course

What should I cover, I want you to interact with me in comments Don’t forget to access this playlist Don’t forget to save, click here and bookmark it That’s it for this video Thank you so much for watching this video And I will see you next time.

Like it? Share with your friends!


What's Your Reaction?

hate hate
confused confused
fail fail
fun fun
geeky geeky
love love
lol lol
omg omg
win win


Choose A Format
Voting to make decisions or determine opinions
Formatted Text with Embeds and Visuals
Youtube and Vimeo Embeds
Soundcloud or Mixcloud Embeds
Photo or GIF
GIF format