1
00:00:00,150 --> 00:00:01,080
Hello and welcome.

2
00:00:01,110 --> 00:00:04,980
This is going to be the first lesson where are we going to start setting up the structure of the page?

3
00:00:05,130 --> 00:00:06,900
We're going to need to add in the few elements.

4
00:00:07,050 --> 00:00:12,660
So I'm starting out with a basic indexed HTML page, and I'm going to be writing all of the script content

5
00:00:12,660 --> 00:00:17,640
in here as we're not going to have a lot of HTML and then link out to a stylesheet with a little bit

6
00:00:17,640 --> 00:00:21,590
of styling and style properties that we can use with JavaScript code.

7
00:00:21,810 --> 00:00:27,090
So we've got basic HTML page and opened up on the right hand side within the browser.

8
00:00:27,090 --> 00:00:32,790
The browser that I'm using is Chrome and I've also got dev tools opened on the bottom right hand corner

9
00:00:32,940 --> 00:00:35,010
and on the on the big side.

10
00:00:35,010 --> 00:00:39,120
On the left side I've got brackets, which is the editor that I'm using opened up.

11
00:00:39,120 --> 00:00:44,020
So we've got the source code and then we can view what the code is doing on the right hand side.

12
00:00:44,310 --> 00:00:50,460
So let's start by creating a few HTML elements, and these are going to be the ones that we're going

13
00:00:50,460 --> 00:00:54,120
to use in order to update and add content into.

14
00:00:54,270 --> 00:00:59,340
So we want to start by adding in and creating an area to track the score so we could just give it a

15
00:00:59,340 --> 00:01:05,260
name of score and then creating a span so that we have something to select and update.

16
00:01:05,280 --> 00:01:12,270
So a class and this can just be a score and then one more where we've got lives and we want to decrease

17
00:01:12,270 --> 00:01:13,830
the amount of lives that the player.

18
00:01:13,850 --> 00:01:18,510
So every time that the ball goes off screen, it will do one of these lives.

19
00:01:18,690 --> 00:01:20,460
And again, we're grabbing it.

20
00:01:20,640 --> 00:01:24,930
We're going to grab it by the class name lives and update it via JavaScript.

21
00:01:25,080 --> 00:01:31,010
And then one more element and the rest we will do with JavaScript so this one can be our main container.

22
00:01:31,350 --> 00:01:36,030
So this is where all of the gameplay is going to happen and all of the dynamic content is going to update

23
00:01:36,030 --> 00:01:36,890
using the script.

24
00:01:37,440 --> 00:01:41,310
So let's also create our stylesheet and link to a stylesheet.

25
00:01:41,340 --> 00:01:44,790
So this is going to be just the basic styles that we're going to have.

26
00:01:45,060 --> 00:01:52,140
So some for the container and we're making the content dynamic so we can just call this dialog success

27
00:01:52,140 --> 00:01:53,700
and link out to that.

28
00:01:53,700 --> 00:01:54,900
And I'm going to create that style.

29
00:01:54,900 --> 00:01:57,660
And within the stylesheet, let's set up a few properties.

30
00:01:57,660 --> 00:01:58,760
We've got container.

31
00:01:58,770 --> 00:02:03,090
So this is our main gameplay container and this is going to be dynamic, but we're going to set some

32
00:02:03,090 --> 00:02:03,930
default ones.

33
00:02:04,200 --> 00:02:07,950
So whatever it adjusts to our JavaScript should adjust as well.

34
00:02:07,950 --> 00:02:09,180
And I'll make this one fluid.

35
00:02:09,180 --> 00:02:10,230
So it's 80 percent.

36
00:02:10,240 --> 00:02:14,190
And again, we're only applying some basic styling in order to get started.

37
00:02:14,490 --> 00:02:17,070
And you can customize this as needed.

38
00:02:17,070 --> 00:02:21,630
The overflow will hide the overflow, give it a border so that we can tell where it's located.

39
00:02:21,640 --> 00:02:24,030
For now, I'm going to move it slightly off the top.

40
00:02:24,030 --> 00:02:31,320
So margined top, it will set position to relative and also will set for score as well as for lives.

41
00:02:31,320 --> 00:02:32,780
I won't make the font really big.

42
00:02:32,790 --> 00:02:38,490
And we're going to also need to set up a class for the bricks so we can just call this one brick and

43
00:02:38,490 --> 00:02:40,350
I'm going to add some default properties in here.

44
00:02:40,350 --> 00:02:42,420
So position and this is important.

45
00:02:42,420 --> 00:02:43,950
We need to position at absolute.

46
00:02:44,130 --> 00:02:48,570
So that makes us that gives us the option to position it anywhere on the screen.

47
00:02:48,690 --> 00:02:50,250
And we need that with JavaScript.

48
00:02:50,460 --> 00:02:53,940
We're setting the top and the left position dynamically with JavaScript.

49
00:02:53,940 --> 00:02:55,680
So for now, let's set them to zero.

50
00:02:56,040 --> 00:03:01,950
Also setting the width, we're going to adjust the width of the dynamically as well, height and width

51
00:03:01,950 --> 00:03:02,610
for this.

52
00:03:03,000 --> 00:03:05,970
Add in a little bit of padding and the default color of white.

53
00:03:06,270 --> 00:03:09,450
We're going to set a default background color as well.

54
00:03:09,450 --> 00:03:11,130
So this is all going to be done with JavaScript.

55
00:03:11,340 --> 00:03:13,620
We're going to do as much as possible JavaScript.

56
00:03:13,650 --> 00:03:21,540
I want to have a basic one as a starting point for US border of white font size one point eighty and

57
00:03:21,540 --> 00:03:24,210
then one last one will do a line height of forty pics.

58
00:03:24,360 --> 00:03:27,210
So that should be pretty good and we'll just save that.

59
00:03:27,360 --> 00:03:29,190
And of course, we're not going to see anything yet.

60
00:03:29,190 --> 00:03:31,770
And until we introduce the JavaScript.

61
00:03:31,980 --> 00:03:38,040
So that's coming up next, where we're going to build out the game over the ball and the paddle, all

62
00:03:38,040 --> 00:03:39,030
using JavaScript.

63
00:03:39,030 --> 00:03:42,060
So this is going to be creating all of the elements using JavaScript.

64
00:03:42,210 --> 00:03:44,280
And that's coming up in the next lesson.

65
00:03:44,400 --> 00:03:46,830
Create the basic gameplay area.

66
00:03:47,010 --> 00:03:48,840
You can apply your own styling.

67
00:03:48,840 --> 00:03:50,670
You've got score and lives.

68
00:03:50,880 --> 00:03:55,830
So those are the containers we're going to drop information into about how the gameplay is going.

69
00:03:55,830 --> 00:03:59,610
And then the main container area, this is where we're going to be adding all of the gameplay.

70
00:03:59,850 --> 00:04:04,140
So make sure that you have all of the elements ready to go and we're going to connect to them using

71
00:04:04,140 --> 00:04:04,830
JavaScript.

72
00:04:04,830 --> 00:04:08,880
And coming up in all the following lessons are all going to be just JavaScript.

73
00:04:09,240 --> 00:04:10,110
So that's still to come.