So let's go over a solution to this exercise.
As always you can take a look at the code right away if you want to follow along.
Start from scratch with me.
Feel free to do so.
So the very very first thing we have to do is make a new file I'll call it Pokemon that each team will
create our boilerplate and let's fill in the title to match where it should be.
Oh come on chart.
So we know this is going to have an H-1 up top and that each one is just first gen hokum on chart.
And we know there's going to be a table in that table and have a T head and a t body which just to refresh
your memory does not impact anything about how the table looks or behaves.
It's purely about making our markup as semantic as possible making it so that a search engine or a webcrawler
knows that this is the hatter right appear and this is the body.
So just a good idea that's practice.
So next we're going to add in our very top four headings so for teenagers we have image name type and
evolves into.
So let's go ahead and just check how this looks all right.
There's our table so far.
The first thing we'll probably want to do is just to make it match what we had we give it a border.
Remember though that we don't really want to be doing this later on in the class so once we talk about
C S s we'll do all of the styling through C S S.
This is just purely to make things visual for now.
It's not a bad idea to know about it but it is a better idea really to do this professionally.
OK so let's go take some of this data.
When it copy it down just to the bottom here and comment it all out and then all going to do is create
my first row so will start with bulbasaur.
So instead of the body needed to your Instead of that TR We need 40.
The name is going to correspond to our second Th.
So I'm going to put it in the second t d there.
The image goes first.
So I'm going to copy the image you r l and then I'm going to create an image tag and set the source
equal to that you are real inside of that tiddy if you want to you might spaced it out a little bit
like this.
So you have you know this doesn't impact anything it's just purely aesthetic in our code so that we
can see the relationships that this image is nested inside the TV that if we've got name next we have
type which is grass and poison.
And then lastly we have another more complex one where we have an AI tag.
Remember it needs to look like this a tag that says Ivey's or so that e-tag let's copy the link that
it needs to go to and then let's copy the name for that content and then I'm going to go ahead and get
rid of this up to get rid of the comments.
Well get rid of that just so that we clean this up a bit.
Let's refresh and there's our first entry.
Double check that it works.
Or can I be sore.
Great.
OK.
So we're basically going to repeat the exact same process.
And for the sake of time I'm just going to copy this.
So this whole row and remember you could do Control-C and paste it with control V and command C in command
we also supply has this nice shortcut where you can select and hit command shift the command shifty
twice if you wanted to.
And that will duplicate it twice.
So now we've doubled that automatically and we just need to go through and make some of the changes
.
So the first one name is char Mandar
the image you are Owl
and we need Tamilian.
It's a fire type and you are all here
pasted in.
Let's check on that.
So we should have to open source because we copy and pasted in the link is correct.
Great.
Now we just need to finish up with Squirtle
image
water.
Let's go with you or else first if the link
changed the name or turtle and drink is water.
All right amount of copy and pasting there.
There we go.
Make sure it all works great.
OK so that's all we need to do to make sure they match.
Looks good.
Great.
One small change I might make while I'm here.
Just a good lesson on this.
I'll add a comment here just just to clarify for you guys so this first one is what was your next.
This is everything about charm mandar.
And lastly this is everything that corresponds to Squirtle.
One change though as I mentioned is these images are kind of massive.
We could deftly shrink them down and that would shrink the size of a table down.
And this is something you would do with CSSA it is style information.
So ideally we do it with s away from each team.
We want to keep them separate.
Each time I'll structure CSSA style.
But for this exercise what we can do is add a with attribute to an image you put a number like 50 and
just see that as a refresh.
This changes to 50 pixels much smaller where you change to 500 and get a gigantic image.
Keep it at 50.
And another reason I want to show you this is rather than copying and pasting this three times which
works just fine.
A better way of doing that in sublime is to actually create three cursors so I'll show you what I mean
.
We click hold command click again key pulling command and click again and then we can start typing.
And I have three cursors at once with equals 50.
So this is pretty cool.
It's a really useful one if you need to change multiple things at once in the exact same way you just
command click all over the place and it spawns a bunch of curses.
And as you can see we have a nice more readable and sensibly sized table.
All right