Tour Layout Practice

[00:00:00]
>> So why don't you take five minutes and I want you to see if you can come up with a layout here for tour. By the way, that tour looks like it's got the wrong font on it. So remember to look at your, oops [LAUGH] I just zoomed in too far.

[00:00:21]
Make sure to look at your comp here, see if you can get tour tlook like that. See if you can get these buttons aligned over here on the side. And if you have a little extra time, you're gonna lay out the footer and you're gonna lay out the grid here with the tour dates and the buttons Welcome back, everybody, I hope you had fun putting together that grid here for the tour page.

[00:00:48]
So I am going to ask the people here in the classroom to tell me all about how we are going to set up our grid. So let's start with an easy thing, how about the tour title? What do I need to do to style the tour title? Somebody have a style for that?

[00:01:08]
Yeah, so we're gonna do main.
>> h1.
>> h1, yep.
>> Font family cursive.
>> And font family, Cursive. And remember the size is already set cuz we had a class called h3 so that should be good.
>> Font-family colon.
>> Forgot the colon, thank you I was like what did I do and a var in front of it.

[00:01:38]
Var, var cursive. There we go, that works, anything else? Probably we wanna do a text-align? Well we'll see, text-align center, let's just put it in for now. Cool, all right, so then we had our HTML and you guys were looking at that HTML pretty much the same as what we had before, right?

[00:02:14]
When we were working with this on the easy design, just a whole bunch of paragraphs here only there's more of them because one of them is the tour and one of them is the button, right? So how did you guys do this for grid? Anybody have a style to tell me?

[00:02:34]
>> Grid area, grid-area, 1, 1, 2.
>> Okay, and what was your selector?
>> We still on main h1?
>> Well, let's start with main. So what was your style for main? Anybody have a style for main?
>> Display grid.
>> Display grid always a good start, okay?

[00:03:02]
What comes after display grid?
>> Grid template column.
>> Grid template columns, yeah.
>> Maybe 2fr, 1fr.
>> Yeah, we could do something like 2fr, 1fr. I don't remember what I did, I might have just done 1fr, 1fr but yeah, something like that, okay? And then for the h1, what did we do?

[00:03:32]
You were getting ready to tell me something.
>> Yeah [LAUGH] Grid.
>> Grid area.
>> Yep.
>> Grid area 1/1.
>> 1/1.
>> 2.
>> 2.
>> 3.
>> 3. Look at that, sweet. And now with the wrapper doing its thing, okay, so it's gonna change its layout when we get to the larger points here.

[00:04:02]
So what's going on here when I get to my larger size? I mean it looks great here on mobile right? Not quite centered over the top here, but okay, right, what's going on? Anybody have any ideas? All right, so when in doubt always do a main greater than sign star, right?

[00:04:24]
We're gonna stick a border on it. And that will help diagnose our problems, look at that, that's what's going on. So we have a button that's aligned to the top here and when we get bigger, everything is aligned to the left-hand side, see that? Okay, so what we can do to fix that particular problem, we can do something like this, main p:nth-child(odd), anyone seen a selector like that before?

[00:05:06]
Okay, so some say yes and some say no. So nth-child means we can take a look at all the paragraphs that are there. And in this case, we're gonna take the odd-numbered ones. Again, human counting, so the first, third, fifth, etc. We're gonna take those odd numbers of paragraphs inside of main, and we can say, these are alignment options, justify-self: end; okay?

[00:05:35]
Now oddly, odd applies to the things that are on the right and you might go but wait, those are even. Anybody going wait those are even, why did odd work on the buttons? Anybody wondering that? Yeah, remember, tour is our first option, so that's one. So two becomes the tour date on the left, so that's two, four, six, eight and three, five, seven, nine are on the right.

[00:06:03]
Okay, so it did in fact work. So ustify-self: end; and we can also do an align-self : center. And that will center the button here within, so when our screen gets small, see how nicely the button centers relative to the tour dates? It does it on bigger screens too, but it's more noticeable when it's here on the smaller screen.

[00:06:29]
And then, of course, once you're done with that, you can get rid of your debugging borders. Sweet, Now, if you were wondering where that stuff came from, we may need to do a little bit more modification here by the way that looks a little bit big. We could modify our wrapper to be a little bit narrower that kind of thing.

[00:06:52]
But if you're wondering where I got these properties, anytime, this is your million dollar tip, you Google CSS tricks grid. And the first link will be the complete guide to CSS grid, okay? And in here is everything you need to know about the containers and the items, the parents and the children, right?

[00:07:16]
Everything is in here, all the properties, all the values. And of course, inevitably, the next thing I hear is, yes, I use the one for flexbox all the time. Yes, that too if you Google CSS tricks flexbox, you'll find the flexbox grid here as well. Bookmark them, there's a poster you can download and print right here, download free, you can print it and put it on your wall, Good stuff.

[00:07:49]
All right, so we're gonna call that done here for our tour page, are there any questions at this point?
>> At this point should it be looking good and all of the views?
>> It may be a little bit off, well, we've got some weird things going on there, right?

[00:08:14]
So, what's going on there? What happened?,
>> Our largest media query,
>> Our largest media query is doing something, right? Look at that, display grid, grid template columns 2fr, it's doing exactly what we told it to do once again, so if we get rid of that. That problem's fixed, they may be a little bit far apart here.

[00:08:43]
So maybe we wanna change our max width, maybe we change our max width to 800 pixels no matter what Or 600 pixels. Maybe we set that to 600 pixels up here in our first media query. Our max width is 600 pixels and we get rid of our last media query because we don't need it anymore.

[00:09:07]
Yeah, those kinds of tweaks, those little clean up things. Everybody happy? How cool is that diagonal line? Who's gonna go and use it immediately on their next website? Right? That would be amazing. In terms of the footer I give you a code pen that's in here for this as an exercise, and the thing that I wanted to point out here was this, so I have the footer it's built in two different ways.

[00:09:44]
The first footer that's here at the top, this is using, as you see here on line eight, this is using images to display your SVGs. And what happens when you use the image tag to display your SVG is you can't get a hover state on it. So that's an interesting tip to file away, why you might wanna not use the image tag for displaying your SVGs, it means you can't have a hover state.

[00:10:11]
So the second ones down here that do have a hover state, they have, the SVG is actually included here inline. Make sense? Okay, so when the SVG here is included inline, then you can get a hover state on it, and that code is, Here's my footer. So you just do it this way, footer SVG, you make it a color by fill, because remember SVG has its own properties.

[00:10:55]
So it's the fill is what you want for the SVG to make it the lime color, and then when you hover it, you change your fill to cyan. Okay, so that's just an extra thing that's in here, as to why we coded the footer the way we did.