0:00:00
Today is a fantastic day in Page Building 101. We actually get to start page building. Doesn’t that sound fun? I hope you’re excited. I’m very excited. We already talked about in a previous lesson how everything is a box, but what we have not talked about yet is laying out those boxes and achieving a lot of the common layouts that you see across the modern web.
0:00:23
So what we’re gonna do is look at a real website today. I did my best to find one that’s not too crazy, not too insane, just nice and clean and simple and we can go ahead and try to recreate that. But in order to do that we’re going to need to know about CSS grid. Now here’s the rub. Page builders often encourage users to use Flexbox. This is another technique for layout. Grid is actually far superior to Flexbox in these situations. Page builders should be encouraging users to use grid. And a lot of page builders are catching on to this and they’re introducing grid into the page builder ecosystem but most page building users are used to Flexbox.
0:01:10
They’ve been using Flexbox for a long time. They don’t really understand Grid all that much, and what I want to do is make sure, as we’ve done with everything so far, that you know the reality of the situation, that you’re not coddled, that you’re not treated like a page-building toddler, that you are just told, hey, Grid is superior, therefore we are going to learn how to produce common layouts with Grid. Now I will say that this is going to be scratching the surface of CSS Grid. This is not going to be a deep dive on CSS Grid. Throughout the rest of this course you will pick up more and more and more and we will go deeper and deeper and deeper into CSS Grid. What this particular lesson is all about is helping you understand why Grid is superior to Flexbox for these common layouts and really just content layout in general, not content positioning, as we’ll get there, but content layout in general.
0:02:08
So I want you to know why Grid is superior to Flexbox. And then I want you to know how to create some very simple common layouts with CSS Grid. And we’re gonna use a real world scenario to help us do that. So I’m gonna go ahead and share my screen. The first thing I’m gonna do is just run down the list of why grid is superior to flexbox for common layout type situations. I want to make it very clear because people try to twist my argument sometimes. I want to make it very clear. I am NOT saying that grid is superior to flexbox in every single situation on the modern web. I love flexbox when flexbox is used appropriately. Grid is far superior for the vast majority of layout situations and therefore should be used over Flexbox.
0:02:56
But that doesn’t mean that there’s anything wrong with Flexbox. That doesn’t mean that Flexbox is bad. That doesn’t mean that Flexbox should never be used or anything else. All of these other straw man arguments that I see all the time. Flexbox has its place, grid has a larger place. All right, so let’s take a look at the common list and I know You’re you it would help if you could visualize these things what I want you to understand are just the main Arguments and then you are going to see these arguments play out throughout this course I don’t need to go in depth and give you an example of every single argument right now We’ve got to stick to the main topic of this lesson, which is page building with grid So I want to give you the arguments. You’re gonna hopefully recall these arguments as you see them come up over and over and over again in real situations throughout this course and throughout your page building experience. Okay so number one, Grid is specifically designed for creating columnized dual axis layouts. That is what it is designed for. Flexbox is a single-axis layout system, not a dual-axis layout system.
0:04:05
So it has inherent flaws. It has inherent lack of functionality when compared to Grid. That’s just a fact, okay? Doesn’t mean it’s bad. It’s just a fact. So when we are talking about most common layouts on the modern web, Grid is just by nature going to be superior for that. Number two, Grid gives you more efficient control of layouts from the parent container. As you’re going to see, creating a flex layout requires you to set a parent instruction and then child instructions.
0:04:37
Whereas Grid, the same things can be accomplished directly from the parent. So just in terms of that, it’s more efficient. It’s also less breakable. There’s a lot of advantages there for CSS Grid. Grid offers far more control over the size and placement of elements in a container. Grid offers far more control over the visual reordering of elements in a container. Grid offers far more robust and granular control over responsiveness. Grid also supports Flexbox alignment controls, which gives you the power of Flexbox within grid layouts.
0:05:14
Grid supports named and labeled layout areas. And grid is magical when you need to overlap elements. Flexbox doesn’t allow you to overlap elements. So there’s a lot of benefits with CSS grid. Again, I’m not gonna visualize all of these for you right now because that would take us off course from what our main mission of this lesson is. Our main mission of this lesson is to learn how to use grid to create some very common layouts. Now I am going to do one grid versus flexbox situation because I want you to see probably the most basic layout of all is a two column, I’m knocking stuff over on my desk, a two column layout.
0:05:56
And the question is like, okay, if flexbox struggles with the most basic of layouts, then you’re right. I should probably take a closer look at CSS Grid, okay? So let’s take a look here. We’ve got a grid container right here, and we’ve got a flex container right here. Of course, neither of them are set up yet, so they both look exactly the same. So what I’m gonna do here is we wanna create, remember, a two-column, equal columns, two equal columns layout.
0:06:28
This is like the most fundamental basic layout structure imaginable on the modern web. So what I’m gonna do is I’m going to set this to display of grid. And immediately what you’re gonna see is that, well, I don’t get a two-column layout because I haven’t asked for it yet. But the elements inside of this grid have decided that they are now going to be full width. And this is very important distinction between CSS Grid and Flexbox.
0:06:58
CSS Grid wants its children to behave according to the grid. Whereas Flexbox actually looks at the children and says, hey, we want you to just behave as children. Like if you’re wide, be wide. If you’re not wide, don’t be wide, right? And so fundamental, fundamental difference that we see right off the bat. This one is already set to display Flex. Now, page builders that use Flexbox tend to auto set Flex containers to the column axis, which puts things on top of each other, right?
0:07:34
We’ve already talked about the axes in web design. That is not the default behavior of flex. Okay, in fact flexbox, some people will say grid is very complicated. Flexbox is quite complicated as well. We’re just going to scratch the surface kind of a both of them here, but I want you to know that the default layout of flex, if you just set an item to display flex, it lines up items across the x-axis in a row. Page builders don’t do this because most users don’t want that to happen by default in typical page building workflow. So they actually override that and set everything to a column layout, but really Flex wants to do this by default, which is a row layout.
0:08:18
This is where you see the Flexbox axis situation. I don’t get to control both axes in Flexbox. I have to choose an axis. I can choose to align across the vertical axis or I can choose to align across the row axis where Grid gives me true control across both the X and the Y axis. Grid actually is a three dimensional layout system because Grid also gives me control over the Z axis axis unlike Flexbox. Okay? All right, but we’re not going to dive that deep today. We’re not going to dive that deep. And don’t worry, right? I could absolutely, you know, one fire hose to the face is enough. Ten fire hoses to the face, you’re probably going to tap out. We’re going to take the one fire hose to the face and that’s going to be enough. So we see here, this is how standard standard Flexbox would behave. It would put the two things in a row. But as you see, they’re not two equal columns. Flexbox is wanting the children to behave however the children want to behave. This child is wider than this child, okay? This is not fat shaming or anything else going on here. Don’t try to cancel me. It’s just a true fact that this child is wider than the other child, okay? And thus, they’re just going to stay like that.
0:09:38
The only difference is they’re going to be next to each other instead of on top of each other. But watch up here in CSS Grid. What I’m now going to do is I’m going to define a two column layout. And CSS Grid, the basics of the grid, it doesn’t have to be this way. But the fundamental use of how we’re gonna be using Grid is with what are called fractional units. And you can think of these as just parts.
0:10:05
You’ve ever heard two parts to one part, one part to one part, one to one is equal, right? One part to one part, two parts to one part, two parts to three parts. Just think of them fractional units, okay? So one to one would be equal. If I have one part to one part, it doesn’t matter how wide they are or anything else. Just one part to one part, those are equal. One equals one, okay?
0:10:28
So we use a fractional unit, which is FR in CSS Grid. So if I say one fractional unit to one fractional unit, I get equal columns. Again, I’m doing this at the parent level. The parent container is saying display grid, and then one FR to one FR is the grid structure. Therefore, this is the grid structure that the children are going to adapt themselves to. Notice they immediately got in line and they were like, we’re doing what the grid parent tells us to do. And with those two instructions, display grid, 1fr 1fr, I have achieved the most common layout situation on the modern web. Flexbox still has not achieved this.
0:11:14
At the parent level, I have set it to display flex. There is no FR type situation that can go on here with Flexbox. So what I have to do if I want these children to behave is I actually have to target them. What a lot of page builders have you do is select a child and you can perhaps give it a width. You can give it a flex basis. You can do a lot of different things. So I can give this a flex basis of 100%.
0:11:43
Now notice that it has tried to take up the full width of this flex container, but the other one has not. Why? Because I haven’t given the other child an instruction yet either. So I can grab this one and I can basically give it the same exact competing instruction. If they both try to be 100%, then they’ll be equal and there’ll be two and two. Now this is only because the flex container is set to not allow wrapping, right?
0:12:15
A flex container can say, I’m allowed to be two dimensional or I’m not allowed to be two dimensional. Remember grid is two dimensional by default. In fact, watch this. Well, I will get there. We’ll get there. We’ll get there. Right now it’s saying, no, you’re not allowed to be two dimensional.
0:12:29
What if I did want it to be a two dimensional? I want to allow this to wrap and be two dimensional. So I’m going to set this to, you’re allowed to wrap. Oh no, then I lose my two columns, right? Because Flexbox cannot really be both at the same exact time. Now you’re thinking, well, Kevin, what I’ve done in page builder land is instead of flex basis to 100%, I’ve just set the width of my containers. So my child can be, if it’s a width of 50%, right? So we’ll say width of 50% and then we’ll go over here.
0:13:04
This child will be a width of 50%. Oh no, why did 50% and 50%, why aren’t they next to each other? You wanna know why? Because this container has a gap in it. And Flexbox is not capable of accounting for the gap. Grid, watch this. I’m going to go to grid and I’m going to go over here. I’m going to say a 400 pixel gap. Did my two columns break? No, they just got a giant gap in between them because that’s what I asked for. But in Flexbox Lans, the gap breaks the column because this is 50% this is 50% that’s a hundred percent of the available space, you forgot about the gap. Now the gap is going to force that column to the next line because there isn’t enough room for two 50% columns plus a gap, right? And you see if we’re doing stuff with wrap, we run into issues, we’re going to run into issues, in fact, with the length of the content that is in each of these boxes in some scenarios.
0:14:04
Flexbox has a lot of quirks and qualms, things you have to know about the underlying functionality of Flexbox. It’s quite easy to break. And what I will tell you is that page builders that encourage you to use Flexbox, if your page builder has a columns element, for example, or a container element, and that container only allows for Flexbox controls, a lot of times the page builder is doing tons of stuff, overrides behind the scenes that you don’t ever see, trying to make it so that you can’t break the Flexbox layout very easily.
0:14:36
It’s like trying to stick a square peg into a round hole. This is not what Flexbox is great at. You can absolutely make it work, but we’re not in the business of making it work. We’re in the business of using the right tools for the right job. I can make Elementor work, maybe in some capacity, if I don’t care about code quality, I could get to a finished website, right?
0:15:05
But I’m not in the business of making it work. I’m in the business of choosing the right tools and the right workflow, professional tools and a professional workflow. I’m in the business of knowing what I’m doing. I’m in the business of choosing the right path to get from point A to point B, the path that has the most pros and the least cons. That’s what we’re all doing here. That’s what we’re trying to learn in page building 101.
0:15:30
And so what we wanna do is we want to get rid of this flex box, like trying to force square pegs into round holes, this situation, and we wanna just use grid, which is the path of least resistance and the path that gives us far more pros than there are cons. So let’s continue going down and we’re gonna see common layouts with grid and fractional units.
0:15:55
So all we’re gonna do is play around with this grid right here and just see if we can make some very common two column type layouts. And we’re gonna learn about fractional units as we do that. So you’ve already seen one FR, one FR immediately gives me two equal columns, which is absolutely fantastic. Let’s say that I was in a situation where one column, maybe the left column is wider than the right column. Well, all you do is change the fractional units.
0:16:24
So if it’s two parts to one part, it works like this. See, now I have a wide left column. This is a basic like blog post with a sidebar kind of situation. What if I wanted it to be even bigger? Well, I can do 3FR to 1FR. And really, I can get any ratio I want. And there’s really no limit. I mean, this could be 16 to 4. You can do so much with these. You’re really just, again, dealing with whatever fractional units you want to deal with.
0:16:56
And if I wanted to flip-flop those, I could do four over here, and then I could do 16 over here, and now it’s going the other way. And you can see how easy this is. And if I flip over real quick to this kind of situation with a real-world website where you’re looking at how content is laid out. What you’re going to find is that all of these naturally like seem to just want you to lay out things in a grid. So there’s an example right there.
0:17:25
I come down here. What do we have here? Well, I mean, this is, again, guys, it’s extremely common. And we talked about this a little bit when we did everything is a box, right? Boxes on boxes on boxes. What is this right here? An even three column grid. Can you achieve this with Flexbox? Yes. Is Flexbox the best way to achieve this? Absolutely not.
0:17:50
Grid is far superior for achieving layouts like this. We come down here and we see that this is not quite even columns, doesn’t appear to be anyway. I’m gonna go ahead and annotate this. All right, so I don’t know, maybe it’s even, but let’s say that we did need the left side to be bigger than the right side. You see how easy that is with this fractional unit concept of CSS grid. Now, there’s one thing that you need to know about these FR units. We’re going to scroll down here and we’re going to talk about the min max function. So if you use raw FR units, you see how easy it is to say 2FR, 1FR. If you use these raw FR units, you can sometimes create overflow issues depending on the width of your content.
0:18:42
to do to fix this is replace the raw FR values with a min-max function. The min-max function is very simple. It’s not hard to understand. It’s not hard to remember. And it gives you additional functionality over these raw FR units, okay? So I’m gonna show you how easy this is. I’m gonna take two FR and I’m gonna delete it. I’m gonna replace it with the word min-max.
0:19:06
It’s a function, so we do parentheses. I’m going to put a zero, a comma, and then paste the 2fr. So all I’m doing is taking the 2fr that was there, and I’m basically bringing it in. Let me zoom in here so y’all can see this. I’m taking the 2fr that was already there, putting it in a minmax function with zero as the initial value. We’re going to talk about that zero in just a second. Now what would I do to replace this 1fr? Very simple. Give it the min-max function. Instead of 2, write a 1. I’ve got my 1fr. I still have a two parts to one part grid. Everything is working exactly the same. The only difference is it looks like this instead of just saying 2fr 1fr. Now what this min-max function is doing, and here you guys go. Min, right, is the first part of the function. Max is the second part of the function. Min is the first value. Max is the second value.
0:20:05
is the second part of the function, min is the first value, max is the second value. So it’s saying these grid items, their minimum value is zero. They’re allowed to go all the way to zero, but they’re allowed to grow to a maximum of two fractional units, which is two parts of the container to one part of the container over here. So it’s this the allowance of going to zero is what helps prevent these overflow issues that you might run into from time to time. So now we really don’t have any overflow type stuff to worry about. We have more of a rock solid grid template columns situation. And that’s what we’re defining here is the grid template columns. If we were writing this in CSS, let me hop over to CodePen real quick. I’m not going to whip up anything crazy. I’m just going to say this was my grid3 container.
0:20:59
It would be display grid. This is what we’re doing first. So you have to display it as a grid. And then you’re going to say grid template columns. And then you would do your minmax functions, 0, 1fr. And then we need three of these. That defines how one column should behave. If I make a second one, it’ll have a second one. If I add a third one, it’ll have three columns. Okay?
0:21:23
So now there is a shorthand way of doing this, which I’ll show you in just a second, but this is literally all you’re doing, right? And you can change up the ratios at any time. Now the middle column is gonna be two fractional units while the outside columns stay at one fractional unit, which is going to give you a larger center column. Very easy to understand how we can use fractional units to create whatever ratios we want to create with CSS Grid. And the good news is we’re not having to go child by child by child, setting flex basis and widths and all this other stuff in order to make this happen and dealing with whether it’s wrapping or not wrapping.
0:22:02
None of that stuff has to come into play CSS grid handles all of this stuff for us okay so this is the min max function you want to be using this instead of raw fractional units now the other thing that you can do is you can say well I do want to protect a specific piece of content from ever getting too small well you can put whatever value in here you want. And it will never allow that particular grid item to go below that value right there. You can use rims, percentages, VH units, whatever units you want. We already talked about all the different units available to you.
0:22:41
CH units, right, if it’s text, you can do whatever you want with these values, with these minimums, but just know, the minute you set a minimum that’s not zero, you could potentially create overflow issues again. Now, if you’re thinking, well, Kevin, overflow issues sound bad, right, in CSS Grid. Flexbox has overflow issues as well. Flexbox does not inherently solve any sort of overflow issue.
0:23:05
In fact, it’s easier to create overflow issues with Flexbox than it is with CSS Grid. So, this overflow issue is a challenge between both systems, both methodologies. It’s easier to manage with CSS Grid in my opinion. Now let’s talk about the easy equal columns, but we’re going to now use a repeat function instead of just pure min-max grid template columns, okay? So I talked a second ago about how there’s a shorthand way to write all of this. And you’re going to see what the big advantage of the shorthand method is. This is three min-max functions, which defines a three column layout.
0:23:49
So what I’m going to do here is I’m actually going to duplicate that. And we are going to just ignore the labels now here. I’ll just make this a center. How about that? Now it all makes sense. All right. So what I’m going to do, this is display grid. I’m going to go grid template columns I’m going to show you min max 0 1 fr min max 0 1 fr min max 0 1 fr creates 3 but what if I want it to be 4 okay you know you know Beth comes along she’s like I want it to be 4 all right so you put another min max function in and now you have space for a fourth column yeah but now Beth comes back she’s like sorry I talked to the team, I talked to Becky, and Becky said she brought up a great point, maybe it should just be two columns, and so that’s what we want to go with.
0:24:36
So now here’s what you have to do to get it to two columns. You have to find the last two min-max functions and remove them. Now it is a two-column layout. By the way, look at this. Grid is just like, hey, you asked for two columns, but you have four items So I’m gonna go ahead and fill that other axis for you Flexbox doesn’t do that grid does that grid wants to continue filling out itself Flexbox does not want to continue filling out itself so yet another You know just nice thing about CSS grid But we need to go back and talk about this repeat function this shorthand So let’s say I do want four. I want four. So what I can do is to say repeat and it’s a repeat function.
0:25:18
So it’s open parentheses, close parentheses. Now what it asks for here is the number of things that are going to repeat. So I want four items to repeat. So I’m going to say four, comma, what should the item be? How big should the item be? Well, it should be min-max 0 1fr, just like it was before. I’m just slapping that min-max 0 1fr into a repeat function and saying, repeat that four times, all right? And so it’s gonna say, okay, there you go. One copy, two copy, three copy, four copy. And by the way, if I keep duplicating, it’s gonna just look, I mean, this is so amazing with Flexbox, right?
0:26:00
Or I’m sorry, with Grid, not Flexbox. Okay, so I’ve got my repeat function. Now, Becky, Becky comes along with Bev now, Becky and Bev together as a team, and they’re like, it needs to be two. Well, watch this. I can have whatever I want now. This repeat function, I don’t have to remove min-max functions or add them back or anything like that. I’ve got my min-max instruction, and now I’m just saying, hey, repeat it.
0:26:26
This is the amount of times that you need to repeat it. 12 times, whatever, then the children are gonna line up. This, by the way, makes it really easy to come down and say, hey, on mobile, this is gonna be one column, bam. And so you’ve got a lot of breakpoint, yes, we’re doing breakpoint management. We don’t have to with CSS Grid, we don’t have to. But when we do want to, it’s very, very easy to handle. Okay? Flexbox, not so easy to handle at breakpoints as Grid is.
0:26:56
All right, so I’ve got my repeat function going. I’ve got my min-max function going. Guys, you’ve gone from, I don’t know, diddly squat about CSS Grid to using min-max functions and repeat functions, and you’re getting columns made, and nothing is breaking and this is absolutely fantastic right you’re coming a long way that and give yourself a pat on the back you’re doing a fantastic job I know I’m throwing a lot of stuff at you I know it doesn’t necessarily feel good to get in the face with a fire hose but you’re taking it like a champ I got to say you’re taking it like a champ all right grid layouts love to repeat and flex layouts don’t let’s make a flex box container out of this and let’s say that they’re gonna be in a row.
0:27:39
This is why, by the way, where the universal selector comes in. Remember last lesson, we talked about how to select elements and I was like, you know, there’s this thing called a universal selector. We wanna use it sparingly. Well, guess what? Flexbox almost like forces you to use it, okay? And I do tend to try to avoid it, but if you’re using Flexbox, you gotta use the universal selector for a lot of this stuff.
0:28:01
So I’m gonna select all direct children of this container using the universal selector. So I’ll prove this to you right now, five pixel solid red. Watch, they’re going to both get a red border because I’m selecting everything that’s in this container. And then I can say something like flex basis 100%. And so I get my two equal columns with flexbox. But if that’s my layout structure that I want, and I duplicate a child, I add another child, right? What’s going to happen? Is it going to do what Grid did and say, hey, you kind of asked for two columns, we’re just going to keep repeating that layout for you. No, Flexbox isn’t going to do that because Flexbox doesn’t know that I asked for two columns or that I wanted two columns. Flexbox just knows I wanted all children to be 100% wide. That’s really all it knows. It doesn’t know that I, in my mind, I wanted two columns. This is how I got to two columns, but it doesn’t know that that’s what I wanted. And so if I duplicate, oh no, I, in my mind, I wanted two columns, but the minute I add a third child, I have three columns. And if I add another child, it’s gonna have four columns and five columns. And I can’t get them to wrap unless I say, oh, by the way, you’re allowed to wrap.
0:29:17
You’re allowed to let items go to the next line, but watch, watch the complication here. The minute I switch it to wrap, remember what the instruction is. Hey, all children be 100%. Well, that’s gonna be a problem, isn’t it? So right when I say wrap, oh, now they just stack on top of each other. Suddenly, see, I’m very limited in my access control here. Very, very limited in my access control because I have to pick one.
0:29:44
Are they gonna go up and down or are they gonna go left or right? And even if they wrap, then I don’t have control over them being equal widths very easily, okay? A lot of challenges with CSS Flex, but I think you’re getting it. You believe me by now? Do you just believe me? Okay, do you wanna just create a basic page, you want to just see how handy grid is for creating very common layouts. Let’s go ahead and dive into it. So here is what we are going to be creating. Now I’m going to tell you right off the bat, we are not going to design this whole page. We’re only going to focus on how do we get boxes on the page and get those boxes into the right positions according to what we are looking at right here. That’s what we are going to be focusing on in this training.
0:30:29
Okay, first thing, let’s get our main boxes. What are our main boxes? Pop quiz class, pop quiz, what are the main boxes? The very first box that you’re gonna add to a page to mimic what you see here. What is it going to be? Five, four, three, two, one. Pop quiz over, a section. Yes, a section element. How many section elements do we need?
0:30:55
Well, remember, we’re organizing by topics. We have a hero section right here. Technically, the things that you integrate with are, you could argue that they are a slightly different topic. You could argue that maybe they should go in their own section. But if you put these in the same section with this hero content, I don’t think, you know, this is in a, this is definitely not a felony situation, probably not even a misdemeanor situation. It’s really just either or, you know, live and let live.
0:31:26
But what we can all agree on is, now this is a different topic. Then we’re going to enter another section, but we have this left-right situation, this right-left situation, left right, this is all one section. These are basically features, talking points, whatever you want to call them. They all belong together. Remember we talked about grouping content. And then finally, we have another section for our little CTA before our footer.
0:31:57
And then of course, this is your header up here. They live separately. They’re not going to live on our actual page. We’re going to talk about header and footer templates in a future lesson. Right now, what we’re going to focus on is the actual page content and page layout. So by my count, I need one, two, three, four sections. Simple, easy, clean. Okay. So I’m going to do that right now section section section section. All right, so I’m gonna go over here I’m just gonna label these these are not I’m not creating classes not creating IDs I’m not this is purely for builder Organization. All right, so we have hero we have features we have talking points and We have our CTA, okay So these are four sections of our page.
0:32:52
They have semantic section tags. All the things that you have learned up to this point in this course are now going to begin to reveal themselves. Okay, even though we’re not gonna be styling, we will create any necessary classes that need to be created. And then you’re gonna see how these apply as we continue designing this page up maybe in the next lesson and so on and so forth. Okay, I see a container and I see a container. Now we already have one container in our section by default. Okay, so I’m going to go over here.
0:33:23
There’s that one container. I’m going to go ahead and duplicate that container. And now I have two containers. This content up here, I need to make two equal columns. These appear to be somewhat I don’t know if they’re exactly equal, but for the purposes of what we’re trying to achieve, these are just two equal columns. So how are we gonna achieve that? We’re gonna achieve that with CSS grid. So I’m gonna come right over here, and now we have the question that needs to pop up in our mind.
0:33:53
How do we want to define these grids? Or where do we want? How are we gonna target this container? I guess I should ask. We talked about targeting in a recent lesson, didn’t we? Well, I’ll tell you right now if you were to do this at the ID level or the utility class or the BEM class you would need to do something very special that I’ve talked about. Should be done with every single repeating thing that has kind of a single source of truth. This is a pop quiz if you’re not getting at it. It’s called a token. We should tokenize our CSS at all times. I’m going to go to WP CodeBox, and look, here are all my tokens right here.
0:34:31
I’m gonna say these are my grid tokens. I’m gonna come down here, and I’m gonna say we need a two column grid layout. So I’m gonna make a token called grid two. And then what am I gonna put in here? The value of my grid, which is repeat to minmax zero. Let me put my parentheses in here right, 0 1 fr. Now while I’m here I could maybe just whip up a few more common ones right 3 4 5 maybe I’ll do a 6 okay 6 and then maybe I’ll do a 1 as well so there’s 1. Now 1 2 3 4 5 6 save just created some tokens for our grids. So now I can come in here and I get to choose, hey, do I want to just quickly make this a grid at the ID level?
0:35:20
And I can for grid template columns, come down here and say, grid two, and now I have a two column grid, or I can easily create a utility class for this. So I’m gonna say grid two, and then I’m going to set the display of grid. And then for the grid template columns, I’m simply going to still reference the token. And as you see here, I get a two column grid. And now the utility class gives me the ability, like if I want this to be two columns, grid double dash two. Now this is two columns down here. I can turn any container or box into a two column grid with a simple utility class. Now what I need to have a gap between this grid.
0:36:03
So look at this space right there. That is a gap between these grid items. So what I’m going to do is I’m going to come over and I’m going to create a gap between the items. I already have a space variable that I can use here, space m, which will create that gap between these columns nice and easily. You see that gap right there, okay? So now what I need to do is I need to put in boxes to contain my content, to group my content. So what I’m gonna do is I’m gonna go over and I’m going to put two boxes into my grid.
0:36:38
I’m gonna use blocks, you can use divs, it doesn’t really matter. I’m just gonna put blocks in, now we have two blocks and we have a left and right column situation. So now what I’m gonna do is I’m gonna put in a heading, I’m gonna put text, and then we’re not even gonna worry about an input form field right now. That’s more fire hoses to the face, okay? Let’s just put in a heading and let’s put in text, okay? So over here, I’m gonna put in a heading.
0:37:04
Now this is my hero, so it’s going to be an H1 heading, and then I’m gonna put in text, and there’s our text. I’m gonna change that to a paragraph tag so that it is paragraph text. I’ll go ahead and just grab this content and steal it. Then I’m going to grab this for my heading. Perfect. We’ll go ahead and paste that in just like that. A modern messaging platform to acquire, engage, and support. Then maybe we can even steal this image right here. So we will put that in our downloads.
0:37:35
I’ll come over and add an image. Now we haven’t really talked about images yet and figure tags and all of this other stuff going on. There is our image, but I do need to wrap this in a figure tag and I can say, no, we don’t really want a caption to come along with it. Okay, now I’m gonna save, we’re gonna zoom out by the way, look at this on the front end.
0:37:57
Here’s what we have so far. So again, common layouts, we’re getting there. We’ve got our two columns. We don’t really quite have a big enough gap in here, so what I would recommend is we go back to our tokens. It’s actually a situation, we haven’t talked about this yet, where you would want to create a contextual token. And a contextual token is something like this, grid gap, okay? And so what I’m actually going to do is take my grid gap clamp. It’s going to be a little bit of a shortcut to take my grid gap or my space M clamp and make it my grid gap clamp as well.
0:38:33
Now my grid gap can change at any point in the future. That’s fine. But I’m only going to use this grid gap token on grids. Okay. So I come in here and instead of space M I say var grid gap and I get my grid gap. Now the problem is it’s still the same as space M and I said I needed it to be larger But what do you know about tokens in math functions? I think we already looked at this in a past lesson see things that we learn are now coming in to fruition We are in a situation where we need what we have learned. This is the real world. Here we go So I’m gonna use a calc and I’m gonna say I want my grid gap Times three or times two or whatever you want it to be.
0:39:16
Okay, so I hit save. We’re gonna go view this on the front end. And now I have three times my standard grid gap. Now check this out. We’ve got content that is butting up against each other. We need space between that content. Pop quiz class, what are we going to use to create that space? You’ve seen this more than once now. What are we gonna use?
0:39:37
We’re going to use gap. But this is yet another example. Let’s hop over here where I would recommend contextual tokens. So I’m going to create something called content gap. And our content gap is going to be maybe equal to space M. This might be too much though. I just want to take a look at it. So I’m going to hop back over and I’m going to come down to our row gap, var content gap.
0:40:02
Why am I creating a content gap token? Because I want all the content on my website to be insanely consistent in its spacing. And if they all use content gap or variations of content gap like content gap divided by two, content gap times two, so on and so forth, I have insanely consistent responsive spacing across my website automatically. So I’m going to go ahead and view this on the front end, and now we’re almost there. The problem that you see is that the content is aligned with the top of the image. So the top of the content is aligned with the top of the image.
0:40:39
We need this content to actually be centered with the image so that there’s more visual balance at play, okay? So this is very easy to do. Number one, you can go to the grid parent itself. We don’t want to do this on the grid to class. We just want to do this on our parent and we can set a line items to the center and that my friends is using Flexbox and that my friends is what Flexbox is really, really good at. And that my friends is an example of seeing Flexbox in action on a grid container. Grid created my 2D layout, but Flexbox helped me align items within that layout, okay?
0:41:24
So now I hit save, we view this on the front end, and now we have some good balance. Now instead of that form down there, I’m gonna go ahead and drop in just a button, and this is gonna give us that CTA feel for this section. So I’m gonna pop in a button, so I say call to action. Now I’m not gonna style the button and all, we’re not doing all the styling. What we’re doing is layout. Now, I have one container here that’s butting up against another container, but here is yet another area where I recommend a contextual token.
0:41:56
So what I’m gonna do is I’m gonna go over here and we’re gonna create something called container gap. Now there’s not gonna be a gazillion of these, okay? We’re pretty much done with the contextual tokens, but these are insanely helpful. The thing is, is the spacing between containers should typically be more than the spacing between your content, okay? So what I can do is I can just go generate, I’m just gonna go generate a new clamp function.
0:42:22
So what I’m gonna do is look at the content gap has a minimum of two rem and a maximum of 3.2 rem. For my containers, I probably want that to maybe be four rem. Let’s try four and eight. No, four and six. Let’s try four and six and just see if that’s good. Now I’m pulling these values out of my ask. Somebody asked me this the other day, like where are you getting these values from? I’m literally pulling them out of my ass. In automatic CSS, they’re all calculated based on mathematical ratios. But if you don’t have that at your fingertips, this all becomes more of an issue, right? So, but these are real world challenges that we all have to work on overcoming. It just so happens that you get to choose. Do I want it to be automatically overcome or do I want to make all these decisions on my own? That’s kind of the situation that you find yourself in. Alright, so what we’re gonna do is create this container gap with this clamp function.
0:43:17
So I’m gonna grab my new clamp, which is four and six. And we’re just gonna see how that behaves in the real world. So I have my container gap that I can use. Utility class time, I’m just gonna create a utility class called container gap. And then I’m gonna say that the row gap on container gap is my token, var container gap. And now you see I have a nice healthy gap between my containers that is automatically responsive. Now you’re thinking to yourself right now, you’re thinking Kevin wow this is taking a lot of setup, you’re having to create tokens, you’re having to go in here.
0:43:50
Once the tokens are created you will fly through pages and it’ll automatically be all responsive right? And let me just remind you very quickly again if you use a framework that gives you the tokens already, gives you the utility classes already, then no, you’re not doing any of this. All of this is already done for you. So you literally open the builder and you just fly through creating pages. That’s the whole point. So here’s what we’re gonna do.
0:44:17
We’re going to create this little row of images right here. This is grouped content. The integrated with needs to be with the logos, okay? So what I need to do is I need to put all of that inside of this container right here. So we’re gonna do a basic text, which is gonna be a paragraph tag, and that is going to say integrated with. Now, this is a violation, felony violation. I just copied a felony violation from this website right here.
0:44:49
Never, ever, ever, ever, ever type in all caps on the web. So I’m gonna say integrated with, or integrated with like this actually should probably be the best one to use. And then I need to add another box for grouping all of my logos. So this little integrated with is gonna live above another box where I’m grouping my logos. I’m trying to kind of go intentionally slow so that we can explain all this and not lose anybody.
0:45:16
It’s making this take longer, obviously, but I want to make sure that I’m not under explaining what I’m doing. So here is the logos box right here. Dry alert, dry alert, dry. Do you think it is plausible that we will use this again somewhere else on the website in exactly the same format? I think that is quite plausible. So when in doubt, BIM it out, right? If you think that this is gonna be reused somewhere, you need to BIM this out.
0:45:45
So what we’re gonna call this is, well, how about just logo group? You get to decide the names. The names just have to make sense. So what I’m gonna do is call this logo group, just like that, all right? And then what I’m gonna do is I’m gonna throw an image in here. Now, we’ve been talking a lot about grid in here, but we’ve just found a situation where this is actually a call for Flexbox. Because if you notice, I don’t want all of these to be equal width.
0:46:11
I want them to be their own width. I want the child to behave as it wants to behave. This is a situation where Flexbox shines. So what I’m going to do is I’m going to put a BIM class, right? What was this parent called? Logo group. What is this going to be called? Logo group double underscore logo. Very simple. Keeps everything organized. Okay. Now what I’m going to do is duplicate, duplicate, duplicate, duplicate. And what you’re going to see is that our logo group needs to be set to flex row. And look at that. We are getting to where we want to go. So what I’m going to do is my, my VAR, I can do grid gap. Cause this is kind of like a little grid situation, even though it’s technically not a grid, but it’s the same kind of spacing and you see that it looks great out of the box. So tokenizing all of my styling is really helpful here.
0:47:04
And then what I’m going to do is I am going to align the main access to the center. One, two, three, four, five. I need to duplicate. There is number six and let’s go and pop these in. So I have stripe, I have slack, perfect. Now notice that they don’t really appear to all be in line with each other across that x-axis. Well Flexbox can handle that. You can align items to the cross axis and now they’re all perfectly centered with each other. They’ve got great spacing. I can now come in and say hey you can space between all of these as well, which gives me a little extra spacing, but it’ll make sure that my items touch the edges of the container.
0:47:46
And there’s still physical gap between these items. And there you go, right there. Look at the overflow happen. Remember I said overflow is very easy. It’s easy to break your Flexbox containers. It’s overflowing because these images are the size they are. And we’re not allowing the container to wrap the children. What we’re gonna do first is control the size of these logos. Now, I don’t really wanna control their width, right?
0:48:12
Because if this width and this width are radically different or this width and this width are clearly radically different, setting a width is not gonna work here. So this is an example where I wanna grab my class and I actually want to set a height. Very rarely do you use height, but this is a situation where height comes in very handy. So you can say 2M, we’ll do 2RM, 3RM, 4RM, 5RM. I wanna get them to the size that I think that they are appropriate at.
0:48:42
That feels fairly appropriate right there, okay? Now notice that there’s no space between integrated width and stripe. No problem, I have a parent container for that. I am going to use Flexbox to align my items, to gap my items. Now I’m gonna use content gap, so var content gap, because this is spacing between content. You see how these are coming into play. And now I’m gonna save and I’m gonna go to the front end.
0:49:08
And look at what we’ve got going on. Now, here’s what we’re gonna do is check this out here. So at this break point, when things start to break, I say, no problem. What we’re going to do here is we’re going to allow this container to wrap, but I actually have to select my logo group container. We’re going to allow that to wrap and look how Flexbox handles this. It was space between it’s putting space between the last two items. I need to change that instruction at this break point right here. So instead of space between, I need to do center and I can do center here as well. I also need to make sure, always a good idea, I put a column gap, I never put a row gap, I need to put a row gap as well.
0:49:49
That way when it does break to another line, there’s space between the two rows and there’s space between the columns as well. Now, our container is not breaking anymore. Now, I could continue to come down and change these these logo heights at different breakpoints and so on and so forth. I could do a min function, a max function, something very mathematical here, but we’re not diving into all that right now. We’re just trying to get the general layout structure completed. So I guys I have effectively created my little hero situation here. I’m gonna come down and we’re gonna talk about this section right here.
0:50:27
Here’s a container of content right here, which is a icon and a heading. Here’s another container of content right here, which is a three column grid. And here’s another container of content right here, which is a CTA. We’ll just be using buttons for right now to keep things simple. All right. So I need three containers right off the bat. Yes. I also need to space out my three containers. How am I going to do that? I created a utility class container gap. See how you do a little bit of setup and now things are starting to move much faster? Okay, so then I come in and I say optimize your sales and marketing. I need an icon and a heading. So I am going to throw an icon in here. Perfect. I’m going to throw a heading in here. This my friends is going to be an H2. It’s not the most important heading on the page. It’s just a section heading. Those are h2s This was an h1 because it’s in the hero is the most important heading on the page So now what I’m going to do is I’m going to use flexbox to align my content to the center and then I’m going to use a row gap of Content gap to make sure that my content is spaced properly Hey, look at everything flying now, really really really getting to where we want to go. Okay then we’re going to come down and we’re going to talk about this little three column grid that we want to make. Well guess what guys I already created a utility class for a three column grid but dry alert dry alert dry. If these are the three main features that I want to hit on in my narrative and my marketing I may be using this over and over and over again and what if we decide we want to add a fourth?
0:52:03
I actually need global control over this grid right here. So I’m going to call this main features grid. I’m going to remove grid three and create a BIM class, main features grid. Could you get away with grid three? Possibly, don’t know, but when in doubt, BIM it out. Now guess what? I still have a token to create my grid. So I go display grid, var is grid three, and bam, I’ve got my three column grid.
0:52:27
Now what I’m going to do is I’m going to insert a block into that grid so that I have my first card. Guys I’m a pop quiz you don’t go to prison right now. What are you going to do? Style this at the ID level? Use utility classes? Use BIM classes? What kind of targeting are you about to do chief? If you said BIM classes you’re a hundred percent right. You’re a hundred percent right. See you guys are doing great. You are following along just fine. So what we’re going to do is call this a feature card. So we’re going to go feature card. So I’ve got feature card on there. Now let’s take a look at the actual structure here. I’m going to actually group my content.
0:53:00
I’m going to group the image and I’m going to group the body content. So this is going to be a media wrapper and a content wrapper in here. And then I’m going to put these items in. All right, so here’s how we do this. And this is going to give you another example of proper naming in BIM. So I am going to add two blocks to my feature card, block, block, a top and a bottom. This is gonna be feature card double underscore media wrapper. This one is gonna be feature card double underscore body wrapper or content wrapper or whatever makes sense to your brain, okay?
0:53:32
We’ll just do content wrapper. Now in the media wrapper, I’m gonna actually put our media. Insert, there’s our image. Now I got to give it a class, alright? So we’re gonna go feature card double underscore and I just say media. I don’t care if this is an image, a video, I don’t care, it’s our media. And immediately I’m gonna say you need to be a hundred percent width. Take up the full width of this card right here, okay? Now I’m gonna come down into our content wrapper situation and I am going to add our heading and our text. Alright, heading and text. Bam. Just like that pop in our content.
0:54:06
This needs to say acquire customers just like that. And let’s just name things over here real quick. So this is a feature card. This is the media wrapper. This is the media. This is the content wrapper. We’ve got our heading and then we’ve got our content. And of course our content needs to be a paragraph tag. And then I’m going to grab my feature card and I’m going to gap this out. Now I already have a contextual token called card gap that is the content spacing inside all of my cards, which is less than my normal content spacing. Okay.
0:54:45
So now I’m going to hit save here and I’m going to duplicate, duplicate, and we’ve got our feature cards created. What are we missing inside of our main features grid? We’re missing a gap because these things are touching each other. So what I’m going to do is come in here and say this gets my grid gap class. Save. Let’s go view on the front end. Look at how things are coming along. Now on here, they have box shadows. They have guys that’s all styling that we’re not doing styling right now. We’re doing structure.
0:55:12
We basically got all of this to where we wanted to go other than the fact that this content is centered right here which if you want to do that hey we can do that. So I’m going to come down to the content wrapper we’re going to align this on the cross axis we’re going to go to typography and center all of that content and we’re good to go there. Now I’m going to slap my button down here my CTA I’m going to come in and I’m going to use flexbox to get that into the center of the page. Now I refresh on the front end and there we are. Now there’s a divider here right it’s got this little gray background kind of going halfway up through the cards. That’s styling. See how this is two lines and it’s nice and neat and it’s not going all the way wide across my page. That’s styling. See how this ugly ass star is sitting right here. That’s style. Well we can put in this icon. In Bricks we’re just going to go to icon SVG and then we can say that’s going to be our icon insert. Okay, now we got the icon that you guys are looking for. And just for right now, just for right now, let me put a background color on here because this is going to help differentiate this section, you know, between the other sections.
0:56:19
So let’s just do that light gray right there. All right. Not super great looking, but it gives us some separation of our sections. Let’s go ahead and do our next one. And this one, my friends is going to be fun. And the way that I’m visualizing this is this is more or less a card. It’s just a wide card and it’s going to have its own little grid. That’s a card. This is another card. Even though this one looks different because of the content is flipped. It’s the same exact component. All right, so here’s what we’re gonna do. We’re gonna create, we’re gonna use a container to create these.
0:56:56
Why? Because the card happens to be the content width of my website and a container is already the content width of my website. So I can just like borrow this container and turn it into a card. So what we’re gonna do is we’re gonna call this a talking point card, okay? So we’ll say talking point card just like that and then I’m actually going to copy that name to my clipboard because I don’t want to type that over and over and over again as I build this card so now what I’m going to do is add two blocks which are going to be my left and my right column we’ll name this talking point card over here and then we’ll just make it a grid so I’m gonna go display grid and we are going to go with our token of grid gap for the gap between those two items. So now I have my talking point card content wrapper just like I did up here guys. Content talking point card media wrapper and we need to take our first card icon heading text button. Icon heading text and really it’s just a link.
0:58:05
So icon, heading, text, link, icon, heading, text, link, icon, heading, if I can type today, rich text, why rich text? Because it’s multi paragraph text, okay? So if you’re in Bricks, you’re gonna use the rich text element for that. And then just basic text for our link down here. All right, so we’re gonna say learn more. This content right here is gonna be this. I’ll just paste it into the main text field because I don’t want it to accidentally bring any code with it.
0:58:40
And then I just need to get our paragraphs going. So I’m gonna get a paragraph break there and I’m gonna get a paragraph break there. Perfect. So talking point card content wrapper and then talking point card icon. Notice it’s not content wrapper double underscore icon. You don’t ever do that. It’s just talking talking point card icon, talking point card heading, talking point card text, and then down here, talking point card link. Now, here’s a decision you have to make Is that link gonna look like that only in talking point cards?
0:59:20
Or is it gonna look like that everywhere on the website? Because if we’re gonna use these arrow links everywhere on the website, this actually needs to be it’s it’s a component in itself Okay, so in that case what I would do is I would not call it a talking point card link I would call it like an arrow link. Okay? And then I’m gonna change this to custom. Actually, I’m gonna change this to external URL. That’ll automatically make it an A, an actual link in the HTML. And we’ll go ahead and hit save there.
0:59:50
Perfect. Not gonna do the arrow, all that is styling. We’re not doing styling right now. Okay, gotta space all my content out guys. So talking point content wrapper gets a gap of what? Var content gap. Now you could have, there’s nothing there This would be no violation to use card gap here instead of content gap in fact if you want me to do that I’ll do that. There’s no violation here. You can do it either way. It doesn’t matter okay? Let’s go ahead and drop our image in over here guys. Just wait for the magic There’s some magic coming in just a second okay?
1:00:19
I’m going to make sure that that is a figure element, and I’m going to say no Caption we’re kind of coming along aren’t we so I need an icon here for sure. And we’re going to say that this is an SVG. I think we’re going to insert that one. I don’t really care which one is which right now. Let’s go ahead and get our content in. And of course our fonts look different. We haven’t decided on fonts. We’re just doing structure right now. Live chat that will delight your customers.
1:00:45
We got a little link action down here. Save. View this on the front end. Look at that. There’s something, I just want to pause for a second. There’s something that bothers me with this section. It doesn’t have an introduction. It has no section heading. And that’s kind of a problem for me. I would not have made that decision.
1:01:03
I’m gonna build what you see here. But what I want to think about is this could need a section heading at some point. And because it could need a section heading at some point, I don’t want my talking point cards just free-floating in this section container. I actually want to group them together in a container of their own. So I’m going to add a container just like this. You can see it right there. I’m going to call this talking point cards and then I’m going to grab the talking point card inside a container called talking point cards and then I can call this talking points wrapper with a class okay because I could very well use these talking points on other pages of the website when in doubt BIM it out and this is kind of its own unique little component thing right here and it’s going to be the backbone for which we automatically flip this content okay you’re gonna see how we’re gonna handle this in just a second.
1:02:04
I’m taking you right now from beginner drag drop to pro level thinking right now, okay? So here we go, talking point card, I’m free to duplicate, duplicate, duplicate. I need like, how many do I need? One, two, three, four, five, okay. So I think I got to four. I need one more, that makes five. There are my talking point cards right there. What’s the first thing you notice about talking point cards?
1:02:29
They’re all touching each other. So I need to go to talking points wrapper and I am going to use my var of container gap. Now I’m just going to go ahead and replace all this content real quick. And then we’re going to auto flip-flop these. We’re going to make these automatically rotate. I want my talking point media to be a hundred percent width to make sure it always takes up the full width of that column over there. And then I’m going to go ahead and hit save.
1:02:55
Let’s view this on the front end and see what we’ve got. Looking good, looking good. All we got to do is flip flop these back and forth. Now what I’m going to do is go to my talking points, card wrapper, my talking points wrapper, which contains all of my talking points, cards and guys, we’re going to use that universal selector that you saw. Okay. So what I’m gonna do is go down to root now This is very advanced. I’m gonna zoom in for you. Okay, this is much much much more advanced, but I told you You know, I’m not gonna coddle you right? The first thing I want to do is select all Children all direct children of this Okay And we’re gonna we’re gonna use what I call a border check to see if we’re selecting the right things.
1:03:37
Border check is border, five pixel solid red. You see that we are selecting every main card in here. I need to leave this card alone and I need to leave this card alone and I need to leave this card alone. I only need to select the even cards, card two and card four. So what I’m gonna say, I’m gonna use inf child and I know, just stick with me right now. You’re just watching.
1:04:05
You’re not in. We’re not taking notes. We’re not trying to put this in our brain. We’re just watching, absorbing and saying, OK, OK, OK, things to touch on later. So I’m going to select all even items in in this main grid, which is only two cards. It’s card two and card four. You can see with my red border check that I’m selecting only cards two and card four. Now, I actually want to select the second direct child inside of that card. I’m going to go another level further, inf child, and I’m going to say two.
1:04:40
Or I could say last of type. There’s a lot of ways to do this. I can actually just say, I don’t even have to do inf, I can just do last of type like that. So now, look what I’m doing. I’m selecting the media wrapper inside of these cards right here. And now what I can do, instead of border checking them, I can change their order to minus one.
1:05:05
We haven’t talked about order yet, but guys, look at what we’ve got here. Auto alternating content on our website. And if I add another card, like I just decided to duplicate this one, they all reorder, they all reshuffle, they all fix themselves. Do you think for one second that I’m gonna engage in chump-like behavior of manually dragging and dropping cards around? Oh no, no, no, no, my friend. That is not the life that you want to live. You want to automatically order your cards. Alright so I’m gonna go ahead and hit save here. We’ve got one thing left to do. Why do we have a button floating down here for no reason? Let’s go ahead and delete that. Alright so I need my very final little section here which is going to be it’s gonna have a blue background. For now what I’m gonna do is just give it a light gray background just like my other one.
1:06:03
So let’s go ahead and grab it. Background, get in there with a light gray, just to give it some of that separation between the other sections. Okay. And this should be a relatively easy one. It’s just centered content, but this is a very easy, I’m just going inside this container, heading, then we want a button, then we want text. We need to make sure that that text is in fact a paragraph. Now let me flip back real quick and let’s talk about this. Do you feel like this is a CTA kind of thing that I might use in various places of this website? Seems to me there’s a strong chance we may use this over and over again. When in doubt, BIM it out. So in this case, because the whole section is like this, I want to create an entire section class with my BIM. So this is going to be called a CTA section. Let me take off the background from our ID and make sure that the background is actually set on my class. Okay, now I’m going to come in here and this is going to be CTA section double underscore inner. And then on that, what I’m going to do is I’m going to row gap everything with content gap.
1:07:16
And then I’m going to replace the content. So this needs to say, delight your customers and win them over for life. Did it allow me? Oh, it did, it did. I just can’t see the selection happening. All right, then it’s gonna be unlock your free trial. Nothing required there. Let’s go ahead and paste that in. Perfect.
1:07:35
And save, refresh. Guys, we have outlined this entire page. We’ve done it in a very scalable and maintainable way. We’ve tokenized our styling. We’ve used CSS grid for the majority of it. We use Flexbox in one situation. Our logo is right here. All we have to do now is come in and and style some stuff and we’re going to be very, very close to having achieved an exact replica of this page right here. There’s not a lot more to do to get this page really to where it needs to be. And so I’m hoping, let me go back to camera, that you’ve seen a lot of the concepts that we’ve talked about so far really start to come into play and be put into practice here and how insanely helpful they are.
1:08:25
Remember, we’re not racing to see how fast we can build the page. We’re racing to see how fast we can build the page according to best practices. To make it scalable, to make it maintainable, to make it consistent, to make it automatically responsive. Those are the boxes that we’re trying to check. Anybody that’s in the mindset of I could have done that faster by styling at the ID level. I could have done that faster by just using utility classes everywhere. Remember, these people are not checking the boxes of scalability, maintainability, and ultra consistency. They’re only checking one box. I’m checking lots of boxes, and I want you to be checking lots of boxes too, because I don’t want you to be creating nightmare scenarios that these other developers are going to find themselves in.
1:09:12
Okay? It’s like if I, my daughter’s in softball right now. She loves softball. And yeah, I had to explain to her the other day, honey, you got to go fast, but you got to touch all the bases. Okay? If you’re halfway to first and you just take a left turn and cut across the pitcher’s mound over into the other side of third base where the shortstop is and then just come on home any, any which way you want. Yeah, you got home faster, but you didn’t score any points did you? Because you broke all the rules. You didn’t check the boxes you were supposed to check along the way. So speed is important but speed comes from experience and practice because we need to make sure that our speed is still touching each base before we try to say we scored a run and got to home plate.
1:10:01
All right. I’ll be back with the next lesson. In the meantime, I want you guys to take Messagely and I want you to practice creating the Messagely homepage. Don’t worry about the header. Don’t worry about the footer. Just create the Messagely homepage with CSS grid, tokenized styling to get our layout. Don’t do any other styling right now. Just focus on the layout and the spacing and all of that. And then let me know how it goes.
1:10:30
Drop some comments, questions, whatever. I am glad to help you. I’ll be back very soon with another lesson. Peace.
