0:00:00
When you break web design down to the ultra basics, what you’re going to discover is that everything on a website is boxes. And getting good at web design means getting good at visualizing and manipulating boxes, because literally everything is a box. And in this lesson, what I’m going to do is I’m going to help illustrate some of this concept of everything is a box to help you understand and get confident with general page structure and layout and styling. All right, so let’s go ahead and dive right in. This is a critical lesson, absolutely fundamental, and thus I’m not going to worry too much about the time. We’re going to make this as long as it needs to be to make sure that we get all of the points across. Okay? So I started out by saying that everything is a box and I wanna prove that to you.
0:00:53
But first what I wanna do is click on add element and I wanna just take a look at some obvious boxes. And then we need to talk about boxes in certain builders versus other builders. So I wanna start with a div. A div is the most basic and fundamental box in web design period. If your builder, some builders don’t even offer a div. If your builder does not offer a div, massive, massive, massive red flag, big limitations as to what you are going to be able to accomplish, you’re gonna have to have tons of workarounds and a bunch of nonsense going on basically, because you weren’t given the most fundamental element in web design, which is a div.
0:01:33
So this is the most important box imaginable, and the reason why it’s the most important box is because in a builder like bricks this div can become anything It can become a section. It can become a container. It can become a block It can become an unordered list an ordered list a list item It can be anything that I want it to be and that’s why it is so absolutely Valuable. So again, if your builder does not offer a div you’re in big trouble That is a major major red flag. Now. There’s something else called a block. Now a block, the names are a little bit tough because Gutenberg calls everything a block, right? This is a blank block container, a blank box effectively. So is a div. The difference is in Bricks, this block is a div that already has display flex set on it and it’s already set to 100% width by default because you need those two things in certain use cases.
0:02:29
It’s basically a shortcut so that I don’t have to add a div, change the flex, change its width to 100%. I just have a shortcut element called a block that I can use. Then there’s a section, which we’ve already talked about. A section is actually two boxes, right? It’s an outer box with an inner box, and that inner box is a special box. It is the width of my website, and it is centered inside of the main container. Can I build a section with divs? Absolutely, but do I want to?
0:03:01
No, because I need to add a lot of sections to a page, and I don’t want to do that work over and over and over again. This is another shortcut element. It adds the two boxes, and it adds a semantic section tag. So very, very good with time-saving and efficiency and workflow. Then of course, there’s the container. The container is a box, but it is set to flex much like the block element is.
0:03:27
But its difference is instead of being 100 percent wide, it is the exact width of my website, which is also very, very valuable. Every section has a container in it, and I may want sections to have multiple containers in them. And that keeps all of my content page width on my website, which is absolutely fantastic. So those are obvious boxes, very, very obvious boxes. What is a not so obvious box? I’m going to add a heading. That is a box.
0:03:58
I’ve just added another box, but it’s a heading and it has content inside of the box. Now you might be saying, Kevin, I don’t believe you. I don’t really think that that’s a box. I think it’s actually just a heading. And that blue outline that you’re seeing is just the page builder saying, Hey, you’ve selected this heading. It’s not really a box. So let me hop over to code pen and I’m going to add a heading, my heading, and I’m going to close that off. So there’s my heading right there. You can see it. It’ll update in a second and get rid of that all right now I’m gonna come over here and I’m gonna style the heading remember HTML is for structure CSS is for styling so I’m gonna target my h1 and I’m gonna prove to you this is the box I’m gonna add a backgrounds color of red now before I actually do this before I actually write red on here I want you to visualize what is going to happen what do you think where do you think this red is going to show up?
0:04:52
Okay. Now let’s see if you are right. Did you expect that to happen? Or did you think red was only gonna show up behind my heading? I can add padding to it, right? If it wasn’t a box, how would I be able to add padding? How would I be able to add a border, right? Five pixel solid black. It’s not like stroking the text with that black border.
0:05:12
It’s adding a border to the box because everything is a box. So this proves that that’s a box and the fact that it goes all the way across is another very important lesson. Block level boxes versus inline boxes. So the reason this goes all the way across the screen is because it is a block level element. Most things are block level elements. There are three axes in web design. There is the Y axis, that is the main axis. Most elements want to flow along the Y axis from top to bottom, down the page. Then there’s the X axis, that goes side to side, right? Go back to basic math, geometry class, whatever. There’s a third axis, the Z axis, which goes from your eyeballs straight through your computer screen in the form of layers, right? And don’t worry, we’re gonna deep dive all of this later. Block level elements respect the y-axis. They go basically from top to bottom down the page and they take up the full width of the page. That heading takes up the full width. That’s why when I add a paragraph below it, my paragraph, the paragraph doesn’t show up next to the heading.
0:06:29
That would be dumb, right? All blog posts that you see on the internet would be very difficult to create. Like you got paragraphs showing up next to headings instead of underneath them. That doesn’t make any sense. So most things are block level elements. They flow down the page. However, there are something called inline elements. Inline elements naturally want to be placed next to each other.
0:06:51
And this makes perfect sense. If I were to add a link, okay, next to this paragraph, or I’m sorry, if I actually link this word paragraph, and I’m going to put a pound sign in there, now you see that we have a link. My paragraph, we’ll say, is, has a link, has a link, just like that. Okay, my paragraph has a link. Notice that the paragraph, that is a box, by the way. This link right here, this A element, is a box. But it’s an inline element, meaning it can live inline with other content without influencing that other content whatsoever.
0:07:31
Very, very important to understand. Buttons behave like this as well. However, page builders add a little behavior that may be a little confusing. We’re gonna take a look at that in just a second. But a link is an inline element. A span is an inline element. The span, when I add it, is going to do absolutely nothing. But both the spans and links are boxes in themselves. I can prove that, right?
0:07:55
Here I’m targeting the link, I’m targeting the A, and we’re gonna say background color, red, padding,.5 M, and watch what happens hey there is the box you see it right oh my span let’s do another little css lesson you can target multiple elements with the same styling instructions by using a comma between the elements a little you know another css tidbit there for you is also a box. Everything is a box. You have block level boxes and you have inline boxes. Make sense? Perfect. Okay, let’s move on. So now we got to talk about children. A box can have an unlimited amount of children. Notice that this section box has two container boxes as children and this container box has a heading box as a child. This box can have an unlimited amount of boxes in it.
0:08:54
I can put a div in it. I can select that div. I can put a div in that. And you can see them in the structure panel over here. And here’s the cool thing about this and something you need to really, really grasp. You can give a box styling instructions, like we gave it background color and padding. And sorry, I’m still getting over strep throat, so I have a little bit of congestion going on.
0:09:15
But you can give an element behavior instructions, right? A child can do what it wants to do, or a parent can control the children. So a parent box can control its children box as well. And so knowing the difference of like, when do I set instructions on a child? When do I set instructions on a parent? That is very critical to understand. And we’re going to cover all of this in detail as we move throughout the course, okay?
0:09:46
Remember, what we’re doing in this tutorial is just all about understanding boxes and how boxes influence other boxes and things like that. Okay? Now we have to talk about the box model of styling. In CSS, we follow, everything follows the box model. Makes sense, right? Because everything is a box. So it’s called the box model. I’m going to select this text right here which says I’m a box and I’m going to break down the box model for you. The start of the box is the content or a literally a blank box. Either one doesn’t matter right. So from the content the next level up inside the box model is padding. I’m going to add 50 pixels of padding around every side of this box.
0:10:27
Now you see that we have an implicit box right here, and we have spacing inside of the box. I’m going to get rid of that. I’m going to switch to having a background color on this box, just so that you can see how padding influences things. If I add padding inside of the box, the box is going to get bigger. I’m going to go 50 pixels of padding all around, and thus the orange got bigger as well, because the orange is following the box.
0:10:56
I said this is an orange box. When the box was small, it was a small orange area. When I added padding, the box got bigger and thus more orange. Now, I can add a border. Border is the next level of the box model. We have padding first, then you have border because border exists on the outside of the padding. So what I’m going to go do is add a border of let’s just say five pixels. We’ll make it a solid border and we’ll make it black. See how that lives outside of the padding? So we had padding first then border inside of our box model. Now we have margin. Margin is the space that lives outside of a box.
0:11:39
And so many beginners get margin and padding. Like they, they understand them, I think, but they use them incorrectly all the time. And I’m going to illustrate. So I’m going to put 50 pixels of margin outside the box. Notice the box has moved away from all other elements by 50 pixels, but it did not get bigger. And the orange area did not expand and the border area did not expand. This is free space around an element which is very very very critical. Now here’s where people get confused. I’m gonna get rid of the margin, get rid of the padding, I’m gonna get rid of the background color, I’m gonna get rid of the border, we’re back to just text. I want this text spaced away from that heading right there. What do I do?
0:12:22
Here’s what people do wrong all the time. Padding 50 pixels. Oh sorry I have the wrong element selected. I’m gonna select the text. Padding 50 pixels. Look at that. Visually I’m done. Right? I did the thing. I accomplished spacing the text out from the heading. But objectively I have done this the wrong way. So and here’s why it’s wrong. I have destroyed my box. Okay? In order to achieve something I created an issue somewhere else. Let’s say I now want to add a background color and some some padding to the box. Okay, so I am going to add my background color. And now you can see how the box is warped, right? And you’re like, alright, well, let’s fix that. I’m going to add my padding, which is, let’s say 20 pixels on all sides, got my padding, but I no longer have my spacing from my heading. This is because I applied the wrong technique initially.
0:13:18
This is objectively wrong to use padding in the way that I did it a minute ago. I should have used margin because margin preserves the box, but still gives you the space that you were looking for. Now, margin isn’t the only thing that we can use. We’re gonna look at something else in just a second, but you have to know when is it correct to use margin, when is it correct to use padding. Any time you need to, or what I guess I should say is, you need to preserve your boxes at all costs because boxes come in handy later on down the line when you need to style more things.
0:13:56
You need boxes that are not manipulated for no reason whatsoever. Margin gives me what I wanted without manipulating my box. Therefore, I should use margin. Preserve your boxes. Okay? All right. So that’s the box model. Padding inside, border, margin outside. Those are the three things. Remember when we inspected. Okay, let’s go here. Let’s go back to the front. Remember our lesson on inspecting elements. I said scroll all the way. Let me put this, let me dock this on the left side. I said scroll all the way. Let me get this over here to the bottom. There’s your box model right there in visual form, content, padding, border, margin. See? Okay. So there’s a visual representation of the box model. Now, other than margin, you can also use something called gap. See these four images are in a grid? Before GAP existed which wasn’t all that long ago, in order to space these boxes out you had to do crazy stuff with either margins or padding or whatever and it was it was a real nightmare, a real pain in the tuchus as they say in old people land.
0:15:09
Alright so what I’m gonna do is I’m gonna select this container which is a grid. And anytime you’re using grid or flex or columns, we’re gonna talk about columns separately in just a minute cause it’s not the columns you’re thinking of, flex, grid or columns, you can use GAP. And GAP is an intelligent spacing model that says, oh, okay, I see the items in this container. And this is an example of my parent, right? My parent is the grid container controlling the children. So I’m saying 30 pixels of GAP, it’s intelligent in the sense that it only applies the spacing between the child elements.
0:15:47
There’s not extra spacing up top or extra spacing on the left that’s messing us up. The spacing only exists between the elements in the box. Very, very important. Gap is one of the most used techniques for spacing on the modern web. And we’re going to talk about that more in just a second. But remember, it can only be used with flex boxes, grid boxes, or columns boxes. Okay. All right, we’re going to keep going. Boxes need semantic labels.
0:16:19
Remember I said everything is a box, but not all boxes are the same. So I’m going to prove this to you real quick. Let’s get rid of all of this. I am going to quickly build a section just like we did in our previous lesson. Remember we did section, close it off, yada, yada, yada. Watch what I’m going to do. Div class equals section. And then I’m going to close that off. Then I’m going to say div class equals container. And I’m going to close that off. Then I’m going to put my H1 in there, my heading, close that off.
0:16:56
It’ll show up on the page. Now I’m going to come over to the CSS, remember HTML, structure, CSS, styling. I’m going to say my sections are going to be a padding block of 100 pixels. I don’t use pixels, but I’m using them because we haven’t covered other units yet and I just wanna keep things maybe familiar to you, okay? So padding inline is gonna be 40 pixels and then I’m gonna come down here and say that my containers, remember this is special, needs to be a width of 100% with a max width of our website width and then we can do a margin inline of auto.
0:17:35
And now I created the exact same thing that I created the other day in the other lesson, right? Except semantically Nobody really knows that this is a section classes class names can be anything, right? So class names are not accounted for in semantic HTML. It’s the actual tag that is accounted for Why is it important to use a section tag instead of a div. Notice that nothing down here is going to change as I swap these from div to section, but other developers, search engines, screen readers, anything that actually has to read the code needs to be able to interpret the code properly.
0:18:18
And so we have semantic tags that give boxes more clear or gives, you know, anything that has to read the code a more clear understanding of what that box is for. Think about the H1, that is the semantic tag. We all know that the H1 heading is the most important heading on the page. So by using the H1 tag, we’re alerting everybody to that fact. And then when we use H2 tags, we’re alerting them to, hey, these are subheadings, right?
0:18:50
Same concept here. We have to alert people to this is a section because this is a topic of content. Everything in this section shares the same topical nature unless we use another semantic tag, like an aside, which says, well, it’s tangentially related to the topic of this section, but not fully related to the topic of this section. That’s yet another example.
0:19:12
So let me hop back here, and you can see here are all the main semantic tags that you will be learning throughout this course. Don’t worry about it. We’re going to cover almost all of these things at some point during the course. Most people who use page builders have no concept of semantic HTML. They have no idea. You, like I said, this course is going to elevate you way above 90% of people who use page builders. Okay. We’re going to learn all of this, but what you need to know is semantic HTML is very, very important. Same concept of like lists. We create a list of items. I can create a list with divs. I could create this heading right here with a div. Absolutely.
0:19:52
I can make it look exactly like that. And that tag will be div instead of H1. Is that the appropriate way to do it? Absolutely not. I think we can all agree. You should use an H1 tag to signify that this is an H1 level heading. Lists. We have ordered lists and unordered lists. Those are semantic tags. An unordered list say, hey, this is a list of items, but it doesn’t matter what order they go in. An ordered list says, hey, these are a list of items, but it does matter what order they go in. Or we’re counting the number of items, right? So there are semantic meanings to tags. What you’ll see beginners do is they build everything with divs, right? Even they won’t even have paragraphs. It’ll say div and this is my paragraph.
0:20:37
So a screen reader, right? For accessibility purposes, which is very important. Search engines, do you care about SEO or anything else? Anything that has to read the code is like a div. I don’t, div has no semantic meaning whatsoever. So this must not be as important, right? But the minute you say, oh, this is body paragraphs of text, now it’s able to read the code more clear and get a better understanding of the structure of the page and the content of the page and what is more important than what else, what is grouped together in certain topics, what’s not part of this topics, what’s a list, what’s not a list, what’s in order, what’s not in order.
0:21:17
We have to use these semantic tags. They’re very, very, very important. Okay. Next boxes can be used to group associated content. This is a critical mini lesson inside of our boxes concept. So I am faced with this content right here. Number one, I need to space it out, right? If we can’t have all this stuff touching you probably already know that and realize that So first question pop quiz pop quiz How am I going to space that content out do not tell me Kevin?
0:21:48
I’m going to select this and do margin bottom margin bottom margin bottom margin bottom and On and on and on that is what I call and what you will hear often on this channel Chump like behavior you do not want to be a chump. You want to be a professional, right? A professional goes, oh, I want to evenly space all that stuff out. Okay, I’m going to use gap. Remember we talked about gap a minute ago. So I’m going to come down here and I’m going to say, let’s do 30 pixels.
0:22:15
There you go. 30 pixels of gap done, right? Would you rather do that? Or would you rather go margin bottom, margin bottom, margin bottom, which then by the way, if I have to move stuff around, screws up everything, right? And I actually did a video on how margin top is better than margin bottom. If you want extra credit, you can go watch that video, but we’re not going to go down that tangent.
0:22:35
So one problem that this has created is that this accent heading is too far away from this heading right here. And these two buttons should be side by side, not one on top of the other. So what do we have to do? Well, we have to create some content groups. We have to group our content in what? Boxes, right? Okay, so I’m gonna add a box here. This is gonna be a div or it can be a block. It doesn’t really matter.
0:23:03
So I can add a block. I’m gonna add a heading to my block. I’m gonna add the accent heading to my block as well. And then I am going to center that content. I need to fix my order here. Bam, just like that. And then I’m free to give this content its own gap, which maybe is a smaller gap, like five pixels, okay? So now we fix that by grouping this content together. Also, we’ve created a way, if I ever need to move this around, I can move these two items at the exact same time, which makes sense because they would never live apart.
0:23:37
The accent heading and the heading go together. They are associated content. Therefore, it makes sense to group them together. Now come down here. How do I fix this? I fix this by adding a box to group these buttons together. So I’m gonna add a block. I’m gonna put the button in the block. Let’s go ahead and grab it, drag it down, drag this one in as well. Now you see they are grouped together in this block.
0:24:07
Now I am going to align them to the center and I’m just going to say, hey, make these into a row and there we go. And then I can row gap them, let’s just say 10 pixels, column gap them 10 pixels, and let’s go view this on the front end. All right, so we had a situation where all of our content was stuck together, the buttons were not side by side, and by grouping certain elements together, I get the exact layout that I wanted. Now we have a very nice looking balanced layout. That is grouping content into boxes. You need to learn to visualize everything in boxes, like I said.
0:24:49
All right, so let’s go down. You can move boxes physically or with CSS. Now this is another area where we experience chump-like behavior versus pro-level behavior. So if I want this dark box to be on this side I can literally pick it up and move it obviously, right? Now if this is the only two things that’s fine. If you also want the code moved in the Dom, right? When I did that, the code moved in the Dom, this image moved after the other image in the Dom. There are times where you actually want visually something to come before something else. But in the Dom, you have a very specific structure of that code, right?
0:25:34
We’re going to see that in just a minute when we do one of these actual builds. Now, what if I have multiple of these containers? Have you ever seen these? I mean, it happens on almost every website, right? Where the content alternates back and forth. So it’s like, here’s your light and then your dark would be over here. So it goes dark on the left, dark on the right, dark on the left. And then what we have is a situation where most beginners build this manually and they’re physically dragging things from left to right.
0:26:06
And then what happens, you’re like, oh, I wanna add one in there. So you go up and you add one as the second one. And then you realize, did I duplicate it? I don’t think I duplicated it. I’m duplicating, just totally duplicating the wrong thing. Okay, let’s grab that one. So I duplicate it and now it’s dark on the left, dark on the left, dark on the right. And I’m like, ah, okay, well I need to fix that.
0:26:28
So let’s drag this over here. Now it’s dark on the left, dark on the right, ah, dark on the right. Okay, I gotta drag this one over here and I’m just sitting here dragging stuff around like a chump and it’s hard to drag stuff sometimes. There we, oh, this one’s broken now and I gotta drag that one. That is chump-like behavior. You absolutely don’t want to do that. What you want to do is move content Dynamically with CSS. You’re not actually physically moving the element. You’re just moving it with styling So let me show you We are going to and I’m gonna let’s let’s back this up so that I can make it very basic for you Very easy to follow. All right, so I’m gonna duplicate Let me get this container right here. Duplicate, duplicate, duplicate. Okay.
0:27:15
I’m going to do something that’s semi chump like, okay. So what I’m going to do is I’m going to grab this dark one, which needs to be on the left. And I’m going to go over to, uh, the order box, which is style layout. I’m going to find order. And I’m going to set this to minus one minus one means put it at the beginning. Doesn’t matter how many elements there are, make this the first element. And look what has happened. It is visually moved. It did not move in the DOM these images are still in the exact same place in the DOM but visually they’re in separate places then I can come down here and I can say this one moves also to negative one and now I’ve accomplished the exact same thing without dragging anything around but that is still semi chump like behavior because I’m doing that manually there is a way with CSS we’re not going to get into it right now, to target all of these containers and say every odd container, I want you to take the dark image and put it on the other side.
0:28:10
One instruction and then dynamically when I add more, doesn’t matter if I add it at the end, add it in the middle, add it at the beginning, doesn’t matter. It’s automatically going to reorder everything for me. I’ve taught this lesson many, many, many times, but what I wanted to just make sure you understand is you don’t have to just physically move things around. You can dynamically move them and then you can create instructions to dynamically control groups of elements in this fashion. That is pro-level behavior. That is something you are going to learn later in this course.
0:28:42
All right. Last thing you need to know, most websites use the same commonly occurring layout. So you’re going to start seeing the same boxes in the same positions over and over and over again, regardless of the websites that you happen to be looking at. So what we’re gonna do next to help you visualize, we’re gonna pull up my website right here, and I’m just gonna do a quick scrolling screen capture. Let me go ahead and get the area that I wanna capture set up, and then I am going to say start capture and auto scroll it.
0:29:16
Okay, so what it’s going to do is it’s going to take a screenshot of my page. I’m going to be able to then annotate this and together, me and you, we’re going to look at where we think the boxes live on this website, okay? And I’m talking about the main boxes, not every single literal box. Okay, here is the screenshot and now I can annotate and we can visualize together. So you’re gonna be like, Kevin, obviously there is a box here, right? And this is a page width box for my header. Notice that there is another box here. Notice that this content is breaking out of the box, which sometimes for beginners, it’s hard for them to visualize where the boxes go because we didn’t talk about this yet, but we can talk about it right now, you can absolutely make content break outside of a box.
0:30:06
No problem whatsoever. And in fact, it’s often desirable because it makes the website look less boxy, right? When you have literal clear boxes, everything looks very boxy. When you break things out of boxes or align items in a certain way inside of a box, it starts to break up the structure of the page so that it doesn’t look so boxy, right? Okay, so we have two easy to see boxes right here.
0:30:30
Of course, there are section boxes. Let me switch colors here. Obviously, there’s a main box right here. There’s a main section right here. These two sections actually touch each other, okay, like that, all right? So there’s some boxes. Where else do we see boxes though? Let me grab a different color. Don’t you see a box right here for our navigation?
0:30:53
Absolutely. Don’t you see a box right here for this content grouped? Don’t you see maybe another box inside of this box grouping these two things together? See how we have to start visualizing in boxes. When I look at websites, I’ve been doing this so long, it’s almost like augmented reality. I see everything in boxes and frames and such. Okay, so now what about, how about this right here? Oh, how about this list of content has to be another box. How about every list item is a box? Makes sense? Okay, start to see lots and lots of boxes, boxes and boxes and boxes. This is a box because these two things are grouped together. Let’s come down here. Ah, what do we have?
0:31:38
A box. This is a container box. It’s probably extending all the way to the edges of the page width. Then we have another container box right here for these two cards. But of course, my friends, each box is itself, or each card is itself a box. And each card has a box inside of it to group this content away from this content and give it a background color and give it padding and so on and so forth. Look at this, another container box with a box inside of it to group this content away from this content.
0:32:12
And then these are clear, I mean, right, they boxes, boxes, but we don’t have to look at all of this. Here’s one container for all of this grouped content, but then each of these are boxes. And this has to be a box to keep this separate from this content over here. You got to start visualizing in boxes because web design is all about visualizing and manipulating boxes. So I think you guys are getting the hang of it. You get something like this where it’s like, oh, it’s hard to see the boxes visually, but we have a box like this. We have a box like this.
0:32:47
We have boxes here. We’ve already talked about all of these list items. Then we have all of these as individual boxes and they’re just positioned in such a way that it doesn’t look like they’re very boxy. It looks like they’re kind of floating inside of this box. There’s a box here, right? All of these are boxes. So it’s boxes and boxes and boxes and boxes and we’ve got to be able to visualize that. Okay, I’m going to say that we’re done. It’s a giant image, so it’s probably going to take a second to save. Perfect. Okay. Next thing that we’re going to do is we’re going to actually build some stuff.
0:33:24
All right. We’ve got this hero heading that we need to build. We’ve got this one right here, and we’ve got this section of feature cards that we need to build. All right. So what we’re going to do, let’s see what we can get rid of. We can get rid of that. Let’s go out here.
0:33:38
And I think this is going to be fantastic. This is the first time in this course that we’ve actually gotten to build some stuff. So something to celebrate. Let’s close this. All right. And then we’re going to open our practice page. Perfect. We are ready to rock and roll. Let’s do a little pop quiz. Where do you see the boxes here? Obviously there’s a section box, right? There’s also a container box that is our page width. Then there is a box grouping this button content right here. The image itself is already a box. So I think we’re good to go. Let’s go ahead and start adding things. So I’m going to add a section, which is my outer wrapper and my inner container. I am then, oh we’re at our first crossroads. How do we get this box next to that box.
0:34:25
Well, let’s start just by adding the boxes. So I’m going to add a block, which is just a blank box that’s a hundred percent wide. You can see it right there. And then I’m going to add my next box, which is an image. And then I’m going to select an actual image here. Perfect. Now you see the natural order is they want to stack on the Y axis. We want them to be on the X axis.
0:34:48
I can use Flexbox to do this. I can use Grid to do this. I prefer to use Grid. I think Grid is superior in almost all instances over Flexbox for this type of alignment. Many page builders don’t even support Grid. They don’t have Grid as an option. So most people using page builders are used to using Flex for this kind of thing. Flex has a lot of inherent kind of complications that Grid does not have. So what I’m gonna do is I’m gonna use Grid because Grid is available to me. You do not need to memorize what I’m about to do. You do not need to understand what I’m about to do. You do not need to write down what I’m about to do.
0:35:31
We are going to deep dive CSS Grid in this course. We are going to deep dive Flex in this course. So there will be a future lesson that teaches you all of this. Right now, all you have to do is watch and understand the boxes concept, okay? So what I’m gonna do is on my parent, I’m gonna, remember parents can control children. I’m gonna say, hey, don’t just be a dumb parent where all your children just kind of stack on top of each other.
0:35:56
Be a intelligent parent where we’re gonna create this fancy grid of content. So I’m gonna say this is a grid and I’m going to say repeat. I want two columns and I’m going to use a min-max function, 0, 1, FR, and look at this. Immediately, I get exactly what I wanted. Does that look complicated to you? Yes, it probably looks very complicated to you. I guarantee when you’ve done it once or twice, it’s no longer complicated, okay? It’s a little like riding a bike. You get on, oh, it sucks at first and then it clicks and you can ride a bike forever.
0:36:28
And you are so empowered now to, you can do motor sports, you can do flip, you can do however deeper you want to go. You can go there. Now I’m going to put a little gap in here, not 390. We’re going to do 30 pixels. That gaps my image from the rest of my content. That’s nice and neat, isn’t it? So I’m going to go ahead and hit save. Now what we’re going to do is add our heading text and another box for our buttons. So let’s go add heading.
0:36:53
Let’s add text. That text, by the way, is not a div, it’s a paragraph, right? Semantic HTML is important. Now I’m gonna add another block. This is gonna be for my buttons. And then I am going to add my buttons inside of that block. Now, remember, block is flex, right? So it’s instructing everything to stack on top. I actually needed to go in a row and flex. You can easily change the direction from column to row.
0:37:19
So I’m just going to say, hey, be in a row instead of a column. And the buttons behave. The children behave when the parent tells it what to do. Now I’m going to give it, let’s say, 10 pixels of gap. And my buttons are spaced out. Maybe I can say this is going to be 20 pixels of gap. Perfect. Now I want to space all of this content out from each other, right? Let me change this to an H2 real quick. Let me space all this content out. Fam, how do we space it out? Don’t tell me margin top and margin bottom.
0:37:47
Don’t tell me that. How do we do it? Gap. Yes, you are absolutely right. Fantastic. So down here on the row gap field, I’m just gonna say 30 pixels. Maybe that’s too much. Maybe we do 20 pixels. Perfect. Okay. Save. What do we have? Let’s look on the front end. There’s what we’ve got. There’s what we’re trying to achieve. Now we’re not trying to match all the styling and fonts and colors. And that’s, we’re just talking structure right now. One thing that’s left to do, you notice the content is up here, toward the top of our box. It actually needs to be in the middle. So what I’m going to do, grab that. It is a flex container, which gives me a lot of alignment options.
0:38:26
And this is what Flex is really, really good for. Aligning content inside of a box. All I have to say is align main axis and I’m done. And so we look here, bam, we just achieved a very common layout, all right? Now we’re not gonna talk mobile responsiveness and all that stuff, that’s gonna be for a future. We’re just visualizing boxes. Notice how I group my buttons together so that they can be side by side.
0:38:51
That group allows me to keep even spacing with everything else, all is well in the world. All right, next what we’re going to do, close that, and now we’re going to take a look at this. I will tell you right off the bat, this is a trick question. I’m going to screenshot this. I’m going to open it up and annotate it. Where are the boxes? You think for just a second. Look at this. Where are the boxes? Let me see how we’re doing on time.
0:39:15
Oh, we’re perfect on time. This is fantastic. Okay, you’re telling me, Kevin, obviously there’s a section. You would be right. You would be correct. That is correct. Kevin, there’s a container right there that is your page width. You would be correct.
0:39:31
Kevin, there’s a container right here. That would be your page width. All right, I’m not gonna make this exact, but these perfectly align with each other. Now, you’re like, Kevin, okay, change colors, Kevin. There is a box right here. We just did this lesson, Kevin. There’s a box right there, and there’s a box right there. And if that’s what you thought, you, my friend, would be wrong.
0:39:55
You would be absolutely 100% wrong. This is a very unique and special situation. I added this situation to prove a very important point about chumps versus professionals. People who rely on page builders and can’t do anything that a page builder doesn’t do for them, and professionals who can recognize the limitations of a page builder and still get to the correct outcome. I’m going to build this section wrong so that you can see why it’s wrong and then I’m going to fix it.
0:40:27
All right, so what we’re going to do is delete this. I’m going to add the section with my container. Perfect. This is going to house my accent heading and my heading. And I’m going to give you another little tip that’s a little bit more advanced, but I think you can handle it. Heading, bam, like that. It’s my H2. Perfect. All right.
0:40:47
And this is going to say accent heading. And because these are grouped together, I can give them a little gap of 10 pixels now they’re spaced apart and here’s the here’s the next kind of advanced concept that I’m going to give you. It’s actually more appropriate for the heading to be the first thing in here. This is actually even though it’s an accent heading semantically it’s a paragraph okay so we’re gonna switch this to a paragraph tag and because it is a paragraph and this is a heading, we actually want the heading to come first in the DOM, in the code, we want the heading to be first. But visually, we want the accent heading to be first.
0:41:25
Didn’t we just talk about this? Didn’t we just talk about being able to visually switch the order of content without affecting the underlying code? This is an exact use case of where you would want to do that. So I go to style, order, minus one, visually my accent heading comes first, but in the code, my heading actually comes first. This is pro-level stuff, okay? And this is a 101 course, but I’m gonna tell you right now, even though it’s 101, by the end of this course, you’re gonna know more than 90 to 95% of people who build sites with page builders, that you are gonna be tremendously empowered.
0:42:03
All right, so that is, well look, look, I mean we’ve already got the start of what we were trying to get here, right? So there we are. Now we need this container right here and I’m going to add that. Oh, look at this. Most builders don’t allow you to add another container into a section. You got to do a bunch of fancy stuff with other divs and you end up with extra divs, it’s kind of a nightmare. Bricks allows you, even oxygen doesn’t allow you to do this. Bricks says, oh, you want two containers in a section? No problem, dog, just add a second container to the section. Why is that so hard? I don’t know. But now I can space these containers out.
0:42:41
So we’re gonna go to layout. Let’s go to, oh, gap is under content here. So let’s say 40 pixels, all right? So now my containers are spaced out. So now you’re like, Kevin, we did this before. Remember, we’re gonna do this wrong, right? Let’s add the grid again. And let’s say the same instruction as before, repeat to min-max 01fr. So now I have my two columns.
0:43:06
I’m gonna add a block over here and a block over there. So I’ve added two blocks and then I can gap them, no problem, 30 pixels. And now what I’m gonna do is add a rich text element and I’m going to steal this paragraph right here and actually I’ll steal the whole thing let me just steal the whole thing okay so now I paste that in and obviously let me paste it in here there we go now we don’t have all the extra spacing look at that that’s a problem right I want this in two columns so What you’re gonna say is, all right, Kevin, grab some of it and then come over here to this other column, add another rich text element, and then paste it in here.
0:43:47
And you’re like, there we go. And you’re like, oh, it’s not exact. Okay, well, maybe just take this last sentence and you could put it up here because we want these to be really balanced. Okay, that’s a little bit better, but look what you’re doing. You’ve divided a narrative, a story, right? This multi paragraph element into two separate elements. And if the story ever gets longer, like you add more to the story, you manually have now screwed up the balance and you’re like, Oh no, now we got to take this and we got to move it over here.
0:44:23
This is, this is a nightmare. This is absolute chump-like behavior. You do not want to be doing this. So we have to go into our pro head and be like, how are we going to accomplish this? Is there a way in CSS to make content flow from one column to the next? And in fact there is, CSS columns now this is not The columns element in your page builder and this has been my argument since the beginning of time page builders create these stupid elements that they think are friendly to beginners like Columns go into old element or you have a columns element go into Divi. There’s a columns element Well, there’s something called CSS columns and it behaves completely different from these columns elements. These columns elements actually use flex box. They don’t use columns, right? So it’s so confusing because the page builders make it confusing. That’s point number one. Point number two, I’ve never seen a page builder that has built in CSS columns features.
0:45:34
Never in my life have I seen a page builder that allows you to split content into columns, the way that CSS columns actually works. Not even bricks, not even oxygen. So this is an area where you step up as a professional and say, oh, the page builder is not capable of this, but it still needs to happen, so I am going to make it happen. It’s like taking a plane off of autopilot. Like, oh, this is not a situation for autopilot weather’s quite bad this is not a situation for autopilot turn off autopilot i am now flying the plane i am the captain now look at me sure look at me sure i’m the captain now so what we’re going to do is do the right way to do this now so we’re going to take away our blocks we’re going to take away the grid get rid of the grid no more grid uh let me actually get rid of that first, that and then this.
0:46:27
Okay, we’re back to a main container. All I’m gonna do is put my rich text inside the container. I’m going to select all of this content and I’m gonna paste it all in because it is all one piece of content. We can’t make this a multi-element thing. I’m gonna paste it. There’s my narrative right there. And watch how easy this is, simply because I know it’s possible and I know how to do it.
0:46:52
Okay, so we’re going to go down, custom CSS, and I’m going to write very simply columns. I’m going to say two. Then what I’m going to say is 200 pixels. What this one line of CSS is doing, look what visually just happened over here. This is absolutely fantastic. Remember, no page builders allow you to do this by default. You have to know it exists and know how to write the CSS. And it’s not really complicated.
0:47:21
You can see it’s one line, all right? But what this is saying is be two columns, but don’t let any columns be squished narrower than 200 pixels. So what this means is actually, it’s automatically responsive. It automatically goes to one column. Oh, you want it to be three? Okay, watch this, three. Now we can also manipulate this to where I can get two columns at a break point and then finally down to one column.
0:47:50
So automatically responsive, it can be as many columns or as few columns as you want. I mean, you can even start to go five, especially if you take off this, it’ll be whatever you want. You can actually add ruled lines in between the columns. CSS columns is very very very powerful. Again, not available in any page builder that I’ve ever seen. But this is the appropriate way to create columnized content. Whether it’s paragraph based, list based, it’s a great way to break lists into multi columns. And you know that look, sometimes the lists need more items added or the narrative, the little story, the paragraph here needs more content added.
0:48:29
Watch what happens when I add more content. Anywhere doesn’t matter, anywhere. It dynamically starts to fill out the columns for me, okay? And now it’s affecting the column width because of the size of my builder. There you go, so we’re back to three columns. This is the appropriate way, and I added this to demonstrate this fact that sometimes there are page builders that don’t allow you to do what you need to do You need to be able to take off autopilot and fly the plane yourself and make it happen. Okay, so that is that example Let’s get rid of it. We’re done here. We’re done here and now we’re gonna look at this last example Okay, let’s visualize. Let me let me screenshot this Let’s annotate it and we see section box, right?
0:49:12
Because this is all topically related. Then we have a container, then we have another container, then we have each card is a box, and then this content is grouped separate from the media inside the box. There’s your boxes and boxes and boxes. Okay, so let’s go ahead and minimize and let’s build What do I add first section? There’s my container. I need another container. So I duplicated it I want those containers spaced out. So I’m going to do 30 pixels of gap. I’m going to add a First I’m going to add a block right inside of this container because I need to group these two items right here So that is going to be a text element. That is going to be a heading element.
0:50:04
Perfect. This is my accent heading. Then I want these spaced out a little bit. So what am I, what am I going to do? Let me get that off the screen. I’m going to use a gap of 10 pixels. And then what I’m going to do is I am going to add this text element over here. So that’s another text element and I don’t care what it says. We can just leave it like that. Now I need to get these next to each other. I could use grid, I can use flex, I used grid before, now I’ll use flex. So I’m making sure that this is flex, row, and then I can align items to the center so they’re always in perfect center alignment with each other. Let’s save, let’s see what we’ve got. Oh, that’s the example. Let’s, there we go. So we’re doing good here. Let me make this an H2, perfect. And let’s look at it on the front end. Fantastic. Like we’re getting exactly what we want.
0:50:54
Now we need to make the cards. I am going to speed through this. You’re going to see some stuff happen. You’re like, I don’t know what’s happening right now. Don’t worry. We’re deep diving this later in the course. I just want you to understand boxes. And I’m going to make a point right now about classes. Okay. All right. So what I’m going to do is I’m going to make this a grid and we’re gonna set up a four column grid. Why? Because you see four columns right there. Okay, so repeat for min max zero one FR. Perfect. Now I have four columns, you see them there?
0:51:29
Now I need a block. That is gonna be my very first card. So here’s my container, here is my block right here. That is my card. I am going to start using classes. Well, let me add my other elements first. So media, which is going to be an icon. Then we’re going to have a heading and text and remember I said the heading and text need to be grouped together. Okay. So what we’re going to do is we’re going to add our let’s add element icon.
0:51:53
Let’s add a block to group that content together inside of our block. We are going to add a heading and we are going to add text. Bam, I’m going to make sure that this is a paragraph of text, just like this one was. Oh, I gotta make that a paragraph as well. Oh, you know we also didn’t do up here. Heading needs to come first. Accent heading is going to get our order of negative one.
0:52:17
Hey, want to cross our T’s and dot our eyes, right? Alright, save. I am moving a little fast so a couple of details might get missed because I’m like I’m trying to be cognizant of the time. I don’t want these to be, you know, crazy long, but I want to get the point across. Okay. So now I’ve got all of my elements in here before I start styling anything, I’ve got to label everything, give everything a class.
0:52:40
And you’re going to see why in just a second. And this is going to open your eyes. If you have never used a class first builder, if you don’t know, you didn’t know what CSS classes were before you started this course, you don’t know why they’re important. This is gonna blow your mind. You’re gonna be like, why doesn’t every builder do this? Why doesn’t every person teach this?
0:52:59
I don’t know. The people teaching Elementor and styling at the ID level, the people teaching Divi, not using class, they’re all letting you down. They’re doing you a massive disservice. Pay attention to who you pay attention to. Okay, so I’m gonna add a class, this is gonna be feature card. I’m gonna copy that name, so I don’t have to write it over and over and over again.
0:53:20
This is gonna be feature card icon. This is gonna be feature card heading. This is gonna be feature card text. If you don’t know why, if you know classes, but you don’t know why I’m doing double underscores or why I’m doing all of this, again, we’re gonna deep dive this later. It’s gonna be feature card text. The group, the container right here, the block wrapping these is gonna be feature card body.
0:53:43
And now everything has a name. So watch what I’m gonna do now. I’m gonna duplicate, duplicate, duplicate. What is the first thing you see? The first thing you see is I need space in my grid. So I need a gap in my grid. So we’re gonna say, all right, 30 pixels of gap. Now our cards are spaced out. What do we need? Padding, right?
0:54:02
Cause we need space inside of our card. We need a background color. We might want to round the corners just a little bit. And you’re like, Kevin, why did you duplicate all these before you styled them? That’s dumb. You’re going to have to like, you know, delete them. And then after you style one, this is what people are used to doing in Divi and Elementor and all this.
0:54:22
But guys, just watch, just pay attention. Feature card, right? Let’s add our padding. How about 40 pixels of padding on all sides? How about we add our background colors? We’re gonna come in, let’s do color one, just like that. Maybe that’s too dim for you guys to see. We’ll do this one. How about I go to my border and go to 10 pixels on the border, and let’s do that on all sides.
0:54:45
Look at, like, come on now, come on now. What do you have to do? Now, you could, oh, let’s, we forgot our gap, right? So let’s go to our gap area, row gap, how about 20 pixels? There we go, save. Now, you’re like, well, Kevin, I could have built that card and styled it and then just duplicated them and it would have been basically the same thing. Well, would it? Well, let’s pretend that you have these cards on 40 different pages of a website. So, and now the client comes along and they’re like, oh, we actually want those to be colored boxes now.
0:55:17
We want all the content inside them to be white and we want a little bit less padding. Well, you, my friend, are in an absolute shit show of a situation. Because styling stuff at the ID level, copying and pasting stuff, duplicating styles, that is chump-like behavior. Classes are pro-level behavior and here is why. Imagine that these cards exist on 40 pages of the website, and now I need to make some changes.
0:55:45
So we go to style, we go to background, let’s make them, I don’t know, how about purple? Then we’re going to go to the color of the content in the boxes, let’s do that. Then we are going to fix the spacing a little bit. So I’m going to unlink all of these, and let’s go 30 and all around. There you go, maybe 20, how about that? Ah, maybe 25, maybe 30.
0:56:10
I can do whatever I want, it doesn’t really matter because all my cards are changing all at the same time, everywhere they exist. That is the power of classes. I don’t know why anybody, anybody would use a builder that is not a class first builder and you’re going to see how this impacts development and workflow and scalability and maintainability more and more and more as we go through this course. But this, my friends, oh, I mean, do we want to cross more T’s and dot more I’s? Here’s my body. I actually need a little bit of gap in there.
0:56:43
I am a fan of not leaving like loose ends, right? So you do a little, uh, a little of that. All right. I think I’ve made the point I think that we’ve talked enough about boxes and boxes and boxes. If you have any questions, let me go back to camera here, if you have any questions about anything covered in this lesson drop them down below. We are just still still just scratching the surface and I just can’t wait I can’t wait to see what you guys are able to grow into throughout this course and what you’re able to accomplish and how much easier your life gets. And if, honestly, if you start to get frustrated with the builder that you happen to be using, it doesn’t have divs, it doesn’t have sections, it doesn’t allow you to change semantic HTML tags, it doesn’t allow you to use classes, or it doesn’t give you a class first workflow, whatever it is, just be okay with like, all right, I’m ditching this builder, I’m done with this chump-like behavior, I’m going to a builder that allows me to do things the right way, totally awesome decision to make.
0:57:47
The sooner you make that decision, the better, in my opinion, alright? So that’s the end of this lesson. I’ll see you guys in the next one, peace.
