WDD LIVE 079: Beginner/Intermediate Web Design Q&A + Live Demos

Welcome, welcome, welcome, everybody.

It is another episode of WDD Live on a fine Tuesday morning here in Atlanta.

Good morning, Ken Baker.

Good morning, Thomas and AlexD123 in the house.

Good to see Chris here today.

Ruben already with the super chat.

Thank you, Ruben. $2, you know.

Ruben has bought me so many, so many, you know, one-third cups of coffee.

I can’t even explain it.

It’s just, it’s fantastic.

I mean, it used to be a half cup of, you know, inflation, but it, Ruben, it’s fantastic.

Thank you.

I appreciate it.

To answer your question, when is Etch coming out?

I mean, it’s in the process of coming out.

There’s been multiple releases already.

People are having fun with it, using it in the sandbox.

It’s very exciting, very exciting times.

Tudor, welcome.

Nick, welcome.

Curtis, Tobias is here.

Manny is here.

Gavin, Sitecrafter.

Oh, Sitecrafter.

Welcome, welcome, welcome.

Good to see you.

Rob Bach is here.

Sitecrafter, you are, I believe, I saw you, you said you’re switching to bricks these days.

That’s exciting.

That is exciting.

Suzanne’s in the house.

We got Charis in the house.

Welcome.

Okay, this is a fantastic crew.

We’re about to break 100 very quickly on the stream.

Today’s agenda, beginner slash intermediate Q&A, web design Q&A.

I say web design Q&A.

I mean, you could throw in questions that are related to business or marketing or SEO or whatever you guys want to ask about, we can answer.

But if it is kind of a, maybe a, we’ll say like a web design focus Q&A where it’s like, hey, if you’ve been struggling with something dev related, you know, trying to figure something out, trying to get something to work or trying to understand some concept and you’re just, there’s, you’re stuck.

You need to get unstuck.

This is your chance.

This is your chance to ask.

This is your chance to get help.

It’s very unique because I’m going to pull up a dev install in just a minute, blank dev install, which means that if your question requires a walkthrough of some sort, we can walk through it together.

So this is your, this is your chance.

Now I want to keep it to beginner intermediate because what often happens is two things.

Number one, beginners already feel like, ah, my question is going to be dumb or it’s going to be too basic or whatever.

And so if it’s a beginner focused Q&A, guess what?

You don’t have to worry about that because that’s, that’s what the whole point of the Q&A.

And then what also happens is advanced people try to, you know, often like take over and try to ask all these advanced questions.

And, and then the beginners definitely, then they’re like, ah, that’s, this is all over my head.

Not even getting any value out of it.

So we keep it focused and say, this is specific to like beginners and intermediate to kind of make sure that everybody understands what’s going on and everybody feels like they can ask the question, but there is one rule.

You have to use hashtag Q or hashtag question to do your question.

I would do a Q because obviously you’re going to be able to write more in your question.

But yeah, if you don’t have a hashtag, it is going to get missed.

It’s not going to get, you know, you’re not going to get the help that you’re, that you’re wanting.

Okay.

Hmm.

Announcements.

Two things up on the horizon this week.

Tomorrow, 11 a.m.

Eastern.

So same time, same time.

Different place.

Same time.

Not the same place.

WP Town Hall goes live yet again.

This is episode number three with Mark Zemanski.

And if you don’t know what WP Town Hall is, it’s a brand new podcast that we’ve started.

It’s hosted through X Spaces.

The entire point of the show is that we put up a, like a debate proposition and the whole discussion centers around this, but because it’s on X Spaces, you can be a participant in the show.

It’s not a podcast that you listen to.

It’s a podcast you, I mean, you can listen to it, but it’s a podcast that you participate in.

And so anybody can come on to the X Spaces.

Anybody can be elevated to Speaker.

And you can sound off with your opinions on the topic at hand and have a little discussion with us and go back and forth.

And it’s really fun.

It’s really fun.

It’s really valuable.

It’s exactly what WordPress needs right now because there’s not enough of hearing from the community.

So this is a great podcast.

It’s a, it’s a new experience.

It’s a new format and it’s going really, really, really well.

So WP town hall.

Show is the website.

That’s going to get you all the information.

It’s going to show you the upcoming episode and a link to the upcoming episode, the X Spaces, where you can get ready to do that.

But that’ll be tomorrow at 11 a.m.

Eastern.

On Thursday at 11 a.m.

Eastern.

This is going to go 11, 11, 11.

This is three days in a row.

Okay.

On Thursday at 11 a.m.

Eastern.

We haven’t done one in a while.

So it’s very important that we do this.

We are doing an ACSS, an automatic CSS Q&A and demo.

And we’re going to be looking at a bunch of the new features, a bunch of stuff related to 3.0.

Just making sure everybody’s on the same page, getting the help that they need, understanding the features, how to use them, how to get the most out of automatic CSS.

If you haven’t seen, let me go ahead and share my screen here.

Let me go to, so what we’ve been working on.

Let me go automatic CSS.

That’s the wrong link.

Okay.

And then I’ll share in just a second here.

Okay.

All right.

Let me, let me go ahead and share screen.

I’m going to go to documentation.

No, I was going to go to change log.

I’ve been doing a lot of work on documentation.

I published probably 12 new documentation articles this month.

I’ve gone back and updated probably half a dozen.

You know, we’re in the process of swapping out all screenshots.

Like this is almost, almost complete.

It’s almost complete at this point.

So it’s, it’s, that’s going really well, but I want to go to the change log.

And I want to talk a little bit about our, where, where am I?

Okay.

Here we go.

I want to talk a little bit about our release schedule.

This is really for etch for frames and for automatic CSS.

If you’ve been paying any attention over, I would say the last couple months, we’ve changed our release schedule significantly.

What we used to do is we used to compile all of these bug fixes, just like a lot of products do a lot of software products.

They combine, they compile all their bug fixes, all their improvements, all of their new features, and then they batch it into a big release.

And then you don’t hear from them again for a while.

And then they do it all again and bang, they hit you with another batch and yada, yada, yada.

What we have changed to is actually a, I don’t even know if it has a name.

I don’t know what we would call it, but by for sure, every single week is one release.

There’s one release every single week.

But there’s no rule on releases.

Like there could be, you could have two in a week.

And I’ll explain that.

You could have three in a week, but I’ll explain this, right?

We’ve got our, we’ve added a version number, a version extension in some cases for some of this.

We’ve completely revamped our pipelines for how these releases are handled with testing automation.

And okay, there’s been a lot of work going on behind the scenes.

Now, what does this produce?

Okay.

So you’re going to look at this October 25th release.

Okay.

That was a little bit bigger than normal.

October 18th, 13th, 11th, 11th.

And then we can go on page by page by page.

It is very, very consistent releases.

Now, with automatic CSS 3.0, the entire rewrite and all of this, we’ll talk about this more on Thursday.

We focused heavily.

I actually put a feature freeze on automatic CSS.

We focused almost exclusively on bug fixes, improvements, and stability.

Okay.

And it’s at a point now where it’s, it’s rock solid.

And we’re starting to go back to feature releases where new feed, like we had textures and overlays come out, right?

I’m now working on the card framework that I teased, you know, six or eight months ago or whatever.

That’s actually getting put in as an experimental feature now so that people can start playing with it.

But things are going really, really, really awesome on this front.

We’ve done this for every product now.

Etch, automatic CSS, and frames are all on weekly release schedules.

Every single week, there’s going to be an update.

Now, there could be more than one.

Now, why would there be more than one?

So, there are times where, you know, people report bugs, obviously, and there are improvements that you can make.

And what we kind of decided is, I mean, there’s no reason to just wait around for some arbitrary date, okay?

If we can make the fixes and get the fixes into the hands of users faster and the improvements into the hands of users faster, everybody is happier.

You don’t have to just, it’s not like, oh, wait till next month.

Okay, that’ll be in the update next month, right?

At most, you’re going to wait for the next week’s update.

But very often, we might just say, yeah, that’s kind of an important one.

Let’s just bang.

And there’s another minor release, right?

And they’re very safe to update to because there’s not a lot of, there’s not like chaos in like, oh, there’s 80 bug fixes and 40 new features.

It’s not that, right?

So you get more confidence in your ability to update because we’re not trying to do too much in a single release.

We’re doing very manageable things on a very rapid schedule.

It increases stability.

It increases the speed to which you get these bug fixes and improvements and updates.

And it’s just been really, really, really fantastic.

So we’ve done that across the board.

All right.

Yeah.

Yeah.

The card framework is going to be very, very, very exciting.

You know, it’s nobody else.

I haven’t seen anybody else talking about any sort of thing with cards.

I think it’s something that we can kind of, it’s like another one of those maybe industry leading features where it’s like, hey, I think this would be very valuable to kind of standardize a card design framework.

And so we’re going to lead the charge on that.

It’s going to be very, very cool.

All right.

So that’s 11 a.m. on the automatic CSS channel.

So it’s not going to be on my channel.

It’s going to be on the automatic CSS channel live stream.

It’s going to be about two hours long.

And you can get all of your ACSS questions answered.

You can get demos.

You can get, we’re just going to go through the whole thing.

Okay.

All right.

Let me go to zip real quick.

And let’s go to blueprints.

And let’s go to bricks blueprint.

And let’s see.

I got to see if anything needs to be updated here.

And then we’ll spin up a blank one.

And we’ll be ready to rock and roll with people’s questions.

Again, beginner, intermediate Q&A.

You got to have the hashtag Q.

All right.

Let’s update some of these.

And we’ll spin one of these up.

Other than that, how’s everybody’s week been going?

Are we having a good week?

I know it’s kind of, to me, if you’re in the U.S. anyway.

My kids are gearing up for Halloween.

It’s in four days, three days, two days.

Two days?

Yeah.

Two days.

And it’s kind of like, it’s one of those like just, you know, chill weeks almost.

Like we’re just kind of chilling, you know, do Halloween on Thursday.

We had two softball games this week.

Finishing up the season.

Getting ready for the tournament.

It’s going to be at the end.

It’s going to be fun.

All right.

That’s done.

Let’s go ahead and blueprint, blueprint.

Let’s regenerate this blueprint.

Okay.

And then we’ll spin one up.

Looking forward to this.

I’m a beginner.

Hopefully this will springboard me into better understanding.

Yeah.

Yeah.

It’s, you know, when you’re a beginner, when you’re even intermediate, right?

Like there’s just, there’s stuff you get stuck on.

And yeah, you can go try to read documentation.

Yeah.

You can go try to watch random YouTube videos.

Yeah.

You can try to ask people in Facebook groups.

And, but when you can just ask and have somebody on a live stream, like walk you through it and just explain it kind of step by it’s, that’s the easiest way to get unblocked.

Right.

That’s why we do this.

All right.

Here we go.

Blank website from blueprint, bricks, blueprint, create site.

Let’s get it done.

Ooh, Sarah miles birthday upcoming this weekend.

So adventures ahead.

Well, happy, happy early birthday, Sarah.

Hopefully you have a fantastic weekend.

Uh-huh.

Uh-huh.

Okay.

Should be done in a second.

My weekend is getting better.

I actually have internet access today.

Yesterday was not so much fun.

Well, yeah.

Not having internet access, not great.

Especially in the work we do.

And that’s kind of important.

It’s kind of important.

Okay.

Let’s go in and rock and roll.

I’m going to go ahead and pull up the questions here.

All right.

What’s with the updates still to have?

Oh, I didn’t, I didn’t update bricks.

That’s all right.

We’ll just update it here.

I know you mentioned WS form is getting a revamp.

Is that true?

He is rewriting all of the CSS and it’s all going to be variabilized CSS.

And then we will rewrite our WS form integration to integrate with that.

It’s just going to be way, way, way easier to style and customize WS forms, which is great.

Very, very needed and glad that they are working on that.

It’s a big, it’s a big overhaul though.

That’s, it’s a lot of work.

A lot of work.

Okay.

We’re ready to rock and roll.

Let’s go to hashtag Q.

Awesome.

Melvin says, what happened with the artisan scapes redesign?

Nothing happened to it.

Melvin, it’s, it’s right here.

It’s waiting.

It’s waiting for action.

I talked him into rebranding.

I don’t know if you guys saw the logo on the front, but you know, we had a little, how we’ll talk.

Okay.

How we’ll talk.

And I hooked him up.

Actually, I went in the inner circle and I put out a call for people who do branding, logos, things like that.

I sent him everybody that replied to that.

I sent him all the things.

And I was just like, go, you vet these people, you talk to these people, whatever, get yourself a logo.

And so as soon as that’s ready, he’s going to get that back to me.

We’ll pop it in.

Then we’re, we’re pretty much ready to deploy the site.

If you didn’t see this website built the last couple episodes of WDD live, not the last one, but the two before that.

But yeah, it’s, it’s done.

It’s just waiting on the finalized branding and, and all of that.

And then we’ll get it.

We’ll get it up.

I mean, he could deploy it sooner if he wanted to.

It’s got to get with him.

He’s been very, very busy with a big landscaping project.

So, uh, but yeah, it’s right.

It’s done.

It’s ready to go.

Do you want my money for frames for Figma yet?

I do.

I do.

Um, we’re trying to get, we’re getting a fatal error on the frames website related to sure triggers.

And we don’t, we’re not sure cause it’s not happening on any other site.

And I don’t know if it’s a conflict with another plugin in this.

I don’t know.

It’s typical WP stuff.

So I got to get with their team and see if we can sort that stuff out, but I can’t set up the triggers for the frames for Figma purchases and you can’t buy it until I can set up the triggers.

So that’s what we’re waiting on.

All right.

Uh, I’ve been using Bricks Maven with ACSS and it appears the Bricks Maven wireframes have their own CSS classes and ACSS has their own as well.

They appear to be conflicting.

Any advice?

Um, no, if you bought the AC, I mean, I’ve never used Bricks Maven, but I’m familiar with it.

If you bought the Bricks Maven ACSS version, then what you will see, and this is the same with frames.

So if we go in here, so we’ll go to edit with bricks.

I don’t even, Oh, we’re not going to be able to do this until I resave the license keys.

So let me go resave this real quick.

Uh, there’s another thing everybody gets confused by.

This is very typical in WordPress. like your, your, your, your license keys are linked to a domain.

So you spin up a new domain.

That domain has not been licensed yet, right?

By the system.

So you have to go in, even if you’re doing a blueprint, notice my keys are already in here, right?

Because this is from a blueprint, but I haven’t activated this domain with this license key.

So you have to activate the domain, the new one that you just spun up before you can go use the things.

A lot of, a lot of people, we get lots of support requests.

They’re like, my license key is already in there.

It’s a blueprint.

Like it’s, but you spun up a new domain.

That’s a new instance.

You got to reactivate, right?

Okay.

So let’s go in and we’ll just do, I mean, you could do pretty much any of these.

Oh, this is my templates.

We need to get the frames.

Okay.

Just, you know, you can pick any of them, right?

So you’re going to see like hero victor, right?

Hero victor, hero victor main row, hero victor heading, hero victor lead.

Those are the BIM classes.

Those are custom classes.

And if Bricks Maven is done correctly, which I’m fairly certain it is, what you will see is the use of, I’m trying to find if there’s really any optimizations.

Okay.

So let’s go here, for example.

Let’s lay it out.

Okay.

See this?

You’re going to see the variables from automatic CSS.

So that’s, it is a variable first workflow.

That’s frames.

That’s, I think that’s Bricks Maven.

I keep wanting to say Oxy Maven from the old days.

Bricks Maven.

Not all of them do this.

They should.

Not all of them do this, but Bricks Maven is one that does it correctly and gives you that variable first BIM workflow.

And so you’re not going to come in here and use utility classes from automatic CSS.

You’re going to come in here and you’re going to continue to use variables, continue to use the BIM classes.

I have a video on BIM that I would recommend that you watch and you’ll understand how BIM works and why we do it that way.

I think there’s like two or three BIM related videos on my channel.

So you can just search BIM and watch everything that comes up to learn about BIM.

And then you’ll be set to go.

You don’t want to use a utility first approach in page builders, like a tailwind approach or a tailwind mimicking approach.

That’s not, that’s not the play.

You want to use BIM.

You want to use variables.

And then you want to use utility classes sparsely, sparsely.

Okay.

Is there such a thing as best practice for sidebars or is min max 0 3 FR, min max 0 1 FR about all there is to it for full screen?

I would say that, I mean, it depends on the use case, depends what you’re trying to build.

Let’s go ahead and just reopen this real quick.

Okay.

So the one rule that you want to be thinking about is content width and what is going to go into the content, the main content column.

And we’ll just use this as an opportunity.

If people are like, I don’t know how to make a sidebar.

I don’t know.

And we’re not talking about the old WordPress sidebar.

That’s like programmed into a theme.

We’re just talking about a visual sidebar where you have content and then you got a column on the side and you can put stuff in the column, right?

If we go back to the concept of everything as a box, obviously you have your main section box.

You have an inner container box typically.

And then you’re going to want two boxes inside of that inner container.

So you can use divs.

You can use blocks, whatever you want to do here.

A block in bricks automatically sets display flex to column is automatically 100% wide.

So it’s kind of like a little shortcut.

And then what you want to do is you want to figure out how to get those boxes next to each other.

Now, I won’t use automatic CSS to do this.

We’ll just use grid.

Grid is the best structural layout.

Okay.

So if you’re defining structure of a website, grid 99.8999% of the time.

Okay.

It’s an official number.

You can look it up.

And what we’ll do is flex box is just going to be relegated to alignment of things inside of boxes.

That’s really what we want to use flex box for, for the most part.

Okay.

So this is a structural decision that we’re making right now.

So we’re going to go and do grid.

And there’s two different ways you can do grid.

And you decide first, do I want the sidebar on the left or the right?

And then here’s another decision we can make.

Not to get a little more complicated, but the order that things show up in the code is not necessarily the order that you see them in on the page.

Right.

And depending on what you’re putting in your sidebar, if your sidebar is really important, like you’re going to put a table of contents in your sidebar.

Okay.

It doesn’t matter whether I want that to be on the right or the left.

I probably want the table of contents to come first in the code before the content, because that’s kind of how people could quickly navigate to a certain part of the content.

Right.

Same thing would be on mobile.

Like if I put the table of contents on the right on desktop, cause I’m trying to be cute or whatever, uh, on mobile, I want it to come first.

I’m going to have to change the order on mobile to make that come first.

So that’s kind of what we’ll talk about right here.

But in any case, I want two columns and then I’ll show you how to flip them to, um, you can flip them structurally or you can flip them visually.

Uh, so first off, let’s just do one FR, one FR.

And you’re going to see that these are fractional units of grid.

Um, so one part to one part essentially is how you think about this.

And then you end up with two side-by-side things.

Now you can make one bigger than the other by just saying, well, it should be three parts instead of one part, right?

So three to one ratio gets you a three to one ratio.

It’s very easy for grid.

Now we are going to make it more complicated.

Okay.

Um, so one thing with these FR units that you want to be aware of is they can cause overflow.

Um, and it’s in certain scenarios.

It’s in a limited amount of scenarios for sure.

Like what I’m getting at is you might be able to get away with this, but for me, it’s not the best practice.

Okay.

Um, so the best practice for me is that you use what are called min max functions.

And if you, if you don’t want to set a minimum, okay, uh, you just use zero.

So min max zero one FR.

And then if we duplicate that, we’re back to our one part to one part.

The difference is you’re saying here that I am going to allow a cell in this grid to collapse to zero if it’s supposed to, or if it needs to, or whatever.

Right.

Um, and that’s going to reduce any chances of overflow.

Uh, so this is kind of the format that I would go with.

Now, look, if you still want the three parts to one part, it’s just as simple as this.

I mean, we’re, we’re just still putting the one FR three FR.

We’re just wrapping them in a min max function.

That’s it.

And each, each column that you’re defining with the min max gets its own min max function.

Right.

Okay.

So with this one, the sidebar is obviously on the left.

Now, if you wanted the sidebar physically on the right, you would just flip the ratio.

Right.

Okay.

So now physically, like the biggest part is on the left and the sidebar is on the right.

And we’ll leave it like this because this is going to force us to do our order property and stuff like this.

Now, when I do columns like this or structure like this, um, I am thinking of these as containers.

Okay.

So my content in this case, I, it could be rich text.

It could be, um, we’ll just do if some short.

Okay.

Uh, we’ll just duplicate that a little bit.

All right.

So you got a bunch of content, right?

That could be block editor content pulled in with the post content element.

Right.

Uh, but here’s your main content column and a rich text element or the post content element are automatically wrapped in their own wrappers.

You’re not just throwing like paragraphs into here.

Like the, this element itself is a, is a, a box, another container for this content that is in here.

So on the right hand side, what I’m typically going to do is think about multiple items being able to be in the sidebar.

And so for the table of contents, I wouldn’t just start adding like a heading here.

Like you’re just raw, just throwing a heading in here.

I mean, this is not a great idea, right?

Because you’re not grouping content anymore.

I’m going to show you in just a second.

So table of contents, right?

Um, and then we would just, I’m not going to actually build a table of contents because we don’t need to waste a bunch of time, but here’s a, let’s just pretend that these are our table of contents links.

Okay.

I mean, as you can see, like these are separate elements inside of our sidebar and it’s really helpful if you name these things.

So this would be our, uh, grid and then this would be our content.

And then we have our sidebar.

The rich text is self-contained content in a box.

It doesn’t need another wrapper because it’s already a wrapper of its own.

But over here in the sidebar, you see, oh boy, we’re just throwing random content.

You don’t want to be doing this.

You want another wrapper, you need a group and think of every group of content as a sidebar item almost.

Right.

Um, so what, what I would do here is I would throw another block in and this would be like, you could just call this an item or something or a sidebar item.

If you want to be more specific, I need a space there.

Okay.

And then just throw these things in here.

And now what this allows you to do, number one is control.

And what I would do, I, I’m a big fan because if you think about sidebar, sidebars, I mean, how many different sidebar styles are you really going to have on a given project?

Probably not many, probably just one.

Okay.

Um, so I would just, I would just rock the class sidebar right here.

And then for this, I would rock the class sidebar double underscore item.

Now we’re in BEM here, right?

This is, we’re saying the item is a child of the sidebar.

And so now I have the ability to come in here with sidebar item and I can define gaps.

I am going to use automatic CSS from the, for this to just make it easy.

Um, and I can just show you how we could do like a content gap and then just say, I want half of my content gap in my sidebar items.

And now all of my sidebar items here’s, here’s just quickly showing you, you know, how this would help things.

Let’s say I did want to adjust this gap at some point I can do instead of divided by two, I could do divided by 1.5, they all update and I could have sidebars on 50 different pages and I’m controlling the design of a sidebar item, all of them, all of them from just one place, right?

That is the advantage of this class first workflow.

So sidebar has a class, which by the way, I mean, what could I do with this?

I could say, oh, you know, it turns out we do want to style this sidebar.

And so if I came in quickly and just said, okay, I’m going to, I’m going to pop some padding in, uh, I’m going to pop a little background color in, I’ll just pop a little background or a border radius in.

Okay.

And now suddenly I’ve started to style some semblance of a visual sidebar, right?

That would take effect on all instances of my sidebars because this is the sidebar style for this project that I am defining and I’m doing it via this class, which means it applies everywhere I’ve used this class.

So I can control the children globally.

I can control the parent sidebar element globally.

The other thing you need to think about here is if you were to want something like sticky, like a sticky table of contents, it has to be self-contained inside of this sidebar channel in order for it to be sticky, right?

You can’t have a bunch of elements randomly floating in there and somehow make things sticky.

That’s not going to work.

They have to be grouped.

So this, having this sidebar item concept doesn’t just make it easier to group things, which also, if they were different items, right?

Like we’ll say item two, item three, grouping them makes it easy to move them.

Like you’re moving the entire group around, which you can’t do if you just have free floating random elements.

So grouping is a very, very important concept in web design.

Like grouping, if you go back to page building 101, did a whole thing on grouping associated content.

All of your associated content that is supposed to live together should be physically grouped so that it can, in fact, live together.

That’s its home, okay?

It can’t just be free floating around.

If you had random stuff, you have to drag things one at a time.

And this is the job for a chump.

You’re not a chump, right?

So you don’t want to be doing that job.

You want to group your content and then just move the group and then give the group a class.

Now you can style the group.

Now give the elements of the group a class with BIM, the BIM underscore extension.

Now you can control all those globally.

Now you’re rocking and rolling.

Now you’re doing web design.

You’re doing modern web design now.

So there’s a lot of benefits.

Then you can make the group sticky and all that good stuff.

All right.

So let’s just say that that’s that.

You also do have, I would call this, you know, two column or something like that.

Probably not because that doesn’t really describe what’s actually going on here.

Your job’s come up with the names, okay?

You get good names.

I’m just rocking and rolling through this.

But now you can, you know, add your grid gap here.

You could do grid gap times three.

Calcs are really, really, really helpful with these variables.

So you’re getting the effect that you want.

Now back to the original question.

This is the thing you have to pay attention to right here.

And actually one, one thing you can kind of get away with here.

If we go back to our two column grid, which notice I defined this stuff at the ID and then this on a class, not good because we were just talking through it.

So I can just undo those real quick and then pop this on here.

Now we’re back, but these things are now assigned to this class.

So I can, let’s, let’s do this as just a normal grid gap.

And then I’ll show you if we go back to our grid structure, instead of three FR, you can use other units here.

I think that’s what one thing that people feel like, oh, I’m stuck with FR.

You’re not stuck with FR.

Content like this, we don’t want it to get too wide.

This is one of the common beginner mistakes.

The thing I’d see maybe the most often is they put big blocks of text that are way, way, way too wide.

And there are endless studies on the internet that people, especially on big screens, they don’t want to scan eight miles back and forth reading your wide ass paragraphs.

Okay.

It’s not a good user experience.

They don’t read the content.

They just leave.

They don’t, they don’t want to deal with that.

You want narrower content columns.

It makes it very easy to scan.

Okay.

Very easy to read and consume the content.

Think about books.

When people read, imagine if you took a book, a novel.

That people read, which is like a channel of content.

It’s very easy to read.

And you’re like, no, we’ll just do this with it.

Like that you just ruined the novel experience.

Right.

It’s got to be in the vision of the visitor.

So one thing you can do is instead of three FR, you can do something like a character count.

Right.

So you can do 60 CH here.

Then you could put a, another width on this sidebar.

You can say, oh, I only want my sidebar to be 200 pixels.

Right.

So what we are doing, hold on one second.

Let’s get down here.

Okay.

Notice now I’m able to use flex.

This is, it’s like, whoa, hold on.

You’re doing grid, but not, you got, you got some flex stuff going on down here.

Yeah.

Flex can be used inside of grids.

Really, really helpful.

Right.

That 200 is not appropriate for that sidebar.

So we can just go like 300.

You could even do 400, whatever you want to do. 350, whatever you like.

Okay.

Now you see a big gap.

Okay.

What is this telling you?

Cause this over here is the appropriate width of content to read on the internet.

Now I’m not saying that it always has to be 60.

I mean, 70, I would say is like the max for that kind of content.

I wouldn’t really go wider than 70.

You can go anywhere from 40 to 70, whatever is appropriate for the design that you’re trying to achieve.

But this is another area where people get tripped up.

Look how many lessons we got.

One question.

Look how many lessons we can go through.

This gap is inappropriate.

I would say it is, it is too big.

There’s too much distance between this and this.

So how do you like Kevin?

I mean, the content column, that’s the way we want it.

The sidebar is the way we want it.

What is the deal with this giant gap?

And then people might go to gap and be like, I just want zero.

Oh, it’s not changing.

A hundred pick.

Oh, it’s not changing.

And then they’re like, I don’t know what to do.

Right?

So let’s stop and think architecturally.

Where is that space coming from?

You got this width element over here.

You got this width element over here.

There’s too much space in between.

The parent of these elements is too wide.

Okay.

Now we know we have the content width of the website, right?

But you’re able to override that.

You can come in and just set a width here.

And unfortunately, Bricks made this, you know, way more complicated than it needed to be.

But you get something like this.

So now you’re dealing with, you know, a good structure here.

Width versus max width is what I was just alluding to a second ago.

In web design, technically you should be using max width.

But again, these builders are like, there’s a lot of beginners using it.

They might break something.

So we’re going to auto max width everything to a hundred percent.

And then that allows them to use this width box.

This is actually not really good practice right here.

Like putting 1100 in the width, but in Bricks, it’s okay because they max with a hundred percent everything.

So it should still be nice and fine.

Now what you want to do is decide, okay, what break point may be like this one, do we want to go to one column?

So now you’re just going to min max it again, zero, one FR.

But instead of defining two of them, like I did before, I’m only defining one of them, which is essentially saying, hey, this should be one column.

All right.

So now we have a responsive layout.

So here we go to sidebar.

We got text.

We come down here.

Still, still looks good.

There’s still enough room for our content here.

And then we go over here.

There wasn’t going to be enough room.

So this is where we go down to one column.

Now we have to deal with the flipping of the content.

We wanted the table of contents to be on the right because that’s what Bev wanted, right?

We, Bev wanted to be cute.

Right.

She didn’t want to, you know, actually it’s a good, it’s a good kind of use case for it is people who are on desktop on a big monitor probably just want to get to the content as quickly as possible.

And so they shouldn’t have to visually skip over a sidebar.

To get there.

It was very popularized.

Like sidebars almost always were on the left in the very, very early days.

And then they got moved to the right.

Okay.

Because that was a good decision.

But this is not a good decision.

Look at this.

Having the table of contents on mobile below everything.

That’s not, that’s not fantastic.

But it’s okay because we have a sidebar and we have content.

And now that’s not what you want to do.

I did that on accident.

You don’t want to do this because why?

Do you know?

Before we even look at it, do you know why we wouldn’t want to do a little pop quiz in your head?

Why wouldn’t we want to do this?

Because it’s going to happen on desktop too.

This is not how you do mobile adjustments for position of things because you’re, you’re moving the code right now.

When, when I do, I’m moving the code around.

Okay.

If I, if it would let me drag and drop.

All right.

So what I want is actually, okay.

If we think about this, we kind of want, remember I talked about, we want the sidebar to come first in the code.

Okay.

So what I’m going to do is I’m going to come over to content here.

All right.

Let’s go to, oh, we never put our, we should, we should probably do this to just to, just to make it, just to make it good.

Okay.

So this will be content.

Now here’s another good thing we can talk about.

This, the fascinating thing about web design, and this is why people are like, well, if you just make the builder easy enough, people, anybody will be able to do it.

We asked one question.

How many lessons have, like mini lessons have we had to go through and things that I’ve had to explain.

Here’s how it works.

Here’s how, here’s what this does.

This is why you don’t want to do this.

This is why you can’t ever make an interface.

You can’t dumb it down enough to where a random person can just come in and do shit.

They won’t know.

There’s just too many things.

It would be like, oh, well, I mean, you know, we want everybody to do brain surgery.

It’s like, it is, I mean, let’s find a way to make it easy for them.

You just can’t.

It’s like, there’s a lot of prerequisites.

There’s a lot of things that you have to learn.

Okay.

So it’s a problem.

All right.

Let’s, let’s do a visual lesson real quick, just on order property.

All right.

So here we go.

Let’s, let’s, we’re here on desktop.

We have it on the left.

I want to put it back to where it was actually, because it’s probably easier to understand this way.

Okay.

So we’re down here.

All right.

I want to move the sidebar.

Okay.

On this break point to the front, we’re going to use the order property to do this order.

By default, everything is a zero.

Okay.

And then it just appears in the order you wrote the code in.

Essentially.

If you change the order to a positive number, right, it’ll start ordering down.

And if you go negative, it’ll start ordering in reverse.

Like it’ll put things before other things.

Right.

So we want a negative number because right now it’s after we want it to be before, or I could put a positive number on this one.

This is like, it’s like your decision.

Are you going to order this one positively?

Are you going to order the other one negatively?

I tend to default to ordering things negatively.

So when we go order minus one, that table of contents is going to jump to the top.

Why?

Because this is a zero and this is a minus one.

So the minus one is going to win over the zero and come first visually.

And again, this is visually.

This is not in the code at all.

This is not in the code at all.

So you need to get the code structured the way you want and then do visual ordering of things beyond that.

And that’s important for accessibility purposes too.

Because people using a screen readers, they’re not going to, the visual order doesn’t matter to them.

What matters to them is the code order of things.

And I know that’s a whole nother topic and a whole nother land to get lost in of accessibility, but it’s just general good practice of the most important things should come first in the code.

And the least important thing should come later.

And then visually, if you need to change things around, you change it visually with CSS, but the code order establishes the most important thing right off the bat.

Okay.

I don’t know.

There was a lot there.

There’s a lot there.

I feel like every two seconds we have to talk about another concept, which is, I get it.

This is, I empathize with beginners and intermediates.

It’s, it’s, it’s not an easy industry that we work in.

There’s a lot, there’s just a lot of shit.

You got to know a lot of stuff.

You got to know.

Okay.

Hopefully that answered your question somewhere in there, somewhere in there.

When I use an overlay header, you go to ACSS enable overlay header offset, give the header right.

Ask that question on Thursday in the ACSS stream.

We’re going to try to keep this more toward like raw web design stuff.

Okay.

Let’s see.

I’ve been using both the regular and bricks variation of the post content element to extend what would otherwise be a rigid template.

Maybe a good thing to know.

Regular and bricks variation of the post content element.

What is the regular variation of the post content element?

There’s only a bricks post.

If I mean, if you’re using bricks, there’s only a bricks post content element.

It’s right here, right here.

This one.

This is what pulls content from the block editor.

I can also pull content from other bricks templates, I believe.

But this would be the thing that you would want to use.

If you want to pull content dynamically from the block editor, this is the thing that you’re want to, you’re going to want to go with right here.

You can technically pull content from the block editor into a rich text element, or even I think there might be some caveat about the normal text element, but the safest way to do it is the post content element.

The problem with the post content element, well, I mean, there’s only one block editor, so there’s only one of them that you get to pull in, but that should get the job done.

Okay.

You mentioned using Claude AI.

Do you think it’s better than the alternatives?

And if so, in what areas does it write better code?

I have found Claude to be better than ChatGPT, especially when it comes to asking code related questions, especially with its artifacts feature.

Where it essentially will compile answers and code into an artifact, which lives in the sidebar, but it’s referenceable again at any point in the future.

You can go back through all of the artifacts that have been generated.

I just feel like it’s a better experience overall.

And yes, better quality output, better quality conversational abilities, which is important.

Okay.

I would like to see how you create the custom login and register.

Mouse isn’t moving.

Custom login and registration page for your website, along with the successful or error messages.

I’ll just, it’s, you just cheat.

That’s all you do.

You cheat.

Let me go to automatic CSS.

It’s just easier to show you.

Well, can we do it?

Do I have WS form installed on here?

Let’s just go here.

Mm-hmm.

Mm-hmm.

Mm-hmm.

Mm-hmm.

Mm-hmm.

There you go.

Okay.

This is, well, this is what you want to do.

WS form.com.

Okay.

My account.

I’m going to pull this over here because I don’t, I don’t want to burn another license key.

So let me, let me do this over here.

I need to get one of the add-ons.

I just, I highly recommend this is, you’re going to watch.

I’m going to show you because people don’t believe me.

I’m just going to show you how easy this all is.

I’m going to go to downloads here and I’m going to go to user management.

So they have a user management add-on and let me go find my license key for this as well.

Let me close the interview chat.

We don’t need that.

View license keys.

Okay.

And we’ll do this one over here.

I know you guys can’t see anything right now.

That’s the point.

Okay.

User, user, user, user, user, user management.

Here we go.

Here’s the license key for it.

I copy this to the clipboard.

Okay.

Plugins.

Add new plugin.

All right.

Here we go.

Choose a file.

Downloads.

Okay.

So we have WS Form Pro installed, but we also have this user management add-on that we’re going to put in.

And we’re going to go to settings.

And then we’re going to go to user management.

And I’m going to bring this over here for just a second.

We’re going to activate this.

And then I can bring it back.

Okay.

Right there.

Perfect.

Okay.

All right.

So we have a user management add-on.

Now, what we’re going to do is we’re going to go to pages.

And here’s how I like to structure this.

Okay.

I like to do, especially if you’re going to have like an account type situation.

Okay.

I do an account page.

And then what I do is I tend to make the login page the child of that.

So I’ll do like login, registration, whatever you guys want to do.

Lost password.

All of these things.

We’re going to go parent is account.

So you go to slash account slash login.

This, and this just is, again, it’s back to the concept of like grouping associated content where like the login, the reset path, all of this is associated with an account.

So this is kind of how I tend to do things.

So what we’re going to do for the login is we’re going to create a little login form template.

But first we need to create our login form.

So I’m going to go to WS form forms and I’m going to go to, I’m just got to go through this.

Okay.

Yep.

Skip, whatever.

Get started.

Fantastic.

All right.

User management.

It is all done for you.

Look at this.

Register, edit profile, login, forgot password, reset password, log out.

All done for you.

It’s point and click and then throw it on a page.

Okay.

So for example, I want to use the login template, user management log.

I’m just going to hit publish.

Okay.

Nothing even to look at here.

So it’s going to do username and password, password, remember me and a login submit button.

Okay.

Then I’m going to go to my login page and I’m going to edit with bricks.

What is the deal?

Okay.

Let’s put, do you see my mouse?

Okay.

It’s like a fucking Nintendo game.

All right.

All right.

Here we go.

Let’s go WS form.

Bang like this.

And bricks is going to pop it in and let’s choose user management login.

And there you go.

There is your login form.

And then you’re like, man, that really needs to be styled.

Cool.

No problem.

Form light.

Oh, it’s styled.

Automatic CSS for the win.

Now you can center it on your page.

You know, whatever you want to do.

You can, I like to wrap them.

So yeah, we can allow that.

Okay.

So I would wrap it actually with a div.

Let’s wrap with a div.

And if you don’t know that shortcut right there.

So if you right click, it says wrap block, but you can actually wrap it with a container or a div.

So these icons over here are like shortcuts to wrapping things.

And what I would, what I would do is call this form wrapper.

Cause how many form wrappers are you going to have on your site for real?

How many forms are you going to style differently on your site for real?

Not many.

Right.

So you get one form wrapper.

And what this would allow you to do very easily is come and put like padding and such around your form.

If you wanted to do something like this.

So you could go background.

You could do your BG ultra light.

You come down to your border, border, border radius, right?

Pop these onto all sides, rocking and rolling.

Okay.

So now look, I mean, look at this.

Look at the little semblance of a little login form.

I would also say like, okay, form wrapper.

You could go layout by default.

You know, we could say what?

640 might be a good width for a login form.

Okay.

I mean, look how quickly we’ve gotten to, to where, and this is a functional login form.

You don’t have to program anything.

It’s all hooked into WordPress already.

It’s nothing to do.

You literally just, the templates are done for you.

Okay.

Very, very powerful stuff.

Automatic CSS is handling the styling.

I’m going to hit save.

My login page is done.

I’m ready to move on with my life.

The user management, the logout, the reset path.

They’re all exactly just as easy as that.

You just create pages for them, pop in the templates.

You’re using form light, right?

Or form dark, whatever your theme is.

And you have a form wrapper that’s styled.

They’re all going to look the same.

They’re all going to function perfectly.

It’s a done deal.

It doesn’t get any easier than that.

Okay.

And I will tell you, right?

People want to complain about prices of things all the time.

Let’s go to wsform.com.

Okay.

Let’s go to pricing.

And I’m an affiliate.

You don’t have to use my affiliate link.

Okay.

I’m just telling you to get it because it’s the best one.

I obviously have the agency, $249 a year.

But think about this.

Okay.

You’re going to dilly-dally around trying to get login forms.

You might go try to find a plugin to do it for you for free in the repo.

You might try a lot of different.

You might try to use Bricks’ native ones, which aren’t fantastic.

There’s a lot of ways you could go.

Keep in mind, you’re going to be able to use wsform for gazillions of things.

Gazillions.

Here, just to give you one example.

I have built forms for clients and I charged them $2,500 just to build the form on their website because it was a little complex little thing that they needed.

WSform powered that, made it super easy, way easier than it would have been otherwise.

Do you, this is not even, this is a price of no consequence.

Okay.

If you’re actually doing work, if you’re actually an agency, you’re actually a freelance, the price is of no consequence whatsoever.

Even on just a little login form, if you have to, you know, mess around with a less ideal option for an hour or two hours to get the thing the way you want all of those forms.

I can do all those forms in 15 minutes.

If it took you two hours, dude, you already burned that, that price right there.

You just should have had it and it would have been easy and you could have moved on with your life.

You’re burning hours and people are like, but I got a free plugin in the repo, but it took you three hours to set it up.

My guy, that’s not free.

Time is not free.

So you got to weigh all these things.

People are in this industry, especially WordPress, notorious for being penny rich and pound foolish.

Notorious for it.

Don’t let it happen to you.

That’s my rant for this segment.

Okay.

All right.

Let’s see.

I would like to see.

Okay.

We did that one.

What’s the best design approach for page sub navigation on mobile that doesn’t get in the way?

Man, you could go, you go many different routes.

I mean, sidebar is classic.

So the sidebar kind of format that we just talked about, you could easily put a sub navigation in there.

If you look at something like the get frames.io documentation, I think it’s just docs, actually.

Okay.

Let’s just go to fundamentals.

This was just one of the newer ones.

Okay.

So we have an actual doc, right?

So center, center text column.

Notice the sticky table of contents on the side.

But then we have an accordion-based navigation of all of the documentation.

This was created with the frames accordion element.

And it’s just a loop.

It just loops through.

First, it’s a double loop.

It loops through the categories of documentation.

And then it loops through the posts of each category.

And it’s structured in a nav-like way.

And that’s it.

And so this is pretty easy.

The accordion, if you have a lot of things, I really like the accordion approach, especially if they’re like categorized out.

Because they take up as little or as much space as you need them to take up.

And then everything will just stack, you know, nicely on mobile.

And it’s all fine.

Now, I’ve also seen sub-navigation that lives under the normal header navigation.

That’s a little bit trickier.

Because then it’s like, all right, your main navigation is going to collapse into a hamburger.

You don’t want the other one to collapse into a hamburger.

Now you got two hamburgers.

Nobody needs two hamburgers.

Okay?

It’s not, you got to be careful.

You got to be careful with how you’re approaching these things.

I really like, I’m a big fan of this concept right here.

And I find that especially if you’ve got, now if you just have a few little items here, no problem whatsoever.

If you want it to be wide and you want it to be under this main navigation, another option you do have, not the greatest UX in the world, but it’s serviceable and it’s acceptable. is to let that navigation, that secondary navigation, horizontally scroll back and forth.

You got to, you know, check all your accessibility boxes when you execute that.

But that is another approach that you can take.

And you will see that on some sites.

I would start out doing the sidebar thing.

Okay.

Okay.

Should the deprecated features in ACSS be avoided?

Will they stay deprecated or removed?

Again, we can answer those kinds of things on Thursday.

It is a quick answer.

You are, is recommended to stop using deprecated features on new projects.

They will always work on existing projects.

They will never be removed from the framework.

They’re always behind a toggle switch.

But it’s recommended that you stop using them and use the alternatives on new projects going forward.

I’m struggling with creating.

Okay.

I’m struggling with creating more advanced web designs because I also developed the site myself and I lack development skills.

I only know HTML plus CSS.

It keeps me from being as creative as I’d like.

Well, what I would say is you got to weigh a couple things here.

One, I wouldn’t try to, you know, hold back your creativity because of the lack of dev skills.

You want to push yourself by saying, okay, I’m just going to allow myself to be creative.

And then I’m going to have to figure it out on the dev side.

Don’t be like, well, I can only do X, Y, Z on the dev side.

So I’m going to limit my design to that.

Because real designers, if you ever had to hire a third-party designer or something, they’re not going to really do that, right?

They’re going to be as creative as they want to be.

And then you’re going to have to, that’s dev life.

Like you have to acquire the skills to pull off the designs that you were given, right?

So you need to do that to yourself.

But you also need to weigh like, you know, how much you’re charging for these projects.

Don’t do yourself in.

And a lot of times when you’re an agency, a freelancer, and you’re hiring a third-party designer, you have to communicate this clearly to them.

Hey, this is not a $20,000 website.

Okay, don’t go crazy on the design.

Let’s keep it basic.

Let’s keep it simple.

Don’t bury me over here, right?

We got to, you got to find some balance.

You got to do that for yourself as well.

If you want to be more creative and it’s going to like, you know, you should be charging extra.

The more creative this shit gets, the more you need to be charging for sure.

Because one, it takes more on the design side.

And then it also takes more on the dev side.

So the price has got to go up.

If the price is very low, it’s okay to keep it nice and basic and streamlined.

So you want to push yourself and you want to push your skills, but you also don’t want to bury yourself depending on the price of the project.

Those are the things you got to weigh and balance as you go through all of this.

But don’t be scared on the dev side and let that bleed into the design side.

There are some things that, and keep in mind, you know, things that look complex, a more experienced developer might come in and just be like, you know, bang, bang, bang, done.

Right?

It wasn’t even that challenging for them.

You need to be able to start getting to those levels.

And then all of your work is going to increase in quality.

The designs are going to increase in quality.

The dev is going to increase in quality.

Your prices are going to go up.

That’s the path that you want to be on.

You just got to balance it.

You can’t race to get there.

Okay.

I’ve been using the texture and overlay when I use conic gradients to create.

See, now we’re getting into, I don’t know that this is a beginner question.

Plus, it’s also automatic CSS related.

So, something we could tackle on Thursday, though, for sure.

The growing from freelance hourly work to a specialized agency is overwhelming.

Can you give some guidance on parts to managing the agency?

Do I need a CRM, project manager, et cetera?

Yes.

Yes.

Okay.

So, let’s talk about this.

Let’s say you’re a solo person and you do everything.

You wear all of the hats.

You do all of the work and you want to start migrating more towards an agency.

Now, an agency doesn’t mean 100 people.

It doesn’t mean 50 people.

It doesn’t even necessarily mean 10 people.

It could be two people.

It could be three people.

When it’s more than one, you’re an agency.

You’re not a freelancer anymore.

You’re an agency.

Even if those people aren’t actual, like, legal employees.

They’re just contractors.

But they’re contractors that you use consistently.

You need to start thinking about yourself as an agency.

Now, where do you hire first?

Who’s the first people you hire or first person that you hire?

This is going to depend on your skill set, right?

So, for example, with Semantic’s website question right here, she says, I lack on the dev skills side.

I can’t be as creative in the designs as I want to be.

The answer there should be obvious, right?

She sticks with the design stuff and she hires a dev to fill her dev shoes to pull off the stuff that she’s doing on the design side.

Now, they’re working together.

She’s still going to have to manage the project.

She’s still going to have to do the sales.

She’s still going to have to wear all the other hats.

But she gets to hand off the dev side to somebody else.

Now, there are lots of people who are in, I would say, the majority of people are in the exact opposite situation.

Their dev skills are fine.

They’re always getting better, okay?

But their design is lacking.

And there’s a lot of people who don’t know their design is lacking.

And they try to maintain the designer hat and they should not.

They should let go of that hat as quickly as humanly possible.

Go find a designer, bring them in to handle the design.

Now, one of the reasons people avoid this, other than not knowing that they suck at design, is they don’t know how to price projects now.

Because they’re like, I don’t know what the designer is going to charge me.

And I can’t charge.

How am I going to sell projects?

What if the designer cost is like, eats up all the amount of the project price that I just quoted?

That’s never going to happen if you handle it properly, right?

So you get with the designer and you start working out essentially like flat rates for various common things, okay?

Like a per page design rate or something like that.

And then you talk to them also about like the types of projects that you do, who you do them for, the typical price point that they’re done at.

And you can build in the inner circle.

I put all of my pricing in there.

There’s a complete pricing guide.

It’s got literally itemized everything.

And it has itemizations for design.

And it would be, you know, probably one of the easiest things to find designers who agree to be within these prices that you are giving clients.

You can ensure the proper margin is in every single project that you’re quoting.

You just have to make sure you’re happy.

The designer’s happy.

The client’s happy.

There’s just three people.

You got to make sure that everybody’s on the same page and good to go.

But it should not be a situation where it’s like you’re going to sell a project and you don’t know how much the designer is going to charge you to design it.

You’re not ready to sell the project yet.

You got to get with the designer and figure that stuff out.

And then you can go sell projects.

But it is very easy to manage and handle and keep margins healthy and everybody is good to go.

Now, after that, those are the two main things, okay?

The two main shoes that have, because a site has to be designed and it has to be built.

Nothing else is happening.

It doesn’t matter what else you’re doing in the company.

If design and dev aren’t happening, you don’t have an agency.

Sorry.

Okay?

So those two seats have to be filled.

Now, what’s the next seat?

So a third person comes in.

What are they going to do?

I would almost always put that person on project management and client relationship, okay?

You’re still going to do the sales.

But once the project is sold, the project manager takes over managing the project.

And again, this can be part-time.

It’s built into the cost.

If you look at my itemized pricing, there is a project management fee.

Why?

Because there are costs to managing projects in agency world.

And that is not just, we’re not a charity, okay?

You want to hire us, you’re going to pay for the costs.

One of the costs is project management.

So that pays for, if you’re billing appropriately, that pays for the project manager to do their work.

So that shouldn’t really cost you anything either.

But now what you’re able to do is not worry about all of the messages the client is sending you, the needs that they’re sending, the bug fixes that need to happen.

Why?

Because the project manager is talking to, let’s say you do the punch list phase.

And always, Bev, not only does she have lots of things that need to be fixed, right?

But they’re all scribble scratched, right?

In writing.

It’s shit.

She took some screenshots, printed them out, fucking wrote on them, took a picture of it and said, you don’t want to deal with that nonsense, okay?

You know what I’m talking about.

The project manager deciphers all that.

And then guess what?

Because you’re not doing dev anymore because you handed that off like a smart individual.

The project manager and the dev get together and they work on that while you’re selling other projects over here and doing awesome designs over here.

You see how this starts to work nice and efficiently, okay?

These are the bases you want to cover.

It’s like softball.

I’m a peewee softball.

I’m going to be a minor softball coach next season.

But peewee level, it’s tough, okay?

You got to cover your main bases.

Got to have people on them that aren’t playing in the dirt and all that kind of stuff, right?

They can catch.

They can throw.

So you got to cover those main bases.

Project management, design, and dev.

Then you can start branching out from there into these other areas, right?

Okay.

Hopefully that answers that question for you.

An explanation of how archive and post type templates work and when we need to create them and what we can query when we create them.

Please also include templates for taxonomy terms.

Okay.

Well, that’s, man, I mean, this is a, it’s a very big question.

A very big question.

Okay.

Well, I mean, you could just use a blog as the, as the primary example.

We are using, uh, outdated blogging software.

So let’s just talk about a blog, right?

So a blog is going to have posts.

That’s the first thing you should think about is my posts.

So you need a template for the posts, but what you’re going to need is obviously there’s an archive of posts.

Okay.

So you use an archive template to show the archive of posts and you can design these things however you want, but functionality wise, uh, you are building a page that is going to show all of the posts.

This could be a paginated page, you know, with pagination at the bottom, it could be an infinite scroll page.

You know, I would tend to go in that kind of format probably for, uh, either pagination or fancy fastening.

So if you do fancy fastening, like, um, Ajax search or categorized facets or where it sorts the page that they’re looking at dynamically, you don’t need a bunch of pagination because they can get to what they want very quickly.

Um, so that’s kind of what I would go with.

Uh, but that’s the archive page.

Okay.

Now there are categories that posts are able to go into every category is going to list the posts in that category.

That is a category archive template.

Okay.

So if I had to navigate to that category and see what posts are in that category, and that’s a page, that’s a category archive or a taxonomy archive template.

Um, those are the, those are the main things you want.

So your main blog archive, your category archive, and then your post template.

All three of those things are templates in WordPress.

Uh, and every builder that you use is going to manage and assign those differently.

So it’s going to be dependent on the builder that you happen to use.

And if you use bricks, I’ve already shown this multiple times and multiple videos.

Uh, so you’re, you’re going to need to go watch those because we can’t rehash the entire building of all those templates.

Uh, but there’s plenty of videos out there on archive templates and posts, but that’s the structure that you’re thinking about.

If you make a custom post type, it’s the same thing.

You’re going to have a single template for a single post in that post type.

You’re going to have an archive of all the posts in that post type.

And then if you’ve taxonomized those posts, you’re going to have an archive for each category.

Okay.

Will there still be ACSS updates for bricks when you release etch?

Yes.

Yeah.

Automatic CSS from the beginning has been a multi page builder framework, right?

So multiple frameworks are, or multiple builders are supported by the framework.

Now the options for where automatic CSS can be used are getting limited because no fault of our own.

Okay.

We spent, you know, five figures in money integrating with quickly and then quickly committed suicide.

And then, you know, we spent a whole bunch of money integrating with oxygen.

In fact, oxygen was the initial one that we integrated with and it decided to commit suicide.

I mean, it’s not our fault.

Okay.

The, the, the, the options were left with bricks and people are like, well, put it in elementary.

You can’t, you can’t put it in elementary.

We’ll put it in beaver bill.

You can’t.

It’s not, you beat these, these tools are not compatible with this, with a professional workflow.

And I know people like to get butt hurt when I say that, but I guess just, we’re just telling the truth.

If you go to, here’s a good, here’s a good thing to read right here.

Let’s go to automatic CSS.

Let’s go to the articles and let’s go to.

Minimum page builder requirements for ACSS integration.

Very detailed on what is required from a builder perspective.

Right.

And this is actually written for builder developers, for people building builders.

This is written so that they can do things the right way.

So that tools like automatic CSS can properly integrate.

Unfortunately, you know, it’s, there’s not many options.

Breakdance.

We have an integration with it’s not perfect because of the way breakdance breakdance’s workflow is structured.

So I wouldn’t say it’s a great, I wouldn’t use it.

I wouldn’t use it.

So there’s bricks.

That’s it.

I mean, we had oxygen quickly bricks break.

I mean, we had options before.

We’re very limited now through no fault of our own.

Now, etch is going to come out and then things won’t matter anymore because people are going to look at etch and they’re going to be like, damn, that’s why I need, that’s why I need to be doing right.

Completely innovated workflow in etch.

Not, it’s not even going to be, it’s not even going to be close.

If you, one of the jokes about page builders, and I see this on Twitter, there’s actually a guy on Twitter.

I can’t remember who it is specifically.

But he does a pop quiz of like, what page builder is this?

Or actually what web design tool is this?

Because they all look the same.

They all look exactly the same.

They’ve all copied each other.

Instead of innovating, they’ve all just kind of like, oh, I’ll just make a little bit better version of this thing that already exists.

Breakdance actually used that in their damn marketing.

That was their marketing message.

We’re a little bit better than Elementor.

That’s like their whole marketing message.

It’s like, we’re Elementor, but better, right?

They’ve all just copied each other along the way.

If you open bricks and Elementor side by side and took off the branding and showed a beginner and been like, are these different?

I mean, obviously, like, okay, that color’s different.

Okay.

Structurally, they look exactly the same, right?

Now they behave very differently under the hood, but they look the same.

The workflow is generally the same of like how you get elements on a page, right?

How you use inputs to style the elements.

Yeah, one’s got a class workflow, one doesn’t.

Okay.

But those are technical considerations, not UX and UI considerations.

Etch is the first one to come out and be like, why are we doing things this way?

Because there’s a better way.

There’s a better way.

And I think, you know, as we progress through this, it’s going to get more and more clear, but you’re going to start using Etch.

And then when you go back to these other tools, you’re going to be like, these feel like toys.

They feel like just, they’re just toys.

That’s what they are.

And so I think that’s going to, our goal is to make that become very obvious and clear.

Okay.

As a beginner, how would you set up a customer’s email platform so it actually works?

And what do I need to look out for as PHP mail is so hit and miss?

Yeah.

One, you are not, here’s one of the biggest things, man, this is, this is worth its weight in gold.

Okay.

You are not an IT company.

Do not manage clients’ email.

Do not manage clients.

If you love managing that kind of stuff, go start an IT company.

You are not an IT company.

Okay.

You don’t want anything to do with that shit.

You don’t want to, it can’t be 1130 PM at night and Frank is not getting emails.

And you’re the one he’s buzzing on the phone, right?

That’s not the life you want to live.

And now, and now you’re deep into Microsoft 365.

No, this is not, it’s not the work we do.

It’s not web design work.

It’s not what it is.

Okay.

You need to stick to being a web design agency.

If they don’t have email yet or they need to switch or say, Hey, go sign up for, I don’t recommend Google anymore, right?

Recommend something that you trust and believe in and then let them set it up on their own or let them hire an IT company or whatever.

Now, with regard to the website, with regard to the website, we’ll just go back in.

This is on, this is in every blueprint site that I have.

Let’s go to, let’s just log in here.

Why am I not already logged in by the way?

Okay.

Let’s just get in here real quick and I’ll show you.

Very simple, very easy to set up.

It’s, it’s, it’s, for me, it’s a requirement depending on the host you’re with, by the way, too, you may not even have like email routing.

It might be required to send emails at all.

Let’s go into plugins.

Right here.

Okay.

So you’re going to get this thing called Postmark.

It’s a service.

It’s just building your pricing.

It should be in your management fee.

Your monthly website management fee should have these kinds of costs built in.

So you’re going to set up your client on Postmark.

Then you’re going to install the Postmark plugin.

And Postmark is going to handle all of your transactional emails.

It’s very, very easy to set up.

It’s very non-technical.

Um, and you can manage all of your clients from one single place.

And this is going to ensure maximum deliverability on all transactional emails that are triggered through your website.

So, uh, I set that up on every single website.

All right.

Um, I noticed the other, some ACSS questions in there.

Let’s do these on Thursday.

If I put a link in a rich text item, a list item, should the link auto be in the primary color?

I’ve checked everything above and there are no classes overriding anything yet.

The link is black.

Uh, I think that’s an ACSS question.

So we’ll save that for Thursday.

Um, why doesn’t your blueprint have the bricks child theme in it?

Where do you put custom code as needed?

Uh, my real blueprint does my zip WP blueprint does not because the installs that I’m using are all burner installs.

So they just, I don’t need a child theme.

Um, but on my, in my main blueprint, we do have a child theme for it.

Okay.

I select the loop option in frame slider.

It seems that in the DOM, it generates some clone allies for the different slides.

Is that supposed to happen?

Or am I doing something wrong?

Yeah.

A slide in a slider is a list item of a list, right?

So you’re sliding through items in a list.

And so they all will have an LI tag.

Uh, that is correct.

Now they don’t have to.

Um, and if there’s some accessibility thing there that you want to do differently, um, you are in complete control of the tags of all of the elements in a slider.

It’s not, it’s not like a closed system where you can’t change those things.

So you are in control of the elements from the bricks panel.

You can change the tags to whatever you want to change them to.

But a loop by definition will duplicate whatever the loop is on.

So if you put the loop on a div, it’s going to create a bunch more divs.

If you put the loop on an LI, it’s going to create a bunch more LIs.

So, um, but again, you have control over the tag.

Should we consider etch a friendly tool for a beginner intermediate web designer?

This is actually a really, really, really fantastic question.

Um, etch is not built for beginners.

It’s not designed for beginners.

It is designed for professional web design.

So if there’s two types of beginners, type A is I am a beginner at web design and I have no aspirations to be anything other than a beginner.

That’s like, again, if my mom needed to create a bunco club website or something, she’s a beginner, but she has no aspirations to, to be anything outside of a beginner.

She just wants a bunco club website.

That’s all she wants.

And she just wants probably to select a template and slap content into it and publish, which she probably can’t do honestly, but that’s all she would want to do if she was going to try.

And so I would tell that beginner, beginner A, this is what Wix is for.

This is what Squarespace is for.

This is what these other platforms that go there and do that.

That’s fine.

Right now, if you have a beginner, aspirations to be anything other than a beginner and you’re like, yeah, I want to explore this.

I might do this as freelance.

I might do this.

I might build my own agency.

I might, well, guess what?

You are a beginner now, but you’re aspiring to be much more than a beginner.

So what you need to do is use a tool that you can properly learn with, properly use and properly grow into.

And we’ve talked about this over and over and over again, where if you started with a beginner tool, you would just learn the language of that beginner tool, you’d be building yourself into a glass ceiling.

Okay.

Okay.

Because, and you’re, you’re going to immediately bump your head against the ceiling and then you’re never going to feel comfortable enough to actually break through that.

The people who start on element, there’s people that use elementor for 12 years or whatever, because it’s what they started on.

It’s what I know.

They don’t actually know web design.

They only know elementor.

That’s, that’s what I know.

So that’s what I stick with.

Right.

Yeah.

You’re not actually learning.

What you need is a professional tool.

Then you need to learn what you’re actually doing.

And that is true empowerment.

And then there’s no worries.

Now you’re a pro you’re doing pro work with a pro tool and a pro industry and pat yourself on the back.

If you start with Divi, cause it’s beginner friendly, or you start with elementor cause it’s beginner friendly or beaver cause it’s beginner friendly.

I’ll just get me, get my crystal ball out and we’ll just look up 10 years from now.

You’ll still be using that tool.

You’ll still suck.

You still won’t know what you’re doing.

Really.

You’ll still be heavily relying on the tool to do everything for you.

You’ll just be playing.

You’re just playing developer.

You’re just playing designer.

Okay.

You’re assembling things.

You’re not actually a professional doing professional work.

You don’t want to live that life.

That’s not the life you want to live.

You won’t.

You’ll always have imposter syndrome.

You’ll never have confidence.

You’ll always feel like you’re, you’re like, I shouldn’t be doing this, but I am like, you don’t want to live that life.

You just want to learn and you do something like page building one-on-one and you do it with a real tool.

I mean, you, the speed at which you are going to grow your skills, astronomical pace.

Okay.

You cannot allow yourself to put that, that ceiling right above your head, right from the jump by picking a beginner friendly tool.

Right.

Now, as far as the etch interface goes, what I’ll tell you is it’s, it’s going to be the like simplest interface you’ve ever seen because current page builders, that typical design approach that they use floods your real estate with a bunch of shit you don’t need.

Uh, and etch doesn’t do that.

Etch gives you what you need when you need it at the right time.

Uh, so, you know, big difference in interface.

You’re going to feel less cluttered.

You’re going to feel like some of these builders you go in and it’s like, people feel like I’m in a 747 cockpit right now.

Like there’s just controls everywhere.

I don’t know what to do with any of this stuff with etch.

You’re not going to see all that stuff.

You’re going to see your canvas.

You’re going to see your workspace.

You’re going to see a lot of available real estate.

Um, and then it’s, it’s, it’s going to feel more comforting and more minimalistic and it’s going to feel nicer in that regard, but it’s going to have way more power than anything that currently exists at the same time.

That’s kind of a nice blend.

Okay.

Um, I’m trying to select the first child in the dom to style it differently from the other children’s slide.

Great.

We can, uh, we can hammer that out real fast.

Let’s not do that in the automatic CSS website though.

Let’s, let’s find our way back to, uh, this.

Okay.

Okay.

So you have multiple elements.

You want to be able to select one of the elements, right?

With an style, one of the elements is essentially what he’s saying.

All right.

So let’s go to pages.

Let’s go to home.

Okay.

So get rid of this.

Whoops.

I duplicated it.

Whoops.

Didn’t delete it.

Okay.

Let’s put this in.

Here’s a box.

Let’s put a div.

You, you guys should do this kind of stuff.

Just like, all right, let me try it.

Let me try that.

Let me try that real quick.

Right.

Just put boxes on pages and manipulate the boxes.

Like it’s one of the easiest ways to learn.

So I want this box right here to be very, very, very tall.

Okay.

So I’m going to go to the height and I’m just going to say 500.

See, I’m just manipulating boxes, right?

I want to be able to see the boundaries of my box.

So I’m just going to put a background color on here.

It doesn’t really matter what you choose.

Right.

I actually just come up here and do, do this, make that super easy.

Okay.

Now let’s do this one and let’s just make this a, let’s make this a primary colored box.

Now it has dimensions.

And let’s go look at this on the front end.

It has dimensions in the builder.

This is probably one of the things again, that like probably confusing to a beginner.

They’re like, what the hell dude?

Like I see a blue box in the builder.

I don’t see a blue box on the front end.

What on earth is going on?

Okay.

It’s a, it’s a UI interface little trick.

All right.

In order to be able to click on this in a builder, they have to give it a minimum dimension because otherwise it wouldn’t exist because you haven’t given it any dimensions yet.

Right.

So they give it a minimum dimension in the builder, but on the front end, it doesn’t have those minimum dimensions.

So it actually disappears.

This is just here.

So you can click on it visually, but you still have to come here and give it some dimensions.

Like I can say a hundred and a hundred.

Okay.

That will make a perfect square, right?

If something’s a hundred pixels wide and a hundred pixels tall, obviously that would be a perfect square.

It’s not actually the only way to make things a perfect square.

A better way, if it has a single dimension is to set an aspect ratio.

So these are just ways that we can just talk about other concepts.

See, I put a one, like that’s shorthand for like one to one.

Okay.

Now it’s going to be a square no matter what I changed the width to.

It’s always going to maintain its squareness.

So that’s another approach that you can take.

Like a beginner might go 200, 200, where somebody more advanced might go 200 aspect ratio one.

Okay.

All right.

So now what we want is we want a bunch of these.

Okay.

Now, why is this overflowing?

Pop quiz.

What the hell?

What’s going on here?

Why?

What’s, what’s happening?

What’s happening?

Well, you set an explicit height.

You say, Hey, this box is 500 pixels.

Well, to the internet, that means it’s going to be 500 pixels forever.

I don’t care what’s inside of it.

You told me it’d be 500 pixels.

I’m going to be 500 pixels.

So it’s going to have to overflow whatever the elements are.

Right?

So if we were going back, what I might do instead is set a minimum height of 500 pixels.

Okay.

Now I’m actually going to lay these out differently.

All right.

We’re going to go, we can just wrap these right here and we can allow them to wrap to additional lines if they need to.

And now it will just fill itself out.

Right?

Now you’re seeing, well, my boxes are touching the edge of the screen.

I don’t want the, or the edge of the container.

I don’t want them touching the edge of the container.

We need spacing inside the container.

Then spacing inside the container is called padding.

So we can right click here.

We can just drop in a token for padding.

Now, Hey, look at this.

You have a container with a background color.

I can see the edges of it.

The items inside are not touching the edges because padding exists.

And now we’re in a spot where we can say, okay, I want to start trying to, I’m going to delete two of these.

I’m going to start trying to select some of these items.

Right?

Well, man, there’s a lot of ways you can do this.

Problem with web design is you can go, you’re at like a fork in the road and there’s like five forks.

It’s like, which fork do you want to go down?

How do you want to handle this particular situation?

One of the easiest ways probably is from the parent level, or maybe I should say one of the more organized ways.

I don’t know.

One of the easier to find ways.

Here’s the problem with page builders.

One is I can’t really tell the page builder that I want to do this.

So I’m going to have to like write custom CSS.

At least I don’t think there’s a way, maybe this stupid little area up here, the state’s pseudo classes.

If I had a class on here, I could go put an inth child state up.

You don’t want to be in this area though.

I’ve said many times, just avoid this area at all costs.

Okay.

I would delete this area if I could.

It’s one of the worst areas of bricks to manage this kind of stuff.

If you’re going to use classes on these things, notice these things don’t have classes.

You could actually do this on the class itself.

In fact, maybe I should show that.

Let’s just back this out and let’s go put a class on this.

All right.

My div.

Okay.

So there’s my div right there.

And we can remove that and we’ll put that same color just on the class.

Okay.

So I’m still going to be the primary colored box, but I added, oh, it unselected the class.

Let’s select the class.

And now do this.

Okay.

Primary color div.

Now, what I’m actually free to do is I can write in child code.

Let’s get a bunch of these on this class right here.

Okay.

CSS root.

Okay.

And then we’re going to say inth.

You can do inth of type, right?

To border, five pixel, solid, black, something like that.

I have now selected the second item here.

Okay.

Now, there’s a little trick to inth child and inth of type and things like this.

It’s not actually class based.

They did add very recently in the spec.

You can actually select an element by its class.

So this is more of like a little tricky, confusing way to do it.

What I might do here is I’m just going to show you the second approach here.

And you would almost always want to do this on a class, I would imagine, right?

So like I’ll just do my box group or something like that.

So now what I’m going to do, same kind of concept, except for the root, what I’m going to do is I’m going to select direct children, but then I’m going to select specific direct children, like the second one.

Okay.

So this little, let me zoom in.

This little thing right here means direct child.

It has to be a direct child of the thing I’m currently on right now.

Whereas if I didn’t have this, it would select any child, which would actually reach inside of these boxes and style things inside of these boxes as well.

If these boxes had children of their own.

So to keep things nice and safe, what you want to do is say, no, no, no, no, no.

I only want to select one of the, like a box, right?

So it’s got to be a direct child.

This star selector is anything.

So it doesn’t matter if this is a div, an LI, a span, a paragraph, whatever.

I’m just selecting any direct child.

That’s the star selector means any, it’s the universal selector.

Okay.

And then you’re attaching the targeting to that item because it’s like this item, but a specific one.

So you don’t want to space between them.

You, you want to keep them together because they’re together.

All right.

And then you can do in child two.

You can do math formulas in here.

You can do very complex stuff with in child selectors.

You can, you can double up.

You can do another selection.

So you can select two and four or two and eight or whatever you want to do.

Yeah.

And I’m about to do a video on selecting of class.

There’s a new of class syntax that you can use.

Very, very powerful.

Probably the next video that I’m going to do on this channel.

So this is the basics of doing that though.

If I change this to five, it’s going to select the fifth one.

Nine.

It’s going to select the ninth one.

Right.

And then you can do stuff like I put a border on it, but what you could actually do now is say like order minus one.

Oh, look, I moved it to the top.

Right.

You can just put boxes on a page and just start experimenting with stuff and just see what different things do.

The good thing about CSS too, which is why I say it’s like super easy.

Okay.

Remember I went to, um, let’s, let’s go to this container right here.

Box group.

Um, did I put, okay.

I never transferred the padding, so I’m going to remove the padding.

I want to put the padding on box group for sure.

You can go to layout and you can go to padding and you can put values in these inputs.

I would start encouraging you in your practicing, not necessarily in your projects, but in your practicing to avoid this practice writing some CSS.

Okay.

Whatever.

If maybe you have a mental block or you think, oh, it’s tough.

I don’t know what to do.

Okay.

One, there’s plenty of CSS based education out there, but the one thing I want you to consider, just consider this to help get rid of blocks.

Right.

CSS is a very, um, it’s a very literal language.

Like I want to add padding to something.

So I have box group.

Okay.

I’m going to come down here.

Do we know what root does?

Everybody should know what root does.

Right.

It just references the selected selector.

So I’m selecting box group.

So instead of writing box group, right.

Over and over and over and over and over and over again, I’m going to write root, which this, the, it says the shortcut right down here.

Okay.

Just read down here.

That’s the shortcut.

So if I just do our tab, it’s going to write root for me.

And the biggest thing about this biggest benefit is you can stem off of it when you do BIMS.

And it maintains an attachment to this name because in bricks, you could actually name this, like rename it like this.

Right.

Okay.

So let’s, let’s, let’s try this.

Let’s do something.

I’ll just show you real quick what I’m talking about.

In fact, we can just do it right here.

So I’m going to say root and we’re going to say background.

Actually, let’s do something different.

Border radius.

And let’s do five rim or something like that.

Root border radius, box group.

Oh yeah.

Okay.

I thought it was on this selected element.

I’m on the container.

I hear you can see the border radius on the container right there.

Okay.

See how it’s rounded this corner down here.

The boxes are covering up the other corners, but you can see that corner is rounded down here.

But what I’m going to do now is I’m going to go box group three.

Okay.

And I’m going to say border radius five rim.

All right.

So box group three.

And now what I’m going to do is I’ll just copy that to my clipboard and remove that.

We still see the rounded corner because I’m referencing box group three, but watch this.

I’m going to rename this back to box group.

And I’m pretty sure I’m gonna have to refresh the builder because bricks is still not, hasn’t updated itself yet.

Um, okay.

Well, let’s see what happens here.

Oh, is, oh, bricks swapped it.

I didn’t, does bricks do that?

Or is that a little glitchy thing?

Let’s try this again.

Box group.

Bricks might do that automatically now to save people.

What would have happened in the past is you change the name and you’ve left this static name in here.

All of your styles break, right?

Because your style box group, but now it’s called box group three or something.

You lose all your styling, but bricks might link these automatically.

Now let’s try this again.

Let’s just see.

So I’m going to first let’s refresh.

Let’s always start with a refresh state.

Let’s just see.

These are experiments that you want to do.

Learn how the builder is handling things, right?

It did.

Okay.

Box.

But if it was box.

Yeah.

I guess it’s going to pick up whatever matches and it’s going to automatically root that for you.

Okay.

Think that.

I don’t think that’s always done that.

So that’s a nice little, a little update.

But, you know, let’s, let’s try this.

Let’s try this.

Can I, can I stim off of it and still have it do the same thing?

That would be the next experiment we need to do.

So I’m going to say box group and I’m going to say div like this.

All right.

So let’s, or wasn’t it?

Yeah.

Okay.

It doesn’t, it doesn’t actually matter.

I just want to see if this works.

Let’s refresh again.

Box group div.

I’m guessing this is going to break it, right?

Let’s go here.

Open.

Bang.

Okay.

Oh, wow.

Okay.

Parser for the win.

All right.

That’s good parsing.

That’s good parsing by bricks.

All right.

So you don’t have to worry about it that much anymore, but it is just a shortcut.

So you don’t have to type the name every single time.

You can just hit our tab and move on with your life.

It used to be critical because I am almost 99% certain that that parsing did not happen before and your shit would break.

But anyway, back to what I was saying.

Padding.

I want to add padding.

Is there some secret code for adding padding in CSS?

No, no.

Okay.

Let’s go back to root right here.

And I want to do padding.

So what do I write?

Well, as long as you know basic, basic, basic syntax, you know, I just write the thing that I want.

I want padding.

So I’m going to write the word padding.

Then it’s a colon.

Okay.

Then a space.

You know, I actually don’t even need the space, but then I’ll do like 5M.

Then how do I close it?

Semicolon.

That’s it.

The syntax of colon, semicolon is literally all you have to remember because the padding that you wanted to add is literally called padding.

And if you want to add border radius, guess what it’s called, guys?

It’s called border radius.

If you want to add margin, guess what it’s called?

You’re never going to believe this.

It’s called margin.

Right?

So if you’re scared of CSS, you at least start with the super basics.

Okay.

Of like, all right, I put the name of my selector.

What’s the other syntax you have to know?

This right here.

Okay.

Selector.

And then these brackets.

Okay.

So you put the name of the thing that you want to select.

And then inside the brackets, you can start your curly braces.

I guess I should call them.

You start writing your property value names.

The property is the name of the thing you want to influence.

Padding, margin, border radius, whatever.

And then you put a value on there.

Now, what are your values supposed to be?

Well, in the beginning, just pick numbers.

It doesn’t matter.

Just pick numbers.

But as you progress, you want to use the more appropriate values.

Like, you know, do I use M?

Do I use RIM?

Do I use pixel?

Do I use VW?

Do I use VH?

Some learning that you have to do there.

Right?

But if you understand the syntax, that’s the hardest part.

And that’s the hardest part in a lot of languages.

Like, I can know what I want to do conceptually in JavaScript.

But if my brain can’t remember the syntax for how to put it, it’s going to break.

The code is going to break, right?

So the syntax is what you want to focus on learning.

And the syntax to me in CSS is very, very, very simple and very straightforward.

But you have to get started with the easy stuff and just continue reminding yourself.

When it comes to properties and values, the thing that you want to add is almost always the literal name in terms of property.

Okay?

So allow that to let you get started, right?

Venture into this territory.

Stop relying so much on all of these inputs up here.

Column gap.

Guess what?

That’s the name of the property.

Column dash gap.

Row dash gap.

Flex dash grow.

Flex dash shrink.

Order.

All the labels you see right here.

You could literally just write this in the CSS and then give them values, right?

The display property.

The flex wrap property.

Okay?

And in a good builder, this should be a one-to-one match.

This is the problem with Elementor and Beaver Builder.

They came up with cute names.

Of course you don’t know what the properties are called because the tool you’re using has trained you on all the wrong names for things.

It’s another big thing that I go after builders at all the time for.

They’re teaching people the wrong things and they’re teaching people the wrong practices.

They’re disempowering you.

You got to use a tool that does things correctly if you want to learn.

Is there a way of exporting a complete site in Bricks and package it to sell similar to kits in Elementor?

That’s a good question.

I don’t know off the top of my head because I’ve never done it.

You can for sure package up an entire page.

You can package up an entire template.

But collections of them, I’m not sure.

I’m not sure.

Now, you could, I don’t even know what the best, yeah, I don’t know what the best way to do this.

This is a great question.

Somebody that’s done it before could probably answer that in the, in the chat.

So maybe there’s somebody in here that can, that can, you know, that has an answer for that.

I’ve personally never done it.

We haven’t done it with frames.

Dude, my, the cup just committed, like literally just committed suicide right off the edge of the desk.

I didn’t even touch anything.

I didn’t even touch anything.

Okay.

If you can’t find a template from frames, et cetera, that is what you want.

Can you use the bricks items from the plus menu or will that conflict with ACSS?

No, that’s the beauty of frames and automatic CSS.

I mean, you can do whatever you want at any time.

So if I add a frame and I’ll add, let’s add this content section Victor right here.

Okay.

So I’m going to insert this frame.

If bricks allows me to, I don’t know what bricks is up to right now.

Okay.

There we go.

It just took a minute.

Bricks had to think about it.

Oh, and it’s trying to add a duplicate.

That’s fun.

And maybe I didn’t have a, oh wow.

Oh, bricks.

What are you up to, sir?

Okay.

Let’s refresh.

Bricks.

It does lose its mind here from time to time.

Okay.

More so, more so lately.

Let’s try this again.

Let’s make sure import images is on.

So we maybe get a placeholder this time.

I’m not going to click it multiple times.

I’m just going to let, I don’t know what bricks is doing right now.

I don’t know.

I got to tell you the library updates are, it hasn’t been fantastic.

Okay.

There it is.

It made it.

It made it onto the page.

So let’s say I like that one.

And then I’ve got to do another section right below that.

And it’s gotten really, it’s gotten really laggy here.

Okay.

So this section right here, I can’t find a frame for it.

Well, guess what?

You can build whatever you want right here by hand.

However you want to do it.

You are not limited in any way, shape or form.

Same thing here.

If you wanted to, this is a automatic CSS variable, automatic CSS variable.

I mean, you, I don’t know why you would want to, right?

Oh, this is an auto grid.

So you’re not going to be able to here because auto grids are a little bit different, but let’s say this wasn’t an auto grid.

Let’s say it was just a grid two like this.

I mean, you could go rogue with your grid gap and just be like, Oh, I care.

I want five rim today.

Right.

I don’t know why you would do that, but you can, you can.

Automatic CSS doesn’t care if you use it or sidestep it or whatever.

Overall, your project management is going to get harder to manage.

That’s why I don’t know why you would want to, but you can, you’re not going to break anything.

You can do whatever you want.

So yeah, you’re not limited in any shape or form by bricks or I’m sorry, by automatic CSS or by frames.

Okay.

I’ll go by flywheel.

Hoping the software you are using will help.

Okay.

I’m not sure what this question is.

You’re getting familiar with local by flywheel and cadence.

Hoping the software you are using will help.

But I don’t know what software you’re referring to.

Maybe clarify that.

Maybe clarify that.

One thing I will say guys.

Okay.

Like we’re going to talk about zip WP or insta WP.

Like I’m preferring zip a lot lately.

If you’re a beginner and you’re trying to learn and you’re, you know, you’re going to need help from other people, right?

What is the number one thing that they’re going to want?

They’re going to want a link.

If you do a bunch of local stuff and you can’t provide links for those things, you’re going to be very limited in how other people can help you.

And all you’re going to do is put your questions in forums and all this other stuff.

And people are going to be like, I need a link.

I need a link.

I need a link.

I need a link.

I need, I need, and you’re like, well, I do local.

It’s like, stop doing that.

Get this is a perfect time to get something like zip WP and spin up instances that you can easily give other people links to give them access to whatever they need to come in and help you.

Right.

You don’t want to isolate yourself with local installs away from the help that you know you’re going to need because you’re a beginner or you’re intermediate.

You got to make it easy for people to help you.

So something like zip WP, these are very easy approaches, or if it’s a real dev project that you’re doing for a client, you don’t want it to be on zip WP for whatever reason.

At least do a dev instance, like a live dev server.

All of our projects are done on live dev servers.

So do yours on a live, then you’ll have a link that you can share with people.

You can give access to people who might need the access.

Don’t isolate it to local unless you’re a pro and you can do all your own investigations and all your own debugging and all your own everything.

Okay.

It’s not, it’s not a good place to be as a beginner.

Let’s see.

I’ve had a quick look at zip WP and OSHA using it.

Do you rate it?

Yeah, I really, really like it.

What sort of new features do you think ACSS needs?

How much more can it do?

I mean, well, CSS is constantly evolving.

So there’s a lot to do just probably in terms of refactoring, taking advantage of new things that come out.

So it’s never going to stop.

What we have to make sure it doesn’t do is like get bloated, right?

That everything that we’re adding is a really very valuable and important thing.

For example, textures and overlays.

These are pain points that we have ourselves on projects that other users have.

And we can release a feature that makes that way easier to manage, way easier to deploy.

That’s the kind of stuff we’re looking at.

We don’t, we don’t add, and I’ve had a laundry list of ideas and things that we could do.

And I’ve skipped them repeatedly.

Nope.

We’re not doing that.

Nope.

We’re not doing that.

Nope.

We’re not doing that.

But then I get to something super valuable like textures and overlays.

That’s what we’re doing, right?

The global border system, the global divider system.

And these are things that other frameworks just don’t have.

These are core aspects of managing and building a website that automatic CSS can cut in half or by 75% and then make the management of them dramatically easier going forward.

Those are the things that we’re targeting as features.

Okay, let’s see.

Do you have something that really surprised you about web design when you started, like a hidden trick or technique?

I was surprised how effective forms are said to be for conversion.

It’s probably a lot of them.

I’d probably have to think and put a list together.

I also had to think, it’s been a long time since I’ve been a beginner.

So it’s like, man, good thinking.

And things have changed so dramatically.

It probably isn’t even relevant because things have changed so dramatically since then anyway.

But like core stuff we always talk about.

Custom post types, leveraging custom post types, leveraging custom fields and dynamic data and options pages and loops and logic.

And I mean, that’s all the stuff really that’s the breakthroughs that a lot of people still aren’t doing.

You see a lot of the people, Elementor users, Beaver users, Divi users, they’re not using custom post types properly.

They’re not using custom dynamic data properly.

They’re not using loops and logic properly.

They’re not using templating properly.

They’re doing a bunch of static nonsense.

The websites are a disaster and a nightmare to maintain.

Page building 101 is really, go through page building 101 and you will know more than nine out of 10 people using page builders.

Point blank.

Like just go through that course instantly.

Now you know more than nine out of 10 people doing the same kind of work with page builders.

It’s going to elevate you tremendously.

I’m struggling understanding what to use when, for example, when to use a block or a div, M or RIM, wrapping things in tags.

Your videos are fantastic, but overwhelming.

Should I learn CSS first?

I think everybody should learn CSS.

Yes.

And I think we should not live in a world where you’re like, I shouldn’t have to learn CSS.

You want to be empowered.

Here’s the thing about page builders.

Okay.

The number one thing, this is why I say every page builder, this is what kills me about Gutenberg.

Every page builder must give you access to write custom CSS.

It is mandatory.

And here’s why.

CSS evolves very quickly.

Okay.

If you look at, I always use the example of grid.

CSS grid came out and like, like, you know, like came out, came out to where people were actually using it widespread in like 2016, 2017, something like that.

Elementor didn’t get it until like the 2020s, somewhere in there.

Okay.

Very recently.

That’s a massive gap between when a builder gives it to you versus when it’s actually available and should be getting used.

Right.

And that happens across the board in so many, so many different ways.

They stick to that because they have to maintain backwards compatibility.

They have to do, there’s all these excuses and that’s too advanced.

Our beginner user base isn’t going to know how to use it.

So we won’t put it in yet.

You get all that nonsense.

Right.

And so there’s a massive gap.

So you’ve got to be able to step in and work around the builder.

There’s also situations where the builder, like the nth child stuff that we just did, right.

Either can’t do it with the UI or makes it tremendously difficult.

And so you have to be able to step in as the developer and write the CSS for those things because there’s no other option.

The builder just can’t do it for you.

So you have to be able to do it.

The builder should be a tool that expedites our work, not a tool that we use as a crutch because we don’t actually know what we’re supposed to be doing in that situation.

Right.

The same thing with a pilot.

You want a pilot that’s like, if all this shit goes out, I’m still flying this plane.

Okay.

That’s the pilot you want.

You don’t want a pilot that’s like, well, I don’t know.

I just sit here.

This thing does most of the work and I just flipped some switches.

Right.

Cause when shit goes haywire, you’re dead.

Okay.

That’s the bottom line.

You’ve got to be the pilot that if everything’s not working, you can still fly it.

Okay.

You can still land it.

Everybody’s going to be good.

That’s, that’s a capable pilot.

That’s a professional pilot.

Right.

I use the, that’s, that’s probably the best example I can come up with for what the page builder is supposed to be doing for us.

Um, okay.

We can talk about the div block thing here for just a second.

Here’s a div.

Here’s a block.

Oh, geez.

Okay.

Uh, let’s get rid of these tabs.

We don’t need these.

Okay.

And one last try.

Here’s a block.

Okay.

So visually they’re very different.

The div is over here and the block is all the way across.

Now, if we go look at the code, which is again, if there’s one thing, when I look at support requests, um, there’s a lot of questions that people ask that they could have answered themselves with a little bit of a right click and a little bit of a look-see at the code.

Right.

So we open this up.

Now people get, you know, they’re like, ah, it’s a little intimidating.

A lot of, a lot going on here.

Okay.

But you find the section.

Now it is, it would be easier if we visually had something to look at and right click on, uh, but we don’t even need it.

Right.

Main has all your shit in it.

Section is the top level thing or should be the top level thing.

We’re going to open that up.

This is that container that lives inside of the section that is your content width and contains the section content.

So we’re going to open that up and we’re going to see our div and our block.

Bricks gives them a unique class.

One gets Bricksy div, one gets Bricksy block.

Right.

But HTML wise, they’re just dibs.

That’s all they are.

They’re just dibs.

Okay.

Now one is clearly smaller than the other.

Let’s go ahead and give this a background color.

Let’s give this one a background color.

Now we can visually see them.

But again, what did I say earlier?

We might not see one of them.

We might not see both of them.

Let’s see.

Okay.

We still don’t see them.

We still don’t see them.

We see them in the builder.

We don’t see them on the front end.

Well, they don’t have any dimensions.

This one has width dimension automatically.

That’s why it’s 100% width.

That’s the block.

So the block.

Now, if I put content in them, you would see it.

Right.

So put some content in.

It’s got to be there for the content.

All right.

So this is a block.

And then we can put that in there.

And this is going to be our div.

Now that they have content, you’ll see them.

Okay.

So there’s your div.

There’s your block.

So block is 100% width by default.

Div is just a div.

The other thing is this is set to flex.

Let me put an inline.

Let me try this.

Let’s try this real quick.

Let’s do something like a link instead of a text, like a paragraph.

Okay.

So let’s put this link in and then let’s go to custom URL.

All right.

Let’s copy that.

Let’s paste this in here.

Okay.

And let’s get rid of the basic text.

Now I’m going to put in text link, text link, text link, text link, text link.

Oh, what’s going on there?

What’s going on there?

So I put inline elements.

That’s why I just switch it to an inline element.

So there’s inline elements.

Links are inline elements.

They go inline with other things automatically.

And in the div, they are in fact behaving like they’re supposed to.

And in the block, they’re not.

They’re stacking themselves.

And that’s because the blocks in bricks are automatically set to display flex.

And the direction is automatically set to column.

So it puts everything on top of each other by default.

So that is the big difference.

If you’re going to build like a card or something like that, almost all content on the internet goes top to bottom.

Right?

So if you’re going to build cards, if you’re going to build, you know, normal layouts, big grids, things like that, you can use blocks.

I mean, it’s a little bit of a shortcut because it gives you the 100% width.

So it automatically gives you a dimension and then it automatically stacks your content.

But there are certain situations where you might not want that to happen.

That’s where you would opt for using a div.

They’re both divs.

One just has some defaults that the other doesn’t have.

So that’s kind of the best way to explain it.

You really have to then go to like analyzing the situation you’re in and just being like, all right, what is most appropriate for this situation?

The one obvious situation would be if you wanted to wrap something that’s small.

Like if I put, if I put an image in, okay, let’s put an image and let’s select this one right here and let’s give it a small dimension.

So like 400 pixels.

Okay.

I want to wrap this.

Okay.

If I wrap it with a block, that’s not going to be fantastic because this block, I’m going to put a background color on the block so you can see it.

That’s not fantastic.

Obviously it’s doing more.

It’s as, as the kids these days would say, you doing too much.

Okay.

I didn’t want that all to happen.

I just wanted to wrap the image, right?

Well, that’s you use a hundred percent width container to wrap something.

That’s not a hundred percent wide.

That’s why you’re not getting the correct effect.

So if we back out and we instead say wrap with div over here, we are now going to get a wrapper.

That’s literally wrapping the thing.

It’s not, it’s not doing too much.

Okay.

It’s, it’s just wrapping the thing.

That would be a perfect use case for the div.

Okay.

I don’t know.

Hopefully, hopefully that answers the question there.

Oh, if you want to change tags on things, this would be a good example.

So there’s a div right here.

You could say that this is going to be my figure element, for example.

Okay.

So I’m going to save.

Now, I don’t know.

Something’s happened where there’s some CSS causing this.

Now that it’s a figure to be a hundred percent wide, we can see where that’s coming from, but you’re going to change.

Let’s go refresh on the front end.

Okay.

So here’s our main tag, section tag, div.

There’s our figure right there.

So remember that was a div, but I told it to be a figure.

So instead of being a div, it’s now a figure.

Right.

And it’s, and it’s wrapping my image.

So not every builder allows you to do this.

Bricks does, which is fantastic.

You can, you can use whatever, well, you used to be able to use whatever custom tag you wanted, but now you see, oh, that says without attributes.

There’s a security feature now where like, I don’t think, yeah, see HTML tag, not allowed.

They used to allow you to do everything.

Now they’re trying to save you some security features or something.

So, um, but that’s that you can change tags to whatever you want.

Okay.

We got about seven minutes here left.

I’m going to try to, there’s a lot of questions, a lot of questions.

Um, okay.

If you were, if you were still an agency owner with a client who wanted email addresses, who would you recommend to them right now?

I, I, I mean, I, I don’t know.

I, I don’t know.

I hate Microsoft and I boycotted Google.

So, hmm.

Where does that leave us?

Um, for brands too?

I don’t know.

Um, probably what is it?

Zoho or whatever, whatever that is.

I don’t know.

I’ve never, I don’t have experience.

I can’t recommend stuff.

I haven’t used extensively.

Personally, we use hay.

We use hay domains.

Um, and, and I like it, but I don’t know that I would recommend it to, cause it does have some limitations, does have some limitations.

I don’t know that I would recommend it to actual clients.

Thankfully I don’t have to do this anymore.

So, uh, I don’t know.

That’s a decision you’re going to have to come.

Now, if you’re not boycotting Google, Google is just fine.

Like technically speaking, it’s just fine, but I just, I don’t use them anymore.

Okay.

Let’s go to going back to the postmark question.

What about if it’s a client that’s not going to be a monthly one?

Uh, then they have to get their own postmark account, set it up, and then you still do the same exact integration.

But the difference is, is you set it up under their name, their billing, all that stuff, same process, but you just don’t put it on your, under your agency account.

Okay.

Have you considered an ACSS light mode that would only enable the most important?

Yeah.

It’s already, it’s already built in.

Uh, you go to options and here’s light mode.

You can turn everything off.

Literally everything can be turned off that if you don’t want it, you don’t need it.

You can even say pro mode, which is the mode I use, which turns off most of everything.

Or you can say classless workflow, which literally turns off every single utility class and all you use for everything is variables.

Um, so yeah, you already have control over how light automatic CSS is.

Okay.

Will you likely do an etch PB one-on-one type series for web builds?

If we’ve completed the current PB one-on-one, we’re still pretty green.

We’ll be well-equipped to hit the ground running with that.

If you’ve done page building one-on-one, you will know how to use etch.

Okay.

So because you’re, you’re, you’re at that point, you are understanding the workflow of a, of a professional and you’re using a tool that allows you to use that professional workflow.

Everything in etch is going to make perfect sense to you.

So I will though, by the time etch is ready for production, right?

Uh, probably will be time to update page building one-on-one and I will redo the lessons using etch instead of, uh, using bricks.

Uh, okay.

Let’s see.

Is etch going to have power user features like Vim mode or say, uh, CLI to chain settings and stuff.

Okay.

Oh yeah.

Yeah.

Yeah.

Yeah.

Yeah.

Yeah.

There’s, there’s, it’s, it’s, listen, nothing.

There is going to be nothing even close.

It’s not, there’s, they’re not going to even be close.

And as a beginner in dev, how do I start to learn accessibility practices?

It’s overwhelming.

Accessibility is very overwhelming.

You’re right.

Um, I’ve learned the basics of accessibility.

Start with things like color contrast, start with things like keyboard navigation, uh, and then start to get deeper and deeper and deeper into semantics and, uh, ARIA labels and tags, all that stuff.

Like just start with the basics.

Don’t allow it to be overwhelming by diving into deep, too fast and letting people, uh, you know, there’s a lot of, a lot of kind of like, um, accessibility bullies, you know, uh, they’re, they’re just like, if it’s not a thousand percent accessible, it’s like, I’m going to yell at you.

And, um, you know, we want to strive to make these sites as accessible as possible.

We also have to understand the tools that we happen to use might be causing a lot of the problems.

Uh, so you, you know, you’re probably gonna need to inspect how a tool is doing a certain thing.

And then knowing the situations where there’s common accessibility problems, navigation, for example, is a big one.

Very easy to create an inaccessible navigation.

So if you’re working on a navigation, you might want to check some extra boxes there and take some extra time, cross your T’s, dot your I’s, that sort of thing.

And then just learn as you go.

And you can, you can buy an audit from an expert to come in, tell you what’s wrong with things.

And then you can start to look through how to fix them.

But again, this is work.

You should be billing.

Okay.

Don’t be doing this stuff as like a charity.

Don’t quote your normal price and then do five hours of accessibility work that you didn’t actually bill for.

If you’re going to make sites accessible, which my, what I advocate for is you don’t sell accessibility.

You don’t say, well, for this much more, we can make it accessible.

You should decide we are going to build to double A accessibility standards.

Um, and that’s the, the price is the price.

It includes that.

And we’ve, we’ve already accounted for that in our, in our pricing.

Um, and then you have to keep in mind that accessibility is an ongoing thing.

So at that point, if in order to maintain accessibility and continue to do audits and ensure accessibility, there’s gotta be a monthly management plan that accounts for that.

Right.

Um, especially if the client is doing anything of their own to the website, because the client can easily screw stuff up.

So if there’s going to be a maintenance of accessibility, gotta have a package that includes that.

Uh, okay.

Two minutes.

Let’s get it quick.

Let’s get it quick.

Um, okay.

When importing frames from templates, I encountered the problem of missing some CSS element variables.

I don’t understand how and where to look for variables or where to reassign them myself.

Um, so two things.

One is if you import a frame and it’s just, it’s, there’s something’s wrong with it, obviously delete it and just do it again.

Sometimes bricks hiccups in the middle of adding a frame.

Uh, that’s it’s, it’s more common than it should be.

Right.

Um, but let’s take a look at something here.

Uh, let’s see.

Let’s find one.

That’s a bunch of WooCommerce stuff in there now.

Okay.

Like, let’s take a look at this one.

Now I’m just going to have to wait.

Cause I don’t know what the deal is with bricks right now with this, uh, this delay.

Nuno is actually in the, in our discord complaining about this earlier.

Okay.

So we’ve got a complex situation here.

We’ve got like a two column layout.

This thing is a slider.

We got slider controls down here.

We’ve got some sort of background going on over here.

So the first thing you want to understand is that anything that has custom CSS to get the job done is marked with CSS right here.

It says CSS.

And that is the element where the CSS will be found.

And 99.998% of the time it’s going to be on the class.

And so we’re going to go to style.

We’re going to go down and we’re going to go to CSS.

And now what you’re looking at is essentially cheat codes for styling this frame.

Um, so everything has been condensed into a locally scoped variable, which are just tokens.

They’re just placeholders for values.

And they’re named as their literal thing.

Controls height.

That’s the height of these controls right here.

Controls BG color.

That’s the background color of the controls.

Progress background color.

If there’s a progress bar in this somewhere, that’s going to control the background color of it.

The number color.

Okay.

The text color, the heading color, the link color.

Okay.

And you can just start changing these values right here and it will start changing the frame.

Um, so that’s usually where you’re going to start.

You’re also going to notice here, this has an automatic loop in it.

They’ve put a loop in here for us.

So this is where you’re essentially what we’re suggesting is you shouldn’t put a bunch of manual slides in here unless that’s super appropriate.

More often than not for whatever this is for, like if it was going to be posts or something, like here’s our featured posts.

Well, you would loop those.

You would loop through those.

Featured services.

Loop through those.

Featured, um, uh, what would it be?

Like, uh, portfolio.

Portfolio item.

Well, loop through those.

Those should be a CPT.

You loop through those.

So we’re kind of suggesting like, ah, you might want to use a loop here for this thing.

Right?

Um, but the controls are in here.

There’s a JavaScript code snippet in here that you would never have to touch most likely.

Um, but we try to make it as easy as possible.

This is going to do most of the work for you right here.

Other than if you were going to change your grid structure, that would be done on the grid.

So find the grid grid hotel.

Look, there are all your grid structure right there.

Um, so when, when we can put it in the inputs, we put it in the inputs.

When it’s a little more complex or we have to abstract it to make it super easy, it’s going to be in custom CSS.

And then you just look for the little CSS badges.

That’s where the CSS lives, uh, for that element or that frame.

Okay.

If you find any that are difficult, you can always ping us in the commuter and be like, dude, I can’t figure out what’s going on here.

And then we can jump in and help you.

And then often we’ll be like, yeah, we need to make this one easier for people.

And then we’ll refactor it a little bit, make it a little bit easier.

And, uh, yeah, go from there.

I’m going to do the last three just because there’s the last three.

Uh, something else.

What do you, what is your website development process?

Oh, okay.

Hey, Sarah, Sarah, Sarah, Sarah.

This is a, it’s a great question.

It’s a great question.

There is a masterclass.

I did.

It’s three hours long.

You’re going to have to schedule this for yourself.

Okay.

Grab some coffee, whatever you need to do.

But it is the best three hours that you could possibly spend as an agency or freelancer.

Okay.

You’re going to go to YouTube and you’re going to type in Geary process is everything.

It’s a masterclass.

The title of the masterclass is process is everything.

Now it’s not just going to talk about process.

It’s not going to be like, guys, it’s so important to have a really good process.

That’s not what it is.

I talk about process from the standpoint of it driving your sales, your pricing, your profitability, the quality of your work, literally in this business process is everything you can sell based on your process alone.

Okay.

And I, I use examples of a, of a, uh, if you’re going to start a pizza business, because actually process is everything in entrepreneurship.

If you really understand the deeper meaning of process and how it ties into literally everything that a business is doing.

So you take three hours out of your day that, that masterclass is free.

It’s a hundred percent free.

It’s called process is everything.

And it is going to make you hopefully hundreds of thousands of dollars over the, over the span of your business.

Maybe, maybe even seven feet.

It is going to transform how you think about doing this work, selling this work, et cetera, et cetera, et cetera, all the way down the line.

Okay.

Because process is everything.

Pretty good name for the, for the masterclass.

This is just true.

It’s true.

You realize how true it is when you watch the masterclass.

So go do that ASAP.

Um, okay.

Uh, four part CPT.

Are you going to make it?

Okay.

And you manually check accessibility.

Okay.

Last question.

Then we’re at, we got to get out of here.

Do you manually check accessibility or do you recommend any audit tools?

You start with the audit tool.

That’s going to get 20% of the surface level stuff.

And then everything else has to be checked manually.

And that’s why if you’re going to sell audits, you get, you better price them, right?

Uh, if you’re going to do the work for like, you’re going to bake accessibility into your projects.

You got to account for that.

You got to price accordingly.

Okay.

Uh, but there is no audit tool that gets even close to a, a real hand audit.

So yeah, it’s got to be done by hand.

Okay.

Let me get out of questions.

Let me go back into chat.

We’ll just take a minute to say bye to everybody.

Um, yeah.

Inner circle is definitely the place for this for sure.

Hmm.

All right.

Make sure join us.

Thank you guys.

I’m seeing the chat go.

Um, tomorrow WP town hall, 11 a.m.

A lot of people had ACSS questions today, Thursday, 11 a.m.

ACSS live Q and a demos.

I will answer all of those ACSS questions and more.

So come see me on the ACSS channel.

Go there right now and subscribe.

So you don’t forget automatic CSS on YouTube, subscribe to the channel notification bell.

I’ll be live there Thursday at 11 a.m.

Uh, there’s a lot to talk about obviously.

Cause I don’t think we’ve done one since 3.0 came out.

Okay.

So there’s a lot to go over.

There’s a lot to talk about.

There’s a lot to look at.

Join me Thursday at 11 a.m.

Hopefully this was helpful for you guys.

I love you.

Thank you for your support.

Thank you for being here.

And I’ll be back again soon.