1
00:00:01,680 --> 00:00:06,260
This lesson, we're going to be applying styling to the elements we created in the previous lesson,

2
00:00:06,480 --> 00:00:11,160
so I don't want to spend too much time on the styling because of course, this is a JavaScript course,

3
00:00:11,430 --> 00:00:17,910
but because we are making game, it is important that the content looks presentable and that's all part

4
00:00:17,910 --> 00:00:19,850
of it, that it actually looks like a game.

5
00:00:20,100 --> 00:00:23,660
So let's update some of the values within the styling.

6
00:00:23,670 --> 00:00:30,740
We're going to create the main container as position, relative height, so we'll set it to 90 Veach.

7
00:00:30,840 --> 00:00:34,350
So that's the vertical height and weight can be 90 percent.

8
00:00:34,350 --> 00:00:40,260
Then I'll do a left five percent and that will center the main container and then set of background

9
00:00:40,260 --> 00:00:40,680
color.

10
00:00:40,710 --> 00:00:43,650
And we can just set that to we can just set that to beat.

11
00:00:43,770 --> 00:00:48,240
And I do usually like to add box shadows because I think it creates a nice effect.

12
00:00:48,270 --> 00:00:49,170
So let's refresh.

13
00:00:49,170 --> 00:00:49,650
Try that.

14
00:00:49,830 --> 00:00:51,200
So there's our main container.

15
00:00:51,210 --> 00:00:53,310
Let's also update the basket.

16
00:00:53,340 --> 00:00:57,990
So this is the player's main element object and this has to be position absolute.

17
00:00:58,000 --> 00:01:03,120
So this would give us the ability to move it around, could set a height and a width of that element.

18
00:01:03,130 --> 00:01:05,240
You can also adjust these as needed.

19
00:01:05,250 --> 00:01:10,620
I'll give it a background color of red so it stands and also apply box shadow to it the same box.

20
00:01:10,840 --> 00:01:11,770
So let's refresh.

21
00:01:11,790 --> 00:01:13,260
So there's our player object.

22
00:01:13,260 --> 00:01:15,110
Next, we're going to update the button.

23
00:01:15,120 --> 00:01:21,360
So sit this as an inline block, add some padding and also a border border can be black and adjust the

24
00:01:21,360 --> 00:01:24,210
colors, make it nice and big readable.

25
00:01:24,210 --> 00:01:30,870
So large font size text align center and we'll add in a text line into the main container as well so

26
00:01:30,870 --> 00:01:32,250
that we center that element.

27
00:01:32,310 --> 00:01:33,560
So now it's nice and center.

28
00:01:34,560 --> 00:01:36,360
So we've got a nice big green button.

29
00:01:36,700 --> 00:01:42,930
I'm going to add in one more class into the top bar and this is where all of the score is so we can

30
00:01:42,930 --> 00:01:50,670
text, align center that add a bit of padding to it, can update the font family as well as the font

31
00:01:50,670 --> 00:01:52,830
size to be larger size.

32
00:01:53,160 --> 00:01:54,000
So let's refresh.

33
00:01:54,660 --> 00:01:56,090
So now we've got our score.

34
00:01:56,100 --> 00:01:58,010
We've got the number of enemies left.

35
00:01:58,290 --> 00:02:00,770
So all of that is being presented on the page.

36
00:02:01,080 --> 00:02:03,240
So we're ready to move on to the next lesson.

37
00:02:03,540 --> 00:02:06,150
You can apply the styling as needed.

38
00:02:06,300 --> 00:02:08,280
You don't have to do the same styling as I've done.

39
00:02:08,400 --> 00:02:11,720
This is just some basic styling so that it looks more like a game.

40
00:02:12,600 --> 00:02:14,190
So go ahead and add that into your project.

41
00:02:14,400 --> 00:02:18,660
And coming up next, we're going to jump back into the JavaScript and make things happen.