OK.
So in this video we're going to recreate this tic tac toe board exercise from scratch.
So we're going to start from the very beginning with an empty file.
I Coppermine board that HVM l can add in our boiler plate.
Just going to call it T T T board and the way that this works just to jog your memory.
It's a table.
This whole thing is a table.
It has three rows one two and three and each row has three Tweedy's.
So we end up with a three by three board.
And then what we'll do is go in and on these three TVs we're going to turn left and right border on
and then on these three we're going to turn the top and bottom border.
So we need to start with our table and then three tiers.
And I'm actually going to go and do three tiaras and do the t D's first.
So we get three TVs and then just going to duplicate that
once more.
Now we have our three rows with three elements three TVs in each one.
So we'll save that and if we open this in the browser you'll notice that we don't see a thing.
And that's because even though our table is there there's first of all there's nothing in our table
.
And then also we don't have any styles applied because it is possible to have an empty table and still
see things which is actually what this is here.
There is no data in these tables.
In this example here it's just a table and then it's styled.
So that has a with it has a border.
So we need to do that.
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
tag this time which you should know by now.
It's not a great idea in the long run but just for a solution video just for the ease of watching here
so they don't have to watch me flip between files and get confused about what goes where I'm just going
to do in one file here at the top in the style tag.
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
now if we inspected the TT's
you would see that they are basically not there at all.
They're two pixels by two pixels.
So they're really really small and that's because there's nothing there and we haven't assigned to them
a with or a height.
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
to do the same thing for height and we save and refresh and we still don't see anything.
And again that's because we haven't given them anything to display.
But if we go and inspect now we can see each Tedy is now a square a 100 by 100 pixels.
So let's go and give them a background just so you can see that they're there.
Say backgrounders pink save.
And now we can see we have the beginnings of our board.
So I'm actually going to undo that background color.
I just wanted to show you that the tiles are there.
We have our TVs.
And now what we need to do is figure out how to selectively turn on the border.
So we're going to start on these three elements.
We want to turn on the left and the right border.
So if I refresh the page.
But let's start by taking this top one right here and giving it a left and a right quarter.
So I'm going to go and that's the second TD instead of the first TR.
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
a class for these three called vertical where we just get the left and right borders.
So class equals vertical.
And then over here we're going to select vertical and just give it a border left
and let's do one pixel black for now and do the same thing for border.
Right.
And if we save and we are fresh you'll see we have the first square completed.
So now we need to add the t d that's below it and the TV that's below that.
And that's why I made it a class because we're going to use it more than once.
So rather than making this an ID and then doing another ID for this element and another ID for this
one which I totally could have done I could have done something like ID middle and then this one to
be id middle bottom or something.
Well I can have a space there but something like that.
Thats actually not a great idea.
We dont want to have multiple ID so Im just going to give it a class and then our class is vertical
.
So Im going to give it to this one as well.
This is our middle element thats right below it.
And then the other one which is below that.
So those three now have class vertical and you can see we get our three vertical lines.
So we now we just need to repeat the same process on the horizontal lines.
And so we want this element here.
This one here and this one here to have a border top and a border bottom.
So this time I'm going to start with the class and we get a horizontal and underspin a copy this except
change border left to border top and border bottom and then all we need to do is sign this horizontal
class with the correct elements.
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.
in the second TR.
So I'm just going to go ahead and do that.
Class equals or is on TL and copy that.
Then we want it in this middle one here and you'll see we already have a class vertical and we haven't
actually seen this before where we have more than one class.
It's really easy.
All we do is add a space.
So this is not one class called vertical horizontal.
It is two vertical and also horizontal.
And then we'll do the same thing to this last CD which would be this one here and if we save and we
refresh the page we now have our completed tic tac toe board.
So the very last thing that I want to do here is just move this over so that it's centered and it's
actually really easy.
It's just one line of success on our table.
We're going to give it a margin of order and there we go.
That margin is automatically computed.
You can see as I scroll.
I mean as I resize the window that margins increasing and decreasing and then one last thing if we wanted
to add that each one in at the very top that just says tic tac toe
can do that.
But you'll notice that this element Phi inspected.
Well you can see without even inspecting it that it's all the way over on the side.
So if I wanted to go in the middle the element actually takes up all the way across the screen.
You can see this blue here.
So I can just Center the text and that will give us the effect that the H-1 is actually in the middle
.
So I just it H-1 text align center and I save.
And there we go we've got a tic tac toe board