1
00:00:00,540 --> 00:00:05,280
This lesson we're going to be setting up our Temel that we're going to be making use of in the upcoming

2
00:00:05,280 --> 00:00:10,890
lessons, so as you can see, we've got our basic HTML structure and you can go ahead and set the same

3
00:00:10,890 --> 00:00:14,520
thing up so that you have the same starting place that I'm working with.

4
00:00:14,970 --> 00:00:16,440
First of all, we need a div.

5
00:00:16,470 --> 00:00:17,670
We'll just call this one.

6
00:00:17,730 --> 00:00:23,360
We're going to use classes and then we're going to connect to the elements using JavaScript.

7
00:00:23,760 --> 00:00:30,300
So we've got a class of game area and this is where all of our gameplay will take place, will indebt

8
00:00:30,300 --> 00:00:37,890
indented, create another div and this div is for our stats and we're just going to leave them blank

9
00:00:37,890 --> 00:00:43,770
because we are going to be using JavaScript to populate all of the details, create another div.

10
00:00:44,010 --> 00:00:47,280
We want to have multiple pages, so multiple screens.

11
00:00:47,520 --> 00:00:52,590
So the way that we're going to do that is we're going to have pages and I'm going to call this one main

12
00:00:53,160 --> 00:00:54,480
and within the main page.

13
00:00:54,480 --> 00:00:56,720
This is where our start screen is going to be.

14
00:00:57,000 --> 00:01:03,000
So we'll have another div here and give it a class of starter and then within the starter we're going

15
00:01:03,000 --> 00:01:08,970
to add in a start button so this can be a hyperlink if we want, or we can have it as a button if we

16
00:01:08,970 --> 00:01:09,730
want as well.

17
00:01:10,200 --> 00:01:11,250
So it actually doesn't matter.

18
00:01:11,250 --> 00:01:16,010
I'll call it, I'll call it Class BTM and New Game.

19
00:01:16,020 --> 00:01:19,230
So it's going to initiate and start out our new game.

20
00:01:19,690 --> 00:01:23,870
So starting out our new game, you could also make it into a button if you wanted to.

21
00:01:24,240 --> 00:01:26,820
And then one more div that we're going to need.

22
00:01:26,820 --> 00:01:31,250
And this is going to be the next page where all of the gameplay is going to take place.

23
00:01:31,260 --> 00:01:34,440
We'll call it game and we're also going to call it Page.

24
00:01:34,680 --> 00:01:37,710
And you'll see in the next lesson why we're calling it page.

25
00:01:38,190 --> 00:01:44,340
So this is going to give us a quick way to identify all the page areas that we want to utilize and all

26
00:01:44,340 --> 00:01:45,930
of the different screens right now.

27
00:01:45,930 --> 00:01:48,800
Within this game, we're going to have two different screens.

28
00:01:48,810 --> 00:01:54,060
We're going to have the main starting page, and then we're going to have the actual gameplay page and

29
00:01:54,060 --> 00:01:59,430
we're going to be building out all of the rest of the elements and all of the rest of the HTML structuring

30
00:01:59,430 --> 00:02:01,170
it using JavaScript.

31
00:02:01,290 --> 00:02:05,490
And as you can see, when you go out and you refresh it, not a whole lot happening there.

32
00:02:05,610 --> 00:02:08,970
We simply have that button class, the only one that's visible.

33
00:02:09,160 --> 00:02:15,540
I'll make this visible to two hundred percent so that it's a lot easier to see it in the next lesson.

34
00:02:15,570 --> 00:02:23,460
We're going to be starting with JavaScript and connecting our elements, using the DOM connections and

35
00:02:23,460 --> 00:02:24,210
JavaScript.

36
00:02:24,210 --> 00:02:25,350
So that's coming up next.

37
00:02:25,650 --> 00:02:30,630
So go ahead and set up your own index page and set it up within the similar structure.

38
00:02:30,630 --> 00:02:35,640
So you have a main gameplay area, you've got two main pages, you've got a start button that you can

39
00:02:35,640 --> 00:02:42,240
use and also stats so that you can place score and any other relevant information that the player needs

40
00:02:42,240 --> 00:02:43,830
to know during gameplay.