1
00:00:00,270 --> 00:00:05,340
Hey, in this lesson, we're going to be setting up the basic HTML Web page and also looking at the

2
00:00:05,340 --> 00:00:09,930
data that we're going to be requesting using the AJAX requests, that's going to be loading onto the

3
00:00:09,930 --> 00:00:10,330
page.

4
00:00:10,650 --> 00:00:15,870
So first of all, I've created an indexed HTML file, so completely blank just created it.

5
00:00:15,870 --> 00:00:19,770
And I'm using brackets to load the live preview.

6
00:00:19,770 --> 00:00:25,200
And if you are using brackets that's just under here under File Life Preview and you don't necessarily

7
00:00:25,200 --> 00:00:30,660
need to do with local machine, but it's always better when you're connected to various APIs that you

8
00:00:30,660 --> 00:00:31,320
are using.

9
00:00:31,320 --> 00:00:36,570
The HTTP protocol over the file protocol and the file protocol is the one that you just go over to the

10
00:00:36,570 --> 00:00:41,550
index file, find it on your system and open it within the browser and that will give you the file and

11
00:00:41,550 --> 00:00:43,300
the path where it's located on your computer.

12
00:00:43,710 --> 00:00:49,650
So if you do have the opportunity, I make sure that you do have an option for local machine and this

13
00:00:49,650 --> 00:00:54,570
will make sure that your Web APIs connect a lot smoother.

14
00:00:54,750 --> 00:01:00,360
And in this case, this particular one, this is an API that I've set up and this endpoint is running

15
00:01:00,360 --> 00:01:05,270
from a Google script and it's returning back a bunch, of course, content that I have.

16
00:01:05,820 --> 00:01:08,340
So it's got a listing of all the courses that I have.

17
00:01:08,340 --> 00:01:11,160
And it's essentially a feed of all the course content.

18
00:01:11,430 --> 00:01:13,650
And this is the API that we're going to be working with.

19
00:01:13,830 --> 00:01:17,280
Also, keep in mind that APIs could vary.

20
00:01:17,520 --> 00:01:22,890
So there might be some differences within the APIs and this particular one it's going to have at the

21
00:01:22,890 --> 00:01:23,250
bottom.

22
00:01:23,250 --> 00:01:26,570
It's going to have pages previous null next to.

23
00:01:26,760 --> 00:01:31,770
So this will give us the ability to go through the various pages of content and there are quite a few

24
00:01:31,770 --> 00:01:33,320
different pages of content.

25
00:01:33,510 --> 00:01:37,710
We've got a status of 200 that's being returned and then all of the data.

26
00:01:37,890 --> 00:01:42,010
So this is the content that we're going to output on the page and we're going to use within the page.

27
00:01:42,300 --> 00:01:46,470
Now, you're welcome to connect to another API, another different endpoint.

28
00:01:46,860 --> 00:01:51,330
Or you can use the one that I'm going to be highlighting within the course to include a link for that,

29
00:01:51,660 --> 00:01:54,360
within the code, within the JavaScript code.

30
00:01:55,080 --> 00:01:57,820
And also keep in mind that APIs will vary.

31
00:01:58,050 --> 00:02:02,910
So this particular one is always going to be looking for additional pages and it's going to load the

32
00:02:02,910 --> 00:02:04,080
pages in chunks.

33
00:02:04,380 --> 00:02:09,630
So you might have an API where you can query each item and then move to the next item, move to the

34
00:02:09,630 --> 00:02:10,260
next item.

35
00:02:10,410 --> 00:02:13,980
So this is all depending on what the API is that you're looking at.

36
00:02:14,370 --> 00:02:19,730
So now we're just going to set up a basic HTML page and create some HTML structure.

37
00:02:19,750 --> 00:02:23,400
So we've got a title we've got here.

38
00:02:23,400 --> 00:02:29,790
And then within the body, we're going to have a head sections or a header and this is going to be all

39
00:02:29,790 --> 00:02:34,370
of the top content and have a section.

40
00:02:34,980 --> 00:02:38,420
And this is where all of the main content will go.

41
00:02:38,580 --> 00:02:43,770
And when we load the page initially, we're going to take the first page of data and we're going to

42
00:02:43,770 --> 00:02:45,680
load it within the main content area.

43
00:02:46,050 --> 00:02:52,440
And it's also going to need to have the ability to scroll the content in order for this to work.

44
00:02:52,470 --> 00:02:59,220
So if you don't have enough content on your page to make it scroll to to see the scroll bar, then this

45
00:02:59,220 --> 00:03:02,370
isn't going to work because we're going to be waiting for the scroll bar to hit the bottom.

46
00:03:02,520 --> 00:03:06,870
And if it doesn't have an option to go down to the bottom, then you're not going to be able to load

47
00:03:06,870 --> 00:03:07,920
any additional content.

48
00:03:08,140 --> 00:03:09,580
So that's the one thing to keep in mind.

49
00:03:09,580 --> 00:03:12,000
And you can also focus it on various sections.

50
00:03:12,510 --> 00:03:15,440
But in this case, we're going to be building out for the entire webpage.

51
00:03:15,690 --> 00:03:21,000
Let's add in a little bit of styling so we can have some size to the content that we're loading and

52
00:03:21,000 --> 00:03:22,140
set up the header.

53
00:03:22,380 --> 00:03:24,900
And of course, you can customize this as needed.

54
00:03:25,080 --> 00:03:30,280
I'm just setting up a real basic setup for some content for a Web page.

55
00:03:30,790 --> 00:03:32,910
Also, we're going to do the header, the footer.

56
00:03:32,980 --> 00:03:36,360
It's going to be very similar to the header with some differences.

57
00:03:37,110 --> 00:03:41,870
And this is, of course, for and the main content is just contained within section.

58
00:03:42,570 --> 00:03:46,320
So we'll give the section some height as well.

59
00:03:46,530 --> 00:03:47,850
So it's got some minimum height.

60
00:03:47,970 --> 00:03:50,940
And then right away, we already have the scroll bar there at the site.

61
00:03:51,400 --> 00:03:53,850
So that's good enough for the styling for now.

62
00:03:54,000 --> 00:03:57,180
And then we're going to be loading the content and the main section.

63
00:03:57,390 --> 00:04:02,970
So I'm going to give it a class of container so that using JavaScript we can select this particular

64
00:04:02,970 --> 00:04:06,350
section in case we add additional sections into the project.

65
00:04:06,360 --> 00:04:12,390
And then lastly, let's link out to a script file and have a source and then we'll create the script

66
00:04:12,390 --> 00:04:12,690
file.

67
00:04:13,050 --> 00:04:16,580
So the source will be we'll call it up G.S..

68
00:04:16,830 --> 00:04:18,750
And this is where all the magic is going to happen.

69
00:04:18,750 --> 00:04:25,770
This we're going to be overloading the JavaScript content and you can, of course, customize the HTML

70
00:04:25,770 --> 00:04:27,480
and the styling as needed.

71
00:04:27,690 --> 00:04:32,430
And it isn't the focus really of the upcoming lessons as we do want to focus on JavaScript.

72
00:04:32,670 --> 00:04:39,150
So the upcoming lessons are going to be strictly JavaScript and we're going to entirely focus on the

73
00:04:39,150 --> 00:04:40,650
contents of JavaScript.

74
00:04:40,890 --> 00:04:42,540
So it's coming up in the next lesson.

75
00:04:42,540 --> 00:04:47,070
We're going to work with the app G.S. and I'll just create that as a placeholder.

76
00:04:47,070 --> 00:04:52,640
So completely blank file up G.S. and make sure that it's linked.

77
00:04:53,370 --> 00:04:59,490
So I usually like to do an alert just so that I ensure that my JavaScript file is linked.

78
00:04:59,960 --> 00:05:05,030
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

79
00:05:05,030 --> 00:05:10,310
set up your project and get ready to move to the JavaScript sections.

80
00:05:10,440 --> 00:05:11,600
And that's coming up next.