1
00:00:00,630 --> 00:00:05,120
In this video we're going to create this photographer's portfolio site from scratch.

2
00:00:05,310 --> 00:00:10,830
And usually I would ask you to attempt to do this on your own and then give you a solution video following

3
00:00:10,830 --> 00:00:11,550
this.

4
00:00:11,640 --> 00:00:14,050
However this time it's a deliberate code along.

5
00:00:14,070 --> 00:00:19,590
So I'd like you to attempt to code along and if you prefer you can watch it once through and then code

6
00:00:19,590 --> 00:00:20,650
along the next time.

7
00:00:20,850 --> 00:00:26,220
But the goal here is that we're going to do it together and there are two other things that we want

8
00:00:26,220 --> 00:00:26,940
to get out of this.

9
00:00:26,940 --> 00:00:33,270
The first one is there's a new property I'm going to show called float and the second thing is I just

10
00:00:33,270 --> 00:00:37,190
want you to get a little experience building something that you can be somewhat proud of.

11
00:00:37,200 --> 00:00:41,970
That looks a little bit better than some of the simple things that are just really bright awful colors

12
00:00:41,970 --> 00:00:43,160
that we've done so far.

13
00:00:43,170 --> 00:00:47,210
So this is a really minimal photo blog that we're going to do.

14
00:00:47,280 --> 00:00:49,160
So let's get started.

15
00:00:49,230 --> 00:00:50,610
Open up sublime.

16
00:00:50,880 --> 00:00:54,330
I have a single file called Photo grid that HMO.

17
00:00:54,960 --> 00:01:00,480
I'm going to first show you the image or else that we're working with.

18
00:01:00,480 --> 00:01:07,410
So these are images nine images three images each from three different photographers that I found on

19
00:01:07,410 --> 00:01:08,390
Flickr.

20
00:01:08,700 --> 00:01:10,920
All the photos are licensed under Creative Commons.

21
00:01:10,920 --> 00:01:13,030
You can the license here.

22
00:01:13,050 --> 00:01:19,800
So before we do anything with these image you URLs I'm actually going to get rid of them and I'm going

23
00:01:19,800 --> 00:01:27,180
to add in my aged skeleton ad-Din in photo blog and I'm going to do a quick demonstration so you don't

24
00:01:27,180 --> 00:01:34,360
have to code along with this part when I add to divs one that says hello and one that says goodbye and

25
00:01:34,410 --> 00:01:42,150
I'm going to save them and then I'm going to add my stylesheet in which I'm calling photos of the SS

26
00:01:43,350 --> 00:01:46,750
and then over here I'm going to style my divs.

27
00:01:46,770 --> 00:01:53,890
So I'm actually going to give them an I.D. just call it one.

28
00:01:54,270 --> 00:02:06,810
And again this is just to demonstrate something and then to an over here I'm going to select one and

29
00:02:06,900 --> 00:02:10,020
two and all I'm going to do is just give them a different background color

30
00:02:14,040 --> 00:02:25,980
red and then background color purple and then I'm going to give both of them all divs and a width of

31
00:02:25,980 --> 00:02:27,630
100 pixels.

32
00:02:27,630 --> 00:02:32,430
So when I do this I open it up in the browser.

33
00:02:33,540 --> 00:02:36,970
We have two divs one after another.

34
00:02:36,990 --> 00:02:39,020
Remember that they if we inspect.

35
00:02:39,480 --> 00:02:44,280
They are basically set up so that they take their own line their block level element.

36
00:02:44,280 --> 00:02:50,400
So if I don't want that to happen which is what we're going to do for the image grid we want our images

37
00:02:50,400 --> 00:02:54,490
to form a grid or multiple are on the same line.

38
00:02:54,540 --> 00:02:59,850
And if so if I want to do that with divs I need to use a property called float or that's one way that

39
00:02:59,850 --> 00:03:01,690
I can accomplish it.

40
00:03:01,740 --> 00:03:06,780
So here all I do is safe float left and what that will do.

41
00:03:06,780 --> 00:03:11,390
It will take the elements all divs out of the normal flow of the document.

42
00:03:11,580 --> 00:03:14,730
So there are stacks currently on each on separate lines.

43
00:03:15,000 --> 00:03:22,200
And what will happen is that they will float to the left to think of it as gravity going away almost

44
00:03:22,200 --> 00:03:23,090
in our document.

45
00:03:23,280 --> 00:03:26,380
And so this div is going to float up and push to the left.

46
00:03:26,400 --> 00:03:27,580
Against this one.

47
00:03:27,990 --> 00:03:32,200
So if I were fresh here you can see that they're now on the same line.

48
00:03:32,280 --> 00:03:38,190
So we're going to use this principle when we're using images so that we can get images to basically

49
00:03:38,550 --> 00:03:41,840
go up against one another and form a grid.

50
00:03:41,970 --> 00:03:48,600
So I'm going to get rid of all this now and get rid of the device that we have and I'm going to add

51
00:03:48,600 --> 00:03:49,910
in our image like this.

52
00:03:50,280 --> 00:03:55,770
So I'm going to make this full screen and just paste in these image links that are in that file included

53
00:03:55,770 --> 00:03:57,040
with this video.

54
00:03:57,810 --> 00:04:04,920
And rather than making nine image tags like this where I make an image tag and then copy you around

55
00:04:05,190 --> 00:04:08,230
and paste it in nine times which should be very slow.

56
00:04:08,490 --> 00:04:15,660
I'm going to use a little bit of sublime magic here where I'm using command click to select the beginning

57
00:04:15,660 --> 00:04:22,530
of every line and then I'm just going to type image source equals and then move to the end of the line

58
00:04:22,530 --> 00:04:22,730
.

59
00:04:22,800 --> 00:04:28,650
So I used a command right arrow command left arrow takes it to the beginning command right goes to the

60
00:04:28,710 --> 00:04:35,380
end and then I'm going to finish with the quote and then the closing bracket.

61
00:04:35,400 --> 00:04:40,550
So that was a really easy and quick way to enclose all those you are Elves as image tags.

62
00:04:40,920 --> 00:04:46,340
So if I save this and they go to the browser you'll see when I refresh.

63
00:04:46,530 --> 00:04:47,960
We now have nine images.

64
00:04:48,090 --> 00:04:49,680
Of course are not integrated.

65
00:04:49,890 --> 00:04:53,890
They're taking up a lot of space.

66
00:04:54,060 --> 00:05:01,230
So what we're going to do now is go to our style sheet and select all images.

67
00:05:01,230 --> 00:05:05,520
And the first thing that we probably want to do here is just give them away.

68
00:05:06,090 --> 00:05:13,280
So let's give them a with like 100 pixels to start and this is going to be way too small.

69
00:05:13,710 --> 00:05:21,540
But I want you to see what happens and refresh and you'll notice that all these images now are in a

70
00:05:21,540 --> 00:05:26,360
line together but that there's some spacing between them that we didn't specify.

71
00:05:26,430 --> 00:05:29,780
We never set margin or padding or anything.

72
00:05:29,790 --> 00:05:34,590
So what's happening is that there's actually some white space that's being added and it's a little bit

73
00:05:34,590 --> 00:05:36,040
of a quirky thing in a steam owl.

74
00:05:36,050 --> 00:05:41,850
But when we have images without anything else there's a white space or just a single space that's added

75
00:05:41,850 --> 00:05:42,870
between these.

76
00:05:43,140 --> 00:05:49,710
So if we want to get rid of that we can use float and remember that float will take things out of the

77
00:05:49,710 --> 00:05:51,540
flow of the document.

78
00:05:51,570 --> 00:05:58,170
So if I refresh Now you can see that are images are butting up against one another and there's basically

79
00:05:58,170 --> 00:05:59,800
no space at all between them.

80
00:06:00,150 --> 00:06:04,120
And then we can go back and add that space in our self.

81
00:06:04,170 --> 00:06:07,020
So we obviously don't want them to take up this little space.

82
00:06:07,020 --> 00:06:13,700
We do want three going across and we want some margin between them but we want to control that.

83
00:06:14,160 --> 00:06:20,610
So by floating them we got rid of the white space that the browser added for us so that we can now go

84
00:06:20,610 --> 00:06:27,320
in at our own custom spacing using the margin property rather than actual whitespace.

85
00:06:28,920 --> 00:06:33,670
So now we're going to change the width and let's start with 30 percent.

86
00:06:33,720 --> 00:06:39,180
So remember that the percent Israel is relative to the parent elements of the body.

87
00:06:39,180 --> 00:06:41,910
So each one will take up 30 percent of the body.

88
00:06:41,910 --> 00:06:46,800
And the reason I'm starting with 30 is just to make sure they all fit on one line or that three fit

89
00:06:46,800 --> 00:06:46,830
.

90
00:06:46,830 --> 00:06:52,120
In my mind and you'll see that we get three of them going across no space between.

91
00:06:52,260 --> 00:06:58,370
And then we have our 10 percent over here because this is only 90 percent that we're taking up.

92
00:06:58,470 --> 00:07:06,390
So we're going to use that other percentage to actually split up the margin and add some spacing between

93
00:07:06,390 --> 00:07:06,790
them.

94
00:07:07,020 --> 00:07:09,460
So already we have a three by three grid.

95
00:07:09,650 --> 00:07:12,550
What we want to do next is make it look like this.

96
00:07:12,750 --> 00:07:15,000
Or we have even spacing between them.

97
00:07:15,180 --> 00:07:17,870
So we actually have to do a little bit of math.

98
00:07:18,060 --> 00:07:18,860
So I've already done it.

99
00:07:18,870 --> 00:07:26,210
But basically if we calculate this there's a margin here one there's a margin here too.

100
00:07:26,570 --> 00:07:28,430
There's a margin here three.

101
00:07:28,600 --> 00:07:32,400
And then on this one for that on this one five.

102
00:07:32,670 --> 00:07:34,910
And on this one or six.

103
00:07:34,920 --> 00:07:45,570
So we have 10 percent and we need to divide that by 6 and 10 divided by six is one point six six.

104
00:07:45,570 --> 00:07:52,810
So what we're going to do is just say margin one point six six percent.

105
00:07:52,950 --> 00:07:58,440
So if we go back to the browser and check out the result and refresh you'll see that we get three evenly

106
00:07:58,440 --> 00:08:01,900
spaced images with spacing between them.

107
00:08:01,950 --> 00:08:04,850
So the math just hit that one more time.

108
00:08:05,070 --> 00:08:06,570
Each one of these is 10 percent.

109
00:08:06,570 --> 00:08:07,980
So they give just 30 percent.

110
00:08:08,160 --> 00:08:12,370
And each one has a margin of 1.6 percent on either side.

111
00:08:12,390 --> 00:08:19,700
So we take both sides left and right one point six times two plus 30 percent and we get thirty three

112
00:08:19,690 --> 00:08:22,920
point three percent for each one of these.

113
00:08:22,920 --> 00:08:29,330
So that's one third exactly or almost exactly we are rounding but that's the best we can do here.

114
00:08:29,530 --> 00:08:30,800
So thirty three point three percent.

115
00:08:30,810 --> 00:08:35,200
Each one of these we can inspect just to verify that.

116
00:08:35,670 --> 00:08:36,670
There we go.

117
00:08:36,690 --> 00:08:39,360
You can see it take up exactly one third