In this video we're going to create this photographer's portfolio site from scratch.
And usually I would ask you to attempt to do this on your own and then give you a solution video following
this.
However this time it's a deliberate code along.
So I'd like you to attempt to code along and if you prefer you can watch it once through and then code
along the next time.
But the goal here is that we're going to do it together and there are two other things that we want
to get out of this.
The first one is there's a new property I'm going to show called float and the second thing is I just
want you to get a little experience building something that you can be somewhat proud of.
That looks a little bit better than some of the simple things that are just really bright awful colors
that we've done so far.
So this is a really minimal photo blog that we're going to do.
So let's get started.
Open up sublime.
I have a single file called Photo grid that HMO.
I'm going to first show you the image or else that we're working with.
So these are images nine images three images each from three different photographers that I found on
Flickr.
All the photos are licensed under Creative Commons.
You can the license here.
So before we do anything with these image you URLs I'm actually going to get rid of them and I'm going
to add in my aged skeleton ad-Din in photo blog and I'm going to do a quick demonstration so you don't
have to code along with this part when I add to divs one that says hello and one that says goodbye and
I'm going to save them and then I'm going to add my stylesheet in which I'm calling photos of the SS
and then over here I'm going to style my divs.
So I'm actually going to give them an I.D. just call it one.
And again this is just to demonstrate something and then to an over here I'm going to select one and
two and all I'm going to do is just give them a different background color
red and then background color purple and then I'm going to give both of them all divs and a width of
100 pixels.
So when I do this I open it up in the browser.
We have two divs one after another.
Remember that they if we inspect.
They are basically set up so that they take their own line their block level element.
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
to form a grid or multiple are on the same line.
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
I can accomplish it.
So here all I do is safe float left and what that will do.
It will take the elements all divs out of the normal flow of the document.
So there are stacks currently on each on separate lines.
And what will happen is that they will float to the left to think of it as gravity going away almost
in our document.
And so this div is going to float up and push to the left.
Against this one.
So if I were fresh here you can see that they're now on the same line.
So we're going to use this principle when we're using images so that we can get images to basically
go up against one another and form a grid.
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
in our image like this.
So I'm going to make this full screen and just paste in these image links that are in that file included
with this video.
And rather than making nine image tags like this where I make an image tag and then copy you around
and paste it in nine times which should be very slow.
I'm going to use a little bit of sublime magic here where I'm using command click to select the beginning
of every line and then I'm just going to type image source equals and then move to the end of the line
.
So I used a command right arrow command left arrow takes it to the beginning command right goes to the
end and then I'm going to finish with the quote and then the closing bracket.
So that was a really easy and quick way to enclose all those you are Elves as image tags.
So if I save this and they go to the browser you'll see when I refresh.
We now have nine images.
Of course are not integrated.
They're taking up a lot of space.
So what we're going to do now is go to our style sheet and select all images.
And the first thing that we probably want to do here is just give them away.
So let's give them a with like 100 pixels to start and this is going to be way too small.
But I want you to see what happens and refresh and you'll notice that all these images now are in a
line together but that there's some spacing between them that we didn't specify.
We never set margin or padding or anything.
So what's happening is that there's actually some white space that's being added and it's a little bit
of a quirky thing in a steam owl.
But when we have images without anything else there's a white space or just a single space that's added
between these.
So if we want to get rid of that we can use float and remember that float will take things out of the
flow of the document.
So if I refresh Now you can see that are images are butting up against one another and there's basically
no space at all between them.
And then we can go back and add that space in our self.
So we obviously don't want them to take up this little space.
We do want three going across and we want some margin between them but we want to control that.
So by floating them we got rid of the white space that the browser added for us so that we can now go
in at our own custom spacing using the margin property rather than actual whitespace.
So now we're going to change the width and let's start with 30 percent.
So remember that the percent Israel is relative to the parent elements of the body.
So each one will take up 30 percent of the body.
And the reason I'm starting with 30 is just to make sure they all fit on one line or that three fit
.
In my mind and you'll see that we get three of them going across no space between.
And then we have our 10 percent over here because this is only 90 percent that we're taking up.
So we're going to use that other percentage to actually split up the margin and add some spacing between
them.
So already we have a three by three grid.
What we want to do next is make it look like this.
Or we have even spacing between them.
So we actually have to do a little bit of math.
So I've already done it.
But basically if we calculate this there's a margin here one there's a margin here too.
There's a margin here three.
And then on this one for that on this one five.
And on this one or six.
So we have 10 percent and we need to divide that by 6 and 10 divided by six is one point six six.
So what we're going to do is just say margin one point six six percent.
So if we go back to the browser and check out the result and refresh you'll see that we get three evenly
spaced images with spacing between them.
So the math just hit that one more time.
Each one of these is 10 percent.
So they give just 30 percent.
And each one has a margin of 1.6 percent on either side.
So we take both sides left and right one point six times two plus 30 percent and we get thirty three
point three percent for each one of these.
So that's one third exactly or almost exactly we are rounding but that's the best we can do here.
So thirty three point three percent.
Each one of these we can inspect just to verify that.
There we go.
You can see it take up exactly one third