Hey, in this lesson, we're going to be setting up the basic HTML Web page and also looking at the
data that we're going to be requesting using the AJAX requests, that's going to be loading onto the
page.
So first of all, I've created an indexed HTML file, so completely blank just created it.
And I'm using brackets to load the live preview.
And if you are using brackets that's just under here under File Life Preview and you don't necessarily
need to do with local machine, but it's always better when you're connected to various APIs that you
are using.
The HTTP protocol over the file protocol and the file protocol is the one that you just go over to the
index file, find it on your system and open it within the browser and that will give you the file and
the path where it's located on your computer.
So if you do have the opportunity, I make sure that you do have an option for local machine and this
will make sure that your Web APIs connect a lot smoother.
And in this case, this particular one, this is an API that I've set up and this endpoint is running
from a Google script and it's returning back a bunch, of course, content that I have.
So it's got a listing of all the courses that I have.
And it's essentially a feed of all the course content.
And this is the API that we're going to be working with.
Also, keep in mind that APIs could vary.
So there might be some differences within the APIs and this particular one it's going to have at the
bottom.
It's going to have pages previous null next to.
So this will give us the ability to go through the various pages of content and there are quite a few
different pages of content.
We've got a status of 200 that's being returned and then all of the data.
So this is the content that we're going to output on the page and we're going to use within the page.
Now, you're welcome to connect to another API, another different endpoint.
Or you can use the one that I'm going to be highlighting within the course to include a link for that,
within the code, within the JavaScript code.
And also keep in mind that APIs will vary.
So this particular one is always going to be looking for additional pages and it's going to load the
pages in chunks.
So you might have an API where you can query each item and then move to the next item, move to the
next item.
So this is all depending on what the API is that you're looking at.
So now we're just going to set up a basic HTML page and create some HTML structure.
So we've got a title we've got here.
And then within the body, we're going to have a head sections or a header and this is going to be all
of the top content and have a section.
And this is where all of the main content will go.
And when we load the page initially, we're going to take the first page of data and we're going to
load it within the main content area.
And it's also going to need to have the ability to scroll the content in order for this to work.
So if you don't have enough content on your page to make it scroll to to see the scroll bar, then this
isn't going to work because we're going to be waiting for the scroll bar to hit the bottom.
And if it doesn't have an option to go down to the bottom, then you're not going to be able to load
any additional content.
So that's the one thing to keep in mind.
And you can also focus it on various sections.
But in this case, we're going to be building out for the entire webpage.
Let's add in a little bit of styling so we can have some size to the content that we're loading and
set up the header.
And of course, you can customize this as needed.
I'm just setting up a real basic setup for some content for a Web page.
Also, we're going to do the header, the footer.
It's going to be very similar to the header with some differences.
And this is, of course, for and the main content is just contained within section.
So we'll give the section some height as well.
So it's got some minimum height.
And then right away, we already have the scroll bar there at the site.
So that's good enough for the styling for now.
And then we're going to be loading the content and the main section.
So I'm going to give it a class of container so that using JavaScript we can select this particular
section in case we add additional sections into the project.
And then lastly, let's link out to a script file and have a source and then we'll create the script
file.
So the source will be we'll call it up G.S..
And this is where all the magic is going to happen.
This we're going to be overloading the JavaScript content and you can, of course, customize the HTML
and the styling as needed.
And it isn't the focus really of the upcoming lessons as we do want to focus on JavaScript.
So the upcoming lessons are going to be strictly JavaScript and we're going to entirely focus on the
contents of JavaScript.
So it's coming up in the next lesson.
We're going to work with the app G.S. and I'll just create that as a placeholder.
So completely blank file up G.S. and make sure that it's linked.
So I usually like to do an alert just so that I ensure that my JavaScript file is linked.
And there we got the pop up, so we're all good to go to move on to the next lesson, so go ahead and
set up your project and get ready to move to the JavaScript sections.
And that's coming up next.