WEBVTT

00:00.440 --> 00:01.820

I welcome you back again.

00:01.820 --> 00:06.080

And in this video we start by setting up our project for this course.

00:06.110 --> 00:06.650

All right.

00:06.650 --> 00:12.770

So this Visual Studio will be used for both JavaScript and web development for this
course.

00:12.770 --> 00:15.290

And go ahead and set up the project folder.

00:15.290 --> 00:17.600

And then we kick off immediately.

00:17.630 --> 00:20.990

Now first of all I'll go ahead and move over to files.

00:20.990 --> 00:24.440

And I'm going to go to open Folder.

00:24.440 --> 00:26.030

And we have no folder created.

00:26.030 --> 00:28.190

I can go to my desktop right in here.

00:28.220 --> 00:35.960

I'll go ahead and create a new folder under um I'll go ahead and say I can give
this folder name, maybe

00:35.960 --> 00:40.700

a website or any name JavaScript or react and so on.

00:40.700 --> 00:46.370

I can even go ahead and give it JS tests or anything, and anytime I give that will
actually be the

00:46.370 --> 00:46.850

folder name.

00:46.850 --> 00:48.230

So let's go ahead and use this.

00:48.260 --> 00:53.030

Even though that does not actually supposed to be the folder name, it can be like
maybe my website

00:53.030 --> 00:53.690

then instead.

00:53.720 --> 00:56.750

But I just want us to know where we can be able to give any name.
00:56.750 --> 01:00.020
And the conventional way is to use the name my website.

01:00.050 --> 01:04.750

All right, because I have my website already, uh, right in here that I have.

01:04.750 --> 01:06.490

I just want us to click something else.

01:06.490 --> 01:10.660

So I'm going to use Jay's text and I'll go ahead and select folder.

01:10.660 --> 01:13.360

And then that folder will now be open.

01:13.360 --> 01:16.120

And now I have that folder right in here.

01:16.900 --> 01:22.690

So over here you can see I have Jay's text.

01:22.690 --> 01:23.920

And that shows the folder.

01:23.920 --> 01:26.560

And anything I want to do I can go right inside here.

01:26.590 --> 01:31.150

I can create a new folder right here I can go to create files.

01:31.180 --> 01:35.050

I can be able to create anything I want to right inside this folder.

01:35.290 --> 01:35.980

Okay.

01:35.980 --> 01:38.440

So anything you want I can create a new file.

01:38.470 --> 01:43.990

I can go ahead and say I want to create a index dot HTML.

01:43.990 --> 01:47.650

And if I hit enter I have index HTML.

01:47.650 --> 01:51.760

And that is right inside Jay's text I can go ahead and close.

01:51.760 --> 01:53.200

This will come right in here.

01:53.770 --> 01:54.190

All right.

01:54.250 --> 01:56.740

Now I'm going to have created index dot HTML.

01:56.770 --> 02:03.590

The very first thing we need to do is to create our HTML boilerplate to create
boilerplate in Visual

02:03.590 --> 02:03.980

Studio.

02:04.010 --> 02:09.170

All you need to do is to write an exclamation mark and hit enter.

02:09.170 --> 02:11.480

And you have HTML boilerplate.

02:11.480 --> 02:17.210

And now if you want to run this, you can go ahead and move over to the folder and
look for index.html

02:17.240 --> 02:18.080

and run that.

02:18.110 --> 02:19.730

But that is not what I want to use.

02:19.730 --> 02:25.910

So I want to go ahead and install an extension that will help us to always run our
code and move over

02:25.910 --> 02:27.140

to extension right here.

02:27.230 --> 02:29.810

And we go ahead and start immediately.

02:29.810 --> 02:36.170

So go over here and I'm going to look for extension called Live Server.

02:36.200 --> 02:37.850

So we have Live Server here.

02:37.880 --> 02:44.180

And go ahead and open up that and go ahead and install Live Server saying do you
trust the publisher.

02:44.480 --> 02:47.180

Trust and uh install that.

02:47.180 --> 02:49.640

And very soon that will be installed for us.

02:50.480 --> 02:56.150

So it's getting ready and uh, it doesn't take much time and very soon that will be
installed and we'll

02:56.150 --> 03:00.110

go ahead and start up immediately and get this up and running.

03:01.360 --> 03:02.470

So that is done.

03:02.470 --> 03:08.260

You can see we have live server installed for us, and we can always go back to your
files and move

03:08.260 --> 03:09.430

to index dot HTML.

03:09.460 --> 03:10.990

I can always go ahead and close this.

03:10.990 --> 03:14.350

And for whatever we do, all we need to do just to save.

03:14.350 --> 03:18.850

And anytime you save your file live server, we actually open for you.

03:19.720 --> 03:22.660

So now our head and move over to body.

03:22.660 --> 03:31.480

And I'm going to write a paragraph or let's go ahead and uh create H1 and our head
and say welcome to

03:31.510 --> 03:33.340

JavaScript.

03:33.370 --> 03:33.880

All right.

03:33.910 --> 03:35.800

So this is not our hello world board.

03:35.800 --> 03:41.200

We have just tried to check out the studio and check out the live server and see
how that actually works.

03:41.230 --> 03:46.930

Now I'll go over and set these control s move order to index dot HTML.

03:46.990 --> 03:49.540

Right click that and open with Live Server.

03:49.570 --> 03:53.800

Click on this and we're going to have Live Server start up immediately.

03:53.800 --> 03:56.770

So we have live server start up says welcome to JavaScript.

03:56.770 --> 04:00.860

So try because all I have to do is to go ahead and uh are minimize.

04:00.860 --> 04:06.650

These are always go ahead and shift this by the side as well and say I'm going to
drag this by the side.

04:06.650 --> 04:08.810

And I'm going to also drag this by the side.

04:08.810 --> 04:11.870

And now you can see that both of them are side by side.
04:11.870 --> 04:16.520
And in that way it's going to be easier for me and our guide and close this.

04:16.550 --> 04:21.200

Now once you open this lifesaver for the first time, all you need to do is to go
ahead and click on

04:21.200 --> 04:22.310

save and your lifesaver.

04:22.310 --> 04:32.150

We actually automate quite and said a paragraph tag and I'm going to say this is
George Steve and click

04:32.150 --> 04:34.400

on save and have this is Steve.

04:34.400 --> 04:36.560

And I can go ahead and add any other thing.

04:36.560 --> 04:40.280

And then go ahead and say this is our hash tool.

04:40.310 --> 04:44.690

And I'll go ahead and say, um, we work great guide.

04:44.690 --> 04:54.380

And since we work with uh live Sabah and uh, save this with control s and it shows
we work with left

04:54.380 --> 04:54.800

Sabah.

04:54.800 --> 04:59.900

So this is a simple or a quick set up for Visual Studio.

04:59.900 --> 05:06.010

And now we have learned how to create a folder, how to create index dot HTML file,
and how to set

05:06.010 --> 05:06.910

up the web server.

05:06.910 --> 05:13.030

And that will help us to actually launch our projects immediately without doing
that manually.

05:13.030 --> 05:20.110

So anytime you click on control Save or Control S, it will go ahead and populate
whatever we have on

05:20.110 --> 05:21.040

the browser.

05:21.070 --> 05:22.060

Keep moving immediately.

05:22.060 --> 05:23.620

So go ahead and pause this.

05:23.620 --> 05:26.110

And uh, that is it for now.

05:26.140 --> 05:27.340

Pull it down, play around with it.

05:27.340 --> 05:31.600

And in the next video lecture I will show you how to install atom on your system in
case if you want

05:31.600 --> 05:32.950

to use atom for this project.

05:32.950 --> 05:37.000

But if you don't want to use that tone, you can skip that video lecture and kick
off immediately.

05:37.030 --> 05:37.450

All right.

05:37.450 --> 05:39.280

So that is for people who want to use that tone.

05:39.280 --> 05:45.100

But for Visual Studio, why I continue using Visual Studio and follow me up in this
course throughout

05:45.100 --> 05:47.500

the end of this course, and it's going to be very interesting.

05:47.530 --> 05:48.310

Thank you so much.

05:48.310 --> 05:51.010

And I'm going to see you in the next video lecture.