Featured Project Desktop CSS Exercise

[00:00:00]
>> We are on to Chapter 5. And in Chapter 5, you get to do this all by yourself, all right? So what you are gonna do here in Chapter 5 is you are going to create the featured section. And this is the way the featured section is going to look.

[00:00:20]
There is a background that's got these little lines behind it here, okay? And you have a great big, huge giant picture. You have some of these particular elements here in place again, and they're overlapping that image by a little bit. Kinda sounds like grid. Baby figures, grid, that kind of thing.

[00:00:43]
We also have a big black box down here at the bottom with a button, okay? There is no tablet breakpoint for this one, there is only a mobile breakpoint at the mobile breakpoint instead of individual boxes for HTML, CSS, JavaScript, and SVG, you're going to have one giant mega box for all of those items.

[00:01:05]
You're gonna have to think about how that happens. And then you'll have your big black box here for the practical CSS layouts with the button here at the bottom. So, as always, I'm recommending that you work through the steps in order. You have a starting CodePen here. Okay, and all the things are in place.

[00:01:29]
We have a title, we have images here for you, we have all the blah, blah, we have the link in place. So what you're gonna need to do is mark this up appropriately, that's where you would always start. It, and then you're going to add some styling to this.

[00:01:44]
I would recommend making a layer called featured, and you can put all of your styles inside a featured and that is going to style this page. Start it for desktop and then work on the mobile display, All right, so I hope you did well putting together the featured part of this website.

[00:02:18]
Let's go Go through how I went about putting together this code. So we're gonna start with as we have throughout this course. We're going to start with the section with a class of featured. And inside of that, we are going to put our container. So that's the way we're building all of the sections of this website.

[00:02:39]
So we just You just continue on with that same pattern here. Then inside of that container, we are going to have our featured project. We're going to mark that up with an H2, because that's the most important part of this particular section. Then I decided to make this an article, because it's kind of a story here about my featured project and The title of that particular project is Practical CSS Layouts.

[00:03:03]
I did a really fun thing here where I move that word practical CSS layouts way down here to the black box. The order here goes from our featured project. We go to our practical CSS layouts, and then there's the image that's here, okay? And then, of course, we have our skill set that should be marked up as a list, just like we had done before.

[00:03:31]
And then down here in the black box, I made a div with a class of black box, put inside of that our paragraph of text. Post and put in our button here and using the same old class of button that we've been using all along, and then ended that div and the article and and the container and my section.

[00:03:52]
So that's the HTML piece of this. Okay, so for the CSS what we have is as you would expect, we still Start with our background image on the section itself, and that is the striped background image here. And this time we are going to ask it to repeat.

[00:04:10]
We do in fact want this image to repeat over and over again. If you looked at the image itself, it's kinda this tiny little skinny image like this. It's designed to repeat Over and over again in both the x and the y direction. I have set it to display in the center of the image, in the center of the page and I put some padding on the top and bottom of our section.

[00:04:35]
I reduce the size of my h2, you've seen me do that before And then for my section featured h three, I've actually set that up with some margin on it padding set the color to white, and the font size to H4, and the background color to black and let me just fix this white right here.

[00:04:57]
It's a shouldn't be var one White
>> Okay, the black box down here will have a little bit of padding associated with it. The color of white background color and no border radius. So just going to have pointy corners and then the tricky part How did I get that H3 to move down the page?

[00:05:22]
That is done with displaying this as grid. I am using grids features that allow me to reorder things within grid in order to move some of these elements around on the page. What I have here inside of my article is where I've declared the A grid to go.

[00:05:42]
And I've said just set up as many rows as you need. So what will happen here is that each one of these items will each go to its own row. So h three will be a row image will be a row, the UL will be a row. The div with a class of black box will be a row and paragraph Down here that holds the button.

[00:06:00]
All of those will be individual rows. Then we just reorder the rows in order to get them to display where you want them to display. So I indicated the image should display first up at the top. The ul, once again, we've set that to go horizontal on the page I Walk through that kind of example with you before.

[00:06:23]
And I used a little bit of negative margin on the top to move this up over top of the image. So that's what's going on there. And then in these li's, each li is going to have a background color of white, a little bit of padding And a border around it.

[00:06:40]
So each li winds up having its own little display here for this part of the page. And that'll hold until we get the screen smaller. So, I think I changed the size of my featured project here at a slightly smaller size right there. That's the only thing. Thing that changed.

[00:07:00]
And then I changed everything again when I go to mobile. So if you were wondering how I got this to happen, what I did besides reducing the size of a bunch of text, here when I get to my UL, what I did was I set the whole background of the UL rather than each LI having a white White background.

[00:07:20]
I set the background of the whole ul to be white and put the border on the ul. And so that makes these things look like they're all together in one unit as opposed to before where they were separate units.