The TOP 20 Oxygen Builder Mistakes Beginners Make (Fix These Today!)

0:00:00
What’s up everybody welcome back to the channel. So today we’re doing an oxygen beginner mistakes training and this is a really important training for anybody who’s getting started with oxygen or really probably who’s in their first year with oxygen and now there are going to be some mistakes where you could be in year two or even year three and maybe you’re still making this mistake. We’re going to cover it today. So there’s 20 mistakes that I’ve written down. We’re just going to go through them one by one. Some we’re going to go really quick. Some we’re going to have to you know dive into actual oxygen and do some tutorial type work. I don’t know how much time we’re going to spend on any one tip or how long this video is going to take but the good news is there’s going to be chapter markers or whatever they’re called so you can just kind of look at the list of mistakes and you can figure out which ones you think you might be making or you aren’t sure about. So I’m going to watch that individual section and then move on you know use the video however you want to use the video but I’m going to go ahead and take my time because this is a beginner tutorial so I’m going to do my best not to rush through any of the tips and we’ll just see what happens. So let’s go ahead and start screen sharing and I’ve got my list of tips right here as well. So the first tip that we’re going to talk about is using IDs instead of classes to style elements on your website. So I’m going to add a button element that’s probably maybe the easiest thing and it’s an example of an element that’s obviously we’re going to use this over and over and over again throughout the website. So the first question you should ask yourself when you are creating something inside of oxygen whether it’s a button or a paragraph or a grid or anything like that. The first question you should ask yourself is am I going to use this same thing again now I might have different content in it but like a card for example or a button like a button could have different text on one page versus another page but we’re using the button design over and over again. We want all the buttons to look exactly the same if the answer is yes then you got you’re going to want to use classes to style this element and not IDs and I’ll explain what an ID is versus class in just a second. If the answer is no then there’s a possibility that you might get away with styling at the ID level. If you are unsure or the answer is maybe then you always use classes and in fact when in doubt just use classes you’ll never go wrong when using classes for the most part. So let’s talk about what ID versus class is so if I click on this you’re going to see right here if it says choose selector to edit because an element can have multiple selectors attached to it. If I click this drop down you’re going to see that by default there is only one selector and it is the ID link button 3119 and you can change this ID you don’t have to change it but you can do all of your styling right here where it says ID so you can see all of these options available to you and we’ll just go ahead and style this button up because it’s a good way for you to see what the inherent problems are. So I’m going to choose this color right here for our red and then I’m going to do my hover is just like a little bit lighter than that and let’s hover over that. Okay so you can see our hover is working well and then on this button I really want it to be let’s see text color we’re going to leave that white. I’m going to do this I’m going to go ahead and make another mistake while I’m doing this mistake that’s going to come up later but I’m going to do 20 pixels of text size there.

0:03:59
I actually want this font weight to be bold as well I really like bold buttons okay and then I’m going to double click this and I’m going to say call to action. So there’s my call to action now I do a couple other things as well like I might go to borders and I’m going to go ahead and put a border radius on this of 10 pixels and oh I need to change the padding because I really like more padding inside of my buttons and I’m doing all this wrong by the way so don’t copy anything that I’m doing right now. So I’m going to do 20 now let’s do 40 pixels on the left 40 pixels on the right so that gives me a little bit wider button right and I think that’s pretty decent but we can go the extra step of just saying you know what let’s do a little tech shadow on this as well so I’ll just choose like a nice dark red here and we’ll do a two pixel horizontal a two pixel vertical actually is to one and one and then I can actually just drop down the opacity on that so it’s just more subtle. Okay so there’s my button and I’m going to go ahead and hit save and then we can actually view this on the front end take a look oh look it’s a beautiful gorgeous button now the problem is you add another section and you need a button in this section right maybe you have a heading in there and you have some text and you need another button right now what are you going to do are you going to do all that stuff that you just did to this. Again because an ID there’s only one of them it’s a unique ID so there’s no way for me now you could use fancy plugins that allow you to copy and paste styling you could copy the styling from this button and paste it on this button you could delete that button you could duplicate this button and drag this down here but these duplicate features and these copy styles copy and paste styles features actually just help. You actually just help you do things wrong even more wrong like you took the wrong thing and you’re making it wronger okay you wanted to do this right from the very beginning and then you also have to remember like if I did this 10 times okay so these are all styled at the ID level right and the client comes along and they say you know what I’m not really digging that red background color for the buttons I really wanted to be blue instead so look I go to here and I’m going to do this. So look I go to here and I change it to blue because that’s what the client said that they wanted will do this like light blue that’s pretty cool and then I changed the hover color and we’re going to just kind of do that little bit brighter blue and you see the inherent problem I also have this dark red kind of it’s very hard to tell but remember I did a tech shadow and I use this dark red color which is totally irrelevant now so I’m going to need to put the blue in there and I’m going to have to find dark blue I think you guys are seeing like what’s going on. And you’ve also seen that none of these other buttons change and if you have 10 pages on this website and they all use buttons that are styled at the ID level you have a really big problem on your hands you are going to go button to button to button to make all these changes and I hope you wrote down what the changes are supposed to be right because we did a lot of things to that button and if you want them all to be consistent you’re going to do it to every single button but there’s a better way this is the beginner mistake you should not be able to do it. You should not be doing this all of this was a mistake so I’m going to go ahead and remove remove remove we’re going to remove all of this. Okay and here’s how you should really begin okay so what we’re going to do is just to lead that button altogether so we’re going to hit delete and we’re going to have a new button and we’re just going to quickly style this but before we style it you should do the very first step is whenever you add an element especially if it’s an element where you’re going to use it again and again and again and again that same. You immediately add a class to it so we’re going to do button right I’m just going to do button by itself just BTN that’s my button class be my primary button across my website all good. Alright so now what I’m going to do is I’m going to go while I’m on this class I’m going to change and I’m going to use this background color okay and then what I’m going to do is and you can still use these by the way I don’t know what my why don’t just do it consistent how about that so we don’t confuse anybody so I’ll do the button color down I don’t ever really do this and then we’ll do the hover down here because a lot of inconsistency I found when you do this panel in oxygen versus actually styling things with the hover state and all but we’re not going to get into that we’re going to we’re going to keep this very basic. So I’ve added the button color and button hover to this button class and I’m going to go ahead and do our borders and I’m going to go ahead and do our tech shadow so let’s go to effects let’s go to tech shadow we’ll put this in but we’ll choose an actual darker version of it maybe tone it down to like 80 or 79 or what it doesn’t really matter we’ll do one in one alright and then you know what we never did our bolding right so I’m going to go to our font weight here and I’m going to choose 800 for that. And then this is going to say call to action we also did some padding I believe so let’s go 40 and 40 I’m still not doing these right this is another mistake that we’re going to talk about a little bit later on but it’s okay for now so typography I also did I think 20 pixels.

0:09:21
Okay so there is our button I’m going to go ahead and hit save now the difference is all of that stuff happens on this class called BTN the stands for button so I’m going to go ahead and I’m going to create a new section and this is where we had our heading and we had our text and we had another button and now look what I get to do I can simply click this button and say you know what I want that to be styled like a button and then I’ll have to do a change the text this is another call to action right it can be. It can be anything then I’m going to go ahead and duplicate that and I’m going to duplicate that again and you know now the client comes along and they’re like Kevin you know that blue was great for a while but I’m really thinking this is a client that’s just they’re never happy right I’m really thinking it should be that red color we started with you know it’s just maybe that popped more they always use the word popped right it popped more okay all right great so all we have to do now because we were smart and we added this button class all we have to do now is go and do it. is go edit our button on our button class. So I can just say, oh, a client wants a little bit of red action. OK, we’ll just do that. And here’s the color they gave us. And then I’ll just change my hover real quick. So we’ll choose that and do a little bit lighter, perfect. And then I’ll go fix my text shadow. So we’ll pop the red in there. We’ll choose the dark version of it. It’s already at 79% or 80%. Bam, safe. And now all of the buttons across the website have changed because we styled this using a class.

0:10:53
They all have the exact same consistent styling. That you have to do this with every single element. If there is any question of whether or not you are going to reuse something across the website, then I would highly, highly, highly recommend, well, it’s just imperative that you add a class to the element and do your styling at the class level. Now, there’s other ways that you can use classes. You can do a set of styles with one class and another set of styles with another class and layer the classes together. So you add two separate classes to an element. That’s kind of the concept of utility classes, right? And then what we’re going to do is move to mistake number two, which I didn’t even have on my list. But it’s just dawned on me.

0:11:36
I should have put it on the list. And by the way, these are not the only 20 mistakes you can make inside of oxygen. Trust me. We’re probably going to do another video with another 20 mistake. There’s a lot of mistakes you can make inside of oxygen. But let’s do this as mistake number two. We’re just going to insert this or it can actually be 1B or something like that. And that is not organizing your classes, right? Because what I see a lot of times is people throwing random classes. They’re like, well, I’m using classes, but it’s like you’re doing random classes on this stuff.

0:12:09
And nobody knows what it means. And when you build a site, you know what it means. But even if you took six months off from that site, and then the client’s like, hey, I need some changes. And you go back to the site six months later, you’re going to have no idea what the classes mean or what they were for, right? So you have to use logical names for your classes. And I would recommend highly recommend. This is not imperative like using classes is. But I would highly recommend you use the BIM naming convention, B-E-M stands for block element modifier. And we can easily show you this by creating like a card. What BIM is really, really good at is creating clusters of classes that are all grouped together so that you know exactly what a class is doing and what it should be attached to.

0:12:58
So let’s go ahead and add a section here. Remember, this is mistake number two is just using random class names all over the place. So I’m going to go ahead and build a card. So we’re going to add a div. And I’m going to add a class. So we’re going to call this card. Of course, I’ve already styled the card in this training. So let’s do another, I will say new card. It’s going to be a new card, right? All right, so now you would never do that. Obviously, on a website, you would just do card or something like that. But I have to do this because we already have cards that are styled, all right, because this is our training website.

0:13:30
So new card. Now what I’m going to do is just style this up a little bit. So because I’m at the class level, I can go ahead and I can add some padding. So I’m going to keep doing just some stake after mistake here with our padding. But it’s OK, because we’re going to talk about it later. So I’ve added 40 pixels of padding. I’m going to do a background color. We’ll just do like a EE, something like that. And I need to put some things in this. So I’m going to put it, this could be a very simple card. I’m going to put a heading. I’m going to put text. And I’m going to put a button.

0:14:00
This is a very classic like card, OK? I’m also going to just put a little width on here. Now, normally I wouldn’t do this. I would just have 100%. But I’m not going to go through the process of building a grid and all that stuff, because I want to keep this really, really basic. So I’m just going to do a max width of 480 pixels. I’m going to make sure that my heading here is an H3. You’re rarely ever going to put an H1 inside of a card. So I would just say H3 is kind of a standard for a card there. And now let’s talk about all these elements, right? Because what I said in mistake number one is you have to add a class to whatever you’re styling. Well, what if this component is made up of multiple different elements, then what?

0:14:48
Well, you need a class for every single element. But what a lot of people do is they come in, they put new card here, and then they grab this, and they’re like card heading, OK? But immediately you’re like, which card? What kind of card? I don’t understand. Why is how are those two things related? And then they come in and they’re like card description or something like this, OK? And then they use some other random nonsense, and they’re just like button for card or something like this. Like I’ve seen it all. I’ve seen just the craziest name. These are actually kind of descriptive.

0:15:25
I’ve seen a lot of names that aren’t even descriptive whatsoever. And you’re just like, what is going on? So you see we have new card, and then we have card heading. But if I had a different type of card, I now have no idea what heading goes with what card. And then I have this card description, but it’s like, all right, is that? Again, what card does it go with? And is that a description or is it a main body? Or like, I don’t know. And then you click this button, and it’s like button for card, and it’s still like, all right, what card. And then you also see that they cannot be grouped together in the list because they don’t really have anything in common. This is button for card other than the word card.

0:16:05
And then this is card description, and then this is card heading. So they all have the word card in them. But if you have three different card styles, anything can get really crazy. It’s chaos. And so there is a way where you can calm the chaos. So we’re going to go ahead and add a new div here. We’re going to start over. Here’s how you would probably want to be doing it. And so you’re going to say that this is a new card. We actually started out really, really well. I’m going to go ahead and add my heading here, which is my H3. And then I’m going to go ahead and add text, and then I’m going to go ahead and add a button. And now I’m going to start naming these things, but I’m going to name them smarter.

0:16:44
All right, so I want, ever, all these things are inside of what? They’re inside of new card. So they should all be associated with new card. So what I’m going to do is call this new card, and then I’m going to say, double underscore heading. So this is a heading for the new card, and I’m going to hit enter. And then I just grab the text, and I say new card. And then you can just say text. If it’s the only text, you can just say, hey, this is text. And that would be like the main text of the card. And then I’m going to say new card, double underscore button, perfect. Now, this is a part of them. It’s not all of them, because them actually has modifiers in it.

0:17:31
So you could have a new card that is, let’s say, dark. So let me show you how that would work. First, let’s go ahead and let’s make a lot of these. Let me just make a grid real quick. Just ignore what I’m doing, because you won’t understand it if you’re a beginner. But you don’t need to. I’m just making a bunch of cards. We’re going to put a gap there of M. All right, perfect. I’m just going to drag this in here. Awesome. Now I’m going to duplicate BAM. So there’s three cards. Now when I style these new card heading, watch what happens across the board.

0:18:07
You can see this in real time. So I want to margin to be on the bottom of these. And then I want to margin to be on the bottom of this new card text as well. Now I put margin on the top of everything. But again, we have to keep these. I have a video on that. Just go watch the video on why I use margin top and set a margin bottom. But I just want to keep things as conventional as possible for this beginner tutorial. So now you can see I have spacing everywhere because I’m doing this at the class level. All these things have the exact same classes on them. But let’s say I wanted a dark version of my new card.

0:18:42
So what I would immediately do is say, or featured even. Let’s just say featured, right? Featured is like, that would be a perfect use case for this. So I’m going to do new card. And instead of doing double underscore featured, I’m going to do something different because featured is not a element inside of my block. Remember, BIM, block element modifier. Featured is a modifier of my card. I’m modifying the card that already exists. So instead of double underscore, I do double dash featured. So this is a, I can immediately tell when I just look at somebody’s class names that they’re using BIM, that they have something called a new card, which has styling.

0:19:25
But then they have a featured version of the new card. So I know that it’s going to change the new card’s style just by looking at the names, right? And I also know what all of these elements are, you know, how they’re associated with this. Now there’s a bunch of ways because it depends on how you’re going to style the featured card. But for example, we could do a box shadow. Let’s just do a box shadow. So our featured card is going to have a box shadow on it. So I’ll just do black. And we’ll do four, four, and four, and we’ll do 40. And we will do just really tone it down like that. OK, so 15. And we’ll also have a border on it.

0:20:08
Because when you put a shadow like that, it’s a little hard to see. Now, Oxygen hates me when I try to put anything in the border color field. It just goes absolutely haywire. It’s mad lag. It’s insane. I think this is fixed in 4.0. I’m going to double check it. But look at that. Look at that ridiculousness. And then I’m going to tone that down to look, I can’t even drag the slider really. There is a massive bug with this. And I’m going to hit solid, which is going to take a year to activate.

0:20:43
Yeah, still hasn’t done it. I don’t think. OK. OK, it’s there. I just couldn’t see it. We need to tone it down a little bit. And then of course, it’s gone. OK, let’s tone this down. Oh, this is so painful. Absolutely painful. OK, let’s get this down to like 15 as well. Something like that. All right, so now you see that we obviously have a, it’s kind of the card, but it’s different. It’s modified.

0:21:15
And that’s why it’s called a featured card. All right, so now you can do it whatever you want to style it to make it featured. That’s fine. But the point is, look at this organization. Now if I go to build a new card on a new page, right? Let’s pretend that, well, let’s just delete it. There you go. Doesn’t exist. We’re on a new page now. And it’s like, ah, I got to build those cards again. OK, no problem. So first of all, I’m going to build my grid. So we’ll do a grid three. We’ll do a gap of M. Well, not a gap of M of N. We’ll do M.

0:21:45
And then I’m going to add a dip. And then I’m going to add, I know I’m going to have a heading in it. I’m going to have text in it. I’m going to have a button in it, right? All right, I’m going to make this an H3. And watch me just be able to build this. And even if I came back six months later, it’s like, all right, I need one of those new cards. Look at the list. Look at this organization that is here. And I can see immediately, even if I don’t know what components are supposed to be in this card, it’s telling me the components. Well, this kind of card needs a heading. It needs text.

0:22:16
It needs a button. And you can also make it featured if you want to make it featured. Look at this organization. Amazing. So I hit New Card. And I come here and I do New Card. And I just look. It’s there for me. I just need to know what goes inside of a new card. And I can just select the appropriate item from this dropdown. New Card button, perfect. And then I go duplicate, duplicate. There are my cards. And you know what? I want that one to be featured.

0:22:43
I can just type in the word featured. Well, I already have a bunch of other featured stuff. So that kind of screws with that. But New Card, and then I just choose Double-Dash Featured. And I know it’s going to modify that one to be a featured card. So this is how you organize your class names. All right, let’s move on. We don’t want to spend too much time on this stuff. Next one is simple. Not locking your classes. So we can stay right here and just talk about this. So one problem that people run into often, especially beginners, is they’ll create classes. And you do this awesome stuff.

0:23:18
New Card, New Card Featured, you’re using BAM, you’re super organized. And then you’re like, all right, it’s time to move on to that next section. And then maybe you have one of these cards down here as well. You’re using it again. And you’re like, OK, well, what I’m going to do with this one is I’m going to make it a little bit different where I’m going to just change my background color. I want this one to be dark, right? And you’re making the mistake of number one, you’re not creating a new class for it, called Double Dash Featured. And you’re also making an alteration to a class that’s being used in lots of places on this website, by not even realizing it.

0:24:01
So you come here and you’re like, well, just make a quick little change. So this one, because it’s only one, and I just want this one to be a little darker for no apparent reason. But what have you actually done? Because when you clicked on it, the class was selected. You changed it. Look at all of these. And sometimes what happens is what would probably be more common is instead of the color change, you decide that, oh, well, because this card’s by itself, and it’s on a white background, I don’t even know what I just did there. OK, anyway, oh, I took the color away completely.

0:24:34
So you’re like, oh, well, just because it’s one card, I actually want this text to be a little larger. So I’m going to go to the font size and make that like 20. And then I want this button to be a different color, just on this one card. And you start editing stuff, not realizing, hey, dude, you’re editing a class that you’ve used a lot of times throughout this site. And pretend that these were on a different page. You don’t even see them changing. You don’t even know that you’re totally screwing up stuff all over the website. Because you’re editing an existing class when you thought you were either doing this at the ID level, or you thought you had made a new class, I don’t know what goes through people’s heads, but it’s a very, very common mistake.

0:25:17
So what I would recommend, the mistake is not locking your classes. So what we’ve done here, let’s just say that this is the way that we want it. We’re going to leave that one. Let’s just say these are the way we want them. So here’s that new card featured, for example. So I go to advanced, and I just click this little button, lock selector styles. And then I go to this card and say, hey, new cards, I don’t want people editing those either. So I’m going to go lock selector styles. Because I’m pretty much done styling it. So now look, I can still edit this. So this is a heading.

0:25:50
OK, this is text. I can still edit the elements. But if I click it, and I just go over here to the panel to start trying to do stuff, it’s telling me, oh, hey, hey, pause. This thing is locked, right? You shouldn’t be doing this. Maybe you want to do this at the ID level. Maybe you want to create a new class. I don’t know what you’re doing. But if you do really want to edit all of your new cards, you can simply unlock it, make your changes, and then lock it again. But at least this lock screen makes you pause and hesitate. And it’s like, whoa, this thing’s been locked.

0:26:23
It’s done. It’s complete. Are you sure that you want to make changes here? And then that step protects you from just making kind of a ronious, ronious, I don’t even know that’s a word. We’re just going to move on. It stops you from making just random changes that you don’t even realize what you’re doing a lot of times. So it protects you. It helps you. So the next one is using columns instead of grid. Now, you just saw me create a grid. I’ll just whip one up again. I’ll do it a little bit better this time. So what we’re going to do is do a div.

0:26:58
And we’re going to say grid three. Now, I’m using automatic.csus utility classes. I’m going to also say on mobile devices, I want this to just be a one column grid. And I want this to have a gap of M, very, very standard. And I can just throw some images in there, bam, bam, bam, bam, look at that. Nice, three column grid, six elements in there. It’s all mobile responsive. So I come down here and boom, mobile device, right there, medium-sized device. It breaks to one column. And then it saves one column at full up. So everything has happened. It’s all automatic, done for me, great.

0:27:36
There’s this other thing that people love to do, especially beginners, because it’s named a certain way where it seems like, yeah, that’s what I want. I want columns. So they go to add this thing. And they’re like, I want to add columns. Now, I’m not going to do this because I did a video on this already. It’s called columns versus grid. And I will link to it down below. So if you want to do the same three column structure, there you go right there. So you have your three columns. Good luck putting that gap in there.

0:28:10
You’re going to end up having to probably use padding of some sort. And then you’re going to have content that doesn’t align properly. This is built with FlexBox, whereas this is built with a more modern CSS grid technique. Grid is best for laying out content. Flex is best for positioning content. So if you want to remember anything on, do I use grid or do I use FlexBox, that’s the kind of rule that I go by. Grid is best for laying out content. Flex is best for positioning content. Grid is far more powerful. Now, there are certain use cases of grids, where, let’s say, you wanted to stagger grid with different size elements and things like that, like a mosaic or something like that.

0:28:57
You would probably want to use FlexBox for that. But if you want uniform, even consistent grids that are super responsive and all of that good stuff, and they could be whipped up in a flash, this is definitely the way to go. You use grid. And then if you’re needing to position things, that’s where FlexBox really, really comes in handy. But what I’m going to say for this, because I did a whole video on it, is I don’t want to reinvent the wheel here. Just go watch the video on columns versus grid in oxygen, because there are other bugs and related issues for this little columns module thing here. And it’s an absolute disaster, in my opinion.

0:29:34
I love oxygen. I feel like this columns element is an absolute disaster. I never use it. I don’t ever touch it. I don’t have any use case for it whatsoever. And I would recommend you avoid it at all costs as well. All right, so that’s that. Next is putting everything in one section. So I see this all the time. Let’s do a heading here. So here’s our H1. And let’s just say this is our check out our work, bam. And we’ll just do some owl spacing in here to just quickly whip this up. And then we’re still in the same section.

0:30:13
And you’re like, OK, well, now really what I need to do is add another heading. And I’m going to say, and this is our testimonials. And boom, there’s that. And then we’re going to have obviously testimonial cards down there. I don’t know how we can whip that up real quick. So let’s just do div. And we’ll do grid three, bam. And we will add a div. And then we’re going to do our new card. OK, great. And then here we go. This kind of shows you why we just do this the way we do it. Here’s text.

0:30:48
We’ll just say testimonial heading and say, this company is super awesome. I love doing business with them. OK, there’s my little testimonial. And then I need to add my new card heading, right? Which is going to give me my spacing. And then I’m going to go duplicate, duplicate, duplicate, duplicate, duplicate. And then I can just add a gap really fast to this of M. So we’ve got our work, we’ve got testimonials. I might even drop a little hero action in there. I don’t know. But just pretend that this kept going on and on and on and on. And I’m putting everything in the same section. Now we look at this structure panel.

0:31:30
And I’ve got one section. And now I’m like, first of all, this is semantic nightmare with HTML. But let’s say I want to move like my testimonials up here. Well, I got to drag these elements one by one. They’re not grouped, right? There’s only two of them. Thank God. But if I had a really intricate section of section of content and I’m not using a section, you’ve got to drag all that stuff manually to wherever you wanted to go. And then like I said, this is just really poor HTML structure here, where you’re just dropping everything into one section. So that is mistake number.

0:32:08
It’s five in my list, but I think we’re on six now. And then we’re going to just quickly go to the next one, which this can be six B. So this maybe this will get us back on track, where you put just two things in a section. Because the rule is, I definitely don’t put everything in one section. But really the rule is, if you’re changing topics, right? It’s like when you were learning how to write, they were like, hey, if you’re changing topics, make a new paragraph, OK? You want to make a new section for every topic change. So testimonials, you have a section for them. Check out our work. You have a section for that. Hero, you have a section for that.

0:32:44
Products, you have a section for that. Services, you have a section for that. Everything is sectioned out. So when you have a proper page, you should really see like six, seven, eight, nine sections over here. That is absolutely critical. So I would say that mistake is putting multiple topics in one section. Stop doing that. One topic per section, all right? Let’s get on to the next one. Not using semantic HTML tags. What I would recommend you do, you hop over to Google right here, and you type in semantic HTML tags.

0:33:19
Now, this is important for a lot of different reasons. Just general HTML structure, but you also have accessibility related issues here. But the bottom line is, let’s delete this. OK? So we’re going to add a section, and we’re going to put a heading in there. Now we’re just going to say that this is our work. And we’re going to say that this is our testimonials. So heading, boom, testimonials. And a lot of this stuff does happen inside of the main template. In fact, let’s just go there for a second. Let’s go to leaf page. OK. Let’s go to the dashboard.

0:33:59
Let’s go to oxygen templates. And let’s open the primary template. Because this is actually when you’re setting up your website, and in the inner circle, I’m doing a whole video walkthrough of how to properly create your primary template with semantic HTML tags, how to make sure everything is completely accessible, how to make sure your main content sections label, probably your head, or all of that good stuff, right? So what you’re seeing is a preview of the homepage content. But if I open my structure panel, you’re going to see that, well, let’s just delete this stuff. OK? This is what you would have if you just started from scratch. You have a blank slate.

0:34:36
So what most people do here is they add their header. Now, if you use the header builder, it’s automatically going to have a semantic HTML tag. So I’m going to just put text in there. And then we’re using automatic.css. So I have to pad the header. Sorry, pad header. We’ll just do M on that. So we’re going to save. I just want to go the front end and show you what I’m talking about. So if we inspect this header, we’re going to see that it right there uses the header semantic HTML tag. I’ll collapse this so you can see it.

0:35:11
So this is my header. And it says header in the HTML. Now what I’m going to do is I am going to, and I’m actually curious about this myself. We’re going to add the inner content element. The inner content element adds whatever dynamically from whatever page you’re looking at that this primary template is associated with. OK? I’m going to hit save. And now we’re going to look on the front end. And I see my content. And I’m going to inspect it. And I’m going to notice here, what do we have? We have our header.

0:35:42
And then we have a div. Well, that’s a problem. Because this isn’t just a div. And it’s the div. If somebody semantic HTML is really important for accessibility, because if somebody’s using a screen reader, it’s going to tell them that this is a div. Not even a section, by the way, right? When really, it should be a section, but really, it should be semantic HTML main. It should be the main content of the page. So there’s a couple of different philosophies and ways to do this. There’s a lot of different considerations here, which is why I would highly recommend like watching a full-blown tutorial on creating a really good primary template.

0:36:20
But just for instructional purposes, inside of this tutorial right here, I’m going to delete the inner content. And I’m going to add a div. And this div is going to be the wrapper for my main content. And so what I’m going to do, because the inner content element does not use a semantic HTML on its own, I have to use a div right here. And I’m going to change the tag right here. These are all semantic HTML tags. I’m going to change this to main. And then I’m going to put my inner content module inside of that div. And now if we save, and we go look at this on the front end, I refresh, I inspect.

0:37:00
And now, after my header, what do I have? My main content. And it has the semantic HTML tag right in there. Now, we’re going to have to have a footer, aren’t we? So I’m going to add another section down here. And this section is going to be footer. Boom, just like that. So now, maybe I should put something in it. We’ll put a button down there. I’m going to hit save. That’ll help us find it when we inspect. I’m going to refresh. I now have a footer. Let’s inspect that. And so now, look at the organization here.

0:37:37
OK, well, actually, what did it do? It put, oh, it wrapped it in a div. OK, I don’t want that to happen. So oxygen just tried to mess me up here. I want this to be outside of, oh gosh, come on, oxygen, drag and drop. OK, save. Now let’s go back. This is what you should have if you’re using semantic HTML tags properly. Look at my HTML structure. I have a header. I have a main content. And I have a footer. It’s not div, div, div.

0:38:06
Section section section. They have names. They have their landmarks. Very, very important. So this is one of the mistakes people make. They don’t know anything about semantic HTML tags. And they just go, section, section, section, div, div, div, div, div. And everything is unlabeled and all out of whack. And there’s no landmarks. Horrible for accessibility, horrible for everything. You can actually use ARIA labels as well on your sections to announce what the section is for to people using screen readers. So remember that testimonial section?

0:38:35
They navigate to it. It’ll say section testimonials. And so they know that everything that they’re about to encounter in that section of content is related to testimonials. It gives them additional context. So very, very important you start using semantic HTML. You start learning about accessibility. I purposely left accessibility mistakes off of this list. Semantic HTML, not using those tags as a mistake outside of just accessibility. But I’m going to do a whole other video probably on accessibility mistakes at some point. OK, let’s go ahead and move on. Using divs to create lists.

0:39:12
All right, so I’m going to pop back out here. We’re going to go back to our pages. And we’re going to go to our mistakes, edit with oxygen. And I’m going to check and see who called me while we were doing that. OK, I’ll call him back later. All right, so I’m going to go ahead and delete this section, add a new section. And I need a list of items. So what I’m going to do is, hmm, I’m going to make a, I’m going to whip up a grid real quick. So we’re going to do another three column grid, gap M. And we’re going to go div. And we will, we’ll say that this is going to be a list card. So we’ll do heading H3 and double click.

0:39:55
OK, this is my list. All right, so inside of this card, now let’s just do a new card. Use our card style here. And then I’m going to add a div, right? Bam. And what a lot of people do here is, and I’ll just do this properly where we go new card. And we’ll do list item, something like that. This is not really the way you should be doing it, but it’s the way a lot of people do it. So I’m going to do horizontal flex here. And I’m going to add an icon here. And we’re going to do thumbs down, because this is not the appropriate way to do this.

0:40:33
Thumbs down. OK. And then I’m going to do a class. You wouldn’t want to just start styling this thing right away, right? Because that’s terrible. So new card, now what do we do? List item. And then this is actually an icon of the list item in my new card. You can do it this way. Or people, there’s a debate. Hey, we don’t really go to that extent. So you can just say new card. Now, the problem here is, see, we’ve got to have a discussion about this.

0:41:00
If I just put new card icon, I don’t know that it’s just an icon in the card. It’s actually not. It’s in that list item. So I would argue in this part right here, where you do list item, and then double underscore icon. So we all know what this icon is actually associated with. So I’m going to do 24 pixels there. And I’m going to pop out. So I’m still inside of my div here. And I’m going to add my text. Perfect. And I’m going to say this is a list item. And then on my icon there, I can actually add some margin.

0:41:33
So we’ll do 10 pixels. And then in my flex, I can align everything to the middle. That’s perfect. And then this is a new card heading. We get a little spacing action there. And then I can go ahead and duplicate, duplicate, duplicate, duplicate. And this is how people do their lists. And then they’re like, yeah, I want some margin between those items. OK. So wrong. So I’m going to go ahead and hit save. We’re going to check out the front end here. And we’re going to inspect this.

0:42:02
And you’re going to see that these are just all divs, dub, because we use divs to create them. So there’s my div right there. All of my list items are just divs. Now, one thing that you can do is you can actually use the tags over here, where you can do, well, it’s not in the list. So you have to say use custom tag. You could create a UL div and then an LI div for each one. And then that will kind of create a semantic list for you. But what I would recommend, especially if you’re just kind of getting started here, is now if you need an icon div and you don’t know custom CSS, then you would probably want to do it this way. Let’s look at that structure.

0:42:45
If we did it this way. So I can do custom tag, OK, LI. And let’s check our front end. I actually never do it this way. So I just need to double check that we’re looking good here. So it is. It’s an LI. It’s changing from a div to an LI. The problem is I have no UL. So I’m going to put another div in here. And this is going to be my new card and list wrapper. And then I’m going to change custom tag to UL. And then in my structure panel, I’m going to just drag these in here, because that’s usually the easiest way to do it.

0:43:23
But in oxygen, not everything is easy with drag and drop. OK, there we go. Perfect. All right. So I did use the UL tag. And then on this one, I use no tags. I’m going to do LI. And on this one, I’m going to do LI. And on this one, I’m going to do LI, bam. And then we’re going to go look at our structure. Notice that there’s default styling on your lists a lot of times. But now I do have what appears to be nice, clean, semantic, list item based, unordered list is the correct term, HTML. Another way to do it is to delete this.

0:44:07
You can always use, especially for simple lists. And this makes your life so much easier. You can use rich text editor. And you can just add an unordered list right inside of here. And when you’re coming back to edit, this is like the fastest easiest way to do this. This is another list item. This is a third list item. Makes adding and editing so much easier than all those divs that we were just dealing with. The only difference is you have a regular bullet list. It’s not an icon list. Now, what you can do is you can use custom CSS to turn this into an icon list, no problem. Again, it’s going to come down to use case.

0:44:44
But look again at the front end, we check this out, inspect. And we have a UL, LILI, LILI. So we’re looking good there. But that’s the general mistake. It’s just using divs to create lists instead of adding an actual unordered list element and then LIs inside that, list items inside that. All right, the next one is pixels instead of relative units. Pixels instead of relative units, which is a mistake that we’ve been making all throughout this tutorial. And I’ve been doing that on purpose. So we’re going to go to heading and we’re going to make this in H3 and then we’re going to go to text, perfect. Now, I of course would highly recommend that you use a utility class system that does all of this stuff for you and makes everything super responsive.

0:45:29
But the thing that I hate seeing the most is, I don’t say I hate seeing the most, it bothers me. I don’t know, it bothers me probably because I have OCD. Bathers my OCD. It’s people using pixels for everything. Pixels for paddings, pixels for margins, pixels for font size. So they’ll do, I want that to be 20 pixels. I want this to be 16 pixels, okay? Here’s the issue. And I’m going to try not to get too technical with this. But this is another accessibility issue. So when you set something in pixels, it’s kind of like overriding the browser’s default. All sites have a root font size. And typically that’s around 16 pixels.

0:46:15
And if you set your root font size, again, I’m trying not to get too technical. You can set it to 100%, you can set it to 62.5%. But the bottom line is, if you use pixels and somebody tries to change their root font size, maybe they’re visually impaired. Maybe they’re old and they like larger text. And you’re like, or they’re like, I want all the text on websites that I go to to be larger. Based on this root font size of maybe 20 pixels, or 24 pixels even. Your pixel based items are not going to respect their wishes, okay? If you use relative units, it is going to respect their wishes because they’re relative units.

0:46:59
They’re relative to the root font size, and you’re allowing people to override the root font size. So I personally use 62.5%, which doesn’t matter if they, whatever they set their root font size to, it’s fine because then I’m using rims for everything. You can also use im’s. Now you’ll see right off the bat, 20 rims is way different than 20 pixels, all right? When you have a 62.5% root font size, this is getting very technical, even though I don’t want it to. One rim is equal to 10 pixels. If you’re using 100% root font size, one rim is equal to 16 pixels. So I haven’t set to 62.5 thus, if I wanted 20 pixels of heading size, I simply changed this to rim and use two instead of 20.

0:47:45
And I get roughly basically 20 pixels of font size. On here, what would it be, 1.6? Now this is why I use the 62.5% root because I like to make the math super easy. Like if I’m like, I want 16 is 1.6. If I want 300 is 30, okay? But if you wanted, if you added it 100%, which is 1 rim equal 16 pixels, and I’m like, I need 300 pixels of padding. It’s like 300 divided by 16. I mean, I’m like, well, right? Yeah, it’s not so easy, right? So I know 300 is 30. So I just do, hey, 30 rim. There’s my 300 right there, which is obviously way too big.

0:48:24
But rim is a relative unit. M is a relative unit. Percent is a relative unit. VW is a relative unit. VH is a relative unit. The only unit that’s in this list that’s not relative, that is a fixed size is pixels, which is why you shouldn’t be using pixels, right? Use relative units for everything. If you need one pixel of space, okay? Like just get in the habit, 0.1 rim, okay? There’s my one pixel. Now that’s not space, that’s font size. You would never do that. But you get my point, right?

0:49:03
I’m really like never using pixels. I want everything to be in relative units. I say that using pixels is a mistake, all right? So it’s on my list of oxygen beginner mistakes. Next one is heading to control heading size. Another super common one. So let’s start with a blank slate. Here’s our heading, okay? And it’s an H2. But for some reason in this section, I need this to be smaller. For some reason, I need this to be smaller. And you’re like, what do I do? Should I change the font? No, what I’ll just do is I’ll make it an H3.

0:49:41
And magic, it’s smaller. I don’t have to figure out what font size I need to put in there, what rims. If I’m using clamps, I don’t need to go get a clamp function and put it in. But this is all completely ass backwards. Never do this. Never do this. Don’t change headings to control the size of the heading. Don’t change the tags. Here’s a really good common use case, right? H1s are really good for SEO optimization, right? So, but the problem is you put something in an H1, like let’s say carpet steamer, right? I’m like, let’s say, carpet steamer 3000, right?

0:50:21
I don’t know. People search for the carpet steamer 3000 all the time. You want that to be in your H1. Then you have another H heading. This is your H2. And this is like your marketing heading, where you’re like, the carpet steamer 3000 is the best carpet steamer on Earth. Okay. Clearly, we have an issue where our H1 is like, carpet steamer is like yelling at them. Where really, you just want this for SEO purposes. You don’t want this for the user as much. So, if you wanted that to be really small, for example, would you just do this? Like, oh, well, it’s fixed.

0:51:01
H5, right? I’m not gonna use a custom tag. Let’s do an H5. That’s kind of good, right there. That’s how I want it. No, you wouldn’t do it. Because now you’ve lost all of your SEO capability. You also have completely screwed the, again, going back to semantic HTML. This is not an H5. It’s just simply not an H5. That is the H1. So, it needs to be an H1. The way you make an H1 smaller, if you needed to be smaller, is changing its font size.

0:51:29
So, we’re gonna go to RAM 1.8. Now I have a smaller one, right? And now, would I do that at the ID level? Of course not. Family, we’re going up here, we’re making a class, we’re gonna go H SEO or something like that. So, that’s heading for SEO. If you wanted to just write it all out, heading SEO. All of my headings would be grouped together. So, now I have my H1 heading SEO on my class. I bring this down and I say this is gonna be 1.8 RAM. I also say it’s gonna be uppercase. And I also say it’s gonna have some bottom margin. We’re gonna go RAM, we’re gonna go 3, 2. There you go.

0:52:10
So, the card with Steam are 3,000. I can even make it typography 1.6. I want a little smaller. And then, RAM, right? And I’m gonna go like 0.25, 0.2, something like that. So, now I’ve completely styled this. So, if I need to add it to another page, I add my H1 heading, bam. And this is the carpet steamer, 4,000. And I type in SEO, heading SEO right there. It styles it for me. It’s still an H1 fam, because it’s supposed to be an H1. Don’t change heading levels to change sizes or styling. Only style the tag with a class to make it look the way you wanted to. But leave the tag as what it is supposed to be.

0:52:57
And then, you ultimately want, I’ll just lump this in, right? H1, H2, if I had cards in this section, what would the headings for those be? H3s, right? You don’t put H2s in cards when you have a section heading that’s an H2. Now, you’re combining your heading tags together. And if somebody’s using a screen reader, they can’t make any sense of your website. It’s just not good practice. So, make everything in logical order. H1 is the most important. Then, you have your H2s, typically your section headings. And then, subheadings inside of your sections, those get H3s. Sometimes, you might find an H4 use case I’ve rarely ever, like, go below H4. Sometimes, I have an H4. Rarely ever, do I go below H4.

0:53:46
But just don’t just stop doing that. Stop saying, I need it to be smaller. Oh gosh, let’s choose a different tag. Hey, there it is. It’s smaller. Don’t do that. Huge mistake. Okay. Next one. Setting heading sizes in global settings. This is another one. All right, let’s clear this out. Section. Okay, we’re going to go heading. All right, there’s an H1.

0:54:07
This is an H1. Okay. And then, I’m going to duplicate, duplicate, that’s 5, 6, okay. And then, this is going to be an H2, right. And this is going to be an H3. And this is going to be an H4. This is going to be an H5. This is going to be an H6. Now, I am going to go 6, 5, 4. 4, if I can click the right one. 3, 2, and there’s my one. Now, I do owl S, the space, and all out. Now, look at this perfect hierarchical sizing that we’ve got going on here. This is actually controlled by Automatic.css.

0:55:00
And if I went into the Automatic CSS dashboard, so I’m going to go back here, you see how the variation between the sizes, I actually have full control over that. So in Automatic.css typography, I can go down to typography scale. It’s set to perfect fourth. I can do golden ratio, which is a much more dramatic scale. Hit save. And then I can go, let’s view this on the front end. And I have a much more dramatic scale now. Look at the difference between this. And if I reloaded the builder, I’d see the same thing. Look at the dramatic difference between the sizes. If I wanted to be much tighter, I come down and I choose like maybe minor third.

0:55:42
Now, there’s going to be a lot less variation between my heading sizes. So I refresh. Look, a lot less variation. Now, I can also, this is just a tangent, by the way, nice little marketing tangent for Automatic.css. I choose something extreme, like golden ratio, for my main typography scale. But on mobile, I want it to be much tighter. So I choose something like minor third. And that way, when my text is scaling down to mobile, remember, Automatic.css is automatically responsive, right? So I go into mobile mode and look at this. So it starts out extreme. And it really scales itself down to be much more consistent at the mobile devices.

0:56:26
So it’s a perfect blend of like on desktop, I give people this extreme kind of variation. But on mobile, it’s much, much more tighter and consistent. You have full control over all of that. You have full control over all of your base styling, all that good stuff, OK? The reason I’m bringing this up is because in oxygen, what most people do is they go to settings, right? And you’re going to watch this override Automatic.css. I’m going to go to settings and I’m on a class with locks, so I can’t see it. OK, so I’m going to go to global styles, headings. And you’ll notice that minor all blank. Why are minor all blank? Because Automatic.css is doing all the work for me.

0:57:06
But what a lot of people do is they have to come in and say, all right, what do I want my font sizes to be? Now, of course, we know don’t set these in pixels. But if I did Rams here, let’s say I do 40, sorry, 4. And then on my age 2, I’m going to do 3. We’ll just choose some random stuff here. H3 is going to be 2. H4 is going to be 1.6. And then H5 is going to be 1.4. And then my age 6 is going to be 1.2, something like that. OK? So all right, it’s kind of good, right? The problem is, in oxygen, you have no mobile control over your head. You’ve just fixed these heading sizes into place.

0:57:54
And there’s no adjusting them. There’s no break point styling over here for these global settings. So if I reload this page, what is this? 4 RAM, 40 pixels. Let’s go to mobile. It’s going to stay 40 pixels on here. Now, that might be fine if you kind of use. It’s really not. That’s too big. But let’s say you wanted to be more extreme. And you were like, well, I really want big H1s on this site, right? So I do something like 8. All right?

0:58:22
So we had save. Now I refresh. Well, guess what, fam? It’s 8 all the way through, baby. You have no variation and no control over the responsiveness of that heading size. So my tip would be clear all these sizes out and use automatic.css. But if you’re not going to do that, let me clear these out, I would say definitely don’t set them here and just make classes for them. So make this an H1 class, make this an H2 class, something like that. And then you can go ahead and style these. Because now you can say, OK, well, here I want that to be 8 RAM.

0:59:06
But as we go down, at least I can now access my breakpoints. Where I can say it’s going to be 6 there. And then I get down here. And it’s going to be 4. And then I get down here. And it’s going to be 2.4, something like that. So now I don’t have unruly headings. Now that was a lot of work. And where are you coming up with these numbers? Are they just arbitrary? In automatic.css, obviously you don’t even have to make heading classes. Because the headings are all done for you. And you don’t have to think about what the sizes are going to be because they’re all mathematically spaced out based on the mathematical scale that you choose.

0:59:43
Now a lot of people are like, but Kevin, I really do want, sorry, I’m doing a lot of talking. Kevin, I really do want really big headings. How do I do that with just for the H1? I want everything else, the H2, H3, all that to be the way that it is. But I would really like, that’s my wife. I’m going to have to answer that in just a second. I would really like the H1s to just be bigger. No problem. Look, you come down to the overrides here. You find the XXL overrides, which control the H1s. Andrew XXL text. And on mobile, you say, all right, on mobile, I want to be 3.2.

1:00:21
And then on desktop, I want it to be the 8-RIM. I hit save. And then I go refresh on the front end. There it is. But the difference is, oh my gosh, it scales. Because it uses a clamp, OK? I’m not going to get into how all of that is done. But this is how automatic.css just makes typography throughout a website. And absolute breeze at the global level. Again, this is without any classes on your headings or anything like that. You don’t have to put thought into typography anymore. It’s just automatically taken care of for you. OK, let’s go on to the next one.

1:00:59
So that was do not set heading sizes and global settings. Static images instead of source set. All right, so this is an easy one. I did an entire tutorial on it. So if you have an image, you want to add an image, you have two options here. Image URL or media library. If you do the image URL, let’s choose an image, pop it in, bam, let’s do some width control on here. OK, let’s take a look. And then I’ll do a section below that. We’re going to add another image. And we’ll say with them on that as well, the difference here is that we’re going to choose media library for this.

1:01:41
And I’m going to choose my image. And you’re going to see that right off the bat, I get access to this size dropdown. And I can say, oh, I just want this to be a medium size image. Now, if you look down here, it’s super pixelated at medium. So I’m going to do full. Now, this is my training site. Now, it cleared up. Typically, on a site, I have a bunch of different sizes. So I can choose the exact size that image needs to be. But let’s go ahead and hit save, take a look at the front end. And let’s inspect. Let me get out of mobile mode here. OK, so I’m going to inspect image source equals.

1:02:23
And it just has the full URL to the full resolution image. Inspect this one. Now you see source. And then it has these sizes, max width. And then it only has one, because I didn’t load any other sizes in. But typically, what you’re going to do is you’re going to choose the exact size it needs to be, like medium, would be, let’s say, 640 pixels. It’ll insert a 640 pixel version of that image versus the full resolution image. And then it uses source set, which means the device, if the device is only 320, and you have a 320 version, which is, it’s all automatically created for you.

1:03:05
Go watch my video on source set images. It’ll actually load only the 320 version. So it’s helping devices load the exact size that the image needs to be, instead of forcing every device to load a full resolution image, which obviously is not good for performance. So this is called source set. Again, go watch my video on source set images, but just get in the habit of every time you add an image. I’m going to delete the wrong one. I’m going to add an image. OK, get in this habit. You add an image, hop over to the Media Library tab. Don’t do it from Image URL. Do it from Media Library.

1:03:42
You’ve got to train yourself to do this, and hit browse and add it from here. And then select in the drop down the exact size that you need. Now, prerequisite, go load in all the sizes. Just copy and paste the code that I give you in the other tutorial video. Pop it in. You’re going to have all the sizes available to you. And then you can choose the exact size you need. But this is going to help your sites be a lot more performance oriented. OK, so let’s move on. That is that. Background images versus a real image. I did another tutorial on how to create an image card properly.

1:04:19
And it kind of goes over this concept. But when you’re adding an image, if you’re going to say, we need this to be a background image. The question you need to ask yourself right off the bat is, is this a decorative image? Is it just for decoration? Or is this an image that’s actually really relevant to the user? And the answer to that question is going to guide you on how to create this image. If it is decorative, it is just for decoration, it can be a background image. If it is important to the user, it needs to be a real image. Now, you can make real images behave like background images using object fit CSS.

1:05:01
And again, that’s in my tutorial on how to create an image card properly. But the mistake here is saying, oh, I know how to use background images for this. So that’s what we’re going to use. When in reality, you need it to be our full image. And here’s why. So we’ll do a div. We’ll do a little card, right? So grid three, gap M and div. Perfect. And then inside of that div, I’m going to add another div. That’s going to be my image wrapper. And then I’m going to add another div. That’s going to be my content wrapper.

1:05:31
I’m going to do all this at the ID level, because I’m just moving very, very, very quick. Again, you never do stuff like this at the ID level. I’m going to make this width 100%. So that’s housing my image. This is going to house my text. It’s also going to be with 100%. I’m going to pop my image in here. But I’m not going to use a real image because I need to overlay text on this. And I don’t know how to do it any other way, right? So I come in, I hit here, I go background, I say, this is the image that I need as my background image. And I know in oxygen, right? I can now hit cover, and I can do 50%.

1:06:06
So I can control that its position is another reason why people like background images. It also makes it really easy to add a dark overlay, for example. And then what I can do is say, well, the minimum height of this needs to be 30 rem, like that. And then I would have like text down here, which I would put, well, I’ll just use a class. We’ll just do pad M. And then I put some text down here for my card. But up here, I really need my heading to be overlaid. This is going to be an age three. And my text color is going to be white. OK, great. And then I’m going to also pad M this. And then I, here’s an example where I can use Flexbox to position content, vertical, and bottom, right?

1:06:49
And this is a heading. Great. So there’s my card. Problem is, now let’s go grab the entire card. And let’s do a background here. Well, that didn’t work. Did it. OK, let’s go out to the card. Yeah, thank you. Usually it doesn’t inform me automatically. All right, save. And let’s view. Man, we whipped up that card pretty quick, didn’t we? So this is why people use a background image. Because they don’t know how to make this overlay.

1:07:18
They don’t know how to overlay text, unless it’s a background image. But if that is really an important image to the user, there’s a problem. Nobody with a screen reader knows it’s there. Google doesn’t know it’s there. There’s no SEO value. Because when you add a real image to a website, now over here, I’m just going to add an image. And we’re going to go Media Library Browse, BAM, insert this in. Pretend like this image was in this card right here. And I’ll do a full. I now have the ability to add this alt text right here. And I can say, child coloring at Christmas, after opening presents.

1:07:57
OK, so I’m describing what the image is, which is what all tags are for. I go to the front end. I inspect. And now you see right here, a screen reader is going to announce this as an image. It’s going to say image, child coloring, or Christmas after opening presents. So accessibility, people with screen readers, actually know the images there. SEO, Google’s crawling the site, right? All of your images are background images. Google has no idea any of them exists. You’re getting no SEO value from any of the images on that web page. But if you use real images and you use alt tags, Google now can crawl and index all of those images, very, very, very powerful.

1:08:39
So again, if it’s decorative, then it can be a background image. If it is needed for the user, if it is important to the user, it needs to be a real image, regardless of whether it looks like a background image or not. Because like I said, you can make real images look like background images. Go watch my tutorial on how to make an image card properly. But this applies to images everywhere across your website. All right, next one is going to be not removing pagination. So let’s just build a, I don’t even know if we can query something. Let’s put a repeater in here. And let’s make it a three grid repeater gap of M. OK. And what we’re going to do is don’t think I have any content in here. So we’re going to query.

1:09:27
And we’ll do, let’s just do a manual query. OK. So post type is going to be post. I don’t know if I have any posts. Hopefully I have like one. Let’s just do that. OK. Let’s put something in here and see. So heading, if there is a post that exists, I would be able to click this and insert data post title insert. Oh, there are. There’s test posts in here. OK. Perfect. So these are going to be H3 tags.

1:10:06
Awesome. OK. Now I actually only want this to be post per page. Ignore this part because this is technical, right? Post per page is going to be three. And actually, that’s, yeah. OK. Let’s do three. Because I think that causes pagination to happen. Refresh. It does. So there’s my pagination right there. So you actually only want to show three posts. Let’s pretend this your home page featured article section. But you only want to show three posts.

1:10:43
And then you want to have a button that says, like, read more posts. Something like this. The button goes, read more posts, something like that. And then we’ll just do margin top, big L on there, bam. Save. Give a problem, guys. You look at this pagination right here. That’s not supposed to be there. Now, what a lot of people might do is they try to hide it. Now, unfortunately, in oxygen, there is no hide pagination. You go to the pagination tab. And I hope this is in 4.0. Please, oxygen, put this in 4.0. It’s so simple.

1:11:20
There should be an option to hide the pagination here. And there isn’t. And so a lot of people use custom CSS. And they’re like, I’ll just hide it with CSS, display none. But it’s still there. And what I’ve seen on websites is Google crawls these sites. And there’s repeaters that have just showing three things out of like 100. And there’s these disappeared paginations, but they’re all being indexed. And instead of Google indexing the right things, it’s indexing all these paginated pages, right? Big, big, big, big, big problem. So when you are doing your query, what you always should do is, and then I tend to use WP Grid Builder facets, so like Ajax Load More, or I might use the pagination from WP Grid Builder if I really want pagination.

1:12:09
But what I always do by default is I edit the query, and I go add no found rows. And I just make this true. And what that does, I know the name, doesn’t make any sense, but that hides the pagination properly. It doesn’t hide it with CSS. It actually makes it not exist. So that’s what you want to do. Big beginner mistake is limiting the repeaters, and then hiding pagination, or leaving pagination, because they just simply don’t have to get rid of it, and styling it when really there shouldn’t be any pagination there, right? Like you don’t really want people to be able to page through three posts at a time of these pages right here.

1:12:50
This is not good user experience. So hide your pagination people. OK, next one. Man, all the talk was killing my throat. Not using CPTs for queryable items, custom post types for queryable items. So let’s say you have testimonials. You have services. You have products. You go in, I guess products and services would be a good example of this. Let’s say a company has 30 different services, or products, whatever. Are you going to put all those pages in the pages area? Because you got all the other pages here, like about us and a contact us, and all that’s a location.

1:13:34
You can just put all the location pages in there as well. And then if you do, and you need to make repeaters that show all the locations, or show all the products, or show all the services, that’s going to be a nightmare to create repeaters, to query those things. Unless, of course, you make custom post types for everything. Very, very, very simple. MetaBox right here. Post types. New post type. This is not like, this is very simple stuff, of very, very powerful though. So services. See your name.

1:14:10
Well, it’s a service. Slug. I want to be services. Publish. Watch over here. Services. Add new service. I now have a completely separate section where I can put all service-related pages, right? So I click in here. Here’s where all my service pages will go. Completely separate from pages. What if I want to categorize my testimonials? And be able to display my testimonials and grids very, very easily dynamically?

1:14:39
What if I want to associate testimonials with specific products and services? Well, you can’t just manually create testimonials on the website using Oxygen Builder. You need to create a post type. So you go to post types, new post type. Testimoniii, testimonii, pulse, testimonial, and then I add a nest on the end. Publish. Bam. There’s your testimonials. And now you add all your testimonials to the testimonial section. You can query them on any page you want using a repeater, just selecting post type equals testimonials instead of post type equals post, right?

1:15:15
Very, very simple stuff. I have tutorials inside of Intercircle on this. I have a great video on YouTube of the details all of the use cases for custom post types and why you should be using them. Definitely go watch that. But this is a huge mistake I see all the time. People are using the pages section to put all their pages. Posts, same thing, right? Blog posts. But a company might also have press releases. Don’t put press releases in posts, create a custom post type called press releases. So they’re all organized.

1:15:48
It is unique, queryable content. If your content is unique and queryable, make a post type for it. Make a custom post type for it. There’s nothing scary about custom post types whatsoever. They’re very, very, very powerful. Next one is no 404 template. Sorry, I couldn’t read my handwriting for a second. No 404 template. So I’m going to go to oxygen templates and I’m going to go to add new template. This is where you would add your 404. But before we do that, let’s go to the front end and let’s say somebody typed in some nonsense. Enter.

1:16:23
Well, it’s got characters in there. They’re just going to be like, okay, enter. They just get like your header and your footer. And nothing, remember, it’s hard to see. But this was my header. This is my footer, right? That’s all they get and they don’t know what happened. They’re like, whoa, broken website, right? I don’t know what just happened. So 404 template kind of tells them, hey, sorry, this page is not here. But if you would like, use the navigation up top, try to find what you’re looking for. Maybe click the button right here to contact us.

1:16:53
That kind of thing. So very simple to create, but a lot of people forget to do it, especially beginners. So I want the 404 template to inherit my primary template, which means it’s going to have a header and it’s going to have a footer. So when somebody gets to a 404 page, they’re going to be able to see the navigation, they’re going to be able to see my footer. Then I’m going to come down to other and I’m going to assign this template to 404. That’s it. That’s all they have to do. And then I’m going to hit Publish. Now you do have to build the actual template, which I’ll show you how to do.

1:17:22
So we’re going to hit Open anyway. OK. And thankfully, I’m using Firefox. And Oxygen has improved a lot. And we don’t have to wait very long. So it should pop open any second. And then I’m going to add a section. And I’m going to add a heading. And I’m going to say, oops. This is a missing page. And then I’m going to add text. And I’m going to make this text large. And I’m going to say, we couldn’t find what you were looking for. But if you contact us, maybe we can help.

1:17:58
And then I’ll just add a button. And we’ll just make this a button primary. Because this is how utility classes work. People will make sure life a lot freaking easier. Owl, M space, everything out. And then I’ll just do Center All, Bam. I got everything nice and centered. And I’ll also do Pad Section L, because I want a bigger section. All right. So we’re going to hit Save. And we’ll also give this a BG of Base Ultra Light. Just so it has some styling in there. Now, if I go to this page, Bam. I have a 404 error template. Oops.

1:18:36
This is a missing page. We couldn’t find what I’m sure you’re looking for. If you contact us, maybe we can help, right? So that is really, really simple, but very, very, very necessary. Now remember, remember we changed all the scale. We were like, oh my gosh, we’re trying to make everything crazy. Watch this. Go back to the back end, automatic CSS. And I’m going to go to Typography. And I say, you know what? That scale is a little aggressive. We’re going to bring that back down to Augmented Fourth. And then you know what? I don’t want this to be overriding my H1 anymore.

1:19:05
I just want my H1s to be whatever they’re supposed to be based on the math equation. I refresh. And look, I have typography that is nice and sensible, again. And completely responsive. It gets bigger, gets smaller, all according to what I was setting in the dashboard. OK, next is Global Colors by Literal Name. Now, if you’re using automatic.css, you have all of your colors managed in the ACSS dashboard, along with all of the shades that are automatically generated for all of those colors. But if you’re not using automatic.css, what you’re probably going to do is go to Manage Settings. And we get off a class that’s locked.

1:19:46
Global styles and colors. You’re going to find yourself in this section right here. And I’m going to go ahead and delete this color, because you start out with nothing. And you have to add colors. And so you’re thinking, all right, I’m working for this brand. I’m going to add their colors. And you’re like, first color they have is red. And you do this. Bam, thank you. Add color. And you’re like, they also have this dark red. Yes, they do. So I’m going to grab this, put that in, and make it dark. OK, and I’m going to add a color.

1:20:18
They also have this green color that they use. This is their action color. It’s just like ugly ass lime green. And we’re going to add that. And then there is a green hover color, which is that color, but maybe a little brighter. OK, so I’m going to hit save. Now, what I’m going to do is I’m going to go to this button right here. And instead of button primary, I’m going to create a custom button, which we already did earlier. Button, and that’s what it looked like. But the difference is now, instead of these colors, just being hex codes, I’m thinking to myself, oh, I’m super smart.

1:20:53
I program these in as global colors. And so now I can just choose them from down here. And I can say there’s my green. And then I guess green color didn’t get added. OK, there it is. And now I have green hover, bam. And then I save. And I refresh and look at the front end. That’s not the front end, is it? Refresh. There it is. Oh, look at that. But now you’re not so smart, are you? Because the client comes along and they’re like, we actually don’t have the green anymore.

1:21:24
We got rid of it because HR didn’t like it. So what we need is, every way that was green, we need you to go ahead and make that orange now. Orange is our new action color. And you’re like, OK, boss, sure. And you go over here and you’re like, oh, let’s change that to orange. OK, let’s get a little orange happening. There we go. And then I’m going to come over to green hover and make this orange. And that’s going to be a little lighter because the hover safe. OK, awesome. We changed all the greens to orange.

1:21:56
The problem is it still says green, right? Because you made a big beginner mistake, which is naming colors their literal name. You can’t change that in oxygen. It’s green forever, right? So clearly now, this is not green. So if somebody else on the team comes along and you’re like, go add that orange color, right? And they’re like, I see green, green hover. And it’s not green. Is this the orange I need? Like, it’s just doesn’t make any sense, right? So what I would recommend doing is to lead all this nonsense. Add a color. You do something like primary.

1:22:33
Here’s our, well, I can type. Wow, thank you. Here’s our primary color. And our primary color is green. That’s our action color, right? And I’m going to add another color. And I’m going to call this primary hover. And there you go. Now, add it. HR comes along. They’re like, you know what? That green that we were using, it needs to be orange. OK, fine. Make it orange. It’s kind of red orange.

1:22:59
Come down here. Pop this one in. Make it lighter because it’s a hover. OK, save. See the fix now. It’s not a literal name. It’s just the website’s primary color. The website’s primary color changed. But it’s still the primary use case, right? Still our action color. So use names like this that are scalable. If the color changes, it doesn’t affect the name, right? The name should be associated with the use case, not with the actual color of the color, all right? So there’s the fix for that mistake.

1:23:37
Next one. We’re almost done, guys. Three more. Custom CSS inside individual elements. So let’s take off our button class. Let’s say for some reason we have to use CSS to style this button. So what a lot of people do, advanced custom CSS, and they start styling them. Now of course, they might do this on a class. So button custom CSS. All right, so I’m still in the CSS tab for button custom CSS. And I’m going to say that this background is going to be red and the font size is going to be 22 pixels, because I’m doing everything wrong here. And I’m going to say padding is going to be 20 pixels and 40 pixels left and right.

1:24:24
And then I’m going to say font weight. It’s going to be 800. And then I’m going to say border radius is going to be 10 pixels, because I’m going to do that wrong too. OK. So there’s my custom button. Written with CSS. And what’s the mistake here? Well, I come along six months from now. And I click on here. And I’m like, I really kind of want to change these buttons to make the text smaller. And you’re on button custom CSS, which you wouldn’t say custom CSS, because just ignore that. Do let’s say it says button.

1:24:57
And you’re like, OK, font size, OK. Oh, gosh. Oh, it’s blank. Well, was this style at the ID level? Oh, god, that’s blank too. Well, what do I do? All right. So I’m going to save. I’m going to go the front end. We’re going to start slew thing this. I’m going to investigate. I’m going to inspect. I’m going to come down here. And I’m going to see. Oh, there they are.

1:25:21
Oh, it’s in universal.css. OK. It’s in a style sheet. All right. So I’m going to go to my style sheets. And man. And there’s no button there. Oh, geez. OK. Well, let’s go back to it. Let’s look. Oh, I see a little tiny, little glowing dot next to custom CSS. How much time have I just wasted? Like investigating where the hell this styling is coming from? Well, this is why this is a no go for me.

1:25:54
Now, this is not going to break anything, right? And so it’s not, nobody’s going to wet noodle you. Well, I will wet noodle you. But if you’re working for my agency, we don’t put custom CSS into the modules, right? Because of what I just showed you. It’s a problem. So let’s take all this out. And what we’re going to do is we’re going to open a style sheet. And we’re going to name our style sheet buttons if we needed to do this. Now, I’ll give you another hint. I would start by doing a comment in CSS, which is something that doesn’t get printed in the styles, right?

1:26:29
But it’s a reference for anybody else who comes along later, and I’m going to say Kevin Geary. And then I would also like give my reason for why this needed to be custom CSS a lot of times, OK? But at least now, the people know who wrote this CSS. And I can also say custom button, all right? Then I just paste my styles, which I actually need a selector first. So what did we use? It was like button, custom CSS, something like that. All right, yeah, there you go. So I put that in there. And boom. Perfect. So now I can see who wrote this, who did this job?

1:27:07
So if there’s something wrong with it, I can go ask them what’s going on, or something I don’t understand. It’s also labeled that this is styling for a custom button. There’s the styling all nice and neat. And then I hit say, now somebody comes along, and things aren’t obvious here. They know immediately if there’s custom CSS involved to go to stylesheets. And then it’s all organized. Oh, here’s the stylesheets for buttons. Oh, there it is, right there. Custom button. If you have lots of different elements that have custom CSS, and that custom CSS is mixed between sometimes it’s in a module, sometimes it’s in the stylesheet.

1:27:42
People are like all over the place. Like a chicken with their head cut off. Where is the styling coming from for this? If you create a standard that says all custom CSS goes in the stylesheet and you organize the stylesheets, you never run into the where are the styles coming from problem. You always know it’s in a custom style sheet. OK? It’s a little tip. All right, next one is oxygen using oxygen to create blog posts. My god, this is one of my biggest pet peeves. Don’t ever do this. I’ll fire you on the spot. Now I’m just kidding.

1:28:16
But I might actually fire you on the spot. Here’s what’s going on. You create a page in Elementor, or Divi, or Oxygen, or whatever. They all use short codes to, like, the underlying build is wish short codes, OK? If you have 10 pages on your website and you want to switch from oxygen to bricks, maybe you have to switch. Maybe Elijah gets hit by a bus tomorrow. And the oxygen team’s like, well, Elijah was working all the magic. We don’t know what to do. We’re so distraught. We’re just shutting the whole thing down.

1:28:53
Oxygen blows up, and nobody can use it anymore, whatever. And you have to switch to bricks. So you’re like, this sucks. Well, it only got 10 pages that I have to rebuild on my site. But then it dawns on you. Son of a bitch, we have 150 blog posts. And we built all of them with oxygen. We didn’t use a template and use Gutenberg. Like we were supposed to. We built all of them, one by one, by one with oxygen. And now, instead of rebuilding a site that has 10 pages and simply creating a new template for your blog posts, you have to go create 150 new blog posts. Well, you have to undo, because you wouldn’t want to make this mistake twice, right?

1:29:42
You’re not that stupid. You would have to go undo the build for all of those blog posts and convert them over to Gutenberg-based blog posts and then create a blog post template for them. If instead you listen to me from the jump and say, I will never, Kevin, I swear on my heart, I will never create blog posts with oxygen builder, or any builder for that matter. If I’m going to create a blog post, it is going in Gutenberg 100%. Now, listen to me. I think Gutenberg is an absolute trash can. But I refuse to create blog posts with builders, because it’s an absolute nightmare, OK? Use Gutenberg for blog posts.

1:30:26
Create a blog post template to control the design of your blog posts. Never, ever create a blog post with a builder of any kind. I don’t care if it’s oxygen or any other builder, right? You have to make sure, because any website or company that’s doing a lot of content marketing, guys, think of digital, now I deleted a lot of the digital and vision ones. I had a business that was completely driven. This was back in 2012 by content marketing and SEO. I had 500 articles on that website. Like legit articles, I’m not talking about spun articles or bullshit articles or anything like that. These were 3,000 word articles, 500 of them, very detailed. And I had different layouts for content, right?

1:31:16
But I did not use the builder, because if I had, when I need to change builders, what are you going to do with 500 articles that have all been built with a builder that when you switch builders, all 500 of those pages turn into short codes. What are you going to do? Content marketing is designed to be expansive. You don’t create five blog posts on a website, typically. Like if you’re doing blogging correctly, you’re creating hundreds of pages of content over the years. You cannot lock that content into short code based builders. Do not do it. I hope I’ve made myself clear. OK, last one, improper website migration. This is just another beginner mistake, because all the time we see in the oxygen Facebook groups, it’s like, my graded in my site broke, it blew up.

1:32:10
I don’t know what happened. I’m missing pages. I’m missing content. I can’t see my header. I can’t see my footer. I can’t do this. I can’t do that. Improper website migrations could possibly, and if you haven’t done backups, and you’re trying to do this to a live domain, lots of headaches, lots of problems, you could, at some point in there, just completely lose a website if you’re not careful. So I recorded a video on how to do proper oxygen website migrations. I’m going to link to that below.

1:32:40
Just watch that video, follow that process every single time. You do a website migration, and you’re going to be OK. But one of the biggest beginner mistakes is just not knowing how to do a website migration when using oxygen, because it’s not like other builders or themes when you do migrations. You have to do some special steps. You have to reset your permalinks a couple times. You’ve got to resign your short codes. You’ve got to clear your oxygen cache. You’ve got to follow these steps every single time. And then I laid out additional steps to ensure that if your migration fails for any reason, it’s not going to affect a live domain. So I’m going to show up on the live domain if it’s successful.

1:33:20
So go watch that video. That is the end of this 20 slash maybe 21, maybe 22. I don’t know how many we ended up doing, because I threw a couple of extras in there. But that’s the end of this beginner mistakes tutorial. If you want a lot more guidance, like detailed guidance on how to build oxygen websites properly, if you want more guidance on accessibility, if you want guidance on SEO, if you want guidance on how to run a really legit agency, I would highly recommend joining my inner circle where over 800 members strong, you can go to digitalimvision.co slash inner dash circle. I’ll put the link down below in the description as well. Come join us.

1:34:01
We got a lot of amazing stuff going over there. And of course, I showed automatic.css a few different times during this tutorial. If you’re interested in an awesome utility framework for oxygen and WordPress coming soon to bricks and woocommerce and Northcommerce and maybe some other builders as well. We’re doing a lot of voting inside the automatic.css community for what people want to integrate with next. But if you want to get your hands on that, it’s automaticcss.com. All right, this was a long one. Thankfully we are done. I hope you guys got a lot out of it. If you have any comments, drop them below. Hit the thumbs up, hit the subscribe, hit the notification bell.

1:34:38
Do all the shit you’re supposed to do as a great YouTube subscriber and watcher and viewer. Okay, I’m out. Peace.