1
00:00:02,070 --> 00:00:05,370
So let's go over a solution to this exercise.

2
00:00:05,640 --> 00:00:09,210
As always you can take a look at the code right away if you want to follow along.

3
00:00:09,210 --> 00:00:10,430
Start from scratch with me.

4
00:00:10,440 --> 00:00:12,110
Feel free to do so.

5
00:00:12,150 --> 00:00:18,640
So the very very first thing we have to do is make a new file I'll call it Pokemon that each team will

6
00:00:21,450 --> 00:00:25,870
create our boilerplate and let's fill in the title to match where it should be.

7
00:00:26,070 --> 00:00:28,070
Oh come on chart.

8
00:00:29,760 --> 00:00:39,750
So we know this is going to have an H-1 up top and that each one is just first gen hokum on chart.

9
00:00:40,740 --> 00:00:48,690
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

10
00:00:48,690 --> 00:00:52,610
your memory does not impact anything about how the table looks or behaves.

11
00:00:52,770 --> 00:01:00,210
It's purely about making our markup as semantic as possible making it so that a search engine or a webcrawler

12
00:01:00,360 --> 00:01:06,580
knows that this is the hatter right appear and this is the body.

13
00:01:06,720 --> 00:01:09,450
So just a good idea that's practice.

14
00:01:09,450 --> 00:01:23,670
So next we're going to add in our very top four headings so for teenagers we have image name type and

15
00:01:23,670 --> 00:01:26,230
evolves into.

16
00:01:26,880 --> 00:01:31,190
So let's go ahead and just check how this looks all right.

17
00:01:31,470 --> 00:01:33,900
There's our table so far.

18
00:01:33,900 --> 00:01:40,480
The first thing we'll probably want to do is just to make it match what we had we give it a border.

19
00:01:40,740 --> 00:01:46,020
Remember though that we don't really want to be doing this later on in the class so once we talk about

20
00:01:46,030 --> 00:01:50,050
C S s we'll do all of the styling through C S S.

21
00:01:50,070 --> 00:01:53,730
This is just purely to make things visual for now.

22
00:01:53,970 --> 00:02:00,540
It's not a bad idea to know about it but it is a better idea really to do this professionally.

23
00:02:00,570 --> 00:02:02,540
OK so let's go take some of this data.

24
00:02:02,720 --> 00:02:10,440
When it copy it down just to the bottom here and comment it all out and then all going to do is create

25
00:02:10,440 --> 00:02:12,440
my first row so will start with bulbasaur.

26
00:02:12,480 --> 00:02:19,840
So instead of the body needed to your Instead of that TR We need 40.

27
00:02:21,480 --> 00:02:25,230
The name is going to correspond to our second Th.

28
00:02:25,340 --> 00:02:28,130
So I'm going to put it in the second t d there.

29
00:02:28,410 --> 00:02:30,440
The image goes first.

30
00:02:30,690 --> 00:02:36,720
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

31
00:02:36,780 --> 00:02:42,570
equal to that you are real inside of that tiddy if you want to you might spaced it out a little bit

32
00:02:42,570 --> 00:02:44,310
like this.

33
00:02:44,430 --> 00:02:49,200
So you have you know this doesn't impact anything it's just purely aesthetic in our code so that we

34
00:02:49,200 --> 00:02:56,670
can see the relationships that this image is nested inside the TV that if we've got name next we have

35
00:02:56,670 --> 00:03:00,540
type which is grass and poison.

36
00:03:00,540 --> 00:03:05,090
And then lastly we have another more complex one where we have an AI tag.

37
00:03:05,730 --> 00:03:12,390
Remember it needs to look like this a tag that says Ivey's or so that e-tag let's copy the link that

38
00:03:12,390 --> 00:03:21,540
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

39
00:03:21,930 --> 00:03:24,330
rid of this up to get rid of the comments.

40
00:03:24,330 --> 00:03:28,570
Well get rid of that just so that we clean this up a bit.

41
00:03:29,190 --> 00:03:32,330
Let's refresh and there's our first entry.

42
00:03:32,430 --> 00:03:33,690
Double check that it works.

43
00:03:33,700 --> 00:03:35,150
Or can I be sore.

44
00:03:35,160 --> 00:03:36,180
Great.

45
00:03:36,840 --> 00:03:37,560
OK.

46
00:03:37,560 --> 00:03:40,620
So we're basically going to repeat the exact same process.

47
00:03:40,620 --> 00:03:43,930
And for the sake of time I'm just going to copy this.

48
00:03:44,100 --> 00:03:53,030
So this whole row and remember you could do Control-C and paste it with control V and command C in command

49
00:03:53,040 --> 00:04:02,640
we also supply has this nice shortcut where you can select and hit command shift the command shifty

50
00:04:02,700 --> 00:04:04,250
twice if you wanted to.

51
00:04:04,500 --> 00:04:07,910
And that will duplicate it twice.

52
00:04:07,920 --> 00:04:12,540
So now we've doubled that automatically and we just need to go through and make some of the changes

53
00:04:12,550 --> 00:04:12,880
.

54
00:04:13,200 --> 00:04:16,320
So the first one name is char Mandar

55
00:04:20,220 --> 00:04:21,380
the image you are Owl

56
00:04:26,850 --> 00:04:33,770
and we need Tamilian.

57
00:04:34,740 --> 00:04:38,400
It's a fire type and you are all here

58
00:04:43,980 --> 00:04:45,830
pasted in.

59
00:04:47,040 --> 00:04:48,360
Let's check on that.

60
00:04:48,780 --> 00:04:54,480
So we should have to open source because we copy and pasted in the link is correct.

61
00:04:54,480 --> 00:04:55,250
Great.

62
00:04:55,290 --> 00:04:57,660
Now we just need to finish up with Squirtle

63
00:05:03,300 --> 00:05:03,870
image

64
00:05:08,510 --> 00:05:09,960
water.

65
00:05:10,050 --> 00:05:12,210
Let's go with you or else first if the link

66
00:05:14,570 --> 00:05:21,560
changed the name or turtle and drink is water.

67
00:05:21,760 --> 00:05:26,350
All right amount of copy and pasting there.

68
00:05:26,380 --> 00:05:27,170
There we go.

69
00:05:27,180 --> 00:05:28,860
Make sure it all works great.

70
00:05:29,030 --> 00:05:33,950
OK so that's all we need to do to make sure they match.

71
00:05:34,170 --> 00:05:37,810
Looks good.

72
00:05:38,280 --> 00:05:38,920
Great.

73
00:05:38,940 --> 00:05:41,490
One small change I might make while I'm here.

74
00:05:41,490 --> 00:05:43,250
Just a good lesson on this.

75
00:05:43,250 --> 00:05:51,620
I'll add a comment here just just to clarify for you guys so this first one is what was your next.

76
00:05:51,630 --> 00:05:54,500
This is everything about charm mandar.

77
00:05:54,510 --> 00:06:01,460
And lastly this is everything that corresponds to Squirtle.

78
00:06:01,530 --> 00:06:05,680
One change though as I mentioned is these images are kind of massive.

79
00:06:05,780 --> 00:06:09,880
We could deftly shrink them down and that would shrink the size of a table down.

80
00:06:10,110 --> 00:06:14,110
And this is something you would do with CSSA it is style information.

81
00:06:14,190 --> 00:06:18,090
So ideally we do it with s away from each team.

82
00:06:18,120 --> 00:06:19,900
We want to keep them separate.

83
00:06:19,950 --> 00:06:22,360
Each time I'll structure CSSA style.

84
00:06:22,710 --> 00:06:32,340
But for this exercise what we can do is add a with attribute to an image you put a number like 50 and

85
00:06:32,340 --> 00:06:35,220
just see that as a refresh.

86
00:06:35,220 --> 00:06:44,380
This changes to 50 pixels much smaller where you change to 500 and get a gigantic image.

87
00:06:44,540 --> 00:06:45,640
Keep it at 50.

88
00:06:45,990 --> 00:06:53,700
And another reason I want to show you this is rather than copying and pasting this three times which

89
00:06:53,700 --> 00:06:56,450
works just fine.

90
00:06:56,910 --> 00:07:05,430
A better way of doing that in sublime is to actually create three cursors so I'll show you what I mean

91
00:07:05,430 --> 00:07:05,630
.

92
00:07:05,670 --> 00:07:14,290
We click hold command click again key pulling command and click again and then we can start typing.

93
00:07:14,320 --> 00:07:20,100
And I have three cursors at once with equals 50.

94
00:07:20,370 --> 00:07:21,800
So this is pretty cool.

95
00:07:21,810 --> 00:07:27,000
It's a really useful one if you need to change multiple things at once in the exact same way you just

96
00:07:27,000 --> 00:07:31,810
command click all over the place and it spawns a bunch of curses.

97
00:07:32,490 --> 00:07:38,890
And as you can see we have a nice more readable and sensibly sized table.

98
00:07:38,900 --> 00:07:39,360
All right