Now I want to make sure our Web server is up running and working.
So we need one more piece of configuration.
But just let's put a pulse over here.
We have the index, if I can.
Right, Index, dot, HTML.
We do have also the styles or style dot C s, and we also have the main.
Dot JS.
Those files in a real project, in a real application, they should be inside of a main server and the
server running and acting as a web server and any configuration or any change they use you do inside
of the server itself.
Yeah.
If the project is big enough, you're going to have you're going to have a development server and a
production server, but we're not there yet.
The point I want to get is the server.
It's going to be our local PC.
Yeah.
So remember a few classes ago we did install the live server.
So the live server, it's here, it's inside and it's running.
I want to make sure the live server can see the HTML file, the CSS file and the JS file.
And to be very honest, they don't need the web server doesn't need to see the other two because later
on we're going to go to the HTML file and point to the styles or style and the main JS file.
So the web server right now needs to see the HTML main page and we need to test to make sure it's working.
So back to my visual code, I need some coding side of the HTML file.
So without going into all the HTML theory behind of every single page, if you start typing HTML and
click into this option.
Yeah, the HTML, the first one that shows up here, you're going to have begin the beginning of the
web page coding.
But that's not what I looking for.
I wanted the visual code to give me the full code of a basic web page.
So that's why you should choose this second option in my case right now, which is the HTML five.
So I click into the HML five and guess what?
Let me just hide this portion of my my screen.
This is a basic HTML file where I have the title.
I also have a few informations about the content, but this is an actual web page.
Yeah, I can change the web page to my project, something like that.
And later on when we run our web server, you should be able to see this as as a name of the page,
which means as a title.
Yeah.
So I have my code.
I'm going to type the control se or command as just to save, and I'm going back to the files and I'm
going to do a right click and make sure the server can see this file or I'm going to start this server
pointing to this file.
So I did right click and I'm going to click open with live server.
There is a shortcut over here, but normally you have to do that once.
So I click a new page is going to open up and there we go.
We have our project and you may be thinking, Andre, what is the project?
So the project I can see the title of my page is here and whatever you type inside of the body, which
is right over here, it's going to show into the page.
So for example, Hello World.
Yeah, of course.
I cannot do like that.
I need to put some quotes here and that, but Hello world, it's going to do the job save.
So I'm going to save over here and go back to the page.
You have the Hello world.
If it's too small, you can increase because we have no CSS pointed to that.
So I can do that via code.
I don't have to zoom to the page, but basically we have our server working and the beautiful part is
the web server.
It's running locally.
Look at the 120 7001 address port 5500 index dot html.
This is our file.
This file in here is.
These file over here.
So if you get to this stage, that means your machine is compatible with the live server and it's working.
If you don't get to that page, if you don't see your first page, you probably have a problem with
the firewall in your PC or antivirus.
It could be blocking your PC.
Something is blocking your network.
It could be your network, your local network as well.
And you have to fix that before you move to the project, number one.
So if you get to this stage, you are good to go.
And I see you on the project, number one.