WDD LIVE 063: Beginner Web Design Q&A + Demos – No Question is “Dumb” or Too Basic!

0:00:00
Welcome, welcome, welcome everybody. It is another WDD Live. We’ve got Dehunzey in the house. Ruben, good morning from Columbia. Patrick, Whitespace is here. Donatas, Marco, Tudor and Grant, say hello when you come in.

0:00:19
Good to see you guys. Paul Burgess, good to see you. Carl, excellent, excellent, excellent. So what we’re doing here, we are doing a beginner Q&A today. What we normally do on WDD Live is a bit of a variety show. We do website critiques.

0:00:36
We talk about all the things that make a website successful. We talk about hot topics in the WordPress ecosystem. But what we’re doing today is we are dedicating the full time. We talk about all the things that make a website successful. We talk about hot topics in the WordPress ecosystem. Where is this coming from?

0:00:51
Where is the YouTube? Okay, hold on.

0:00:53
Hold on.

0:00:54
Hold on. What we’re doing today. We gotta get, we’re playing ourselves somewhere in the background. Okay, yeah, there’s a rogue tab open. Okay, that’s fixed. All right, we do deal with a lot of technical difficulties here on WDD Live.

0:01:06
No, we’re taking the entire time to answer beginner questions. And some intermediate questions probably too. Like who gauges? Who gauges whether it’s beginner or intermediate? I don’t know, you do. The point of the live stream is that you know there’s often times where we do Q&A’s where I think a lot of beginners

0:01:25
sit on the sidelines. They just kind of watch and they’re like, you know I kind of have some questions but I feel like my questions are super beginner, it’s too basic, nobody wants to hear these questions answered. In fact, people might think I’m dumb for asking it, whatever. And so they just don’t ask anything. And they just sit there and watch. And most of the stuff probably is above their head. They don’t really get much help. They don’t really move themselves forward. So this is your permission, this live stream right here.

0:01:55
You have permission to literally ask. It doesn’t matter how basic you think it is, you get to ask the question. We’re just gonna clear up a lot of stuff for a lot of people today. And then, you know, if you feel like your question’s a little bit intermediate, then that’s fine too. Just go ahead and ask it.

0:02:10
If it’s too advanced, then I’ll just say, you know, we’ll save that for a typical stream, okay? But, you know, I just wanna prioritize people who are more in the early stages, more trying to sort all this stuff out, wrap their brain around different concepts and workflows.

0:02:29
And I mean, there’s so much stuff, right? This is such a technical industry and it doesn’t even have to be with bricks. Like, let’s, let’s also give a little bit of structure to this. Your question could be about bricks. Your question could be about web design in general. Your question could be about grid.

0:02:46
Your question could be about flex box. Your question could be about headings. Your question could be about something in WordPress, custom post types, custom fields. Like whatever you are struggling to wrap your brain around, go ahead and ask the question.

0:03:00
Now, you have to ask the question like this. Two things that I’ll say about the question. Number one, hashtag Q or hashtag question. That way it actually goes in the questions area. If it doesn’t go in the questions area, probably can’t answer the question for you.

0:03:16
So you gotta use the hashtag, Q or question. And then you have to, you know, put a little detail into the question. Like, if it’s super, super vague and I have no idea what you’re talking about, then it’s very difficult to answer the question, right?

0:03:30
So just try to give as much, and I know you’re limited on how much you can write, but just try to ask your question as specifically as possible, okay? We’re gonna go ahead and get right into it. All right, D123, good morning. The knowledge jar is here from Frisco, Texas.

0:03:47
Tommy says, best frames templates to create a small local service business for my son. That’s not a question though, Tommy. You got to put a little hashtag Q in there. Okay. All right, good. The questions are rolling in. We will start to get to those. There are no topics today. There’s no demonstrations other than what is asked. So this is completely questions driven.

0:04:12
We got to flood in the questions. Ask whatever, even if you, you know, let’s say you came across a question that a beginner had the other day. It’s not even a question you really were super interested in, but you know, you think other people might be interested in it. You can ask that question as well.

0:04:27
We just need a lot of questions to roll in so we have a good show today and we can put out as much value as humanly possible. Okay, let me do a little search and we will dive right in. Okay. Antoine says, question, how to ask a question. Okay, great first start.

0:04:46
Yes, you did it correctly. You did it correctly. I found your question. Question, can it be how to get your first client? Yeah, sure. So that would be in the agency freelance space, how to get your first client.

0:05:03
This assumes, I guess, that you may not even have a portfolio, right? I don’t think you should have your eyes on getting your first client, like your first paying client. Unless you’ve already done some work for your own stuff, okay, or done some work for other people. I’m a big fan of when you are brand new just volunteering your services. I’m a big fan of that. You got to get some like real-world experience under your belt and this is the first thing you’ve really done in the real world, so I wouldn’t even try

0:05:41
to justify making somebody pay for it, right? It’s kind of an experiment, to be honest, and you should be up front with them about that and say, hey, I’m just getting started. I know you need a website. I’m happy to do it. I’m not going to charge you for it.

0:05:55
But what I will say is make them sign a contract of some sort, right? Put structure into it like it’s a real project. Treat it like it’s a real project. Fire up some project management software. Go through the whole process. Outline what your process is gonna be.

0:06:10
Like, are you gonna wireframe it first? Are you, like, how’s the design process gonna look? You know, then you’re gonna go into the dev, whatever. Make sure all the tasks are there. Make sure they’re assigned. Make sure there’s good communication.

0:06:22
Like, treat it like it’s a real project. And then go from start to finish. What this is also gonna do is it’s going to allow you to really see how much work there really is. And I want you to kind of document the entire process as you go through it, all the things that you end up doing

0:06:37
that maybe you didn’t foresee having to do. Note all the times the person you’re doing work for has changed requests and opinions change and all this other stuff. You gotta take note of all this stuff because this is going to happen in every real project and this is going to help you price accordingly when you do actually start pricing things

0:06:56
out. But I think you need to get a real world project under your belt. Don’t even worry about the money. Just do it for the experience. Put it in your portfolio. Use it to start creating processes.

0:07:09
Use it to get a glimpse of how this stuff actually comes together from start to finish and the hiccups and the hurdles and the challenges and the diversions and all this other stuff that goes on. And then you can start thinking about getting your first paid client. And you’ll have a lot more confidence to get that first paid client as well. Okay, I was watching the Zendesk rebuild and you skipped making the icon category dynamic. Can you show us how? You skipped making the icon category dynamic. Zendesk.com icon. They’ve, they’ve, I think they’ve changed

0:07:44
their site a little bit since then. Icon category, this right here, the guide report article product thing. There is no, oh, okay. Yeah, yeah. Because, because you have to choose the icon. Well, actually, probably, well, see, here’s the thing. There’s, there’s a bunch of different ways to go about doing this. I would probably most likely just use CSS. So are they on WordPress? What do they what do they build their website with? Let’s see what they’ve got

0:08:19
going on here. Okay. I don’t even know if, yeah, this doesn’t look like it. So in WordPress, automatically when posts are categorized, the name of the category gets attached to the post as a class, okay? And so what you can do at that point is you can style that, obviously you’re gonna use dynamic data to insert the name of the category. So that’s just a standard dynamic data entry.

0:08:52
It’s hard, there will be a lot of infrastructure to set up, I got to go put in dummy posts, I got to categorize them, then we got to go like that’s, you know, that would take 30 minutes of our screen. But I’ll try to explain it to you. So dynamic data, very easy to insert the name of the category. And then what you’re going to do is based on the class, you can use CSS

0:09:11
just a pseudo element to assign a custom icon ahead of that label, okay? That’s probably the easiest way to do it. Then another way to do it would be, I don’t even know if those are categories, honestly. We have to look at the architecture of the website.

0:09:27
Are these posts in CPTs? Like, is there a reports CPT? See this, am I not screen sharing? Okay, that does help. It does help if you screen share. See this right here, report, guide, article, product.

0:09:42
Okay, yeah, you guys should be able to see that now. I don’t think I wouldn’t have these as posts in the first place. Okay? So there’s a whole architectural discussion that has to happen here. This would be a CPT, like especially if there’s a lot of reports that your company is putting out, then I do a report CPT.

0:10:00
So all the reports go in this CPT here. And then are there a bunch of guides that you’re going to be releasing? Well, to me, that says guides, custom post type. We put all the guides in the guides custom post type. And then you have, of course, articles. That sounds to me like posts.

0:10:14
Those are actually posts. But then those would be categorized on their own. They’re not in a category called article. And then you have products. Obviously that’s not a post. But then again, I don’t know.

0:10:26
Is it? Yeah, this just goes to a landing page, okay? So these are CPTs. These aren’t even articles with categories. So this whole category situation is not even a category situation. So at this point, it’s actually easier because you have a CPT, a CPT, a CPT, a CPT, and then

0:10:45
you can assign an icon to every custom post type. So that when you call that custom post type up you’re able to reference its icon. That’s that’s how you would do this grid. So to call them categories is a little bit misleading because they’re not actually categories they’re just different custom post types. Then again some people would try to do it as posts and categories I would just think that that’s not a great way to do

0:11:08
it honestly. So I would do the CPT route and assign an icon to the CPT. Okay, and that’s beyond, I wouldn’t say that’s a beginner. This isn’t even a beginner topic right here, right? This is a, now we’re in intermediate advanced territory of custom post types and custom icons. And that’s probably, the beginners are already feeling

0:11:27
a little bit left behind, right? Okay, Dov Burr says, why do I have the non-activated classes in the right click context menu? That’s an ACFS question. We can come back to that maybe if we have time, but I wanna keep these more to general web design

0:11:46
because then we start to leave a lot of people out and we go specific into a tool that not everybody might be using. Question, when would you rather create a website with WordPress or when would you create one hand coded? Well, I wouldn’t create a hand coded website in this day

0:12:03
and age. I, you know, people always suggest that it’s like, well, for some of my projects, I use WordPress, for some of my projects, I use Squarespace, for some of my projects, I would use custom hand coded theme. And it’s like, you have a business problem at that point, if your if your workflow is spread out over multiple platforms like that, that’s a business problem.

0:12:25
Like, businesses work best when they have streamlined processes and workflows, when the team that operates the business is all on the same page, and they’ve mastered the tools and mastered the workflow, this is how efficient work happens. Okay, it’s the same reason I say you shouldn’t be doing SaaS websites and e-commerce, or you shouldn’t be doing service-based websites and e-commerce and mixing it up. Those are two completely different disciplines, two completely different workflows, two

0:12:55
completely different sets of requirements. So you’re creating a business that is operating in this chaotic state. You should never be just willy-nilly swapping platforms. You should be using one page builder. I’ve seen people, oh I use Bricks for advanced projects and breakdance for simple projects. No, no, no, no, this is not, this is chaos, absolute chaos. Pick a stack, master the stack, everybody on the team masters the stack, and you do

0:13:25
work that fits into that stack. And that’s it, okay? Now if you want to dilly dally and dabble and play with all these other tools and just see and have fun or whatever, fine, yeah, go do that. But that’s not what your business should be in the business of doing. So with that said, I would never hand code a website.

0:13:44
It’s WordPress, WordPress, WordPress, WordPress. And I don’t see why it wouldn’t be. It takes me four seconds to fire up a new dev environment from a blueprint. And then because my stack is the way it is, I can build literally whatever I want, and I can do it very efficiently, and I can do it in maintainable, accessible fashion, and life is great.

0:14:06
I mean, what part of WordPress is like hindering me at that point, right? Other than the things I always complain about with WordPress, but it’s not enough for me to abandon WordPress and do something else randomly for one specific project.

0:14:22
So I’d say for max business and efficiency and workflow and professionalism purposes. You got to pick a lane, stay in your lane. A lot of my websites are just full of boring design. A lot of two column layouts with image and text next to it. Do you have any advice on how to spice up the design? Yeah, I mean, there’s a bunch of different ways to spice up design.

0:14:45
One thing to think about. Let’s go with, of course, you know, you tell people, hey, live stream, let me, let me message them. You know, hey, got a live stream, you know, they still have, they still have other things on their agenda. All right, so let’s, let’s get a good example here. Just to show you, we just talked about a couple different ways people approach this. Okay, let’s just scroll down here, right?

0:15:17
One thing people complain about is a, you’ll hear the term boxy. The website’s boxy. Because if you’ve done page building 101 at all, I did a lesson called everything is a box, right? Everything is, literally everything is a box. You have to design with boxes.

0:15:33
So the challenge is hide the boxes, right? You make it look less boxy by violating where the obvious boxes would be. Okay. So for one example, this is obviously a box, right? But look at this background design, this glow that’s kind of stretching to the edges behind. It’s, you know, visually we know that there’s a box right here and there’s probably a box that goes here.

0:16:00
But this background seems to be violating the edges of where boxes would be, logically speaking. And so that helps break up the boxiness. Like we don’t get the same, ooh, that’s a boxy design. We don’t feel that way because we visually see things that are violating where boxes would be.

0:16:19
Another thing is with Bento grids, right? So, and this is why Bento grids are popular. You’ve got this longer card on the left and then a narrower card on the right, which creates a line down here, but that line doesn’t line up with this line,

0:16:34
which doesn’t line up with this line. We’re breaking up where the obvious boxes are, right? With the bento grids. Okay, we’re also aligning things differently, where we’ve got an image sitting right here at the bottom of the card, kind of in the center,

0:16:49
yet this image is off to the left, attached to the left side, attached to the bottom. This one’s back in the center, but this one is back to being attached. This is attached only to the bottom, and then this is back to being in the center. So we’ve got some variance in what’s going on with the cards here. We’ve got a, this is done with columns, It’s done in a slider, but you can see the off, right? The lines don’t line up, right?

0:17:18
We’re breaking up the boxiness. It’s not just a grid. It’s not just a grid with finely defined areas. Some of these cards are longer, some of them are shorter. They fit in and fill the gaps, okay? And then we come down here, that’s a standard footer.

0:17:32
All right, there’s nothing exciting about that footer. Nothing really exciting about the header all that much either. But you saw in some areas where they’re attempting to break up the boxiness. Now, how do you do that?

0:17:43
Here’s one that actually looks quite boxy, okay? So let’s go here and just kind of compare. Boring, I mean, boring hero, right? Come down, very boxy, literally just boxes in a box, okay? Come down, again, boxes in a box. Not to say that this doesn’t work and it’s clean,

0:18:00
but like this is what people are going to criticize for like being boxy. Let’s go down to let’s just do one more we don’t we don’t want to spend too much time on this. Okay look at this look at how these visuals that are going around the outside violate our understanding of how things are laid out on on the web right so naturally that creates more visual interest. It also frames, same thing in photography.

0:18:28
In photography, you can use what are called natural frames to frame the real subject, right? And that’s what they’re doing visually here. These are a natural frame for the subject. So this all draws your eye into the center where the content is, right?

0:18:47
So now, can you just wing it? Can you just like, you know, randomly play stuff and this all works out? No. I mean, that’s why design is a talent. That’s why design is an art. That’s why design has principles.

0:18:59
There’s spacing principles. There’s rhythm principles. There’s typography principles. There’s positioning principles. There’s principles dealing with width, okay, and height of objects. There’s so many.

0:19:11
And so it’s an area of study, you have to study to get better at it, and hopefully eventually get good at it. So to go from like, I don’t know the first thing about design to like, wow, that’s a really inspiring design. That’s years. I mean, that’s years, right? But you can start to look at why certain designs work, and why certain designs fail. And then you can avoid the obvious failure points. And that’s going to start to improve things dramatically. Hopefully, that answers your question. Okay, question on best practices for using, I’m trying to do my best to rapid fire these.

0:19:49
Question on best practices for using images, especially with frames, how to set the right pixel dimensions, aspect ratios, things like that. I want the image to have enough resolution to look good. So if we are in the builder and we drop in a frame, let’s go ahead and use this one as an example. So we will bring in, do we have anything here?

0:20:10
Let’s use this right here. And actually, let’s see. Man, that’s awesome, right? You just use a little utility class, flip that guy around so he’s looking at the content. This is very easy. Okay. Anyway, so this image right here, let’s go look at this on the front end. Just take a quick look because I think this is

0:20:35
actually quite important, right? This out of the box, and this is because every website has a different content width. The content width of the website is from here to here, right? It’s what creates the and actually the initial box right the the initial box that structures the the layout is the content width of the website that obviously varies from website to website and project to project if i go to websites we can see this is 1366 now this could have been designed on 1280 look at how this looks on 1280 that’s 1280 looks like this. 1366 looks like this. Now let me point out one thing that I am seeing. I like that the content width here at 1280

0:21:28
forced this headline to wrap earlier, which actually makes the headline look more balanced, right? And then this paragraph I feel is kind of looking a little bit more balanced as well. I mean, look how it’s stretching kind of over here. All right. And so this actually goes along with the previous question. And now the we’ll talk about the question about images. Now, does that mean I’m going to switch my content with from 1366 to 1280? No,

0:21:55
but what it does mean is I might do, I might do some pruning. Okay. And what that means is let’s go into the actual builder. Like I would do little stuff like this, okay? So I would come in, I might even do it with the class. I might do it on the ID. If I only wanted to affect this one heading right here,

0:22:14
I might do it on the class. There’s actually a couple different ways you could go about handling this. One way, actually, yeah, let’s maybe talk three different ways. Three different ways, and then it’s up to you to learn

0:22:25
what are the pros and cons of these things that I’m doing right and I’m and I’m always Battling the pros and cons list and I’m trying to figure out All right, if I do this it has more pros than cons these other methods probably have more cons in this specific So I’m gonna go there’s probably never a perfect way to go But there’s definitely one that has more pros and less cons, right? So I could do this at the class level and I could say something like 30 characters, let’s do 20 characters, 10 characters, we got to

0:22:53
find a character count in here that actually gets us to what we want. So now I have that more balanced heading, okay, but what I did is I put a character limit essentially on the class, which means every hero victor heading is going to have this character limit and maybe this doesn’t work for other headings that are in my other hero sections that use the same layout. So maybe I don’t want to do it at the class. Maybe that’s a little too heavy-handed. Okay,

0:23:19
so what I might want to do is just do that at the ID level. So now I’m only affecting this one heading. Okay, which is fine, right? But are there other methods we could use? Yeah, there’s another method we could use, which is actually coming to this grid layout right here so we have the box on the left and the box on the right and we could just set a bigger gap right and we could find a gap value that actually does that see so that’s an now am I saying that’s the better way to go no but it but look what it did it kind of did the same thing but it also has the

0:23:55
effect of putting the image further away from the rest of the content do we want that to happen I don’t know I don’t know these are decisions that you have to make, right? Let’s go back to grid gap. Another thing that you can do is you can take this box over here, like the entire box instead of just the heading, and you could put a max width on that, and you could do a character count.

0:24:16
Let’s see if, there’s 20, there’s 30, 40, 50, 40, something like that. This creates what is like a virtual gap. Like I didn’t change the gap in the grid, but visually speaking, clearly that gap is larger than it used to be. Why?

0:24:34
Because I just shrunk the box that’s on the left-hand side. Okay, so I didn’t change the gap, but I did achieve a bigger gap, but I also achieved this tighter like content layout. Let’s just go look at that on the front end

0:24:46
and see what that does. I mean, that looks really good. Like the tightness of the left column over there looks better than it all being like spread out and stretched out, right? And the fact that there’s a giant gap here,

0:24:57
it’s still, in my opinion, works for this layout. It actually gives the image a bit more breathing room or gives the text more breathing room, however you want to look at it, okay? But look at how I just went through like, man, so many different ways

0:25:11
to kind of start to achieve that same outcome, right? And there’s even more that I didn’t cover. And so this is always a game of like, let’s just try to choose the thing that has the least downsides and the most benefits for what we’re trying to accomplish. Now this image right here, if I select the image, I go over here, oh boy, full. I’m loading the full resolution image, 1,917 pixels wide.

0:25:39
Does that need to be happening here? No, clearly not, okay? I mean, we can go to the front end, right click, inspect, okay, and remember the trick. I mean, you can inspect anywhere on the page if you want to. See this little arrow?

0:25:51
You click that little arrow, you can start hovering things. And it’ll just automatically inspect whatever you’re hovering over, and you can just hover over the image. It’s gonna give you the dimensions right there, 667 pixels wide.

0:26:05
So if we load something that’s roughly 667 pixels, we should be good to go. We need to be as close to that as possible without going below it, okay? Now there’s obviously the topic of retina screens that we might have to talk about as well, okay?

0:26:20
But we’re trying to keep this as simple as possible right now. So we’re gonna go in and just look at our dropdown and see what is available to us. Okay, 768 seems like, you know, it’s pretty close. It’s over, it’s not far over.

0:26:34
I would probably choose the 768 and I would save. And then we go back and we refresh on the front end. Still looking quite good, right? But it’s loading a much smaller file size, okay? Then we wanna talk about potentially like issues with FALC, flash of unstyled content, right? Where this image loads, we need to make sure that the height is reserved for it.

0:27:00
Now, it’s probably not going to be a problem in this particular grid because there’s already kind of a placeholder for it, but you would want to learn how to set heights on the image tags. We’ll maybe get to that later if somebody wants to go into that level of detail but that’s neither here nor there for the the actual resolution question that was asked so we will keep moving as quickly as possible. Okay let’s go to see make sure I don’t skip any best

0:27:27
practice okay we did that one okay so this question Tommy’s hard to answer frames templates to create a quick local service business site for my son he paints parking lot stripes you could literally design that website a hundred different ways, right? And nobody is to say, well that way is better than that way, unless they have data, right? What’s the most important thing is figuring out what do you need to communicate to the people, who is the target market, and what do they need to hear to convince them to hire, and what do

0:27:57
they need to see, okay? So what they need to hear is gonna determine what copy gets written, and what they need to see is gonna determine what visually you’re putting on the website. Like for example, parking lot stripe painting, there needs to be a lot of pictures of that.

0:28:15
There probably needs to be a video of that happening. We need to see the thing in action. We need to see the service being done. And when you see a bunch of examples of the service, obviously that’s proof that we know what we’re doing, hopefully, okay?

0:28:28
So we already know there’s gonna be a gallery of some sort. Now, we also have to figure out why do people choose one parking lot stripe painter over another parking lot stripe painter? What are they looking for? What are the differences?

0:28:41
Are they all the same? And if you come to the conclusion that, well, I mean, they all use the same template, they all are out there for the same amount of time. They all charge roughly the same thing. It’s not a highly technical skill.

0:28:55
It’s just literally, they’re gonna hire the first person to do it. Okay, so you’re a commodity, my friend. You’re, so what I would say is you don’t build a website. You don’t, you get out of that business. You retire and you go into a business

0:29:09
where you can actually add unique value of some sort. Because principle number one of a business or product or service or anything is that you have a unique selling proposition, you have a unique angle on what this thing on how you offer this thing or what this thing offers you if it’s a product, right? If you have no unique angle, get

0:29:28
out of the bit, you have no business being in the business. Okay, so that would be the first thing I would ask your son, I’d be like, what do you do differently than what these other people do? Now, if he goes, listen, listen, I’ve pioneered this process where I can actually paint the parking lots, I can stripe them, half is, you know, double, I don’t, see my dyslexic brain is like, double, is it half? In half the amount of time, okay, I can do

0:29:52
the parking lot in half the amount of time. And you’re like, damn, let me, I need to see this. I need to, I need to hear about it. And he’s like, yeah, let me show you. He does it on video, right? And then you put in stats and you’re like, look, the average parking lot striper takes them 17 hours to do a parking lot this size, right? I did it in nine hours. Okay, well now, I mean, that’s fantastic.

0:30:10
You’ve got something. You got something people actually sounds like they care about, right? Now we’ve got a way to market this thing. But if that’s not happening, doesn’t matter what the site layout is.

0:30:20
Doesn’t matter what it says. Doesn’t matter, you’re a commodity. Don’t do business as a valuable unique offer. So I don’t think you’re ready for the website yet. I think you have to have a talk with your son and figure out what do you do that’s special, son.

0:30:39
And if he doesn’t know, then tell him, choose a new job, choose a new business. Find a way to be unique and if you can’t, you’re not ready to be in business yet okay all right good let’s see what is the proper way to pin an SVG on the right side of the screen half in the viewport half off screen while also cropping any overhang on that right side what’s the proper way to pin an SVG to the right side of the screen half in the viewport half off screen I have to read everything twice while also cropping any overhang on that right side.

0:31:15
Well, I mean, it doesn’t even have to be, let’s see, HeroVic, let’s make sure that this, we’ll just, I mean, it doesn’t have to be, there’s nothing special about an SVG in this case. Is this position static? Okay, it is, so media wrapper, let’s go layout position,

0:31:31
let’s go absolute, and let’s go top zero. Is this gonna stick? Yeah, to the section. Okay, so right. Let’s do 100% and Let’s do left auto. Let’s do right 50% see where this thing is going. I’m gonna see what it’s attached to Oh, I’m sorry left 100% right zero. Okay, and

0:31:54
Bottom will do bottom will do auto, okay. So top zero, right, auto, bottom, left, 100%, 50%. Where did you go, sir? Okay, if you wanna split it down the middle, we need to know the width of the image, right? Because what you’re gonna do is you’re gonna take it over

0:32:17
and then bring it back its width, right? And stick it exactly half on the right-hand side. Now, I didn’t set a width on this image, it’s just the width of whatever the grid was allowing it to be. It’s actually a hundred percent wide. So it’s filling that grid space. So we would have to go up and set a width on it, right? But let me show you something

0:32:34
about going to the right. See how it’s going off the screen? It’s getting close to being 50% roughly. But let’s go take a look at this on the front end. So the one thing you need to know about this problem is this, right? This is the problem you’re going to run into. That anything that goes off the right side is going to overflow the site. Anything that goes off to the left side

0:32:56
is actually not going to create any overflow. So it’s much safer to stick things off to the left than it is off to the right. But you can solve this in the section itself. I need to probably not do these on the classes because it’s going to screw up all these classes in here.

0:33:11
But we can go to layout and then find the overflow. I’m trying not to write CSS for this stuff. I’m just trying to use all the builder inputs because you know, beginner stream here. Let’s see, why is overflow hidden? Yeah, that should be main row, okay.

0:33:31
Yeah, yeah, yeah, yeah, yeah, let’s see. I don’t know why it’s denying the overflow hidden. There could be other shit going on in here. Let’s inspect, let’s go section overflow is hidden. Okay, ID block, okay. Oh, let’s go, okay, I think I know.

0:33:51
Let’s go style layout position relative, okay. Let’s see if that does it. Nope, okay. So now we just sit here and debug, right? Why is it ignoring the overflow hidden and go in and see what else is going on?

0:34:09
Because theoretically it should be doing it.

0:34:12
Now, if I miss something obvious, somebody can drop in into the comments. But this also goes to show you why going off the right side of the screen does, it does cause problems that you’re then going to have to solve.

0:34:22
Now, what I would say is, I don’t think I can get back to that example that we had earlier, wherever they were framing stuff with the images. I don’t even remember what site it was now. But, you can stick things to the edge.

0:34:38
Sometimes what the designers do is instead of overflowing it they do it in figma to where they’re cutting the images off and you literally just stick them to the right edge. They don’t actually overflow. And if they don’t actually overflow they don’t cause the problems but they do look visually like they are overflowing the edge but really

0:34:55
it’s just a cut image and it’s stuck to the edge of the screen so that’s a little bit safer way to do it but it is a little bit more difficult to manage because you got to do that kind of work in in Figma. Okay let’s go to the next one what is the proper way okay we got that how to select source set images for cards page photos etc I’m struggling how different photo sizes are selected. Source set, well source set is different, okay? Source set is kind of

0:35:22
happening by default. Let’s get rid of this layout and bring a new one in. So let’s go to, let’s see, just this one right here. Okay, whatever, just random content. Let’s throw an image in there. That one will do. Okay. All right. Perfect. So when you choose this, right, let’s go check this out on the front end. Let’s go inspect. Why is it not refreshing? Okay, there we go. Inspect. Okay, perfect. All right. Source class. See the source set information right here. The builder in this case, it’s helping you out, right?

0:36:02
It’s doing source set for you. So this is Brics just doing that work for you. But the other image sizes need to exist, right? So Brics does, I think in their settings, I don’t think it lets you choose, but let’s go look at the settings.

0:36:17
Like where do these other image sizes come from is kind of the question, right? So if we go to Brics settings, and we look at maybe under performance, no, maybe under general. There’s gonna be one setting in here

0:36:30
that says something about image sizes. Here we go, generate custom image sizes. So toggle that on if you don’t have another way to do it. Now there’s multiple ways to do it, okay? But if you don’t have another way to do it, or you don’t know an alternative for this,

0:36:46
then do generate custom image sizes and Brics when you upload an image will create different versions of it. And then it will serve those versions in source set by default, right? So there’s not a lot to really worry about there when you’re

0:36:59
using a page builder like Brics that is doing this for you. Now I think in, I don’t, I’m sure Oxygen probably does it these days, but in the old days of Oxygen, it didn’t do source set. You had to do some extra steps and things like that. And then it kind of did it wrong if I remember.

0:37:12
So it’s been around long enough now that I think this is not a problem anymore. The page builder’s doing the heavy lifting for you in this regard. What you need to make sure you do is measure that image, right, when we inspect it and we get the actual dimensions,

0:37:27
485 pixels wide, you just need to make sure you’re not loading like the full resolution version of it. In this case, that image full resolution is 720 and it’s a low resolution image but if we get let’s see 720 by 1080 a lot of these are okay this one’s 1920 okay so see that’s the full that’s I’m loading way more resolution than I actually need

0:37:52
here so the only thing you need to do really is make sure you make the appropriate choice with regard to the slot that that image was inserted into and then the page builder is going to handle the rest. Okay, all right, perfect. Let’s go to the next one. What do you use Nice, Very Nice, and Humint for?

0:38:12
Nice, Very Nice is just another inspiration gallery of website designs and stuff. Humint is just a way to play with different color schemes. So you can use this color scheme generator thing. I actually don’t use it all that much. It’s just kind of in there because I was, I don’t know.

0:38:29
I don’t use it all that much. I like Lapidot Ninja for, they update it very often, okay? Like every time I go to it, there’s five, six, seven new websites in there. And it’s just kind of like the latest of trends, right? You’re gonna see a lot of ugly stuff in there for sure,

0:38:46
but there are a lot of good examples of website designs as well. I’m starting from scratch to rebuild my website. I plan to use Bricks. I am new to website design development and WordPress. Where you suggest I start?

0:38:58
Well, versus like what site are you building?

0:39:03
Who’s the site for?

0:39:04
It always goes back to who is the visitor of the website? What do we need to tell them, what do we need to show them, coming up with a narrative and order of your content, and then starting to build the layout. Now all websites are built with basic patterns, like you’re gonna see the same patterns repeat over and over and over and over again. In my estimation the best thing for a beginner, an ultra

0:39:33
beginner to do, is to use a framework like Automatic CSS, and I’m not the only person who says this all right like Dave Foy’s new course is coming out guess what Dave Foy is going to tell you in that new course for beginners that it’s best to start with a framework okay a lot of people argue that it’s best to not start with a framework well guess what when you don’t start with a framework you my friend are in the wild wild west of web development like literally every option is available to

0:40:00
you there’s 8,000 paths that you could potentially take just in this. Let’s just go here, okay? This heading right here, right? So there are five different ways that you could set the font size for this heading. I mean, you could use viewport units, you could use rims, you could use pixels, you could use clamps, you could use a max function, you could use a min function, you could just in this heading, just in this heading alone. And then you can’t use a raw value, that wouldn’t be very smart, you wanna tokenize it.

0:40:29
Well, where are you gonna do that tokenization? How many things are you gonna, you’ve gotta tokenize nearly everything that you touch, okay? To ask a beginner to do all of that, to think through all of that, this is not happening, it’s not possible, this is not a practical scenario, right?

0:40:45
So if you leave them to their own devices, and you say, no, no, no, don’t use frameworks, don’t use libraries, don’t use this don’t use that just learn from scratch it’s gonna be chaos it’s gonna be absolute everything’s gonna be done wrong it’s gonna be absolute chaos they’re not really gonna learn all that much and so I’ve come to the conclusion Dave Foy has

0:41:04
come to the conclusion many people are coming to the conclusion it’s actually better to start with a framework because the framework creates a lane for you and it keeps you in that lane and it gives you best practices available at your fingertips, and you still get to make lots of decisions, but you’re making those decisions within guardrails.

0:41:22
There’s like guardrails. You’re not just gonna fly off the edge of the cliff and die in a burning ball of fire at the bottom, right? Which is very easy to do when you’re just winging it and everything is from scratch, and there is no framework to guide you.

0:41:36
There’s no nothing happening you’re just you the non expert is just making lots of crazy decisions and it’s I just guarantee you it’s going to be absolute chaos so you get a framework like automatic CSS you take frames what does frames give you general patterns of how websites are laid out and then you put in the general patterns and then you start to tweak and design from there so you’re still working you’re still learning you’re still doing things, but you’re doing it with tokens,

0:42:04
you’re doing it with, you know, like the guardrails of the framework, colors, yada, yada, yada, and then you can follow other principles, you can follow other tutorials much easier, and there’s less to think about, and there’s less to manage, and there’s less to screw up.

0:42:19
Okay, and then as you get really good at that, you are going to learn CSS along the way. There’s gonna be, oh, this thing needs a little bit of custom CSS, okay, let’s learn that, right? Let’s do that. But you’ve taken the amount of decisions you have to make

0:42:33
and the amount of things you have to learn, and you’ve reduced them dramatically. And it’s actually a much more controlled environment and a much more simplified environment for doing the work. And for a beginner, I think that that’s exactly what’s needed.

0:42:49
Okay, let’s move on. Let’s see. Demonstrate how a beginner should use Whimsical. So actually you don’t even need Whimsical anymore. Let’s go, I’m gonna open Figma, but I’m gonna pull it over here because I don’t know what it’s gonna pull up. We don’t want to pull up any secret Figma projects. Okay, it’s just it’s just my thumbnails thing. All right, so let’s go to, oh gosh, well that could be problematic. How do I go to home without seeing all the other designs?

0:43:15
Okay, let me pull it over here. Let’s go here and let’s go to, let me get this down. Figma, it’s just giving me a blank screen. I’ve never seen this in Figma before. Let’s go to, oh, it’s the new drafts area.

0:43:30
Yeah, they changed all this. Okay, let’s go to FigJam board, I think is what we want. Then I can pull it back. Okay, good. Where’s the control for this? Because they just added this recently.

0:43:42
Yeah, flow chart, mine. Here we go, mine map. I don’t want to generate one. This is AI shit, dude. It’s, it kills me.

0:43:51
Mines map, can I, here we go.

0:43:53
I don’t know why they make it so freaking hard to find. Okay, so all I used to use Whimsical for is architecture of a website, right? I actually, you can use Figma now for it. So I’m ditching Whimsical, it’s not needed anymore. And so you would say like giri.co, right?

0:44:12
And if we actually pull this up, let’s go to giri.co here. Okay, let’s bring this in. See if we can do a little split screen. What, come on, Arc. Let me resize here.

0:44:28
There we go. Okay. And let’s hide the sidebar right here. Okay. So we can see some of the general structure up here, right? Where we go about. Okay. And then we have projects and then we have videos. This is how you, before you build a website, especially if it’s going to be a website with any degree of complexity, like, okay, I understand a simple brochure website, you might not need to do this, but I do it for every website.

0:44:54
But if it’s gonna have any degree of complexity, I would highly, highly, highly recommend mind mapping like this. And this is a really just good, simple way to plan out architecture, right? So we have our videos, and then we have consulting,

0:45:09
and then we have our blog, which I actually put the blog on this side of my mind map. And then I’m gonna do, we’ve got this section called Insights, and my talking head down there is really annoying, isn’t it? And then we’re gonna do Tools, okay.

0:45:26
And then what we do is we branch out from here, like Projects, so obviously there’s ACSS, right? And then there’s Frames. And then there is the Inner Circle. We can put that under projects. Videos I might do the categories of videos here to plan those out.

0:45:43
And then insights, if there’s categories related to the insights I might plan those out here. Blog, I’m absolutely planning out categories over here. We might have a web design category. We might have an SEO category. And then what I’m doing typically is I’m going in to Ahrefs or something like that and I’m starting to do my keyword research. You can do your keyword research wherever you want to go. But when we get

0:46:07
into blog web design I would start actually putting in topics for web design articles here and I would put some of the keyword data next to it. I’ve shown how to do this in detail in the inner circle. But you end up with a full architecture planned out. You know what your CPTs are going to be. You know the URLs of all of these things, which also goes back to based on the keyword data.

0:46:33
You have keyword data to show you, all right, we can’t build this entire thing at once, so what do we prioritize? Well, we prioritize based on SEO. And these are conversations you actually end up having with the client. Because when I do a full site architecture and I put all the article ideas in and all the categories. And I put all the CPTs.

0:46:52
And I said, OK, this is also going to have something like a service area network. So we’ll say service areas. And let’s say, let’s pretend this is a service business. So we might have Georgia. Maybe we end up with Florida.

0:47:07
Maybe we end up with Alabama. And then in Georgia, we’ve got City One. Well, let’s do this with real cities. So we might have Atlanta. We might have Macon We might have Savannah. Okay, and then we’re doing this for look how complex this is getting right?

0:47:21
We need to be able to see it or the bird’s-eye view. We need to understand. What’s the CPT? What’s a parent post? What’s a child post? How are these templates gonna work? Well, you can’t determine these things really until you have a bird’s-eye view of it And then you can start to really plan how you’re gonna attack this the idea that some people just pull up WordPress and start willy-nilly creating man I don’t know I wouldn’t go that route oh I wouldn’t go that route okay

0:47:48
get this plan done like this get get it in your mind how all this is gonna work together what’s gonna be a template what’s gonna be a page what’s gonna be a post yada yada yada and then you can actually start building from the ground up this is what I was using whimsical for thankfully if you’re a Figma user, you don’t need Figma and then Whimsical. That’s two subscriptions.

0:48:09
You can get rid of the Whimsical subscription and now just use Figma for this part of it. You just reduce your tool set by one and things are more efficient now. And it’s really nice, by the way, that your architecture can live with your wireframe,

0:48:23
which can also live with the full UI design all in one place now. It was really annoying that I had my wireframes and designs in Figma, but I always had to go to Whimsical to get the architecture. Now it’s all in one place.

0:48:36
Way, way, way, way, way, way better, okay? All right, let’s move on to the next one. That was just a little quick demo. All right, let’s see.

0:48:44
I’m ranking top three on Google

0:48:46
for some very competitive keywords when it comes to web design like freelance web designer, web designer near me, I am wondering what I can do to best convert. Well if you’re ranking top three for relevant keywords then you should have traffic right. So the first thing I would say is go into your analytics, how much traffic did you get? Now you go look at look at a something like this okay. You should literally be able to tell, well, my home

0:49:15
page, right, got 10,000 visitors last month, okay? But the projects page got 1000 visitors last month, right? If my projects page is like a super important part of my website, like I really want people to be going to my projects. Now, this doesn’t really apply on this website because they can literally go right to

0:49:40
the third party website from here. So the traffic isn’t actually going here. But you can monitor clicks on these things, whatever. But what I’m showing you is kind of a funnel based approach to looking at analytics. So you say, all right, my homepage got 10,000 a month,

0:49:54
and then my services page only got 500 visitors. Well, that seems like a huge disconnect, doesn’t it? Like they landed on your homepage you can look at the bounce rate of your homepage are they bouncing or are they going somewhere else? If they’re going somewhere else where are they going? You want them to go to services why are they going somewhere else? Are they going to about? Okay well

0:50:13
that might be fine. Do we need to find a way to get them from about then over to services because they’re not making that jump? Or why are they going to about before they go to service? These are the questions you start to ask yourself but it all comes down to analytics at this point. You did great by ranking, you say, top three. That tells me if those are relevant keywords, you should have traffic.

0:50:35
So I can’t answer the question unless I look at the actual data now. You did a great job of presumably getting data. We have to now look at the data. And if it’s 10,000 people arrived on your homepage and you have a 98% bounce rate, that tells me they don’t like what they fucking see on your homepage, right?

0:50:52
So now we know we need to change things on the homepage. If they didn’t bounce, they just went somewhere else, right? Now it’s a question of where did they go? Why did they go there? Okay, what’s causing them to go there for the most part? And can we swap that out?

0:51:06
Can we get them to the place we actually want them to go? And then we run a test. So it’s like, well, let’s make a change. Now let’s monitor the analytics. Let’s see if that change helps that visitor, those visitors, that cohort flow in a new direction. And if it did, now they’re on our services page. So now next

0:51:25
month, it’s like, okay, well, you know, last month, it was 1000 got to our service page. Now we got 4000 to our service page, we did better pushing them to the service pages where we wanted them to be. But now they all bounced. Well, guess what, they don’t like what they see on your services pages. Okay, so now we got to figure out what’s causing them to bounce there.

0:51:45
Now we could make some assumptions and some guesses, we could run some tests, we could publish some changes, we could monitor the analytics, or we could go further into the analytics and we could say, okay, well, maybe we need some heat mapping on this page. We need to see how far down are they even getting? Are they getting the service page and just bouncing right away? Or are they actually scrolling down?

0:52:04
How far are they scrolling down? We might want some cursor tracking. We can see exactly how the last hundred visitors are actually integrating with the website, like how they’re using it by watching them literally use the website. There’s screen recording software, very easy to implement, where you can actually watch users use your website.

0:52:23
So there’s so many different kinds of analytics that you can start to use to figure this out. What you don’t want to do is just willy nilly make a bunch of changes and then monitor the results with general analytics. Because you’re going to be doing stuff that maybe works, maybe doesn’t work, that overwrites other things that were already working. Change one thing at a time, right?

0:52:43
One thing at a time and then see if you get the outcome that you want. But what I tend to do is I add other tools into the mix. I want to answer other questions before I start making changes. Not much more we can do without actually looking at real data, looking at real analytics stuff, but that’s the general process that you would go through.

0:53:04
You have to be okay with data telling you a story, analyzing what that story is telling you, and then see if we can make a change, publish it, make a new story happen. But you have to do it in a very structured way. Apart from the excellent Kevin Powell,

0:53:21
is there anyone else on YouTube you’d recommend to learn CSS from? I mean, I definitely do Kevin Powell’s course. I mean, I’ve never taken it personally. I think CSS is one of those things. I actually feel the same way about JavaScript.

0:53:34
Like, I don’t really like courses all that much. For CSS and for JavaScript, I don’t like courses. I like, here’s a problem, we’re gonna solve it with CSS, or here’s a problem, we’re gonna solve it with JavaScript. And in the process of solving that problem with CSS or JavaScript, we’re gonna go slow and talk about the principles of the things that we’re doing, and that’s gonna teach you. And if you do that enough, you start to wrap your brain around it.

0:54:04
But courses are always, to me, it’s like very boring. You know, the JavaScript is like, let’s print hello world. Let’s do shit that you never want to do and that you have no interest doing with JavaScript. And then in CSS, beyond the basics, we talked about this last time, it’s like, do you know what a class is? Do you know what an ID is?

0:54:22
Do you know what an element is? Okay. Now, like, once we’re beyond that, let’s just start solving problems and talk about why we’re doing what we’re doing to solve that problem Rather than trying to create some step-by-step structured thing to like Okay, we got to learn the little words and I oh gosh so boring so boring

0:54:39
Give me something to solve and then walk me through how you’re solving it and let’s start with a basic problem Don’t start with a crazy problem start with a basic problem. Then give me a new little bit bigger problem. And then a new little bit bigger problem, right? And in those problems and solving them, you’re gonna learn all the concepts that you need,

0:55:01
the logical process of thinking through it that you need to learn. I think that’s way more interesting than how most courses are structured. Okay, I’m still confused about the minimum size scale dimensions for images on a webpage.

0:55:14
Do I have to take care of the source set, et cetera, manually, or do the apps take care of that? Okay, yeah, I think you were asking the same question as the one that we did earlier. How do I code CSS grids that are not really grid shaped? So, e.g. having a first element that’s full width

0:55:28
or have one element, two columns wide, or something like that, okay. We can close this now, we’re done with that. Let’s bring this back into view. Great, we can get rid of this, we can get rid of this, we can get rid of this and this,

0:55:45
and we can get rid of this, okay. All right, so let’s talk about grid. I think maybe the easiest way to do this is just to throw images in here. So let’s just use this guy. He’s thinking deeply about CSS grid.

0:55:58
And I will just put four of him in there, okay? Look how I have duplicated the image four times and Bricks is like, I’m only gonna give you two of them. Fantastic, all right, so let’s refresh, see if we can actually get four images to appear.

0:56:16
There we go, okay, good. So we’re gonna open this, here’s our container. Okay, first thing about Grid, display Grid, right? The good thing about CSS, unlike JavaScript, unlike a lot of things, HTML even, I think CSS is probably the most literal language

0:56:36
and the syntax is the easiest. And especially when you’re doing this in a builder, the builder removes all the syntax. Like you don’t even have to remember, all right, where’s the semicolon go? Where do little brackets go?

0:56:51
Like, that’s all taken out of the mix. Now it’s just a matter of like, literal property names for things. So like, I want to display this as a grid. Great, set display to grid, right? You see how literal that is?

0:57:07
And that’s most things in CSS. Most things are very literal. Now, grid template columns. The concept you have to learn here is the concept of a fractional unit, an FR. So once you know that grids are made up of fractional units,

0:57:24
then you kind of know enough about grid to get going. The basics of grid, if I do one fractional unit to one fractional unit, here’s my one fractional unit to my one fractional unit, and then it kind of just repeats on its own. Okay, it doesn’t matter how many images I add to that grid. But the thing with grid is it’s always going to create equalness, evenness, right? It’s not out of the box going to create bentos and different sized elements and things

0:57:53
like this. So whatever you do, you’re just going to get an equal number of them, right, in a literal grid, which is why it’s called grid because a grid is a grid is a grid is a grid. But you can make things break out of the grid. And again, in a page builder, it’s actually doing heavy lifting for you. So if I select a child, right,

0:58:14
actually it’s not doing it in this case, which is unless bricks change something. But usually, let me wrap this with a block and see if that, okay, that’s interesting. Yeah, wrapping it with a block actually matters. Watch this side of, watch this area of the toolbar

0:58:31
when I wrap this in a block, you’re gonna see two inputs magically appear. So we’re gonna wrap this in a block. Look at this, grid item, right? Okay, so let’s get rid of those. Let’s use wrapped images.

0:58:42
Is this the beta of, is this the 1.9 beta? Like what is Bricks doing that it’s unable to render what I’m asking it to render? Let’s go check. I swear I upgraded appearance, themes, 1.9.9. This is not beta. Bricks is having a little bit of 1.9 struggles. Okay let’s go back to home. We got to refresh the builder to get it to actually show me the content. All right. I don’t know what’s up with that. If Charoth is watching, I know he’s in the streams a lot,

0:59:17
maybe we’ll investigate that, okay? Figure that one out. Okay, so now I have these controls right here, right? Which allow me to span across different rows, right? Okay, so I span two. Now the other thing you have to know,

0:59:31
this is where a beginner would get confused. And I empathize with beginners right here, right? This image is not 100% width. So it’s like stopping at its actual large size that was put in. Like if I put full in, it’s gonna go to the edge, right?

0:59:44
But you wouldn’t think that that needs to happen. You wouldn’t think that that’s causing the problem, but it actually is. Style layout width 100%. If all my images were 100% width by default, it wouldn’t happen, all right?

0:59:57
But you see now that I’m spanning the image across two. If I want kind of like a bento thing going on, right, I obviously need more than two columns. The problem is I only have two and I cannot, you can’t span one and a half, okay? So you can only span wholes. So I would need one FR, one FR, one FR, and now look what’s happening, right? So fractional units make more columns than you need and then you have more freedom of how many columns you’re spanning things, which is why a lot of people

1:00:29
do a 12 column grid, and then they do a bunch of spanning. Because if I have 12 columns to work with, I can choose a bunch of different ratios within that 12. The less columns you have in your grid, the less wiggle room you have for spanning certain things across those columns.

1:00:48
Now, this is again where I empathize with beginners, right? 1FR, 1FR, 1FR gives me three columns. I could also say repeat 3, 1FR, and I get the exact same freaking thing. I could also say repeat 3, min-max, 0, 1FR, and I get the same exact freaking thing.

1:01:10
I can even go min-max, 0, 1FR outside the repeat just three times. I get the same exact freaking thing I empathize I empathize there’s a lot of ways to do the same exact thing in CSS now do they do the same exact thing not really not really 1fr by itself does have a potential to overflow the grid okay in certain in certain scenarios

1:01:38
min max zero 1fr we break this down is Setting a minimum value and a maximum value. I said, there’s a very literal language. Okay min max It’s like I’m setting a man. I’m setting a max. Let’s call it min max, right? Okay. Now the min is going to be zero, right? The max is going to be 1FR, one fractional unit wide, but some children have a minimum width that they can be,

1:02:11
right, and their minimum width is gonna override what the grid is, because the grid actually isn’t setting a minimum of any kind, right? The grid’s just like, just be 1FR. But on a very small screen,

1:02:24
that item may be like, I can’t fit into there because I got to break out because I got to be bigger something else is telling me to be bigger right but if you do min max 0 1fr you’re saying no I want my children to be allowed to be 0 like literally let them be 0 and then it just prevents overflow in certain scenarios okay so it’s safer it’s safer so what I would do is instead of writing 1fr I would tend to always use a min-max function

1:02:50
because then we can just avoid random scenarios where you might accidentally overflow your grid in some capacity, right? Okay, and then you have repeat functions that we add in there as well. And this just allows you to say,

1:03:04
all right, repeat three min-max zero one FR. I can easily say 12, right? Versus like,

1:03:09
until I get to 12.

1:03:11
Like nobody wants to do that, right? Nobody wants to do that with their life. So you use the repeat, makes life a lot easier. Okay. Grid, we could go on for days. We could go on for days with grid.

1:03:23
I think one thing, beginners, if I was gonna give you a tip, just try to remember that CSS attempts to be very, very literal, right? So if you’re thinking, all right, I wanna add a border radius, okay?

1:03:39
The property is literally called border radius, all right? Now, in your beginner mind, you might be like, I want to round the corners, right? Okay, so yeah, it’s not called round the corners, right? But it does have a very literal name. And they tend to not be abbreviated, which is good.

1:03:54
You don’t have to remember a lot of abbreviations, which is also a rule that I follow in automatic CSS. We don’t abbreviate things, because abbreviations add lots more mental load to what you’re trying to learn and do if We just call everything by its literal name. It actually works out. It’s way easier. It’s way easier to learn It’s way easier to apply because then you’re always in a situation like what is the abbreviation?

1:04:17
Was it this there’s many ways to abbreviate things. So it was a this version of the abbreviation. Was it that version? Abbreviation causes lots of problems just use literal spelled out Spell it out, property names, and you’re good to go. And that’s what CSS does for the most part. I think a lot of beginners believe that it’s way more complex than it is.

1:04:36
Instead of just acknowledging, wow, it’s actually the syntax is quite simple, and the names are very literal. Okay, you can almost just guess what a property name is just by knowing what you want to do. Okay, so you know use that to your advantage. Uh starting a quick build project today should I start with ACSS 3.0? Yes. Okay good easy question WS form basic contact form best practices who should the from email be from your admin email

1:05:04
or the sender’s email better admin notification email design any other tips? Okay um what is that plugin called? Because they’re owned by ActiveCampaign now. Postmark, Postmark. So, every one of our sites is managed with Postmark. Postmark, I think it’s postmarkapp.com. Yeah, right here, okay.

1:05:28
Really, really, really like this service. So this handles the outgoing, basically the email sending server for your website for transactional emails. So if somebody is like resetting their password, if you’re submitting a form, right, these kind of things, transactional emails, this handles all of that, makes your deliverability very high, yada yada yada yada yada. Okay, now when you go into,

1:05:50
I think I have a form in here, let’s go to Forms. Okay, that’s Post Management. Let’s just add new and let’s go with Contact Us. Okay, so this kind of gives us a easy contact form out of the box. Now, obviously this is gonna be

1:06:15
a little bit different workflow depending on the form plugin that you actually use. Again, I highly, highly, highly, highly, highly recommend WS Form for an ungodly list of reasons. So already is there’s actions preloaded for you. So it’s going to save the submission to the database automatically for you.

1:06:36
It’s going to show a message automatically, which if you don’t want to show a message, let’s say you want to redirect, okay, delete the action for showing a message, add an action that says redirect. And now you fill in the URL where you want to redirect it very easy, right? Okay. And then send email, send email.

1:06:53
Okay, when you set up in Postmark, what you’re going to do is you’re going to create a branded email for the company. This could be like for me, hello at giri.co for my site, right? So hello at giri.co. So I’m going to register that with Postmark

1:07:08
for that server for that site, right? And that way I can send email addresses from hello at giri.co. Now you want to obviously collect the email address of the person that’s actually submitting the form, right? And you wanna use their display name, right?

1:07:26
You wanna put in the two, whoever that’s going to, wherever that needs to go. Again, that would be hello at giri.co for me. And then the reply to needs to be their email address. So when I click this little button and I select email, it’s pulling whatever their email is right here,

1:07:44
it’s pulling and putting it in the reply to. This is really the biggest thing for me because I hate it when this is not set up right. They send you an email, you hit reply to the form and you end up replying to yourself, right? Because the reply to field wasn’t set up properly.

1:07:58
Their email needs to be in the reply to field. That makes it super easy to hit reply, now it’s going to them, we’re all good to go. But again, WSForm, rely on your tools, does most of the heavy lifting for you. Notice it’s already using the website’s email address

1:08:14
for sending, fairly easy to set up. The key thing is Postmark. What I see a lot of people doing is just relying on, I think it’s called WP Mail or something, like the inbuilt mail sender in WordPress, very low deliverability, lots of problems.

1:08:30
Some hosts, depending on the host that you host with, they don’t even have email sending set up, right? And so no emails are gonna be sent at all, right? If you don’t set up an SMTP plugin. So I would highly recommend Postmark, very easy. So once Postmark’s in place, set up properly,

1:08:47
I don’t think I have it. Let’s go to, let’s go see how it’s set up here. Dashboard, maybe I have a working version that I can show you. Let’s do this, let’s do this, let’s do this, let’s do this.

1:08:58
Cause it’s very easy to set up

1:08:59
if you haven’t seen it before.

1:09:00
Settings, where is it? I think it’s in settings. Post, postmark, postmark, postmark. Here we go. Active campaign postmark. So you put in an API key, message stream outbound.

1:09:10
There’s my sender email, right, that I said. And then there’s a couple different toggles you can send a test email to make sure it’s working it’s like it’s very very very simple right this is key this is the key part that so many people miss now there’s fluent SNTP if you prefer using that go use that whatever but you you need one of these services to help you out don’t rely on

1:09:34
WordPress’s default WP mail whatever it’s called thing that would be the big mistake in this regard. Okay, have you ever done custom non-WordPress dev? If so, what would be your preferred stack? No, I’ve been on WordPress since 2005. It’s all I’ve ever done and touched. Now, I’ve played around with Wix. I played around with Squarespace. I played around with Webflow. I played around with a numerous amount of platforms, but I’ve had no interest in doing a project in any of them. Okay, what’s your honest opinion about Divi?

1:10:09
Covering my eyes, okay. Divi is, Divi and Elementor might as well be like cousins. You know, they output the same messy code. I think Elementor is improving in this regard. They have a bunch of magic areas. They don’t have a class first workflow.

1:10:29
They have a really poor, you know, underpowered, we’ll say, underpowered query loop. Neither of them are good. Neither of them are good. And honestly, you know, they have completely different interfaces.

1:10:42
So the people are like, to me, Divi versus Elementor is literally like Apple versus Microsoft. It’s like, I just prefer that over this. Why? Well, usually their reasons boil down to

1:10:57
I like the interface better. So some people like the Divi interface better. Some people like the Elementor interface better. I’ve never heard a technical argument for Divi over Elementor. It’s always like UI preference, essentially.

1:11:10
Because technically speaking, they do essentially the same things. And they’re equally as bad at it. So, you know, like there are viable technical reasons why you would choose Bricks over either of those. There’s no technical reason you would choose Elementor or Divi over Bricks,

1:11:26
for example. Bricks is so technically superior to both of them that it’s not even funny. It’s not, it’s like, people think it might be close. It’s not even, it’s not in the same universe. So it comes down, honestly, to UI preference. And if somebody’s like, I just like Dibby’s UI, I don’t care.

1:11:45
I don’t care. I mean, they’re both bad. So congratulations if you like that UI of that bad builder better than the UI of that bad builder over there. That’s the lowest thing on the totem pole that I would worry about, given the technical problems

1:12:01
that both of those builders have.

1:12:02
Okay.

1:12:03
I created pages instead of custom post types for services and service areas for my son site. Do I need to start from scratch using bricks, ACS is three and frames have the plug in ACF? No, because custom post types and custom fields is more content management and data management and data infrastructure than it has any it doesn’t have anything to do with BRICS

1:12:29
or FRAMES or ACSS. So if you built, in fact, you built a site in Divi, right? What you did with CPTs and custom fields is preserved. It’s independent from whatever was happening on the front end, okay? So you could just open up BRICS and ACSS and FRAMES, install it, create a template for the CPT, pull in that dynamic data,

1:12:50
you’re off to the races. Nothing needs to change with regard to the CPTs that you built or the data that is in them or the custom fields that are attached to them. You could completely swap out the front end and all that is still as you left it in the backend,

1:13:04
which is, that’s what’s fantastic. People get into problems where they build a site with Divi and they didn’t use custom fields, they didn’t use CPTs, everything is in Divi, and now when they switch away from Divi, their whole site implodes, right?

1:13:17
None of their data is protected because all of their data is stuck in Divi. Their data is not in CPTs, their data is not in custom fields on the backend. It was literally all in Divi. Even their blog posts are in Divi.

1:13:30
The literal content of their blog posts is stuck in Divi. These are disasters. This is an absolute disaster scenario, right? That’s why I always say, okay, we go here, posts, right? You’re gonna write an article. Here’s my articles right here, okay?

1:13:48
Let’s pull up an article. Let’s see what an article looks like. Are you gonna see WordPress or are you gonna see Bricks? What are you gonna see when I click on this article?

1:13:57
Let’s see.

1:13:58
So we will open it and you see an article, right? Okay? That’s what you should see. If you open up a blog post and you have to go into the builder to see the blog posts, my friends, that’s a fucked up install. That install is fucked up, right? Stay far away from that. Like you pull up a client’s website and all their blog posts are stuck in a literal page builder, just jump off the bridge right now. That is a disaster scenario.

1:14:31
Or you can just inform them, I’m sorry, the price of this project has doubled based on what I just saw on the back end. Somebody really F that up. Okay. Never, never, never, never, never take data that should be on the back end and store it on the front end.

1:14:48
Never, never, never, never, never. That is the worst case scenario. Okay. How would you build an MP3 player for musicians, bands, sonar plugin, ACF or something else? I would not build it.

1:14:59
I would not build it. I would use a player that is already in existence. What is that player that Pat Flynn created? Pat Flynn Audio Player Pro, oh, they changed the name. Is it called Fusebox now? Oh, wow, they’ve done a lot more with this.

1:15:21
Okay, this used to just be literally an audio player. Looks like they’ve done, yeah, here we go, Track Player. I would install something like this, 100%. Because they give you an archive,

1:15:32
why don’t they have a demo of it?

1:15:33
That’s just a screenshot. It’d be nice if they had a demo. But now it looks like they host audio as well. But that’s what the player looks like right there. Really, really well designed player. It’s a beautiful player. It’s got a lot of features in it. As you can see, if it’s linked to some sort of feed system, people can actually subscribe to it. It’s just out of the box, bang, done. Box check, move on with your life.

1:16:03
The idea that you’re gonna custom build some sort of MP3 player thing, I would just use something like this for sure. Okay, is there a quality, reliable freelance provider site to hire quality freelancers? I’ve used Freelance, Get a Freelancer, Fiverr,

1:16:18
and a few others really had good results. No, I mean, it’s gonna be very hit or miss. Everything is gonna be very hit or miss. What you need is the easiest possible way to find like five to ten developers, right? And you give them a test project, you pay them to do the test project and you see what the results are. Okay? And what I would also, by the way, ask them to do, record a little loom when they’re

1:16:47
done and walk you through how they did it, why they made the decisions that they made, see if they can communicate, see if they can do the loom, see how good their English is, things like that, if that’s important to you, and see what their logic was, right? And so then you assess, maybe it’s five people, maybe don’t do ten, maybe do five, you assess those five people. Obviously there’s going to be a big variance between those five, okay?

1:17:14
And then that’s going to help you make your decision. But don’t just like take people’s word for things, look at their resume. They might send you, I’ve had people send me sample projects. I looked at them and I was like, are you sure this was you? And then I dig in a little deeper and they’re like, well, well, well, I mean, I worked on that project.

1:17:32
Like I was part of an agency that worked on that project and I was like, well, what part did you do? And you know, it turns out that they like updated some plugins once they didn’t actually develop any part of the like people will literally, you know, I was a part of a project. So it’s in my portfolio, that kind of thing. That’s why I always say test project, do it from scratch, record a loom, tell me what

1:17:52
you did walk, walk me through it. That is the number one way in my estimation, to figure out who knows what they’re doing versus doesn’t know what they’re doing, or how far along are they? The other tip I will give you is, absolutely, it is way better to just find people

1:18:09
who already know what they’re doing, don’t have this thought in your mind, well, I just need somebody who is coachable, who’s teaching, now, ain’t nobody got time for that, okay? Hire somebody that already knows what they’re doing, and you can literally just plug them into your workflow.

1:18:24
Okay, that is the best way to do it. They’re going to be more expensive, right? But let me tell you, thinking you’re going to train some, oh my, it doesn’t get more expensive than training somebody. I don’t care if they’re free. Okay?

1:18:38
All of the time that it’s going to take to train them is madly expensive, madly expensive. So just find somebody that already knows what they’re doing and plug them in to your workflow and be done with it. That’s it. Okay. What is the best way to upgrade to ACSS3? Should we delete remove anything from previous installation coming from? No. Here’s the easiest way right here. You go into automatic CSS. What is this one? This one’s

1:19:03
on…actually doesn’t matter. This one’s already on 3.0. But you’ll have the same screen right here. Import, export, this exact same screen. Copy this, okay, because the only thing you need to know is there’s no downgrade path, right? This is your downgrade path right here. So you just copy this put it somewhere safe then go upgrade now Nothing’s gonna happen to we’ve already upgraded a whole bunch of websites, right? You might have one little setting here or there maybe a slightly off and if there is report it Okay, so we can we can fix it

1:19:33
But I’ve upgraded many sites now Now, no problems whatsoever. But if, for some reason, something implodes on you, then all you have to do is paste this in and hit update and it’s gonna bring you back to, I put 2.8 back or whatever it was,

1:19:49
and then paste this in and hit save and you’re back. You’re restored. You’ve downgraded, right? This is your downgrade path right here. Again, are you gonna need that? No, you’re not gonna need that.

1:20:00
But in the 0.001% chance that you need it, I told you to do it and there it is. It’s in your safekeeping area, right? But it’s gonna be fine. You just upgrade it and check the site on the front, clear all caches, check the site on the front end, see if everything’s good to go. Anything that’s deprecated, that was off, will be like this off now for new sites will be on in your case. Okay, so we take anything you were using on your old site. If it’s deprecated, we leave it on.

1:20:33
So it’s still going to work. Nothing’s going to break, right? That’s why there’s really nothing for you to do. You just upgrade, you hit save. Now, what I will also say, don’t be like, well, action was deprecated. So I’m going to turn off action and I’m going to go swap everything over to prime.

1:20:50
Oh my God, that’s low value work. There’s no ROI in doing that.

1:20:54
Action is deprecated,

1:20:55
but it’s going to be permanently supported. So just leave the site the way that it is. Don’t swap anything out. Don’t redo work. You don’t have to do any of that. Just upgrade, save, move on with your life.

1:21:06
That’s it, okay? On new projects, you follow the new things, right? And you leave the deprecated stuff off, but that’s only on new projects. Don’t touch your old projects. There’s no ROI in messing with your old projects, okay?

1:21:22
All right, good.

1:21:23
What is ACF for?

1:21:24
I see it mentioned everywhere, but I’m not sure what it does. Great, that’s the exact perfect beginner question, okay? So we’re gonna go to plugins. Here’s Advanced Custom Fields Pro. The minute you put that in, it adds this menu right here that says ACF, right?

1:21:43
And you have some options. Field groups, I actually think this is in a terrible order, okay? Tell me this guys, do you create your custom fields before you create your post types? I don’t. I think post types should be at the beginning. But you have field groups, you have post types, you have taxonomies, you have options pages,

1:22:02
you have tools, and you have updates. Okay, let’s go to updates. Let’s start at the very bottom. This is where you put your license key in. You hit save. You’ll probably never come to this screen ever again.

1:22:11
Okay, let’s go to tools. See what’s available to us in tools. Here’s where you can export and import things. You don’t need this right now, so just ignore this area. This is only needed if you actually have to transfer something from one site to another site.

1:22:25
Okay, let’s talk about options pages. An options page is essentially a page of custom fields, custom data, where you could be like, okay, what is the the brand’s logo? What is their phone number? What is their address? You can create an options page to store this data and then you could dynamically call that data into different places in the website. I would ignore this for right now. This is a little bit more, like I would say, maybe a more advanced use of advanced custom fields.

1:22:52
That’s not actually required on most websites. It’s just kind of a nice to have thing. Okay, these top three options are where you’re gonna live, right? So you’re gonna live in field groups. You’re gonna live in post types

1:23:05
and you’re gonna live in taxonomies. You gotta know what these three things are. So I’m gonna start with post types because that’s where I think things should start. So let’s say I’m building a services website. I don’t want, here’s what people would do, beginners, this is what beginners would do, and they’re dead wrong. I don’t

1:23:22
care who wants to argue that this is the right way to do it. I’ll just, I am, this is the hill that I will die on repeatedly and I will send other people to die on this hill as well. I will be a general and I will just march people onto this hill to continue dying day after day after day. If you come in here and you do something like this, okay, services, publish, okay, and then you come in, there’s my services page, okay, and you’re going to add a new page, and then you say, all right, service number one, and then you come over here to page attributes

1:23:54
and you’re like, my parent is services, okay, publish, publish, publish, okay. If you do that to manage all the service, I cannot tell you how much I can’t stand seeing this when I pull up websites. Because this is not, because then you have to do this with other things too.

1:24:14
And this pages area of WordPress essentially just becomes a giant junk drawer. Just every idea that everybody has is a fucking page and they just throw it all in here and there’s different hierarchies. And then when you’re like, you know what,

1:24:28
I wanna use a loop or I wanna use a template. What an absolute nightmare. What an absolute nightmare. This is not the path that you wanna go, okay? And this is why I say, you know, WordPress, instead of playing with the block editor, okay,

1:24:43
for years on end, they could have done a better job like actually evolving the CMS side of things, the content management side of things. But they didn’t, so we still have to use things like advanced custom fields. So we’re gonna get rid of that, okay?

1:24:57
What we’re gonna think is compartmentalize. We don’t want a giant junk drawer, we want nice little organized drawers, okay? And when you open a drawer, it’s like nice and organized. Look at all that stuff, I close that drawer, oh, Kevin, where are your batteries?

1:25:11
Oh, there’s the batteries drawer. You open up, there’s all my batteries. I got the double As, the triple As. See, that’s nice and organized, right? Think about a toolbox, okay? And in your garage, you want your tools,

1:25:22
just fucking throw them all in the same drawer. It’s like, well, where’s this thing? I don’t know, it’s in the bottom of the drawer somewhere. That’s what people do with this pages situation. Advanced custom fields and custom post types allow you to create an actual semblance of organization

1:25:38
with your data, right? So we go ACF post types you see I already created one called testimonials well I’m going to create one called services so watch this watch how easy this is right everybody’s intimidated by this no need to be intimidated it says what is the plural label okay well their services what’s the singular label service okay post type key it generated

1:25:59
that for me automatically you could leave it like that if you want to. Taxonomies, we’ll talk about this in just a second, okay? Hierarchical, hierarchical means can I nest services under other services? So I have service one, can I have children services? If you wanted to have children, turn this on. If you don’t want to have children, turn it off, right?

1:26:19
That’s just a decision that you make. Now, let’s just hit save, let’s just stop there. Let’s just hit save, okay? Look what just appeared right here. So now I have posts which are going to be always blog posts, always nothing else. If you put anything else in here besides a blog post, I’ll throw you off the bridge myself.

1:26:37
Okay. Pages. Keep this area clean. No reason to do so much work in here. Okay. Stay out of this area as much as you possibly can.

1:26:45
You want to do your work in here. This is where you want to live, right? So you’ve got your services. Now look what I’m able to do. I can add a new service. Okay, plumbing, publish.

1:26:56
Now, where are your services? Well, open the services drawer. Here’s my services right here and only services. That’s all that goes in here is services. Kevin, where are your testimonials? Well, open the testimonials drawer.

1:27:07
There’s all my testimonials. And when I need to loop through my testimonials, guess what? I can say, I can tell the loop, hey, look in the testimonials drawer That’s where those testimonials are or I could say hey look in the services drawer. That’s where the services are

1:27:21
You let’s pull all the services out of the services drawer Now try to do that with pages try to loop your services when they’re all in here as pages, right? Just tell me how that goes and tell me how managing multiple loops across an entire site goes Tell me how excluding certain things from loops go when everything is in your junk drawer. Just go ahead and try that out and let me know how it goes, right? It doesn’t go very well.

1:27:44
Now what I can also do here, first of all, what you have to understand, pages can’t even have a taxonomy. They can’t even have a category, right? That’s not a feature of pages. It’s only a feature of posts in WordPress. Well, these are custom post types, so they can actually have categories now your posts up here have categories by default whatever categories you add

1:28:06
You can add a new set of categories, right? So if I go to ACF and I go into taxonomies This is gonna allow me to add a taxonomy and I could say like services Service categories and then service category like this and then what I can do, again, you choose, you want it to be hierarchical, not hierarchical, whatever. Okay.

1:28:29
And then post types, I’m gonna say service. That’s where I assign this category to. Let’s go ahead and hit save. And now when I go to service, look what I have. Service categories. I’m able to start building an actual data architecture

1:28:46
for this website that makes sense and allows me to organize things and categorize things. And now I have a completely new set of categories that are independent from my blog posts so that when I go loop through things,

1:28:59
I can say I want the services, but only the services that are in this category right here. And my loops become very easy, very efficient, very logical. Again, try to do this stuff when everything is thrown in the junk drawer called pages.

1:29:13
So when I do videos on my stack, ACF, okay, and some people like MetaBox, whatever, they essentially do the same thing, just a little bit different ways. I think ACF now, in this day and age, is superior to MetaBox, okay?

1:29:28
ACF is like, I would not build a website without ACF, most likely. Just like automatic, I would not build without ACF, I would not build without automatic CSS. I could build it without frames, but I wouldn’t want to. I would not build a website without WS form, right?

1:29:46
So like happy files. I mean, I can kind of get by without that in many cases. It’s not like a must absolutely have. If you look at most of my stack, there are gonna be things where it’s like admin columns pro. That’s really, really nice to have.

1:30:02
But if you held a gun to my head, we’re like, Kevin, build a site without Admin Columns Pro. I’d be like, okay, I’ll build a site without Admin Columns Pro. But if you put a gun to my head, you’re like, Kevin, build a site without automatic,

1:30:13
no, just shoot me, just shoot me. I don’t wanna build it without automatic CSS. I don’t wanna build it without ACF. I don’t wanna build it without WS4, okay? There’s some things that it’s just like, I’m not gonna do the project if those things aren’t there.

1:30:26
And ACF is one of them. Why? Because data architecture on the back end is insanely important. It’s insanely important. Okay, that’s your answer.

1:30:37
Was I unclear about any of that? Let’s see.

1:30:40
How can I wrap an image with custom borders

1:30:43
on the top left, right bottom border or SVG image files? I gotta see an example. These are one of those questions where it’s like, cause remember I showed you with that content earlier in the stream where I was like, hey, there’s eight different ways

1:30:59
to make this look like this, right? If I can’t see it, I can’t start to weigh the pros and cons of various methods, all right? There’s gonna be more than one way. And so until I see it, it’s like the pros and cons list can’t start being formulated.

1:31:14
So you’ll have to point me to an example.

1:31:16
Could you please show the right way

1:31:17
to think about bidirectional many to many relationships in BRICS, movies to actors with pages for movies showing all actors and actor pages. That probably doesn’t fall into the beginner bucket, but bidirectional relationships essentially do that by default

1:31:32
and should allow you to manage that by default. So my first question would be, if you’re using bi-directional relationships, where are you getting hung up? What’s not working or what is not making sense in the workflow?

1:31:44
Because if I take it at face value, bi-directional relationships just do that job automatically. So I would need to know where you’re getting stuck. Okay, this is surely the dumbest question, but in Brics, how can I save my changes

1:31:58
without having to publish them

1:31:59
and not affect the front end until work is completed? Actually, that’s not dumb at all. Okay, so if you are doing the services page right here, plumbing, and actually, see, I can’t even edit it in Brics. So for those of you who run into this problem, you go to settings and you have to turn on the builder

1:32:18
for specific post types after you make them. So we’ll go back into services now and now I can edit with Bricks. So anything I do in Bricks is gonna be seen by anybody on the front end. Why, why is this happening?

1:32:39
Heading, and we’ll say, I can see this. Save, and we’ll go to the front end. And literally if I was logged out, everybody would be able to see that. Why? Okay, let’s go back here.

1:32:52
Here’s the really the only option natively that you have available to you is whether this is, well, there’s actually a couple of different options, sorry. So you could make this private, you could make it password protected, or you could just leave it as a draft, right?

1:33:06
So if you switch this to a draft instead of a publicly published post, right? It won’t show on the front end. You’ll still be able to see it in admin when you’re working in draft mode, but people on the front end won’t be able to see it.

1:33:19
However, however, if there’s a published page and you have to come back later and do something to it, and you wanna, you know, mess around and be able to save without those changes being shown on the front end, there’s no native way to do that.

1:33:34
So what most people do is they’ll take the whole entire site and they’ll bring it to a staging server. And then they’ll do those changes and you can do whatever you want on the staging server, look at it on the front end, yada, yada, yada,

1:33:46
look for bugs, whatever, make sure it’s good to go and then push those changes back to the live server. Now in order to do that, you’re gonna need a server, you’re gonna need like a hosting account that makes that easy. So a lot of them are one click.

1:34:00
You like set up a staging site, okay, pull from staging or I’m sorry pull from live, it’ll pull from live into the staging, do your changes and then hit push, it’ll push it back and you move on with your life. Okay and it handles all the technical complexity for you. Now do I bother doing that? On important projects I do, but on most projects especially if it’s simple tweaks and adjustments, I don’t even bother with it. I don’t even bother with it. I do I change

1:34:28
what I need to change. I hit save. I move on with my life. But if you’re more of a beginner and you don’t know that you could potentially really break something, then probably you want to do it all on staging. That’s the safest way to do it for sure. Okay, let’s go to when doing blog articles is it best to do them as posts in WordPress or is there any better option? Yeah, yeah, yeah, yeah, absolutely posts, that’s what posts is for.

1:34:56
Are those coming up correctly? Yes, they are. Okay, so if I go back to posts, here’s what you don’t want to do. Here’s what you want to avoid doing. You need to, especially when working with a client, you want to get very clear because what they’ll end up doing is they’ll put blog posts in here, they’ll put press releases

1:35:11
in here, they’ll put a bunch of shit in here if you let them, okay? You don’t want that to happen. So again, in my mind, this part of WordPress is literally for blogging. And that’s what the platform was made for, blogging. So whatever goes into the blogging category lives here. Anything else, white papers, newsletters, whatever else that they come up with, right?

1:35:41
Does not go here, does not go here. That goes into a custom post type. Create a custom post type for that thing and let that live over there, all right? This is for blogging right here and nothing more, nothing less.

1:35:51
Okay, let’s go to, I just watched your ACSS 3.0 buttons video, still a little backwards on when I should use a button and when I should use a link. Can you show a couple of examples of best practice? Great question. This does not even apply to automatic CSS by the way. This is just web design. This is pure web design. Okay, so let’s go here. I’m going to add two links to this page.

1:36:14
Okay, I just added two links. Let’s make them go nowhere. Here we go. Here we go. Save. Okay, let’s go to the front end. Both of those things are links.

1:36:32
I, granted, granted, I empathize with you. That right there says, I am a button. I understand that. I fully empathize with you. That’s a link. Both of those things are links.

1:36:44
Okay, now we can prove this by inspecting it and looking at the code. And you’ll see that the code is identical, right? A, A, A is a link, okay? Now they have different classes on them. They obviously look different.

1:37:01
They both go to the exact same place, which is nowhere, okay? They have the exact same structure. Those two things are both links. Now, I’m gonna add a button to the page, okay? Close your eyes. Wait, hold on, hold on, hold on, okay?

1:37:13
I’m gonna confuse the shit out of you right now. I’m just gonna, you are gonna be so confused. It’s not even funny, okay? If I can do it quickly, let’s see. Bricks won’t, Bricks actually doesn’t want me to do it, but I’m gonna do it anyway.

1:37:25
Button primary, let’s add this on here real quick.

1:37:27
Let’s do this, okay. I am a button, okay, we’re gonna do this, we’re gonna do this, just takes a couple clicks. All right, and one little class, because I can’t style it the way Brick styles it. Okay, bring it back.

1:37:43
I did a little shuffle.

1:37:44
This is like the ball in the cup trick, right? One of these is a button, my friends. Which one is the button? Which one is the button? They both say I’m a button, okay? But only one of them is a button.

1:37:57
Which one is the button? Let’s go look at this on the front end. Okay, there we go. Let’s inspect this one right here. Oh, that’s the link. That’s the link. But look at this down here. That is a button. Now, they look visually, they look exactly the same. Let me pull this up on the side here. It’s probably easier to see. Okay, so here we are looking in this div right here.

1:38:20
A, A, button. A, A, button, link, link, button, okay? Now, what on earth is the difference between these two? So as I explained in the ACSS 3.0 video for buttons, links are navigational, they take people places, okay? So let’s say, let’s add context to this. Remember, this one’s the link, okay?

1:38:45
View services, okay? And then this is gonna be sign up, sign up. What? Dude, sign up. Okay, Bricks is, Bricks 1.9.9, not treating me very well today. Not, just showing mad disrespect, mad disrespect. Okay, okay, view services and sign up. Now, view services is navigational. I am going to go to the services page, take me to the services page. I want to see the services. That’s navigating. That’s a link. Sign up is going to fire a modal in this case. So I want a modal to come up with

1:39:22
a form in the modal and then we’re going to fill out the form. That’s a button. You need a button there. We’re not navigating. We’re not taking them anywhere. We’re doing an on-page event. When you’re doing an on-page event like fire a modal, that’s when you use one of these button okay when you’re taking somebody somewhere that’s when you use one of these which is an a it does not matter what it looks like what it looks like is of no consequence at all okay links whether they look like buttons or look like links are links and we take them

1:39:56
places they can look like buttons okay but they’re not buttons they just look like a button because and in your mind you have to separate this there’s the visual description of a button and then there’s the semantic code of a button right those are two very different things and links can be made to look like buttons in fact this link itself could be a button even though it looks like a link it could literally be a button right because we have to manage the semantics separately

1:40:23
from how we manage the visual aspect of all of this. That’s the best way I can explain it. Hopefully it makes sense now. Okay, setting up blogs and bricks using ACSS and frames. I want to use frame single post symbol on an archive day voice course, post your content house,

1:40:37
but I’m not connecting right. Maybe the question is just how to start creating a basic blog using frames templates. I’m adding to my stack as I go pretty basic other than ACSS frame. Okay, I mean, I think we could do this fairly easily. Um,

1:40:53
let’s go back, back, back here. Okay. Do I even have a post? I have a hello world. That’s what I have. Okay. We’re going to rock the hello world. Um, all right. So what I want to do is go to bricks templates and I want to go to add new and I want to go to blog single. Okay. And I’m going to choose single from over here and I’m gonna publish it and I’m gonna go to edit with bricks

1:41:16
Okay, and I’m gonna go up here first things first template settings conditions. Let’s assign this to post type is Posts, okay, and let’s just save that so until you assign a template It doesn’t know what it’s supposed to be affecting where it’s supposed to be pulling data from and what have you now populate content I’m gonna say single post page and then I’m gonna say hello world. Okay, I’m gonna type that in. I’ll hit apply preview.

1:41:43
So now we are supposedly, if Bricks is not shitting on itself again, we are looking at the hello world post. The problem is we haven’t added anything to the page. Now you could come up here, let’s just do this. Let’s just do this to start out.

1:41:57
Just add a section, and then add what is called post content, okay? We essentially want to pull content from WordPress for this blog post, right? So let’s hit save. And we wanna see if this is our actual blog post template,

1:42:14
container, and let’s pull this to the top and let’s go heading, okay. This should be the template we see. Content below should be dynamic, okay? Save, bang, just like that. All right, now let’s go back into the admin. I hate how it doesn’t open in a new tab. Really wish it would

1:42:35
just open a new tab for me. And let’s go view our post. So you see, let’s say hello world, does it even have any content? Welcome to WordPress, this is your first. Okay, let’s go to website, Ipsum, need some actual content in here. All right, edit posts, let’s paste that in. Bang, let’s update, fantastic. Let’s view on the front end.

1:42:58
There’s our content right there. So we’re dynamically pulling content. How are we dynamically pulling content? It’s two ingredients, two ingredients, okay? Here’s the content right here in the post itself. We need to go to the template.

1:43:12
So remember, if you’re gonna connect these dots in your mind, right? Edit with bricks. Both things are happening in the builder, okay?

1:43:22
All right, here we go.

1:43:24
So we’re gonna go up top, template settings, conditions. This is the first key, the first piece of the puzzle. You are telling this template, go to the post type called posts, right? And that’s where you’re gonna get data. That’s where you’re gonna find the data that I want you to pull Okay, the second ingredient is

1:43:43
This post content module this little element that I added what that is doing is saying Okay, this is the thing that actually extracts that content. Where is it extracting it from? That’s where the conditions come in So the conditions is saying where to go get the content and then the post content element is that’s the thing that’s actually grabbing the content and putting it in a specific area of the template. Now, this is static.

1:44:10
It’s gonna show up on every single post because it’s living inside of the template, right? The template is the thing that gets repeated. This is the part of the template that’s dynamic, right? Because it’s pulling, it’s the post content, it’s pulling the post content.

1:44:24
So what I can do is I can just delete all of that. I can go up to frames and I can say blog or article or whatever. And let’s go blog post Foxtrot as an example. So here’s blog post Foxtrot. Now, I’m gonna come down here and I’m gonna see

1:44:37
there’s rich text, which it says, delete this and pull in post content using the post content element. Great. Post content element, I’ve already got it. I’m gonna hit save.

1:44:46
We can change the width of this column or whatnot, but this is where this is coming from. Let me zero this gap out because I have auto gaps on. So let’s go to style CSS. I’m just going to go root gap zero. Okay, boom, just like that.

1:45:03
And let’s just go to the front end. Now some stuff is done for you. Here’s the content of the blog post right here. I’m going to go up here and I’m going to notice, oh, look, this is static content. I don’t want any static content templates you want to avoid typically static content. So get

1:45:20
rid of the static content, hit the lightning bolt post title. Now it’s going to pull in the actual post title. Now avatar name, this is supposed to be for the author and whatnot, right? We don’t want it to say avatar name, what do we want it to say? Click the lightning bolt search for author. Look, it’s right there. Author name. Awesome. And then label is, this is an InstaWP,

1:45:41
so it’s gonna have random users and such in it. Label is for like maybe the author title or something like that, or maybe the author’s website. That might require a custom field, right? Or you can say, I don’t care about that, let’s just delete it.

1:45:55
Now, this is the author headshot. What are we gonna pull in? Well, author, so we have some options here. Hey, look at that, author avatar is an option. Let’s pull in the author avatar. What about this image over here?

1:46:09
Static placeholder image. We don’t want static placeholder images. Let’s delete that. Hit dynamic data. What can we pull in? There’s a featured image.

1:46:17
Let’s go ahead and pull that in. Oh, look, it’s not pulling in a featured image. Why might that be? Well, we go back to Hello World and notice over here, let’s go open the actual post, edit. We look over here, ah, featured image is blank.

1:46:31
That’s why it’s not pulling in a featured image. So what we’re gonna have to do is we’re gonna have to go set a featured image and update that post. And then when we return to our template, we should have, if I can refresh, we should have a featured image.

1:46:46
There we go, right? And so it’s just a process of what is static. Let’s get rid of the static and let’s replace with dynamic content. So here’s a date for example, Ooh, that’s already dynamic pulled in for us. Don’t have to touch that. Now, what about this thing right here? Hmm. Where’s that going to come from? Well, that needs to come from a custom field.

1:47:08
Right. And we don’t, we can’t create the custom fields for you. Now you can say, I don’t want that. And you could delete it. That’s very simple, right? But if you do want intros to your blog posts, and let me refresh this so our featured image actually enters the builder.

1:47:23
But let’s say I do want this intro, okay? Great, let’s go back out. Now unfortunately, you have to go to these magic areas, right, you gotta leave your workflow. I wish you didn’t have to. ACF, field groups, add new field group.

1:47:36
Let’s call this blog post. This field group area is where, see we’ve wrapped back around, we’re needing the thing again, right? We need to assign a custom field to blog post. So I’m just gonna call it, this is my blog post group, okay?

1:47:49
And then it’s just gonna be a text field or I can do a text area field, which is just a bigger text field. And I could say blog post intro, right? Okay, perfect. And then I’m gonna assign this to post type equal to post.

1:48:04
I’m assigning these custom fields to the post. Save, great, go to post, hello world. And I should have now a blog post intro. This is a custom intro. Can I get it to show up in the blog post template? Okay, let’s hit update.

1:48:25
Perfect, so now that’s committed. I just committed that data to this blog post right here. Okay. Now what we’re going to do is we are going to go back to our template. And now, I just did that. And I opened a version of the template that was already open. So this version of the template doesn’t know that that new field exists. So what I need to do is refresh the builder. Now it’s going to be able to see that new data in there. Okay, and then I can grab this, I can delete, and then I can say blog post intro. Bang, save. And then when I view on the front end,

1:48:59
let’s go to the front end with my posts, there’s my custom intro. This is a custom intro. Can I get it to show up in the blog post template? And now every post that I write, like the benefit of this, right, is that every post can have an intro. So I’ll say add new post, okay? New post, I put in my content here, this is my content, right, bang. And then I come down here,

1:49:22
this can have its own unique intro. And then I hit publish, and let’s wrap back around to the templating conversation that we had earlier, okay? Let me go to, oh, let’s add also a custom field for this, post said featured image, I’m sorry, a featured image.

1:49:40
Let’s add this dude right here. Set update. Perfect. Let’s view on the front end. So there’s my new featured image. Here’s my new title. This can have its own unique intro.

1:49:51
This is my content down here. Now look, my content of this project is actually managed in WordPress. When I go to the post, it’s in a custom field. It’s in the block editor, it’s in the featured image area,

1:50:08
it’s in the title field, it’s got categories, it’s all managed in WordPress. It is not managed in Bricks. None of this has to do with Bricks. The only thing we’re doing with Bricks is displaying the content, right?

1:50:23
But it’s all dynamic, which means that if I switch from Bricks to something else, I can just get rid of bricks all my data and the Architecture of the data is a hundred percent safe. Okay, I put in a new builder Let’s say I don’t know why you would do this Breakdance you switch to breakdance you just go create a template in breakdance Like I just did in bricks make the templates gonna take you 30 minutes

1:50:46
you hit publish and all of your blog posts on the egg doesn’t matter if there’s one or 10,000, all 10,000 of your posts now look perfect yet again. Whereas, whereas, let’s do it the wrong way. Here’s what people literally do, okay? Let’s go to Bricks Settings and turn on the builder for posts. This is what absolute psychopaths do.

1:51:09
I’m joking, of course, but you might be a psychopath. You might be, this could be clinically either your brand new or you’re a psychopath. Okay. This is my bricks posts. So they will literally do this. They will go edit with bricks. Okay. And I’m editing the an individual post and they’ll pull in like a blog post template. And they’ll just

1:51:32
keep doing this over and over. And they’ll like this is the title of my post. And they’ll just they’ll come down here. Okay, there won’t even be a post, there’ll just be rich content, they’ll literally be in here, like this is my blog post, okay, this is my paragraph, and it’s statically, they’re putting all this content in here, okay,

1:51:50
and then, and they might even have this as like a global component or just craziness, absolute insanity, and then you view this on the front end, and if I had filled out all the fields and data, it would all be here and such. But now imagine doing this a thousand times,

1:52:06
a thousand times. And then we come to the conclusion, we really need to switch away from BRICS. We’re gonna switch to something else. No, you ain’t. No, you isn’t, okay?

1:52:16
Cause you have a thousand posts built in BRICS. And there is no switching. There is none. There is, all of those are dead. You don’t have that. If you switch away from breaks, that data is effectively gone.

1:52:30
Okay. Um, that’s why I said the absolute disaster, right? Absolute disaster. Content needs to be managed in the content management system. The builder needs to be used to display that content on the front end. Now with pages, it’s okay to put content and pages in the builder because

1:52:45
there’s not a thousand of them typically. Now, if there’s going to be a thousand of them you better template that shit. You better use templates for sure. But like an about page. Okay like I can rebuild the about page. I have the content you know in my backup whatever or we’re putting new content in there it is what it is. So you just rebuild it in the new builder. But anything that’s repeated, ad nauseum, blog

1:53:10
posts, right? Anything that there’s gonna be a lot of. Template, template, template, service areas. A lot of them. Template, template all day, right? So that’s the difference between static and template. How are we doing on time?

1:53:23
We got five minutes.

1:53:24
Okay, dang, there’s way too many questions.

1:53:26
We can’t get to all of them. What area of website creation should I look for my own uniqueness to stand out from the competition? So many different areas. So many different areas. competition

1:53:37
So many different areas so many different areas. I wouldn’t worry about visual uniqueness I would worry about learning things like copywriting and marketing and things like that’s where you can bring the most value to a business Struggling with headings inside section is it okay to Center all but mostly I see headings left align is some rule of thumb We’re to Center and we’re to left align Yeah, generally I Yeah, there’s a couple general rules. Okay, we’ll just we’ll just do this real quick.

1:54:04
So pages, let’s go back to home. Can we do this fairly quick? Okay, so let’s just add a new container and let’s put a heading and text. All right, heading, text, just like that. Let’s say on desktop, I wanna center everything.

1:54:20
So what you could do is you could center like this and you also wanna remember to text align center as well. So now that’s all centered. Now I’m doing this at the ID level. Okay, there’s a whole discussion about, should I be doing this at the ID?

1:54:34
Should there be a custom class? Should I use a utility class? But I’m trying to use native bricks as much as possible. Okay, and not get too deep. Let’s just do this, keep it simple. Here, I determine, okay, still looks good.

1:54:46
Here, I determine, maybe at this break point, I want to start left aligning everything. Because typically on mobile, if everything’s to the left, it looks clean, is this an opinion? Yes, it’s an opinion.

1:54:57
But let’s say I agree with the opinion. So now at this break point, I go text align left, and I go align, I’m sorry, cross axis to the left. So now look, centered, centered, left, left. Right? And it’s just kind of like,

1:55:12
if you just create that as a rule of thumb, like that we’re going to center these this kind of stuff on desktop and we’re just going to left align it at the what we would call the M breakpoint. So S M L X L. And then of course you might have more breakpoints in your install. It’s neither here nor there, but you decide, all right, we’re going to allow things to be centered at desktop. And at this breakpoint, we’re going to start left aligning everything for the purposes of cleanliness if you buy into that opinion now What you don’t want to do

1:55:44
Never do this. There are some things you just never do. Okay, this is one of them If you do this, we will throw you off the bridge. Okay? That that’s one thing you never do giant chunk of centered text you would also not do rich text here. So you go rich, rich, rich like this. Okay, let’s put that into the into here. Let’s paste this in. Bricks 1.9.9 is either it’s that or InstaWP. One of these is, I think it’s bricks 1.9.9 though. Okay, see that?

1:56:20
See that? Don’t, don’t ever do that. Don’t, that’s a, that is an absolute felony violation. Like you’re not getting out of the slammer for a while. Okay, lots of rehab needed. Lots of rehab needed here. So what do you do? What do you do if you have that amount of content?

1:56:37
Okay, well, one, we don’t center it. That’s step one.

1:56:39
You don’t center it.

1:56:40
So let’s go typography. Let’s get rid of the text alignments. So that’s already starting to be better, but that’s still not good. That’s still not good. Now, one way we could improve this is we cap the length of it, right? So let’s go 50 characters on the length.

1:56:55
That is objectively better, objectively neater, objectively easier to read, okay? There’s no arguing about this, right? This is, that’s terrible. Don’t do this. Amateurs would do this, okay? Somebody more professional would do this. That’s just kind

1:57:15
of an objective reality. Now, is that your only option? No, of course, it’s not your only option, right? We could do something like call count two. So we can start to break this thing up like this, we could add more of a gap, we could add, you know, and then and then I would still probably recommend that we start bringing this in. And this is where you can use like

1:57:33
utility classes to make your life a lot easier. We started doing things like this. So now you’re creating multi-column text out of this. You’re using some sort of visual interest. Here’s another thing you could do. Let’s just back this up. We just, the fundamental problem is

1:57:47
we have a giant wall of multi-paragraph text. What can we do with it? What can we do with it, right? Well, we can put this in a block and we can put this text in the block as well. And then what we could do is

1:58:02
Inside that container we’ll put another block and then we’ll put an image inside of this block. And so we are adding Come on, come on image. Okay. Thank you Let’s go with it doesn’t really matter which one Okay, and then we take that overall container and we do something like a grid to write and so now what you’re doing is you’re putting Visuals next to the content. What is this effectively do? It effectively narrowed the content, which is what I did before.

1:58:30
See narrowing content just kind of cleans it up, right? But we’re adding visual interest by putting something next to the content. We could even stretch this content so it takes up the full height depending on the text. But what I would also do is just make the narrative less, right? Say less shit. Usually, it’s like an author.

1:58:50
A good author writes a book, it’s 300 pages. A better author writes the same book and it’s 200 pages. Why? Because it was more concise, they said more with less. Make that a principle. Now, you just, this is a better layout.

1:59:05
It’s basic, but it’s way better than what you had before. These are the rules of layout. What I would also say you don’t do like because I still see people do this They just aren’t people are in love and just watch what a client does people are in love. Where’s my typography Center? They’re just in love with centering shit. I don’t know what it is, but they’re in love with centering things this is the biggest like fastest way to identify like

1:59:31
Someone who’s more of an amateur, right? Don’t be obsessed with centering things. Stop. Stop all the centering. The centering is madness. Okay, and then we talked about here how you can even come in and you could put a width on this, right? 40, look at this, right? So we’re creating a narrow column here, narrow column here, then you ask yourself, does it even need to be that wide? I mean, maybe not. And we bring that with it. You could start sculpting the content using different widths, column widths, things

1:59:57
like that, to get it to be more visually appealing. You could also use aspect ratios on these images, right? Aspect ratio one-to-one, make it a square, okay? Give it a little more life that way. Make it very tall. There’s a lot of things you could do, lots of things you could do, but there are some things you don’t do, which is like giant walls of centered text, very wide walls of text. Stop. Stop all that. Stop all that. That’s a problem that you want to fix with different methods of laying out content, right?

2:00:31
Okay, we’re going to have to call it there. That is the end of our time. I have about 40 more questions in the queue that I couldn’t get to. Let me hop over to chat real quick and just see what everybody’s up to in chat. I wanted to pause a few times to just check into the chat, but I wanted to also maximize the questions. Okay, all right. Good, good, good. There’s a lot of help

2:00:56
being being given in the chat, which I like to see. Very cool. Very cool. Okay. Obviously, you know, if you have specific things that you want help with inner circle is available to you. If you are an ACSS user, the ACSS community is available to you. We do kind of prefer you don’t ask general web design questions in the ACSS community because it clogs everything up.

2:01:23
Anything is on topic in the inner circle, literally anything. So go in the inner circle, ask whatever you want to ask inside the inner circle. ACSS community is kind of dedicated to ACSS stuff just to keep that clean. Was this helpful? I mean, was this I was it’s very I know it’s very random. It’s very quick. Okay. It’s like, how many questions can we get through in the allotted

2:01:48
time? Should I do more of these? Should I do more of these? Do you like this format? Someone said 50 character width with response with responsiveness, it’s automatically responsive, see? It’s not gonna overflow. Now the grid, the grid needs a different, we need to figure out where we wanna break it.

2:02:11
So we go to grid one at M, right? So you can do this with utility class, you could do this with just the normal thing here. So here’s grid two, I go down here and say, all right, here is going to be grid one or 1fr or min max 0 1fr, as we talked about lots of ways to do different things. Now, if you want that to go extend all the way to the edge, 100%

2:02:38
width here, Bricsys really on the struggle bus. Oh, no, I did it with this. Okay, good. Layout 100% width, bang. And now you’re good at every break point below that. So, but there’s no overflow. There’s no overflow issues with 40 characters, 50 characters. If there’s not enough space,

2:02:57
it’s just gonna wrap the lines. That’s not a overflow situation. So, okay, good. Everybody’s saying more, more, more, more, more. Love this format. So mad I missed the first hour and a half time

2:03:09
to get that day job off my back. Yes, sir. Get that day job off your back. Okay, we’ll do this more. I think everybody likes it. We’ll do it more Okay, we’ll do this more. I think everybody likes it. We’ll do it more I got to get out. Love you guys. I’ll be back very very soon. Have a great rest of your week. Peace