0:00:00
Hey, what’s up everybody? Welcome to today’s training. As you can see, my daughter Noelle is with me for this training. This is actually going to be a series of trainings. A lot of people have been asking me for Bricks 101, like super beginner kind of content, and Noelle is what you would classify as a super beginner. She does a lot of art, and she is very artistic and I’ll probably clip in you know a piece for artwork here So you guys can see that? Can you show both of them cuz I’m blue the blue ones here. Well, yeah both of them. I guess you can do the Red one first. Okay, so we got Noel an iPad for Christmas with a iPad with an iPad pencil and Procreate so that she can start learning Procreate. Well, I already had Procreate.
0:00:50
She already had Procreate on her old iPad, but she didn’t have a pencil. I didn’t have a… Well, I did until I lost it. And she hasn’t really been… She hadn’t really learned Procreate. She was just, you know, working with it, but we started… It was kind of just like… Watching Procreate videos and all that kind of stuff. So she’s actually learning Procreate, which is a legit app. Yeah.
0:01:08
It’s not just like a… It’s what pros use. It’s not like for four plus… Yeah, it’s what pros use. Yes. So this is one of the digital, what is your second one? Yeah. So this is the second thing that she created in Procreate. They take about maybe three hours each, two hours. Okay.
0:01:26
Yeah. So she’s been working, this was the first one that she created. So yeah, she’s learning Procreate, she practices art all the time, she watches a lot of artists. Very artistic. She’s a great artist. She’s a great artist. She’s a great artist. She’s a great artist. She’s a great artist. She’s a great artist.
0:01:46
She’s a great artist. She’s a great artist. She’s a great artist. She’s a great artist. She’s a great artist. She’s a great artist. She’s a great artist. She’s a great artist. She’s a great artist. She’s a great artist.
0:01:56
She’s a great artist. She’s a great artist. She’s a great artist. She’s a great artist. She’s a great artist. She’s a great artist. She’s a great artist. She’s a great artist. She’s a great artist. because it is very valuable, very valuable skill in web design.
0:02:09
But she is interested in learning web design and development and making money from that kind of thing. And we’re gonna teach her today. We’re gonna get started and just basically start from scratch. The whole concept is, hey, let’s pick, which I’m gonna go ahead and share the screen real quick and show you guys. We went to Theme Forest and just kind of poked around. And the idea was like, all right, if she had a personal blog kind of website to showcase her artwork and maybe write about her art a little bit and kind of document her art journey you know what kind of website would she like and this is the one that we picked out and we’ll just kind of use this as inspiration to start you know recreating this not doing all the little details and everything right now but just getting the general structure and functionality down. We’ll be doing this in bricks I’ve already explained to her, you know WordPress and bricks. So WordPress is a content management system a CMS It’s basically for organizing all of your posts and your pages and your images and in her case artwork and things like that And then we use bricks, which is a page builder and I explained to her. I’m gonna go ahead and inspect this page.
0:03:15
I explained to her HTML, the language of HTML for building out website structure and the language of CSS over here on the right-hand side, which stands for cascading style sheets, where you put all of your styling for your website. And then I also explained that, you know, some people are able to write HTML by hand and write CSS by hand, and some people are not. If we use a page builder, the page builder writes the HTML for us, the page builder writes the CSS for us. That’s exactly where we’re going to start. So what we have to do is learn the page builder method of building websites.
0:03:52
Eventually, we want to learn how to write HTML. We want to learn how to write CSS, but we’re going to let the page builder do a lot of the heavy lifting right now. We are not going to be building with automatic CSS. We’re not going to be building with frames. So we’re going to build it from scratch just like you would if you were a beginner opening up bricks. And that’s going to allow her to learn some of the process outside of you know the language of automatic CSS, which I think would be you know a better starting point for somebody like Noelle. You can learn either way, it doesn’t really matter. But in her case let’s just learn it like raw and then we’ll build in automatic CSS over time.
0:04:31
I also wanted to see when she starts using automatic CSS, how it does give just a tremendous amount of shortcuts and you have to make a lot fewer decisions when you’re building websites. So it’s good to do it the hard way and then be able to do it the easy way. All right. So what we’ve done is on local, we’ve built our first website or we just installed WordPress and in the WordPress admin, we have installed the Bricks theme already and we have installed one plugin, which is WP CodeBox and we’re kind of get off to the races here.
0:05:06
So I’m gonna hand over the mouse to Noel and I’ll just be telling her what to click and what kind of things to do and we will stop and talk about some things here and there. But let’s go ahead and click on bricks up here at the top first. Yeah, hover over bricks right there and then settings. So the one thing we didn’t do yet is really set up bricks. So we just need to make sure that a couple of these settings are correct. So for SVG uploads right there, you want to click the button next to administrator. We’re the administrator, so we want to be able to upload what are called SVG files, so we’re going to turn that on.
0:05:44
We can disable, disable, disable Bricks Open Graph, disable Bricks SEO, you don’t have to know what these are right now, go ahead and click them so we can disable those. Yeah, so click that one. Noel is 10 years old, by the way, so if you’re wondering, school level will grade you in. Okay. All right, so if a fifth grader can do this stuff, then it should be super easy for you guys, right?
0:06:12
That’s what we’re trying. We’re trying to explain it to a fifth grader so that everybody can understand it. All right, disable BricsMeta SEL, hit that toggle too. Hit generate custom image sizes, yes. And let’s do save settings at the bottom. So bottom left there’s a blue button, yep. Now click Builder Access, tab at the top. And we’re all good. Code Execution Administrator, and then hit Save again.
0:06:41
So every time you go to a new tab, you gotta hit Save first before you go to a new tab. Now do Templates. So everything’s up at the top here. So then you tap now do templates. So everything is up at the top here. Okay. So we’re going to disable default templates. Okay. Hit save.
0:07:01
And go to builder now. And we’re going to disable auto save. First that first option up there at the top. Right there. And we’re going to go to builder mode is dark. So that’s fine. Everything else is fine. So the toolbar logo link, we want it to open in a new tab when we click it. I’ll show you what that means in a minute.
0:07:24
Should I press that? Yep. And what we’re gonna do is structure panel, collapse on page load, and expand active. Click both of those. Okay, scroll down a little bit. Perfect. All those are good. Keep scrolling down. Down, down, down, down, down, down, down, down. Save. Okay. Go back to the top and click on performance and do and disable jQuery migrate, and add element ID and class as needed, and CSS loading method, click the dropdown.
0:08:03
Wait, right there? Right here, yep, and choose external files, and then hit save. All right, and then we don’t need to do anything else. So basically what we’re just doing is setting up Bricks so that it works kind of the way that we want it to work. Now what we’re gonna do is click on the, it’s called AdVenture way at the top, that theme that we were looking at. Where?
0:08:34
AdVenture right up there, that tab. Higher, yes, yeah. Okay, so that’s, now we can switch back and forth between this site that we want to look at and then your site where we’re going to be building stuff. Yeah, okay. So the first thing we need, so yeah, click on AdVenture. The first thing we need to start working on this home page. So this whole page we’re looking at right here is the home page.
0:08:55
And you see home is the word and it’s lit up. So what we need to do is go to your site now, let’s click over to the other tab that we were on and go to Pages on the left-hand side way over here. Oh, Pages. Okay, all right. So see that sample page and Privacy Policy, just click the check boxes next to those pages. This one? Yeah, and the next one.
0:09:17
And then go to bulk actions and hit move to trash. We don’t need either of these pages. Hit apply. So now your site has no pages whatsoever. So now we need to add our first page. What page are we going to add first? The home. The home page. Hit add new. Wait, where?
0:09:35
Okay, and no, you went to media. So under pages, hit add new. Let’s try again. Yeah, then add new. All right, perfect. Now this is just welcoming you, so just go ahead and close that. And then under add title, see the cursor’s already blinking, you can just type home. Yep, perfect. Now hit publish over there on the right side. Nice. Again. Okay.
0:10:08
Now we want to actually design this page, right? So we have to open Bricks. So there’s a yellow button up there that says edit with Bricks. Okay. So now this is your homepage, but it’s blank, right? Because we haven’t put anything on it. Is that what you would expect? Since we haven’t put anything that is blank. Okay good all right So what we’re gonna look at is the builder first all right and the builder We just got to kind of know our way around first so over on the left-hand side of the builder What does this look like you can do with these things?
0:10:37
Yeah, talk a little louder you got to talk into this mic All right what kind of stuff you can start seeing icon Mm-hmm. You can add icons. Yeah, we can get to that. So you see there’s a lot of stuff you can add, right? Well, you probably don’t want to map but other people want to map so, you know when they make a builder They got to make it so it works for like a lot of different people not just you right So there’s things that you don’t necessarily need. And see Bricks, if you hover, see that little pin icon that comes up? That allows you to pin it to the top, and that’s useful for stuff you use over and over and over again. So if I wanted like a logo and I’d use it like a bunch of times, I would put…
0:11:25
Yeah, yeah, yeah. So to scroll up, you’ll already see that there’s four up there that are already kind of at the top, and that’s section, container, block, and div. So go back to the adventure theme up there. Yeah, so when you’re building a website you can’t just, you know, drag things like, you know, in Photoshop or Procreate, use Procreate, right? You can just put things where you want them. You can just paint them on a canvas, right? You can’t do that online. You can’t do that with websites. You have to think in boxes and blocks. Everything has to fit in boxes. So if you see that, let me see the mouse for just a second. So this, I’m gonna outline it. This is obviously a box. Yeah, but it’s an image, okay? Right, but what you don’t see is a box that starts here and goes all the way across to here Or probably here and then comes down and then way back across and then up right and that houses all Of this content right here, and then there’s a box right here here that houses this. It’s all boxes. Yes, it’s all boxes. This is a button which is also a box basically. These are boxes. They’re held inside of an invisible box.
0:12:34
Right? So how many boxes? Four. And there might be even big boxes inside these boxes that you can’t see. And you’ll see why there might be boxes inside of these boxes that you can’t see as we start to build it. This has to be a box right here. And then inside of a box, you can set the direction that content flows. So this content, you have two items. One item here, which is your heading, and one item here, which is your text, and those sit next to each other.
0:13:04
So those flow in a row, right? But you can also flow things down in a column, right? So you can flow things in a row, you can flow things in a column. That’s actually called flex You can flex things in a row or you can flex things in a column make sense Yeah, and so when you’re in the builder, these are all different types of boxes Okay, so a section is your main box if you click on section it’s gonna add a section of content Which is actually two boxes now This is called the canvas right here and the canvas is where you see everything happening. That’s like where you would we’re already getting our canvas. We’re already getting artistic see all right So this is your canvas on the right hand side. This is your structure panel. This is where you can see the outline It’s basically an outline of your page. Okay, so everything that you add shows up over here In a list and everything you add shows up here visually Okay, then you have at the top this is allows you to see different breakpoints different devices basically So, you know when you build a website, we’re looking at it on a giant screen, but somebody else might go and pull it up on their phone.
0:14:09
Okay, you’ve gotta design it. That’s for? Yeah, so you’ve, because what you have to do is change the design of it based on the device. So you actually have to design the website like four different times. Four different designs. Right. You gotta design the website. You gotta design it for desktop, design it for a tablet, design it for a wide phone, design it for a narrow phone, right?
0:14:29
So you’ve got to account for all of those things as the web designer. What are we on? Are we on? We’re on desktop first. All these are different settings up here that we don’t even need to worry about right now. So the first thing we want to do is we want to get rid of this. I’m going to bring you back to a blank slate like we were. This is the save button up here. If you want to preview your site, you can click the little Bricks logo and it’ll open a new tab where you preview.
0:14:53
And see, we haven’t added anything. So preview is that, is that like where you see like without editing it? Yeah, it’s like what other people would see. Somebody who arrives at the website, that’s how they would see it. Okay. So they wouldn’t see it this way. They would see it the other way. Yeah. Nobody sees the builder. This is, nobody sees Bricks.
0:15:09
Okay. Okay. So here is your inspiration. We’re going to start this first section right here is called a hero section okay we’re going to ignore this like bias a coffee sidebar thing over here you’re not going to worry about that so the main section is a hero section and it’s a section obviously so what I’m gonna have you do is click the section button so remember your tools are on the left section there you go you had a section and then you see a box inside a box. Yeah, OK, yeah, exactly.
0:15:40
So now go back to a venture. Go back to the theme, the adventure theme. And basically, we want to know what other elements we need to put in our box. So what kind of element is this right here? Like photo? Yeah, it’s an image. Image. Image, OK. What’s this?
0:15:56
This don’t put your life. This is a word. It’s like title. Yeah, heading. Yes. Heading yes, and then this would be like a kind of like an accent heading Yeah, it’s like we’re gonna make it a paragraph technically okay, and then what’s this thing this says follow my stories That’s a button okay, so we need an image we need a Heading heading we need a paragraph which is text yeah text okay, so image heading text button Image heading text button okay go back to your tools okay so now we’re gonna click inside that box so you want to add a new element you want to add an image right well first you tell bricks where you want to add it so you click on the box that you want to add it to then hit the plus sign and then you are free to add so go ahead and type in oh here’s a shortcut if you type in the word image it’ll automatically find it right there. You can stop. See it already found it So now just click on image And if you think you’re going to use image over and over and over again Which you probably are click a little pin and it’ll see that’s right right the top way now I would click pin on these things to click pin on sections You’ll use that all the time you’ll use the container all the time the block all the time Yeah, you use the diff. Yep. That’s a box. These are all your boxes. They’re all different types of boxes. So now all that stuff’s pinned at the top for you Okay, always Yeah headings headings you use all the time. So go ahead and pin that and then go ahead and pin basic text. What’s rich?
0:17:26
Rich text I’ll show you in a minute. Go ahead and go ahead and pin that and go ahead and pin button yep, pin rich text too and That’s that’s good for now Okay, let’s select your Your image which we want to here we’ll just do this real quick Okay, just we’re gonna just take a photo. Hey smile bang done. Okay, so I’m gonna email or actually I’ll just I’ll air drop this and We’ll be able to upload your photo Okay So we will air drop to Mac Studio.
0:18:03
You barely left my file. Sorry. We’re just moving quick. Okay, go ahead and hit, there it is, hit image right here. Wait, it’s like that? Yep, that blue. Yep, click it again. There you go. So now the panel changes because you’ve selected an element, you have new options.
0:18:19
So instead of adding more elements, you can actually select your image over here. Select image, so I press that? Yeah. And then it’s saying hey you can says drop files to upload or select files So the easiest way yeah, you can do select or if you want to drag and drop it which I normally do click finder Because now you can see the file and just drag it into that white window right there And it’ll automatically upload it now go ahead and hit insert And there’s your photo. Okay?
0:18:52
All right, now go back to, actually, what else do we need? So we said an image, heading, text, button. So with your- How could I find this? Oh, we’ll talk about that in just a minute. Let’s get our elements in there first, and then we’ll talk about it, okay? So hit the plus sign. And now you wanna add your heading. And you’ve already pinned your stuff that you use a lot, right?
0:19:15
So it should be easy to find and then add your text by clicking text. Oh, text. Wait, right there? Wait, no. Wait, what? Wait, I hear it. No, it’s in your pins. Everything you pinned, right? It’s in there. Basic text. Yeah, basic text. Then your button. Button.
0:19:30
Cool. Now, I added them backwards. So you can actually drag and drop things. You can either grab them and drag them here in the canvas or you can drag them in the structure panel. I usually drag them in the structure panel because it’s easier. That’s the structure panel yeah so go over there with your mouse grab heading and drag it to be below yeah drag it to below image no no don’t drag it into the canvas just drag it up in the panel up in the structure panel. It’s showing you that it’s gonna go before so now it’s before here. And I want the button, could I do the button under the…
0:20:04
Yeah, the button under the text. Button. So drag the button below the text. There you go. Okay, now obviously if we go to Adventure, go back to the Adventure page, you see that their stuff is to the right and the image is to the left, okay? Mine’s kind of like the image below. Right, so we need to figure out how to make this happen right here.
0:20:27
And the thing is, remember I said boxes, and there might be invisible boxes that you can’t see. And you can think about these boxes as just groups. You’re grouping items together. So I think about the image as a group, okay? And then the other group is what? So there’s the image and the other group is? If you’re looking at this page right here, you’re looking at that hero section what’s the other group what other content gets grouped together besides the image you’re looking at it right here the elements title the heading the heading so the heading the basic text uh-huh and then the button right those are three elements right but if they’re a group they become what one element yeah so this is really one element next to one element right if all those things are the separate elements they’re not grouped together that means you can drag them independently but really they go together because they live together on the page right wait how would I how would I do the basic text in like in that font and this one yeah we’ll talk about that in just a second first we got to get the alignment down.
0:21:37
Okay. All right. So go back to our builder. So what we didn’t do yet is we didn’t group our heading, our text, and our button. The way you group things is with another type of container. Okay. So what we’re going to do is click on the container over here. Okay. That’s our main, basically our main group. That container houses our image, our heading, our text, and our button.
0:21:59
Right. But we need our heading, our text, and our button grouped separately. All right? So we’re going to add, hit add element. We’re going to add a new kind of container. Yeah, the plus sign. Yep. So this time we’re going to add what’s called a block, which is a different type of container. It’s not a section. It’s not a container container.
0:22:16
It’s a block. So there you go. Add a block. And it added it right there. It’s a blank container. If you take your heading, your text, and your button and drag it into the block, it’ll group them all into that block. Wait, okay, so like under it, do I put it under it? Yeah, so if you, yeah, see how it’s indented? Now I put it in with an arrow. So hit the arrow and it’ll open the block.
0:22:38
There you go. Now drag the text below the heading. Yep, now you dropped it outside of the block, right? You’ve gotta pull it in to the right under the heading. Keep going up a little bit. Right, see where the yellow bar’s telling you. Now drop it. Now do the button. What if I wanted it a lot out? Well you don’t want it out because you’re trying to group them together, right?
0:23:04
So see how it’s out? There you go, just like that. Now does it look any different? It doesn’t look any different. You can’t see any difference. But structurally there’s a difference because you’ve created another block which is a group. Now we can put those two blocks side by side and you’ll have the layout that you want. Now the thing with Bricks is, let’s go ahead and click on container. So that’s our group that has our image and then our other group, okay, which is our heading text and button. So we can use Flexbox to put things side by side or we can use something called grid. I like to use grid. Okay, so go ahead and click on the style tab. Actually, sorry, not style yet. Hit content. See where it says display? Flex. We want to change that to grid.
0:24:04
Now when you do that, it adds these boxes for you. Now this is where you kind of have, remember I said the builder will write the CSS for you? But in this case, you still got to kind of know some CSS. Okay, so it’s very easy though. We’re going to make it super easy. So under grid template columns, click in that box that says grid template columns. Grid, that? That’s grid template. There you go, the first one. Yeah, it tries to put the most important stuff first. Okay, good to know.
0:24:36
So more important stuff is toward the top. All right, so grid template columns. How many columns do we need? We need like, so the columns would like. So go to the Adventure page. Adventure. So. How many columns do you see? If you’re thinking in boxes. How many groups are there?
0:24:58
Two. Two groups. So how many columns do we need? Maybe two. Two. Yeah. So one column for the image group, one column for the content group. These could also be different boxes. They’re different boxes, but they’re not columns.
0:25:16
Yeah, they’re different columns. There’s only one column here and one column there. Alright, so go back to the home builder. Alright, so what we want is two columns, right? So we have to define the columns. There’s a unit called FR which stands for fractional units. You don’t even have to know what it means, okay? You just know that a column is one FR. It’s equal to one FR. Okay. For now. Fractional. One fractional unit. Fractional unit. Yes. FR. FR. Okay. So just put one FR. So where do I do that? In the grid template columns box that you already clicked on. So just type one FR. One. Oh, literally. Yep. FR. FR. There you go. Now that’s defined one column. So look, nothing, nothing changed. Nothing. But if you put a space, so that was one column. Now if you write one FR again, it’ll make another column. And look what happens.
0:26:09
Whoa! Okay? So that’s the simplest way to create a two column grid. You’re saying, think of FR as like a group, a cell. It’s like a cell of content, okay? What if I put two FR? What would happen? Okay, we can play around with that. So, but you take one FR and put it next to another one FR and you get two columns that are equal in width.
0:26:30
So the left is exactly equal to the right, okay? Now change one of those FRs to a two instead of a one. Two FR. So what’s the difference? It’s smaller, is it smaller? Yeah. Is that what I’m seeing? The text side is two times the size of the other side. Because a two is two times one. Make the two a three.
0:26:52
Three. F, R. So now the text side is three times the size of the image. Now make the one a two. So you can have a two. So you can have a two and a three. Two. So now the image side is only 50% larger. What if I did a five? Yeah, try five.
0:27:22
You get different ratios, basically. So now the image is much larger than the text side, right? So go to the Avenger, and that’s why I like Grid, because it’s easy to play with the ratios, right? So what does that look like to you? Does it look like they’re both equal? Does it look like the image side is bigger? Well, I think that the words are bigger on this one, like the nine. But what about the column width? The column.
0:27:53
We can actually inspect this. I think the picture is bigger. To me, it looks like the image is either slightly bigger than this or they’re equal. So slightly bigger. You already have slightly bigger four is slightly bigger than three All right, slightly bigger. So we’ll just leave that for now sound good. Yeah, okay So now what I want you to do is click on the gap box because you see we have a problem Yeah, yeah, so at the top because it’s important right here Okay, okay, so see our content our image and our text is touching each other. Does that look good? Not really, does it did it look like that in our in our example?
0:28:31
No, cuz look This is like let’s say an inch Two inches there’s a two inch gap right there. Okay, so click on home builder All right So we’re gonna put in a gap but you can’t say two inches nothing online is measured in inches because two screens are Well, they used to be measured in pixels, okay? Yeah, yeah. But we try to use what are called relative units because all screens are different now. They’re not all the same. I don’t know how to spell relative.
0:28:59
No, no, you don’t. Okay? So what we need to know is what are our relative unit options? Well, we have an M, which is an EM. So type EM for a minute. Okay? And that’s just a unit, but you didn’t give it a value yet. So before EM, type in a number just like we did with the frs you have to have a number so what just happened five okay so what do you see i see a gap two inch now instead of m do rim rem so just add an r okay do you still see a gap. It’s bigger. It’s bigger. Okay, but you’re using five. You haven’t changed the number, right? You’re just changing the units. But don’t change the number yet. Let’s just go through all the units. Okay, so notice that there’s different sizes, but you’re not changing the number. It’s still five, right? All right, now do VH.
0:29:59
How much of these do I have to memorize? Oh, you have to memorize all of them. But, how much are there? Ten? Yeah, there’s like eight or ten. But they’re easy. And the reason why we’re doing this is because I want you to know what they all mean. So we did M, we did RAM, now do pixels. So PX. Okay. PX.
0:30:25
That’s what pixels looks like. So that’s very, very tiny. So five is very, very tiny for pixels. Okay. What if I did one? Would it be just like barely? You could also do, yeah, yeah, it would just be one pixel. Very tiny. Okay. Now do CH.
0:30:40
CH. Okay. Okay. So you’re seeing all these different units and they’re all creating different gaps. The question is when do I use ch or m or rem or pixel or VH or VW? Or V min or V max or any of these others, right? For the most part when you’re doing gaps like this, there’s also clamps. There’s also calcs Calc functions. Yeah math. Yeah, you can you have you can do math in styles. Okay, it’s actually really really powerful And you’re good at math. You’re good at math. Okay. So for the most part, what we’re going to do to make this easy is you’re going to use rims, the R E M value. That’s like the easiest one to remember.
0:31:15
This is relative to pixels. Okay. So if you have 5rem, what’s 5 times 10? 50. 50. 5rem would be 50 pixels. Okay. I see. So, in age. There’s 5rem. Okay. Now change this to 50 pixels and they should look exactly the same. 50px. It does. Exactly the same.
0:32:00
Okay. So take away the 50 pixels and put 5Rim again. 50 pixels, 5Rim? Yeah. And we don’t need like capitalization, right? Right, now, here’s the problem, right? You put 5Rim, you’re gonna build this whole website, okay? So I’m gonna go back to here for you. You’re gonna need gaps. Look how many gaps you’re gonna need. You’re gonna need gaps everywhere, right?
0:32:24
Definitely gonna use gaps. You’re gonna use gaps over and over and over again. You’re going to have to remember that you use 5RM as the value. If you want all your gaps to basically be the same, you’re going to have to remember that you use 5RM over and over again. And listen, you’re going to have to write 5RM over and over and over and over again. But you don’t want to do that because there’s a principle in web design called DRY, dry. Don’t repeat yourself. Okay, so you don’t want to repeat the same instruction over and over and over again You don’t yeah, you yeah, you don’t want to be dry Okay So what we have to do what we can do is save that as a style we can basically what we do Not yet. We create what’s called a class a class allows you to it’s like a preset It allows you to style things with just a class and whatever instructions you gave the class, it applies those automatically. OK, so what we’re going to do is we’re going to create a class for that gap.
0:33:22
Alright, so I want you to take off the gap now. If you hover over the word gap, see that red X that appears? Click that. It makes that style go away. Now what we’re going to do this box at the top is where you add classes. OK, so we’re going to add a class called. Let’s call it grid gap. Grid, alright, freeze. So in classes online you can’t use spaces, so we always use dashes. So you just dash, wherever you would put a space you put a dash. Okay. Grid dash. That’s a forward slash. Oops. Where is it? Dash is right here.
0:34:04
Dash. Gap. Oh, like a minus. Yeah, like a minus sign. There you go. Alright. Gap. Okay. And hit enter. Okay, you’ve added this class, but you haven’t told the class what to do yet. You haven’t given any styles. So now go to the Gap box again. Wait, I like that font.
0:34:20
Oh, you do? Yeah, I want that for here. Okay. Well, I don’t know what that font is. We can look it up. We can look it up. Alright, so go to Gap, the Gap box down here. Yeah. And put your five rim in. That’s an R, five rim. There’s your gap again. Okay, I think, what just happened?
0:34:35
What did it do? Oh, that’s right. Okay, there’s a bug in Bricks where, wait, maybe not. Let me save. Let me refresh. Champ, I’m a champ. You’re a champ. Okay, no, it did it right. It did it right. Okay, so grid gap gets a gap of five rim. Okay I wonder if I should do it in the we should do this in the late now We can’t really do it there either. Okay, so now watch I want you to Remove that class real quick wait this. Yeah, so hover over the white grid gap word and see the X That boom so now your gaps gone because your class is gone now add your class back, so type your class again or really just select it from that drop-down and watch. It just applies the gap for you.
0:35:20
So anytime you’re building the rest of the page you’re like, oh I need a gap there. So how do I save it again? Just one more time, just to refresh. You save it. You made the class and then you assign the style to it and then whatever element you attach the class to, a class is like a label. It’s like you just took a sticky note and popped it on something, you just gave it a class. And you can put more than one sticky note on the same thing, right? So you can put a sticky note for gap, you can put a sticky note for margin, you can put a sticky note for padding, whatever, okay?
0:35:49
All right, so the next thing we need to do, see how your content is touching the top of the screen? It’s because your section container has no padding in it, it has no spacing on the inside. I don’t like that. You don’t like it touching, right? Yeah, I don’t like it touching. Okay, so click your section, which is this blank area out here. Section. This here.
0:36:07
Yeah, see that orange wrapper? Yeah. It’s an invisible box, basically. Okay. We can give it a background color for now, just so you can see it better. Okay, how do we do that? So go to Style. Oh, yay! Background. So close that layout box by clicking on it.
0:36:20
Oh, wait. Layout. Okay. And then click Background. Background. And then click that little background color droplet swatch thing. And then… Wait, can I make my own? Yeah, you can grab a color. But I want like a really light green.
0:36:33
Okay. That. Okay, all right, good. All right, so now you can see your section better, right? Yeah. So now what we have to go to is the layout tab. We gotta add some spacing to our section. Okay, so layout, layout this. Yes. Now we’re gonna add padding to this section.
0:36:51
Are you going to use sections over and over and over again, or is this going to be the only section you ever add on your website? I think I’d be over and over and over again. Okay. So what did we learn about styles? You don’t want to be dry, right? No. So don’t repeat yourself. So if you’re going to use sections over and over and over again, when we add this padding to our section, do we want to add it to this one section, or do we want to create a class and add it to the class?
0:37:14
I think we want to add a class. Okay. All right. So let’s add a class. And you want to name your classes something that you’re always going to know exactly what they are. So you click this box right here for classes. That’s the classes box. Sorry. And let’s call it, what would make sense for section padding? Section padding. Okay, let’s go. Section padding. You had two I’s in there. Okay. And then a dash. Okay, section padding.
0:38:02
So hit enter. So now that you did make the class, it automatically assigns it to that section. Now in the padding box, you can put padding values, okay? So click on the top. So this is the padding. This, that’s margin, this is padding. So this is showing you top, bottom, that’s the right, that’s the left. I want that, I want that fall.
0:38:20
Okay, okay, we’ll figure it out. All right, so come up with a value. What do you want to put? You can’t use inches. What can you use? Pixels of light, not pixels, rems. You can use pixels, but we want to avoid. Yeah, but rems. Rems, okay. So.
0:38:36
Five rem. Wait, five rem is that. That’s that gap, yeah. So maybe, yeah, five rem. Okay, now do the bottom. Oh. All right, now go look at a venture and see if we can. Her background is great. All right, so here’s from the top to the bottom. How much does that look, more or less padding than yours?
0:38:55
More. More, all right, so go back. Because usually sections have more padding. Okay, so instead of five, what can we do? Maybe double that? Eight or ten. Yeah, try ten. Okay. Let me do the top one first. Ten. And that’s like hers. And now one of the general rules in design and art and all of that is you want to achieve balance, right? So you don’t want the top to be ten and the bottom to be 5. Usually the top is 10 you want the bottom to be 10 too. Perfect. Now that looks pretty good.
0:39:48
That looks like, wait, hers looks like maybe like 12. It’s pretty close though. 12 yeah. Pretty close though. Okay. Her picture is also bigger. So what do you, what else do you notice? You notice that, go back, notice that her text has spacing between it and there’s spacing between the button and all that. Okay, so go back. So yours is all squished together. I don’t like that. You don’t like that, okay. So select the box, the group that houses, and it’s an invisible box, you can’t see.
0:40:20
Except for when you press it. Okay, all right. So you want to add a gap between your items as well. So there can be a gap in a grid, there can be gap between items. So this is a different kind of gap though, right? It’s what I call content gap, because that’s your content, you want a gap between your content. So let’s make a new class called content gap.
0:40:42
So the box above that, that’s your classes box, content gap, dash gap. Minus dash gap yeah OK hit enter. Alright perfect now let’s assign a value to that so there’s actually row gap and column gap down here. You just care about row gap so Rose is like on top of each other right? Yes, columns is next to each other. I don’t know this is ever next to each other. It’s always on top so you just need row gap and maybe not as big as your grid gap, maybe like…
0:41:16
30 rem? Yeah, try that. Sounds good. Okay. I like that. But maybe even smaller. Okay, we’ll try smaller then. One would be too small. You can actually, you wanna know a trick? What? Type three rem in again.
0:41:30
Hit the down arrow on the keyboard. Look what it’s doing. Hit down again. Just keep hitting down. See, now you can watch it over here. So get it to where you want it. Using up and down. I like that. Cool? Okay.
0:41:44
So you’re at 1.4 rems, that’s about 14 pixels, right? 1.4 times 10? 1.5. All right, 1.5 times 10 is what? 10. Wait, what could be points? 1.5 times 10 is 15. Oh yeah. Okay, 15 pixels. You just add a zero and move the decimal over.
0:42:16
All right. I don’t like decimals. I know, I know. All right, so what we have to do now is, wouldn’t it look good if this content here was centered next to your image instead of being way up at the top and then leaving all this blank space down here. Okay. So for that, we have to use Flexbox. Remember I said you can flex column in a row, you can flex in a column? But not yet.
0:42:40
Hold on. We don’t want to make a critical error. If you style anything in this panel, it’s going to add it to that content gap class. But that content gap class is only for one purpose, and it’s to gap your content. It’s not to align your content or move your content anywhere, it’s only to gap it. So you gotta turn that class off while you do your other editing. So do I press X or no? So no, you just click it.
0:43:02
Click the, here let me see, let me show you. Okay. So if you just click it, now look, if I click it, it puts it in yellow up here, that means I’m editing it. If I click it again it removes it and I’m not editing it. Okay. Make sense? Okay. So now what we have to do is we have to align this and if we look right over here, okay, so you see all these alignment options and see how it’s display flex. Thankfully all these are display flex by default. So which of these icons looks like it’s going to move your content to center? I know they’re kind of hard to decipher at first. Yeah not self but in main axis you’re either looking in main axis or cross axis and I’ll explain these to you. Okay maybe cross because cross means like well yeah so normally flex is a row by default but in bricks it’s a column by default.
0:44:03
And then there’s actually two icons here for column or row. So if I do row, look what happens. Oh. But if I do column, watch what happens. Okay? That’s what you want, right? Yeah. So the main axis, so this main axis matches whatever this is set to. So this is set to column.
0:44:21
So the main, it’s gonna do stuff like this, up and down. The cross axis would move it on the row because that’s that’s crossing the column. Okay. I know it’s a little it’s a little hard to understand but watch if we click this look what happens to your content over there. It positions it in the center. Main axis was I right? Because I said main axis. Main axis. Yeah. You were right. Well and then once you said stuff I was like I was Yes, alright, so time to add your content because these are just placeholders. So say like, hey, I’m Noel. Hey, I’m Noel. Yeah, type it, let’s go. Then we’re going to call it a day.
0:45:02
So hero section is enough. Hey. I’m so bad at this. Here, you can just take the keyboard. Hey, I’m. Okay, and then down here, what do they do on the adventure site? On a waiting list. Don’t put your life on a waiting list. We just, hey, I’m Noel, put, let’s see. I’m an artist.
0:45:30
There you go, put I’m an artist. Okay. Okay, and Then for your button say join my list So this is called a call to action. You’re asking your visitors to do something Okay cool So now we want to style our button see her button is like gold It’s got like uppercase letters and all of that. What kind of color do you want? Maybe something that matches this but like not too much. All right, so click on your button. Now, are you, let me ask you again, is this gonna be the only button you add to the site, or are you gonna add buttons all over the place?
0:46:11
I think I’m gonna add buttons all over the place. Okay, so what do we wanna assign our styles to? Styles, we’re gonna go to, do we go to style? Well, remember those things called labels, or what were they called? Labels, the… Class? Class, yes. Okay, we want to assign our styles to a class so we can use the class over and over and over. Anytime we have a button we just assign the label, we just assign the class. Okay, so let’s create a class called button, but we can just make it abbreviated to BTN and hit enter. Boom, so you made your class for your button.
0:46:49
Now you can style because you are styling your class, which is smarter than styling one individual button. Okay? All right, so go to style. First click button, so you can hide, you gotta activate your class over there. So wait, where? Click BTN. Button. Now you’re assigning styles to that class, so hit style.
0:47:08
Style right here. Yep, and go, so layout. What we wanna do is we want to make your button bigger. We don’t necessarily want to make the text bigger, but we want to add padding. And it’s going to make your button look bigger. So let’s put some rim values in there. And actually, let’s learn about the M value now. We can use M instead of rim.
0:47:30
So do 1M. 1M. 1M, yep. And I’ll show you a shortcut. See that little link right there? If you click the link, it’ll automatically apply that to every side. Wait, so. Click the little link icon right there. Wait, wait, wait.
0:47:47
Yes. Yeah. Okay. See? Oh. So you don’t have to type in every individual box. Yeah. But typically with buttons, you want the sides to be more padded than the top and the bottom. So change the size to two. Two.
0:48:02
Oh, you got to unlink them first. So hit 1M, add 1M back, 1, and now unlink. Now you can change each box individually. So change that one to 2, and the other one to 2. Now you’ve got a better looking button. Now go to close the layout tab, do background, select a color. How did we do that last time? Yeah. This and then I chose that color and then lightened it, but I don’t want it to be like dark.
0:48:35
I want it to be the same hue. Light. I know it’s kind of darker, but then it was also really light. That. Okay. You’re happy with that? Or I could just do white. Which one looks better, Dad? Well, so we call this the action.
0:48:54
You actually want them to stand out. You want them to pop out because they attract people’s attention. And usually those are important things, right? So what stands out the most? Black. Besides black. But you could do a dark green. Like go down, go down. Yeah, but like, would that look better? Like if I did that and then…
0:49:11
That looks pretty good. I would want it to be like just a little bit like that. What’s the color you chose? I chose this one. I’d do it based on that. I chose this one and then like lightened it. Okay don’t lighten it so much. Yeah do that. Do you like kind of mint? I also made this. Yeah, minty. Okay. Favorite color. All right good. All right now go to typography tab. That controls your text. Okay. Oh yay! So now what we wanna do is we wanna, do you wanna make it uppercase? What do you wanna do? Uppercase, oh. Hmm.
0:49:42
Is this like speaking font? Like, could I choose the font now? Yeah, we can choose the font. Okay. Typically you choose the font for your, what are your headings gonna be? And what is all your text and buttons gonna be? So, let’s, we can do that. Yeah, let’s do that. Hit save, save your work.
0:50:00
It’s always smart to save your work. All right, so the top right icon. Top. It looks like a, yeah, you don’t even know what those things are. That’s called a floppy disk. They don’t even exist anymore, okay? But everybody still uses it as the save icon, interestingly enough. What’s a floppy disk?
0:50:20
What was it? It was- Was it like in the 1850s? No, no, it was not in the 1850s. You store data on it and then you plug the disk into the computer and how would I explain it? It’s like if this was a disk, this had all my photos on it and I had to plug this into the computer for the computer to be able to see the photos. Very old fashioned. Okay.
0:50:45
So when were you born again? 1983. Oh. All right. So they used these in the 80s. 1983 oh all right, so They use these in the 80s. Yes, they use floppy disk. No, okay, all right, so we saved our work What we want to do is go to Google fonts, and I want you to look at fonts you like okay? So we’re gonna go to Google fonts Because bricks already has Google fonts installed on it so you can choose pretty much any of these fonts, okay?
0:51:13
So we are gonna go to oh, it’s fonts.google.com. All right, so, I’ll just start scrolling. Or you can choose categories. Oh, I love this one. Yeah, not that one. Okay. Oh, yes. Okay, these are all the same like oh no they’re different they’re different could I do like different like you want to you don’t want to use a lot of different fonts because it gets confusing for the visitor you want to try to keep it you know two or three the title yeah two yeah yeah like three okay so so you can do like the heading, you can do the body text, and then you can do an accent.
0:52:04
See, she used like a script font for accent. Yeah, she did like kind of this. So if you want to see all scripts, scroll up, go to categories, scroll, scroll, yep, categories, and do handwriting. So you have to actually uncheck all the others and leave handwriting checked. So you’re saying I only want to see handwriting. Okay, so here’s all your handwriting fonts. So which one do you like? I kind of like, like, I like this one, but I also like this one, and then I like this one. I also kind of like this one. And I like that one, and I like that one. I like that Sacramento one. That looks pretty cool. I like that one for like the middle text. That’s kind of what she did. She kind of did like a cursive-ish.
0:52:50
Okay, so it’s called Sacramento. Alright, let’s go back to the Home Builder. The tab at the top. Okay. You can leave this page open. Okay. Okay. Now, um, we want to click on I’m an Artist. I’m an Artist. And you want that Sacramento text, right?
0:53:10
That handwriting or script. We’ll call it script, okay? Scripts. Are you gonna use this accent, the script text in other places on the website? Yes. Okay, so what should we assign that style to? Wait, so. It’s not a label, it’s a. It’s a click, click, click.
0:53:30
Class. Class. Yes. There you go. Alright, so How do we make a class? We go up to here, right? Yeah. Alright now This is text. Yeah So I’m gonna teach you something type in the word text Double dash dash dash. Oh So the double dash is stands for a style, okay?
0:54:03
It’s called a modifier. So we’re taking our text and we’re modifying it to a script. So type in script. Text minus minus script? Yeah, minus minus dash dash. Text dash dash script. Okay, hit enter. So you read this as this is script text, okay? Or text that is script. Text that is script or script text.
0:54:27
So now you can go to typography, which we’re already in, and go to font family and type in Sacramento. How do you spell that? Right there, it’s already guessing it for you. Is that actually it? There it is. Now we need to make it much, much, much bigger, right? So we have text script and then what we want probably is, we could probably just assign it to this text script class. So font size, and we gotta use rims again, and then I’ll explain to you why we, oh, there you go, do.
0:55:01
I did 55. Yeah, so like five rim would be 55 pixels, because that defaults to pixels. Okay, five rim. Okay, wait, actually, maybe I did three rim. There you go. I like three rim better. Look at hers and see, because usually when it’s like really big it looks better. So go to adventure. Yeah, go to adventure.
0:55:20
Look how big hers is. Wait, are we doing it but hers is like small. Well, when you don’t have a lot of content you want it you kind of want it to take up space. Okay. I don’t really have a lot of content. Yeah, we’re gonna make everything in this section bigger. Wait, so I would say do like maybe eight. Yeah, not too big. Okay. They’re like eight or 10. Let’s do, let’s try eight. There you go, okay. Now there’s also something called line height.
0:55:48
You see your box and there’s like space below the box, but inside the box? That’s driven by line height, okay? So there’s a line height box right here. Line height is good when you have paragraphs of text because it spaces the lines out, but you don’t have paragraphs of text, right? So just put the line height as one. See how it shrinks that box up? Oh yeah, that’s good, it made it tinier.
0:56:08
Yeah. Well not the font, but like the spacing. Yes, all right, now click Hey, I’m Noel. Okay, and what we’re gonna do is click the content tab. This is your main heading on a page, okay? Click content. Oh, duh. Yeah, this is your main heading on a page. So it has to be, see this tag that says H3, click that. H…
0:56:34
Three. Okay, see the options? There’s one, two, three, four, five, six, seven. H4, it’s six. No, so wait, is the lower the number is, the bigger that that is? The lower the number, the bigger that is. Yes, like H1 is the biggest and H6 is the smallest. Correct. But those, all right, hit H1.
0:56:55
Okay, so it’s good that you noticed that. But the size is actually the least important thing. What it is is the lower the number, so like one is the most important, and then twos are next most important, and threes are next most important, and fours are next most important. So six is the least important. Six is the least important, right? So you can, here’s the rule though, you can only have one H1.
0:57:20
You can have as many of the others as you want, but you can only have one H1. And the one H1 is the title, basically the heading of your page. And the Hey I’m Noel is your H1 heading. Okay? So you’re good there. H1, you’re good. Everywhere else, you’ll use H2s and H3s. But here you’ll use H1. Okay now what we want to do is we want to choose a font for all of your headings. So go back to Google Fonts and uncheck handwriting. So go up to the top, uncheck handwriting and check serif and sans serif. So we’re gonna look at we’re gonna look at these two families right here. Okay so just start looking for what would be a good heading font and maybe here I’ll show you a trick go up in that box type. Hi. I’m Noel and you’ll actually get a preview So you actually get to preview that all the fonts You like that one yeah, yeah, Sophia Sands can does yeah, okay, let’s try that one then go to home builder Sophia Sands condensed yeah I’m going to type in themes.
0:58:25
All right, now we’re not going to set it here. Okay, we’re going to click that little wheel, settings wheel. Yep. We’re going to go to theme styles. We’re going to create a theme for your website. Okay. Click that arrow or the plus sign. And type in, I use the word global, so just type in global. And then hit create. Perfect.
0:58:52
Now go to typography. Right here. Type. There’s so much, there’s so much. I know, there’s a lot of panels. There are, wait. Click on all headings, because you’re styling all of your headings, right? Wait, all headings, yes. Okay.
0:59:05
And font family. And Sofia. Just start typing and it’ll guess for you. I think it was P-H-I-A. No, I don’t think so. Is it not? Really? Go back, let’s check. Maybe you’re right. Nope, it is an F.
0:59:25
Okay. So they may not have Sophia Sands condensed. Sophia, do Sophia and see if you like it. Oh, no, you don’t want that. Okay, so go to Browse Fonts. So I’m gonna show you how to install it, okay? So click Sophia Sands Condensed. All right, and Download Family. Okay, downloaded it. All right, so now go back to Home Builder.
0:59:49
Save your work, top right. Oh, this thing. Yeah, and then hit the little WordPress icon to over from the floppy disk. Yeah. OK, now click the WordPress icon again. Wait, WordPress. Right here, the black one. So we’re going back into Bricks settings. Go to Bricks at the top, hover over Bricks.
1:00:18
And go to Custom Fonts. You can actually install fonts directly into Bricks if they’re missing. OK, so hit Add New. Add New, Add New. New. There it is. Add new, add new, add new. Type Sophia Sans Condensed and do caps. Oh, all caps? No, no, no, just capitalize the first letter. Sophia. Sophia. No H. Oh, Sophia. Sans. Sans. Or just Sans. Sans. Condensed. Okay, and then you’re going to add a font variant. And then so you have two variants here, okay?
1:01:02
One is normal and one is bold. Let’s do bold. So hit this drop down right here and do bold 700, yep. And then you’re going to hit edit on both of these. And edit on the bottom one too. And it’s basically saying which type of file are you uploading. Okay, so here’s the file you downloaded. So click on it down here, and it’s going to open it. Click on the actual words here. This one?
1:01:26
Yeah. Okay, and then click on the static folder over there and see what’s in there. Static electricity. Okay, so what kind of, what file types are those? What’s the extension on the very end? TFF. Not TFF. Read it again. Oh, TTF. TTF. What’s it asking for here? TTF. TTF. So find regular over there in that list. And here let me show you a trick. So if you take this Finder window and you make it bigger and then you pull this column over you can see them all.
1:01:54
Okay. Regular. There’s regular right there. T-P-F. Okay. Not T-F-F-T. So, what I would do, notice that it’s in the downloads folder in the Sophia Sands Condensed folder. So, I would actually, it’s going to be easier to just hit upload here. And then we’re going to go to select files, download Sophia Sands Condensed static, drag this over so you can actually see everything. Okay.
1:02:21
Here is regular. We’re going to hit open. There it is. And down here, look down here, I’m hitting Select. And look, it put it in to that field right there. Now what am I going to do here? I need to find the bold one. So hit Upload. Hit Upload Files, this tab right here. Select Files.
1:02:44
It should, yeah, it should already be open. So find Bold. That’s not bold though, that’s extra bold. Drag that column over so you can see the whole word. Yeah, now just select bold. Now hit open. And hit select at the bottom. Okay, now hit publish over on the right hand side. So you’re basically saving your work. Okay, see that’s what your fonts look like.
1:03:04
Now go back to pages the quick round. Okay, wait pages. Mm-hmm and Edit your home page in bricks hover over this and you’ll see edit with bricks so you can get like a shortcut takes you right there So it’s gonna open bricks again now click on settings up at the top Now click on theme styles now click on drop down did not save your theme click on the drop down Yeah Yeah, she’s global not save your theme click on the drop down yeah yeah choose global there you go now go to typography now all headings and now type in close that like delete that Sofia and then type in Sofia again so f I know how to spell so oh look look look look it’s there now.
1:04:02
Sophia, Sans, Kandil. Because you installed it. Can I see Princess Sophia? What? I want to see what Princess Sophia is. Oh, yeah, you can look at it. Oh. All right, go do the one you wanted. No. Sophia.
1:04:17
There it is. Okay. Hey, I’m Noelle. Hey, I’m Noelle. Is that good? I’m an artist. Not yet. No, no, it’s not great. No, not great. Go ahead and save. Save. Where’s save? Save right there. Okay, now you actually want to figure out what your h1’s need to be, your h2’s, the size of them. I think it would look better if it was bigger, right? Yeah, I think the first one’s bigger. So unclick all headings. Wait. There you go. Now heading one you can style all your heading ones. So click on that and you’re gonna go to font size and then maybe try like 8rem. So if your h1 is really big it’ll look good when the text below it’s smaller. Yeah. Wait. This one it’s really big and this is kind of really small compared to it. So we can make your script text a little bit smaller now.
1:05:17
This one? Yeah. So style? Yes, but remember, we styled the class. So you have to activate the class before you fix the styles. So it’s a text? You don’t have to choose it again, though. Click up here in the black. Yeah, just get rid of this panel. Just click.
1:05:33
Just click. There you go. Click the actual class. You see it right there. No, no, no. Yes, yes, there you go. Okay, now you can change the style. Okay. So change it to like six rem. Wait, where’s style? Oh yeah, style, style, style, eight rem. Let’s make it six rem. There you go. I like that, yeah. Alright, wheel up here and go to theme styles go to headings typography all headings click the pencil there you go go to line height and then do like 1.1 there you go so it’s going to kind of bring those together a little bit more all right now hit save at the top you saved you got to save all the time or you might lose your work.
1:06:29
You don’t want to lose anything you’ve done, right? If you accidentally, if bricks freezes or your internet goes out or like, you just gotta get in the habit of saving, saving, saving. Let’s say if you’ve made this thing and like you’ve added so much things, you can’t remember it and you forgot to save it and it dies. You gotta redo it all. You gotta redo it all.
1:06:45
Oof. Then you don’t know how to do it all. Save, save, save, save, save. And you go in a hole and cry. Right. That’s part of being a web designer is a lot of crying. So save. Yes. Hit Command S. It’s a shortcut for save too. You don’t have to click it all the time.
1:07:00
So try it again. Look, Command S. Command S. Oh, I thought I was looking for the thing that said Command S. No, no, no. Try it again. Command S. No, no, no. So a shortcut. You have to hold Command down while you hit S. Command S.
1:07:13
It’s saved. There. Nice job. So if you’re moving fast, you can use a lot of shortcuts. So let’s look at what your page looks like so far. So click on the B for Bricks. That’s what people will see. Oof. And they come to the website. Oh, I have a question.
1:07:27
Yeah. And this is, it says I’m an artist. Could I actually like put a photo up? What do you mean? For like, of one of my art things? Yeah. Yeah. Okay. Well, we’re going to get to building out the rest of your site, but so far we have a hero section. Okay.
1:07:40
Hero section. So let’s go back to the builder. I just want to cover a couple things. What if I wanted to change this photo? Oh yeah, you can change the photos very easily. Okay, good. Okay, we’ll take time and make a good one. Click on your button again. Just a little bit of a wrap-up, okay? Click your button class to activate it. Wait, this? Yeah, but that’s to add a class. You want to activate the one you’ve already added.
1:08:03
Go to layout. Okay, see how that’s M? And we use rim everywhere else. So I want to explain the difference between M and rim. So rim is very static. I know a difference. What’s the difference? M and rim. Rim has an R. Okay, thank you.
1:08:19
All right, listen. Rim, you can think of it as static. So one rim is equal to 10 pixels always, right? So if you do two rim, you would get basically 20 pixels of padding all the time. M is actually related to the size of the element itself, or really the text in the element. So look, this text is a certain size. So 2M, and I’m gonna show you, this is on the front end, you have to actually see what the calculation is.
1:08:52
So I’m going to hit inspect. If we go over here to this computed tab and we scroll down, it’s going to tell you, let’s see what the padding left is equal to. So you typed in 2m, but what that’s equal to in pixels is 30 pixels, not 20 pixels, 30 pixels. Now watch this. If I make the text of this button bigger, so I’m going to go to typography and I’m going to do like three rem. Now I’m going to hit save.
1:09:21
Come on Notion. All right. Now I’m going to refresh and refresh. There we go. Man, the refresh is not going well today. It’s definitely not. Wow. Oh, wow. Oh. It’s, oh, it’s because we did load a very big image, but I don’t know why the internet is. Three hours later. I don’t know why the internet is not liking this page.
1:09:50
Okay, so inspect. All right, perfect. So now, padding left, look what happened. What is it now? 60. 60. But we didn’t change, we didn’t change it from 2M. So what changed? The size of the text. So the padding, when you use Ms for padding, the padding will actually change bigger or smaller depending on the text that’s in the container with it.
1:10:17
It’s relative to that instead of being relative to a static pixel value. So that’s good on buttons though, because if you use rim, watch what would happen. Would that look good? Not really, right? Let’s do one rim and one rim. No good, right? The text is way too big for its container. So it was actually good that you used m’s here, because the m’s scaled when the text scaled. Okay, so I’m going to do one M and we’ll put this back to two. And wow, wow, wow. I can’t use a keyboard when it’s sideways. Change it. No, it’s okay. Okay.
1:11:03
That looks much better, right? So the padding scales is the text scales. Wait, wait, wait. Is it just me or wasn’t it smaller? Yeah, it was smaller. Yeah, that’s what it was. That’s where you want it right? Yeah, okay, so we’re gonna hit save so that’s doing between M and rim So sometimes you’ll want to use rim like a lot of times you want to use rim But if you use M for like your gap here that would be Weird because it would be different in all different places because your text is different sizes in different places Okay, so you wouldn’t want to do something like that, but for a button it makes sense. Yeah, all right We did VHS VW’s we’ll do we’ll cover all that later as we get there but you’ve got yourself a hero section and it looks pretty it looks pretty decent right do we ever make your what happened here why isn’t that carrying over your size oh let’s inspect this let’s find out why the size is not the size that it should be h1 font size 2.4 2.4 M you didn’t do that did you know I put red mm-hmm styles typography heading one you did you put eight rim and it’s working in the builder why is it deep old caps in it eight rim save refresh oh is not What is going on?
1:12:27
Frontend LI, where’s that coming from? Wow, I don’t know what’s going on. Global. Save. Yeah, save. Okay, well, that’s something that we’re gonna have to work on fixing next time, okay? Yep. Any questions about what we did so far? No. Good? Yes. Okay. We got started. We got a hero section. High five. And we’ll keep going. All right. Yes. And so you should be able to learn this too, because I was able to learn it. Yes. So well, you’ve learned step one. A little bit. A little. You can learn step one because a fifth grader can learn step one. There you go.
1:13:12
All right. See you guys.
