1
00:00:00,760 --> 00:00:01,370
OK.

2
00:00:01,620 --> 00:00:05,960
So in this video we're going to recreate this tic tac toe board exercise from scratch.

3
00:00:06,060 --> 00:00:09,120
So we're going to start from the very beginning with an empty file.

4
00:00:09,130 --> 00:00:13,880
I Coppermine board that HVM l can add in our boiler plate.

5
00:00:14,460 --> 00:00:21,210
Just going to call it T T T board and the way that this works just to jog your memory.

6
00:00:21,420 --> 00:00:22,550
It's a table.

7
00:00:22,560 --> 00:00:23,950
This whole thing is a table.

8
00:00:24,000 --> 00:00:30,330
It has three rows one two and three and each row has three Tweedy's.

9
00:00:30,360 --> 00:00:32,270
So we end up with a three by three board.

10
00:00:32,430 --> 00:00:38,760
And then what we'll do is go in and on these three TVs we're going to turn left and right border on

11
00:00:39,390 --> 00:00:42,890
and then on these three we're going to turn the top and bottom border.

12
00:00:43,560 --> 00:00:48,020
So we need to start with our table and then three tiers.

13
00:00:48,810 --> 00:00:53,490
And I'm actually going to go and do three tiaras and do the t D's first.

14
00:00:53,520 --> 00:00:56,400
So we get three TVs and then just going to duplicate that

15
00:00:59,340 --> 00:01:01,450
once more.

16
00:01:01,590 --> 00:01:06,650
Now we have our three rows with three elements three TVs in each one.

17
00:01:06,720 --> 00:01:12,940
So we'll save that and if we open this in the browser you'll notice that we don't see a thing.

18
00:01:13,500 --> 00:01:18,600
And that's because even though our table is there there's first of all there's nothing in our table

19
00:01:18,600 --> 00:01:18,860
.

20
00:01:18,900 --> 00:01:23,910
And then also we don't have any styles applied because it is possible to have an empty table and still

21
00:01:23,910 --> 00:01:25,910
see things which is actually what this is here.

22
00:01:25,910 --> 00:01:27,950
There is no data in these tables.

23
00:01:28,080 --> 00:01:32,700
In this example here it's just a table and then it's styled.

24
00:01:32,700 --> 00:01:34,790
So that has a with it has a border.

25
00:01:34,980 --> 00:01:36,320
So we need to do that.

26
00:01:36,360 --> 00:01:42,120
So just to prove to you though that it's here let's add some style and I'm going to do it in a style

27
00:01:42,120 --> 00:01:45,210
tag this time which you should know by now.

28
00:01:45,360 --> 00:01:51,170
It's not a great idea in the long run but just for a solution video just for the ease of watching here

29
00:01:51,170 --> 00:01:55,960
so they don't have to watch me flip between files and get confused about what goes where I'm just going

30
00:01:55,970 --> 00:01:59,370
to do in one file here at the top in the style tag.

31
00:01:59,880 --> 00:02:09,540
So the first thing I'm going to do is just select the T's and give them a width and that's because right

32
00:02:09,540 --> 00:02:11,550
now if we inspected the TT's

33
00:02:19,380 --> 00:02:22,920
you would see that they are basically not there at all.

34
00:02:22,930 --> 00:02:24,830
They're two pixels by two pixels.

35
00:02:24,960 --> 00:02:28,720
So they're really really small and that's because there's nothing there and we haven't assigned to them

36
00:02:28,770 --> 00:02:30,680
a with or a height.

37
00:02:30,690 --> 00:02:36,570
So what I want to do is give them a width and we're going to start with 100 pixels and then we're going

38
00:02:36,570 --> 00:02:43,130
to do the same thing for height and we save and refresh and we still don't see anything.

39
00:02:43,500 --> 00:02:46,860
And again that's because we haven't given them anything to display.

40
00:02:47,010 --> 00:02:55,380
But if we go and inspect now we can see each Tedy is now a square a 100 by 100 pixels.

41
00:02:55,380 --> 00:02:59,160
So let's go and give them a background just so you can see that they're there.

42
00:02:59,310 --> 00:03:02,330
Say backgrounders pink save.

43
00:03:03,000 --> 00:03:05,970
And now we can see we have the beginnings of our board.

44
00:03:06,120 --> 00:03:08,360
So I'm actually going to undo that background color.

45
00:03:08,370 --> 00:03:11,400
I just wanted to show you that the tiles are there.

46
00:03:11,400 --> 00:03:12,630
We have our TVs.

47
00:03:12,930 --> 00:03:18,750
And now what we need to do is figure out how to selectively turn on the border.

48
00:03:18,930 --> 00:03:22,800
So we're going to start on these three elements.

49
00:03:22,800 --> 00:03:25,380
We want to turn on the left and the right border.

50
00:03:25,380 --> 00:03:26,990
So if I refresh the page.

51
00:03:27,140 --> 00:03:36,310
But let's start by taking this top one right here and giving it a left and a right quarter.

52
00:03:36,480 --> 00:03:40,990
So I'm going to go and that's the second TD instead of the first TR.

53
00:03:41,070 --> 00:03:47,250
I'm just going to give it a class and I'm just going to call this one vertical and I'm going to make

54
00:03:47,250 --> 00:03:52,120
a class for these three called vertical where we just get the left and right borders.

55
00:03:52,320 --> 00:03:53,820
So class equals vertical.

56
00:03:53,820 --> 00:04:00,240
And then over here we're going to select vertical and just give it a border left

57
00:04:04,560 --> 00:04:11,570
and let's do one pixel black for now and do the same thing for border.

58
00:04:11,570 --> 00:04:12,530
Right.

59
00:04:12,780 --> 00:04:18,280
And if we save and we are fresh you'll see we have the first square completed.

60
00:04:18,690 --> 00:04:23,520
So now we need to add the t d that's below it and the TV that's below that.

61
00:04:23,790 --> 00:04:29,020
And that's why I made it a class because we're going to use it more than once.

62
00:04:29,220 --> 00:04:34,800
So rather than making this an ID and then doing another ID for this element and another ID for this

63
00:04:34,800 --> 00:04:40,840
one which I totally could have done I could have done something like ID middle and then this one to

64
00:04:40,850 --> 00:04:45,730
be id middle bottom or something.

65
00:04:46,530 --> 00:04:49,570
Well I can have a space there but something like that.

66
00:04:49,680 --> 00:04:51,760
Thats actually not a great idea.

67
00:04:51,780 --> 00:04:57,120
We dont want to have multiple ID so Im just going to give it a class and then our class is vertical

68
00:04:57,120 --> 00:04:57,410
.

69
00:04:57,660 --> 00:05:01,350
So Im going to give it to this one as well.

70
00:05:01,560 --> 00:05:04,280
This is our middle element thats right below it.

71
00:05:04,440 --> 00:05:07,440
And then the other one which is below that.

72
00:05:07,440 --> 00:05:13,000
So those three now have class vertical and you can see we get our three vertical lines.

73
00:05:13,650 --> 00:05:17,770
So we now we just need to repeat the same process on the horizontal lines.

74
00:05:18,570 --> 00:05:20,740
And so we want this element here.

75
00:05:20,850 --> 00:05:26,250
This one here and this one here to have a border top and a border bottom.

76
00:05:26,670 --> 00:05:34,590
So this time I'm going to start with the class and we get a horizontal and underspin a copy this except

77
00:05:34,590 --> 00:05:43,080
change border left to border top and border bottom and then all we need to do is sign this horizontal

78
00:05:43,080 --> 00:05:45,270
class with the correct elements.

79
00:05:45,270 --> 00:05:52,260
So the ones that we want that to be on are this one right here so this is going to be the first T.T.

80
00:05:52,260 --> 00:05:54,500
in the second TR.

81
00:05:54,870 --> 00:05:56,100
So I'm just going to go ahead and do that.

82
00:05:56,100 --> 00:06:01,420
Class equals or is on TL and copy that.

83
00:06:01,440 --> 00:06:07,320
Then we want it in this middle one here and you'll see we already have a class vertical and we haven't

84
00:06:07,320 --> 00:06:09,910
actually seen this before where we have more than one class.

85
00:06:09,930 --> 00:06:10,910
It's really easy.

86
00:06:10,920 --> 00:06:13,880
All we do is add a space.

87
00:06:13,890 --> 00:06:16,350
So this is not one class called vertical horizontal.

88
00:06:16,350 --> 00:06:19,780
It is two vertical and also horizontal.

89
00:06:20,190 --> 00:06:27,030
And then we'll do the same thing to this last CD which would be this one here and if we save and we

90
00:06:27,030 --> 00:06:31,840
refresh the page we now have our completed tic tac toe board.

91
00:06:31,950 --> 00:06:36,930
So the very last thing that I want to do here is just move this over so that it's centered and it's

92
00:06:36,930 --> 00:06:38,800
actually really easy.

93
00:06:38,910 --> 00:06:42,460
It's just one line of success on our table.

94
00:06:42,720 --> 00:06:47,820
We're going to give it a margin of order and there we go.

95
00:06:47,850 --> 00:06:49,820
That margin is automatically computed.

96
00:06:49,830 --> 00:06:51,270
You can see as I scroll.

97
00:06:51,330 --> 00:06:57,140
I mean as I resize the window that margins increasing and decreasing and then one last thing if we wanted

98
00:06:57,150 --> 00:07:04,440
to add that each one in at the very top that just says tic tac toe

99
00:07:07,620 --> 00:07:08,520
can do that.

100
00:07:08,550 --> 00:07:12,690
But you'll notice that this element Phi inspected.

101
00:07:13,200 --> 00:07:16,480
Well you can see without even inspecting it that it's all the way over on the side.

102
00:07:16,650 --> 00:07:22,900
So if I wanted to go in the middle the element actually takes up all the way across the screen.

103
00:07:23,150 --> 00:07:24,620
You can see this blue here.

104
00:07:24,870 --> 00:07:31,710
So I can just Center the text and that will give us the effect that the H-1 is actually in the middle

105
00:07:31,710 --> 00:07:31,980
.

106
00:07:31,980 --> 00:07:40,720
So I just it H-1 text align center and I save.

107
00:07:41,130 --> 00:07:43,230
And there we go we've got a tic tac toe board