Collections Practice

[00:00:00]
>> So this is the first challenge for the collections. This is what the screen should look like on a desktop by the time you're done. Notice that we have a series of images here there are two rows with three columns each have different color borders associated with them.

[00:00:16]
Notice that we have the figure caption here, overlapping the image just like we did in the previous code pen. So, that is what should look like there at desktop. When we go to tablet it's going to be two images across and when we go to mobile it's going to be a series of images in a column, so go ahead and give that a try.

[00:00:45]
Hope you did okay on the collections? Let's go through exactly how these are going to work how I coded them. As always, there's lots of different ways to approach these problems. So you may have come up with something slightly different, but I'll tell you about how I addressed this particular problem.

[00:01:01]
So if we take a look at our HTML here, what I've done is the following. I've set this up first of all inside of a section rather than using a div. I've set this up as a section. The reason why is because this is a section of the webpage that happens to be talking about collections.

[00:01:18]
You could have used a div tag here if you wanted, it's less meaningful. I understand that the accessibility of section is kind of hit or miss in terms of whether a screen readers actually understand the section element but I decided to use it anyway. Anytime you have a section you need a heading so there it is h2 my assumption is of course that somewhere on the page there will eventually be an h1 which is why I started with h2.

[00:01:43]
And then this is a list of pictures so this is marked up as a list. Inside of each list item is our Figure, and these are more or less marked up the way you've seen in several examples prior to this. So there's a figure tag there's an image and then there's a figure caption inside of each of these, I wound up assigning class.

[00:02:04]
So as to each one of these figures, and that class is numbered color seven, color two and so forth that's actually going to match back to our CSS. So that is the HTML markup that I used here. On the CSS side, let's go through that. So I started off giving you the series of colors that are here inside of this example for the page that we're building and the designer gave me ten different colors.

[00:02:34]
So I just set them all up numbered one to ten and in there are all of the values. You could if you know how to use CSS custom properties or variables as they're often called you can absolutely call on these colors inside of your code. If you're not familiar with that code just take the hex codes and drop them into your CSS and that will work just fine also.

[00:02:58]
As I mentioned earlier I have not made extensive use of variables inside of this course again because this is more targeted towards beginners who are just starting out. And I'm trying to keep this as straightforward as possible but clearly you could do more with variables in the work that I've done here.

[00:03:15]
All right, so then we have our basic border box styling, we have some basic styling here for our body setting up our background color and our font and turning off the padding and margin. And I set a max width are sections such that we won't go wider than 1200 pixels just so the screen doesn't get ridiculously large and set up some margin and some padding on that as well as the font size.

[00:03:44]
Now we're going into our new styles. So, all as always the first step anytime you're using markup like this is to turn off the bullets. It is set up as a list because that is semantically what this is just a list of images. And of course those come with bullets.

[00:04:01]
So we turn those off. Then as I say here to keep the mobile screens from being stupid long consider setting a max height on the images and then hide the overflow. Cuz otherwise you might wind up with images that may take up even more than one screen on a phone.

[00:04:21]
So you might really Indeed want to set a max width and then just hide that overflow, which is what I've done here. We've got a bit of margin on these to put a bit of separation on them. And I set up a tiny little bit of a border radius and then notice that I spelled out individually my border width and my border style.

[00:04:43]
Normally we see this as like border one pixel solid red here I've spelled it out in two separate declarations because that border color I have associated with those classes later on. So by default my finger will come with a border with it has a width and a style but it does not have a color and the color will be added on later, okay.

[00:05:05]
In between the figure and the caption I think there's this tiny little space that shows up. We saw it in a previous example here I've just used a margin bottom of a negative four pixels to tighten that up. And I've set this up to have the object fit property in the object position property.

[00:05:25]
This has to do with how the images are displaying inside of the webpage here. When you set your max height on those pictures, they'll just take the top 400 pixels of the picture. Sometimes the interesting parts of the picture are down towards the bottom. So what this is doing is it's pushing up the visible portion of the picture so that we can see it a little bit better.

[00:05:48]
And we're cropping off parts that are less interesting by default. We also have styling here for our figure caption I talked to you previously about relative and absolute positioning. And so we've done something very similar here with that and we've set a background color with a bit of transparency to it yes we have a question.

[00:06:07]
>> Why do we need position relative here?
>> Why do we need position relative here? Here we have not used flexbox to lay out the inside of this particular figure, we've just using absolute and relative positioning in this particular case, so that's why we need it here. Then we have our figure caption a, we wanna have a big clickable area with display block.

[00:06:29]
Okay, remember that by default your links are an inline type of configuration. They're only as wide as their content, they're really as wide as their text. And so people can easily miss that clickable area, make it really big, set it to display block, give it a color. And that will give us a great big huge target area very helpful on phones in particular can't hurt on desktop, okay.

[00:06:56]
Then I set up a whole bunch of these styles which have a really, weird combination of both border color and text color. These are two set up the colors inside of our borders on the figure as well as some of the colors inside of the text that inside of that document so that is what all of this is.

[00:07:16]
We're just calling on the colors as configured earlier in the document so there's a whole bunch of those then we get to our media queries. Here is the first place that we turn on our media query at 550 pixels and have talked you through this several times display flex.

[00:07:35]
Flex flows row wrap justify content is space between so my favorite configuration right there and then we'll set each li to have a flex basis of 49.5%. I didn't make use of the gap property here you absolutely could have used the gap property if you wanted. But by virtue of having two elements next to each other, they just 49.5% add them together, you get like 99%.

[00:08:01]
So you'll get a 1% gap by default in between those two items. And then I turn off the Object Positioning once we get to the larger screens. Otherwise, what you'll see is half of the image, and half of it will be cut off, you'll just have blank space.

[00:08:16]
So we have to turn that off here to pull everything down a little bit further. And then finally here, for my last media queries, I'm just turning on a little bit of an indent, and setting up a one-third size for our flex basis property for that li. So let's take a quick look at the webpage and see how it looks.

[00:08:36]
So here's our web page hopefully yours looks pretty much like this and we'll scrunch it down so you can see how it changes. One of the things you wanna be mindful of when you're working with images like this is how much of the image is showing and so that's where that object position property comes in.

[00:08:59]
These still look pretty good. Then we go to our tablet dimension. So you can see here for example, this landscape image it may be worthwhile to tweak that a little bit more maybe with a class. Because you the interesting part is the mountains interacting with the moon here.

[00:09:16]
And that is not really coming across here at this particular dimension. So that might be something you wanted to develop a little bit further and then we'll go to mobile and you'll see here so that max with the 400 pixels which obviously could be a smaller number. Now you see we get a sense of these pictures that's not the full picture and because we push these up a little bit, we get the interesting parts of the picture.

[00:09:43]
So this one here called vivid you'd see a lot of sky without pushing the picture up a little bit further or you'd see just the neck of the guitar without seeing the main body of the guitar. So, that's how that one ends up turning out.
>> Jen, could you differentiate between the min, width and max width in the case of media queries?

[00:10:05]
>> Yes. So, when you are writing mobile first, what you want to do is use all min width media queries the whole way through. So, you start with your declarations outside of the media queries, that's your mobile styles. And then you're going to change whatever needs changing through the media queries and you use min width because that pulls in the styles outside the media query.

[00:10:28]
Pulls those styles they're still valid when you get into the next media query and they are still valid all the way through the document, until you reset a value somewhere along the way. So that is min width. Max width are what you would use if you wanted to go desktop first.

[00:10:47]
In other words, all the styles outside of it are desktop styles, and then we're going to cut off whatever those styles are at various breakpoints by using max width media queries. Generally speaking today people write mobile first for the most part, but sometimes desktop first may make sense you may be starting from miss there's still a few websites around that are not responsive.

[00:11:12]
And so you might be rewriting styles that already exist and you're tacking on the mobile part of it, that would be a situation where you might go desktop first. Or maybe you just have a complicated desktop, website and it made more sense to go that way. Or maybe that's where most of your traffic is it's on your desktop site.

[00:11:33]
The mobile site is less important. And so it makes sense to use desktop first for that reason,.
>> That was object position or object fit.
>> Object fit will determine how the image is going to display within the space like cover or contain or there's a scale down one.

[00:11:50]
You can kind of play around with those properties to see their impact but the object position moves things actually up and down and side to side in space. So you may need to play around with a combination of both of those to get the images to look right