From the course: CSS: Scrolling and Parallax

Building your new monsters section - CSS Tutorial

From the course: CSS: Scrolling and Parallax

Building your new monsters section

- [Instructor] It's time to work on this additional section of content down here. To do that, I have some code right here that I've created and I'm going to show you how to mark this up with some additional bootstrap code and kind of how I think about doing additional content and bootstrap. So, let's go ahead and get rid of all this lorem ipsum text. We're going to start off by creating an article class here. So, this looks like this. The way that I'm doing my pages, I create articles for the different pieces. Think of the article tag as an article of clothing. Something that you would rather see like in a magazine or in maybe the way that you dress. So, each of my articles have an ID. This one gets an ID of meet and these correspond to what is on my navigation. So, the HF is targeting these IDs. And that's what I'm using here. So, in addition to that, I'm going to give this a class. This is called page section. That's just in case I want to target this. And I'm going to give this a class of text center. My text is going to be centered by default in a padding in the vertical orientation of five, which is the maximum amount of padding that bootstrap allows you to give. I usually have my own classes at the beginning of the class sections and then I add any bootstrap classes that I need. So let's go ahead and switch over here. Make this a little bit smaller. And then I'm going to save this. I don't have any text in there yet, so I need to go ahead and finish coating a little bit more what I'm going to do here. So I'm going to type in a header. This header is going to have a class of container. Container aligns, thanks to the bootstrap grid. And I'm going to make sure that the header has a width of a hundred. That means the entire width of the container, which is the browser and then in here, I'm going to need some text for my header. So let's go ahead and paste everything. And the text for the header is at the top. So in here... I'll paste my text. And this H1 is going to have a class of display four. So the display class is just make the font bigger. It's bigger than what an H tag would be able to do and then from there, I'll say this is going to be text danger, which makes it red. And then, I'm going to use a slightly lighter font, if it's available to the current browser and I'm going to have a margin bottom of zero. So interesting thing about bootstrap is all the margins are added at the bottom of elements that actually clears the margins at the top, which makes it easier to know when you need to add or delete margins because you know they're always at the bottom. Regular HTML will add the margin at the top and the bottom of element. My paragraph is going to have a class of lead, which makes the font a little bit bigger than normal. So let's work on this other part right here. So, all this content, let's go ahead and actually cut it... For right now. And it looks like... I didn't copy or the closing and section for this element didn't come in. So, this article or actually it looks like perhaps there is an article tag here, instead of a section tag. So let's go ahead and get rid of that. And we're going to grab all this. And now, I need to add an additional section class here. That's going to have all of our other pieces. And this section is going to have an ID of monster group. I usually add IDs if I think I'm going to be targeting something with JavaScript or if I know that it's going to be one of the eight rafts. So then I'll use the class of layout multi-column. This is my own class and I did a course on bootstrap layouts that shows you how to create and these different layouts and this is the name of that specific layout. And I'm going to use the bootstrap grid here. So it's going to need a container class. And since I'm going to use the bootstrap classes, I'm going to need a div here. And this div is just going to set up the bootstrap containers. So it's going to need some classes. And it's going to need a row and row calls, one row calls at the medium break point of three. So the way that these row classes work, it allows you to specify how many elements should go at certain breakpoints. So, at the smallest breakpoint, these columns will have one element. Otherwise at the medium breakpoint, the columns will have three elements and so on and so forth. So justify... So I'm going to center these and I'm going to make sure that by default, all the text will be in uppercase. All right, so now... Let's me go and get rid of some of these extra spaces here. Alright, so now we have the classes for all the content. So let's go ahead and paste all of our other stuff. Save this and hopefully... I don't know if I can see the bootstrap classes being added yet because I need columns on each one of these different sections. So let's go ahead and do that. I'm going to select this first section right here and then hit command D. I'm on a Mac and I'm using visual studio code, but I can also look right here and the section and you can see that there's an option here in the section menu where you can add the next occurrence and that's what I'm doing. I'm just going one by one and getting all of these sections, making sure that I don't go past the end because there might be some other section classes, especially when it you know, re-loops back to the top. So I've got all these section classes here. All these section elements. Looks like I lost them. Let's go ahead and choose them again. All right, so... Get them all again. And my cursor is at the bottom. Looks like actually it's at the top of some of these areas. So I'm going to make sure that it's at the end and then in here, each one of these is going to have a class of monster. A margin bottom of five units. And also, they're going to get a column class, which is what is going to allow them to align to the grid. So now, when I make these bigger, hopefully, they should fit on the grid. Let's take a look at what else we need to do here. And looks like I forgot that call calls. There should be row calls MD3. So now, let's make them wider. So you can see that when I get to the medium breakpoint, these appear and three units and they retained the three units until I get to a smaller breakpoint and then they just appear as a single element. So that's pretty cool. Let's fix a few more things. We'll grab these H5s. And making sure that these are here. I'm going to add a class of padding at the top of two, font-weight... Light and then I'm going to save this. And now the fonts are in a lighter weight. I'm also going to need to add a class to these images. So, I'm going to grab the image tags. And I'll do a class of layout image. And that looks pretty good. Let's go ahead and add just a little bit of space here after the header. And that's all I need to do in my monster section. So hopefully that's a little bit about bootstrap and also it shows you how I organized my pages and how I think about where I add my classes and in what order.

Contents