Hello, let's build a fun image portfolio site, one of the biggest problems that people have and the
hardest problem with access, it's always making sure that we have our items displayed in the location
that we want.
That is a really, really difficult problem.
And there are many, many solutions to this problem.
But one of the new ways and now is probably the most popular way is called Flex Box.
And we're going to be using that to create a beautiful image Web site.
Let's get started.
So I have an index e-mail file here and a style that's useful in the same directory on my desktop.
So let's get started with our typical e-mail file.
We're going to title access and in the body, we're going to have a header of life in the wild.
And refresh perfect and in here, we're going to have a div with a class of container.
We'll close that off.
And in here, let's add some images.
Now, if you remember with images, I can type in this and then tab with sublime text and we don't have
any pictures yet.
So for now, let's just copy and paste and add six images.
Save and refresh.
OK, let's start adding some of these images and actually have a file full of these images for you,
and I'll attach it to the next lesson so you can also build it yourself.
So I'm just going to copy these quickly.
Q That was a lot of copy and pasting, let's save that and refresh.
All right.
We have our images and they're massive, so let's make this a little bit smaller.
We can now go to our stylesheet and we can select the images and let's just do with four hundred fifty
pixels and height.
Three hundred pixels, and you might be asking yourself, how come we don't do it here on the individual
images?
And remember, we can add attributes, but that means if we needed to ever change anything, we have
to individually go into each image and change it versus just changing in one location.
So for now, we're going to stick to the success size.
Let's save that and refresh.
And obviously we need to link the file.
So let's add a link here and it will reference our style that say that and refresh.
There you go.
We have our images like that, some beautiful animals here.
Now, Fleck's box has a great resource.
Obviously from Strix.
And this is pretty much all you need.
It shows you all the things that Flex boss can do, and as you can see, it allows you to play around
with content and shift it around in a very nice way.
I'm going to attach this link for you at the end of this video and you can take a look for yourself.
For now, let's learn a few flex box properties.
We want to define that everything inside of this d'Hiv is part of Fleck's let's select it's called container,
so let's do container.
And within this container we will say that display will be Fleck's.
So that's how we activate Fleck's box refresh.
OK, we have a few changes, which is nice, but I don't want to scroll through this.
Ideally, I can see everything without scrolling.
So one thing we want to do and again, we can look down over here at.
The suggestion we see that flex wrap might be something that we want to add.
So let's do flex wrap, do wrap and refresh.
OK, that's perfect.
If I make this bigger, you see that everything is wrapping around.
OK, but I think the continent should be centered, it kind of looks we are having everything to the
left over here.
So again, we can do something called justify content, then we can do center.
And refresh perfect, and we if we look on the guide over here, justify content, should be right over
here.
You can see all the properties that it has.
That looks pretty good, and we did that pretty fast, made a nice little portfolio website already.
What else can we add now that we have this flexible container around our website?
Let's make the header a little bit prettier than it is now.
So that's the one.
We can add in each one here and we'll say that the font family is I like this one fantasy save and refresh.
I like that one font size.
Let's make it a little bit bigger.
We'll do three ETM.
So if you don't remember what Ms.
Make sure you check out that video.
OK, so that looks better.
Maybe it will be nice to have a bit of a border as well so we can do border bottom because we only want
to border on the bottom and we'll do two pixels solid pink.
OK, perfect.
That looks good, but ideally, I want a border just around this, I don't want the entire section so
we can actually just say that for each one, we want the width to be four hundred pixels.
I save and refresh.
All right, perfect.
That looks good and ideally, this is centered so that the line underneath it is well on the left side
and right side is equally distributed.
So we can use something like text a line.
And you'll notice here that it's aligned in the center, but not the Web page center.
It's a line in the center of the width of four hundred pixels, but that looks good.
It would be actually nice to have a border on here as well.
So let's add the border right to pixel, solid pink, save and refresh.
All right.
That looks very nice.
And then the final thing I want to add is I want to have some spacing between these images, so I'm
going to add a margin of 10 pixels here and refresh.
All right, let's take a look at our website right now.
That looks very, very nice, as you can see, flecks box is a very easy thing to implement and it makes
your websites look really, really nice and you can position your content very easily, especially if
you have these container like structures.
I want to show you one last resource for Fleck's box.
Again, this is a tool that you'll see more and more of.
And ideally, you'll build websites using Fleck's box instead of some of the older ways.
One way to get really, really good Aflex box is to play this game.
And it's called Flex Box from the I believe.
Let's see.
And here you're trying to get the frog onto the leaf.
It's a little home so you can do something like justify content, flex and.
And look at that, you get the frog onto the leaf and you move on to the next round, I'll leave this
for you.
It's a really, really good way to learn flex box.
I think this is probably the best way to do layout and success.
I'll see you in the next one.
Bye bye.