Original subtitles

Now that we're done with our CSX, we're going to move on to test our JavaScript.

So if we go back to our code, we are going to go into our script dodgiest file, and we're going to

use something called console logging.

So I'm not going to get too deep into an explanation on this.

But basically our browser window is represented by something called our window.

And within our window we have something called a console.

And this allows us to log certain data that we can then see from our JavaScript in our browser.

So this is helpful.

If we are calling an API and we want to just see how the data is formatted, we can console log that

data and pass it into our browser.

So we actually don't need to type out window dot console because by default all JavaScript is in the

window element.

So we're going to ride out console, dot log and then brackets and then in single quotes, we can pass

in a string, or if you're passing in a variable, you would pass it in without the quotes.

But in our case, we just want to write testing and then we'll throw in a semicolon at the end so we

can save that and jump back to our browser.

And so where this is going to show up is in our dev tools.

So our dev tools is something I'm going to reference many times throughout the course to get to our

dev tools.

We can right click and inspect and you can see that our dev tools has opened up here.

By default, it will open on elements.

So you can see that we have our HTC Amelle here and we actually have our CFS here as well.

We have our margins zero and our min height of 100.

The cool thing is this actually allows us to turn our styling on and off and test out different things.

So if I wanted to test out a background color on our body, I can just type in whatever I want and it

will update in real time.

And if I wanted to just get rid of something, I can just uncheck it to get rid of it.

You can see next to it that we have our console and you can see here that we have testing showing up.

So this means our console log is working.

And it means our JavaScript is connected to our HMO.

Perfect.

Throughout the course, we're going to learn more about different things here.

So we're also going to learn about the network tab.

If we refresh the page, we can see that it actually shows which files are loading.

So we have our index HMO, how long they take the size of them, what order they're loading.

And more information.

But those are the basics.

And the other thing is our application tab.

As you can see, this is from a project within the course.

We're actually saving bookmarks into our local storage.

But we'll get to that later in the course.

The important thing is everything is working as we want it to.

So let's jump back to the code and we're going to get rid of this and save it.

Now, the last thing I want to show you is how to actually host your project online for free using GetUp!

So if we jump back to get Hub here or in and create a new repository and we're going to give it a name,

template, dash test, and we're not going to worry about a description and we're not going to worry

about a read me.

We're going to click create repository.

Then we're gonna copy this here.

This is the remote that we want to add and we're going to jump back to our code and we're going to open

up our terminal.

If you remember, we're gonna start with our get in it.

It's going to initialize an empty repository within our folder.

We are going to add the remote origin.

So get remote, add origin, and then we're gonna paste that in.

Then we're going to do get ad space and then period, because that's going to add everything.

And then get commit.

Dash em.

And then we're gonna type in a message.

This will be our initial commit.

And you can see that there are some changes here and it shows the three files that are going to be added.

And then lastly, we're going to get push origin master.

OK, so that's done now.

If we jump back over and we refresh.

We can see that we have our three files here now.

And so that's how the process would work if you're setting up a project for the first time.

But let's say that we made a change in our index each.

We can move this down a little bit.

And let's say we're just going to add an H1 tab and we're just going to have it say hello, world.

Let's save that.

And now we can open up another terminal.

And so any time you make changes to a project, you're going to save the file.

And then we only have to type in three commands.

So you got to type in, get add and then period.

That's going to add everything that's been changed.

And then I'm gonna go get commit Dasch m and then I can add my commit message.

So I'm just gonna add Hello world.

And then you can see I've only change one filer each Timal file and then I'm going to do get push.

Origin Master.

OK.

So that's done.

I can jump back to my repo if I refresh the page.

I can see now that I have my hello world commit now.

I can scroll back up to the top.

So we're gonna scroll over.

I'm very zoomed in here, but for you, you'll be able to probably see this whole page.

We're going to go to the right and we're going to click on settings.

And we're gong to scroll down in our settings until we find GitHub pages.

So this is designed to host your project pages.

And what we're gonna do is we're just gonna switch the source from none to Master Branch.

And you can see that the page source has been saved.

And if we scroll down again.

We can actually see that now.

We have a Web site where our project is going to be live so we can right.

Click and open this in a new tab.

So you can see right now that the site is not found.

So something to keep in mind when you're using GitHub pages, when you enable it for the first time.

It'll take about 10 minutes.

So let's wait for 10 minutes and come back.

All righty.

So I've come back 10 minutes later and I've refreshed the page.

And you can see now we have our title.

We have our Farrakhan and we have our Hello World H one.

Excellent.

This is the process you can use going forward over and over again any time you want to share your projects

online with people for free.

You can start with the template I've created here, create and initialize a get repository, push the

changes through the terminal in visual studio code and then update them as you work on the project.

Lastly, don't forget in your settings that you want to enable GitHub pages and you want to have the

source be the master or main branch.

That's about it.

That's all there is to hosting.

So I'm going to remove the H1 from this template because again, we want it to be as blank as possible.

That's the version I'm going to save in the course, but that's about it for our setup.

I think we're finally ready to get started with the course and the rest of the projects.

All right.

I'll see in the next project.

Bye for now.