PB101: L02 - What Do Page Builders Do (Intro to HTML, CSS, & Page Inspection)

In Lesson 02, we're going to take a look at what page builders actually do, and you're going to get your first taste of HTML and CSS!
We're also going to learn how to inspect the code of a page to see what's happening and identify where styling is coming from.
Questions answered in this video:
❓Why would we want to use a page builder?
❓What does a page builder actually do?
❓Do all page builders output the same code quality?
❓What is the difference between HTML and CSS?
❓What are classes and IDs?
❓Why is bad code problematic?
❓And more!
Remember, this is just scratching the surface. We'll dive much deeper into all of these concepts as you continue to work through the course.
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner-circle/
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **

[@Gearyco]

This one ended up a little longer than I had hoped. I'd like to keep them all to 30min or less going forward if possible.

[@kappesante]

now i have to downvote this comment about 30 minutes shows..

[@charliesasser]

Talk as long as you like. I will listen.

[@koperkuba]

Can You do a 2 hrs long next time pls?

[@rayollll]

@@koperkuba This seemed like a perfect length to me. Great insight and great course, Kevin. I'm eating these videos up!

[@koperkuba]

@@rayollll Its way to short:)

[@ZeeshanAli40.]

This course is gonna make a huge impact on page builders' audience.

[@Gearyco]

Hope so!

[@marionpaolo319]

Already has an impact on me. Damn Elementor already on containers but still the divception is HORRENDOUS!

[@foofourtyone]

This is more of a beginners type of lesson. I am not a beginner. But I watched it anyways. Because I think, you can learn from any video, even if they are more targeted towards beginners. And you haven't let me down. So thanks! I just enjoy your teaching style. Very good.

[@vishalsahi3832]

I am using Elementor since last four years. This is an eye opener video. 😢 It's time to ditch the Elementor now.. Thank you Kevin..

[@davidwalls2304]

Kevin, great video. Timing -- great, content level/description -- great. As a former Elementor user, I didn't realize all the mess it created. I'm glad I started switching to Bricks on all of my sites. Looking forward to the next lesson.

[@rebelinc]

Did the same test with section/container with Bricks and Elementor last week. Just to convince myself, that what I thought was also true. Thanks Kevin and have a nice holiday 🙂

[@VascoDanielBaiao]

It was good to understand where everything goes. HTML, CSS and JS got clearer to me after this lesson. Also the "inline style" only realized after watching your lessons. All through the course you're distinction between doing something or doing it right is very enlighting for someone who learns most just by fussing around. Was ditching Page Inspection to often and this video made me realize how useful it actually is.

[@PaulStradling]

Awesome, thanks Kevin. I know some CSS/HTML so looking forward to putting this into practice.

[@buntuscainte4987]

Thanks Kevin. Great tips on finding elements in the inspector. And it's great to now know how to look beneath the hood of code generated by page builders, particularly as it relates to efficiently and clean code.

[@LH-gb2lh]

Excellent tutorial! Thank you so much! Learned a lot and helps to connect all the dots.

[@juliocesarsobrino6248]

Thank you very much Kevin. In this first video, I have seen exactly what you promised to offer, and even more I would say. Very good idea to introduce expert tricks. Let's go for the next video :)

[@techgal2010]

I've not used Elementor before. I have used Divi and it is just as much div-ceptioned as Elementor. I am so happy to be using Bricks these days. The great thing about your explanations is I can tell people why they should move away from that bloat. Actually, I might just have them watch this video. 😲

[@klitos15]

Thank you, Kevin. Fantastic presentation.

[@jfiosi]

Kevin, you make so much sense that a lot of other stuff/content creators sound like NONsense. 😃 You are so consistent in delivering real value. 👋

[@Hightechdad]

A very practical, hands-on tutorial. Much of my wordpress work has been "hacking things together." Now trying to teach an old dog new tricks, and I'm loving it! Can't wait for the next one!

[@Gearyco]

Great to hear!

[@GavinDavidson]

Excellent lesson. Thank you.

[@ammarali3819]

Kevin's web design course is a gem! His expertise in CSS is unmatched. I appreciate how he simplifies complex topics, making it easy for beginners like me to grasp.

[@ryanzwahr1226]

Thanks for contributing Kevin, and making this available. This course will go a long way to keep folks out of Chump-ville! hahaha Thanks man!

[@ricsilva]

Very, veeeeeeeeeeeeery anxious for this content!

[@z4zompy]

Best teacher on all things website. Cracka and the oxyprop guy are close behind. Kudos.

[@adameklun]

Thanks Kevin for making the effort to make this. I really like your pace and teaching style. I'm so grateful! It will be a no-brainer for me to subscribe to your other tools and communities when the time comes in my career.

[@Gearyco]

Awesome, thank you!

[@chrispoole4084]

Wow, excellent stuff here, and all for free! A big thanks to Kevin for sharing his knowledge and experience.

[@Gearyco]

You bet!

[@eucalyptech]

Great content, thank you Kevin. Have a nice break 😉

[@rockeygamer5163]

Really Great Video Kevin. Lots of to learn 😊. Hands down, this will be the best course I have watched.

[@Gearyco]

Great to hear!

[@gonzalodiaz5024]

I can't believe you're doing this for free! Even if someone is a real professional and doesn't need to learn HTML & CSS (I'm not a professional yet), it's always great to learn about different workflows and tips. Like this one: 35:42 Greetings from Argentina!

[@rubengarciajr]

so excited

[@renthousegarden1884]

Can't wait for the next episode.

[@absdiary2223]

Greatt lesson, Thanks a lot

[@deedeeclarke4714]

Thank you for the introduction to the inspector. It was very helpful.

[@Gearyco]

You are welcome!

[@steffengro8542]

Excellent teaching. Thx a lot.

[@mafiasalesman]

I've been playing with Elementor for some time. I haven't gone too deep into it though. Started considering switching to Bricks and this demo has me sold. I didn't even think of inspecting my sites. Thanks for the rescue. I love your style of teaching. You earned my sub. ☺️☺️

[@Gearyco]

💪🏻

[@DesignRobPearce]

Well explained for beginners Kevin. Class first VS non-class first builders as well, illustrating the builder understands best practice. Where Elementor/Divi are 100% not class first.

[@fabioinbali]

Hey, you are a great teacher. It was very easy for me to learn from your videos. Amazing.

[@Gearyco]

Glad to hear that!

[@genethompson9154]

Excellent tutorial :)

[@AbdulRazzaq-jy5qx]

Amazing Work Kevin Geary Love from Pakistan Will watch your all content Thanks for such a good content

[@keyladamaer]

For some reason, I lost the email announcing this video, therefore I watched it only now. So, I knew HTML a little, but always wondered what CSS was. Now I know thanks to you. I Also I know why I detest my current builder: you just showed me that in 20 minutes. Again, I won’t name the builder. If so-called experts keep suggesting its the best one, they’re not as expert as they think. Thank you for this great insights.

[@Gearyco]

💪🏻💪🏻💪🏻

[@glhutchman]

Hehe..."Prison Time" indeed! I have been using Elementor for years but as my skills have increased, I have REALLY begun to see the folly in that, not only for me but for my clients! Making the jump to Bricks as we speak. Thanks for this course, Kevin. You are a great teacher.

[@Gearyco]

Thx 🙏

[@TexasWatchman]

Excellent job Kevin!

[@Gearyco]

Thank you kindly!

[@gdivanna]

Great tutorial, thank you! Amazing and simple content as usual Kevin. I’d love to see Divi’s outcome as well in this comparison. Worse than Elementor? Loving Bricks even more now! Thank you

[@Gearyco]

Divi is roughly the same as elementor in DOM quality.

[@BjarneOldrup]

Some might say, that when your pagebuilder adds the class to the grandparent div instead of your h1, you could just select your h1 with like div.inspect > div > h1 and call it a day. And that's true, until your pagebuilder changes their markup (sometimes in an honorable attempt to clean up the old mess). Many times have I found custom CSS to break in various builders after updates. Pro tip: The simpler the and more semantic the output is, the higher the chance that "immersive reader" modes in Edge, Firefox and Safari will work. Bury your content in Divs, and the button (F9) even wont't show up. So it is not only about maintainability and scaleability, but also about not excluding people to your content.

[@John.Rearden]

Another great Elementor takedown, no opinions, but demonstrable facts, which is the way it should be. You should consider making this series a 3-way battle "A battle of the Titans - Bricks vs Elementor vs Webflow" Food for thought. Cheers.

[@Gearyco]

I plan to cycle through many builders during the course

[@BGdev305]

Titans? The actual Titan is Pinegrow!

[@marionpaolo319]

@@BGdev305 sorry but some of us dont have that much of coding knowledge that pinegrow requires. Like me for example, I focus on the design rather than code. And that is why I use pagebuilders to do my client sites.

[@nicksmith5306]

# is 100% a pound sign, good man. I stand with you lol ✊

[@michaelkuntz5413]

I notice that you have Setapp. I'm curious if you have a post or video about which Setapp applications you use? I just got it myself but haven't had the time to research all the apps yet. Personally, I got it for CleanMyMac X, SIP, and CleanShot X… but I know there are tons of other great apps in the suite.

[@ZachariahWiedeman]

Hey! Don't forget us old fossils who had to learn Unix and refer to a # as a Hash. 😅 Hash bang on, baby. Hash bang on...

[@davidyisrael403]

Hello Kevin, one of the major obstacles that's stopping me from moving to Bricks is 'no integration with ActiveCampaign', in the sense of integrating forms with ActiveCampaign and sending form data and additional data like tags to ActiveCampaign. Have you any video tutorial showing how to do this?

[@Gearyco]

This is why I always recommend WSForm. Has activecampaign integration. Will handle all your forms and integrations.

[@dustindauncey]

Curious what your thoughts are on Breakdance vs Bricks (PR drama aside). These two are top of mind for me. Bricks seem more customizable and powerful overall and that’s what I’m most comfortable with so far, but damn there’s something nice UI touches I like in Breakdance such as the UI for selecting dynamic data I prefer over Bricks’ UI for that. 😅

[@Gearyco]

They’re very different builders. I’ll be doing a first look video at breakdance soon.

[@flaviahermo249]

Hi! Thank you so much for this amazing content! I was wondering if anyone knows about this: Bricks has a lifetime license at the moment, but I saw some people talking about changing to a yearly subscription on version 2. What is going to happen to the people who have the lifetime license in that case?

[@Gearyco]

Nothing will change for LTD holders. They’ll have an LTD and others won’t.

[@kareem2928]

Fabulous work, According to this lesson, this will be a Ph.D. - in WP Page/Site Builders. What is the estimated time for PB101?

[@Gearyco]

No idea. Just making the lessons that need to be made and whatever it ends up being is what it’ll be. I like to adjust on the fly sometimes so it’s not rigidly mapped out

[@kareem2928]

@@Gearyco Okay, thx... I'm All In.

[@renthousegarden1884]

Used Ele To create several sites in the past few years. I was never satisfied with the speed. Although with the number of tuts out there it was easy to design pages in an excellent visual way. However, recently I started to learn HTML and CSS from W3 school. And in there I learned using inline CSS is not a great way to maintain a site. Halfway through your video, I tried the inspection to see if they actually use inline CSS. And I was truly surprised by the amount of additional code they added for showing a simple header with a button. Matter of fact. I found my h1 after 5 divs

[@Gearyco]

Yes, elementor is especially atrocious.

[@digwillhachi]

I have been looking at Framer, it looks very interesting but not great as a CMS platform just yet.

[@ricssilvaDB1]

I thought the content would be more theoretical, discussing the purposes of each element, the whys, and everything else. Something for those who are not beginners anymore, to delve deeper into the theory of the elements and their functions. You also covered these topics while providing a starting point for beginners to seek more information. Congratulations, the result is really great! Although I am not a beginner anymore, I am still finding the content very useful! Looking forward (once again) to the next video!

[@carolmaI1mn]

Hi Kevin! Is correct to define GenerateBlocks as a page builder too? A page builder based on blocks?

[@Gearyco]

Yeah, I suppose.

[@reufjaha123]

Thanks for great course Kevin, I am just curious, why you are not using Microsoft Edge, it is based on Chromium, so it should be same as Chrome or I am wrong ?

[@Gearyco]

I'm allergic to Microsoft products. Gives me hives.

[@Rollclick]

Can a container tag be changed to an Article? If the blocks inside of it are side by side? Example: image is in the left block, heading, text and button is in the right block. Would that entire container be considered an Article?

[@Gearyco]

Not sure why you’d want to, but yes. It just has to be a semantically appropriate use of the tag.

[@draganmedo]

Nice one but list the top5 what you think currently are the good perfect builders. You mention Bricks no 1 where oxygen, and so forth...keep up the work

[@BGdev305]

If you are or want to be a 'developer', #1 is Pinegrow.. not even debatable

[@stripedgoat8470]

@@BGdev305 that's not entirely true. Pinegrow is offering very granular control, but good luck finding any plugins that support it like for example WPGridBuilder supports Bricks. You just install it, and you have your Bricks addon for it, done deal! Pinegrow's outdated, cluttered UI is another topic...Also, how about the query builder? Then we're also lacking something like ACSS... Tailwind is not recommended for WordPress.

[@draganmedo]

​ @BG @striped goat i rarely use pinegrow as i believe it does not speed up my workflow. The perfect builder would need to be first of all stable, modern ui, feature rich etc. I would debate to have oxygen but on steriods, giving granular control if needed, but speeding up the workflow. A blend maybe of oxygen, webflow, and maybe pinegrow. that would for me be the ideal candidate. Brick tbh not played detailed with it... For WP development which is 80% of my work this would be my ideal builder.

[@tir7898]

Where is ur Patreon so I can get access to the next video right away? :D

[@Gearyco]

It’s hard to wait!

[@MKUltra2001]

Kevin, do you have an opinion about using Hoverify to inspect?

[@Gearyco]

Not really. I don’t have much experience with it though.

[@leviguillory7242]

I like using Hoverify. Though, honestly, it's been a while.

[@marionpaolo319]

Hoverify is one of my top tool but I still use the classic F12 inspect because you can see the child > mother/father > grandfather/mother as so on. Hoverify’s insoect tool targets the element itself. Good for individual styling though.

[@rickdugmore]

Grand

[@suzanne1797]

At 25:30 : you're the first person I've heard address this issue of backend bloat and why. I have a site that is soooo slow and no one can seem to tell me how to speed that up. Maybe the only way is to switch away from Elementor? lol

[@Gearyco]

Elementor definitely isn’t helping.

[@suzanne1797]

At 38:00: I know you can't read the minds of why Elementor created all this extra bloat in their code, or why they don't clean it up in spite of all the complaints, but do you have any idea why they might be doing that? Are they thinking this served their builder somehow? It doesn't make any sense. I am not a developer (yet), but have used Elementor for a long time and I am pretty sure you will completely convince me to let them go. I will have to learn how to rebuild the sites I have in Bricks or another builder, which is a lot of work, but may be worth it in the long run. Luckily it's not a lot though. About 5 - 7 sites.

[@Gearyco]

@@suzanne1797 not sure why they did it that way from the beginning, but they probably can’t remove it because it would affect existing websites.

[@suzanne1797]

@@Gearyco Sorry, I wrote a wall comment and deleted a lot of it to spare you, but forgot to leave the part that my site is fast on the front end with plugins (rates an A on GTMetrix), but the backend is terrible and when I ask how to speed that up, no one seems to have answers. I blog on 9 other WordPress sites at my job and none of them are slow on the backend dashboard. I am switching hosting to help, but I think it's time to start getting more pro as I am aiming to do this for a business. Thank you for your videos!

[@suzanne1797]

@@Gearyco Ohhh that makes a lot of sense. Thank you.

[@AllesPat]

Great course! One thing that annoys me with all those younglings: "#" is called a hash - not hashtag. The tag follows the hash-symbol 😀

[@BGdev305]

it's young'n

[@mehdimoradi603]

😍😍🙏🙏

[@lizajoyjohnson]

poundsigngreatvideo 😆

[@twanpeeters8446]

"They should get prison time for this" 😂

[@glennrabbypaulin1853]

Elementor is still fixing their dom issues. For sure they will address this in the future updates because they know Bricks Builder is threat.

[@Gearyco]

That would be nice but I’m not going to hold my breath. They’ve had years and years.

[@glennrabbypaulin1853]

That makes sense. However, the competition now is way more different. We have Bricks, Breakdance, and Cwicly. Then most developers are starting to stay away with Elementor because of speed and flexibility issues. The good thing now is they are trying to listen to their customers.

[@Gearyco]

@@glennrabbypaulin1853 can they though? It’s not easy to change DOM output without introducing breaking changes.

[@jamesryan5392]

Love this - calling out utter dross

[@thebizpixie]

CSS might the easiest, but just like WordPress is "easy to use", that actually means it's a lot harder to use it well, and WAY too easy to make a complete mess.

[@Gearyco]

True. That’s why I teach a specific method for organizing it. Keeps everything consistent and tidy.

[@thebizpixie]

@@Gearyco Yes, and that's why I'm loving what you do. I've been frustrated for YEARS at the mess that's possible with CSS and you're finally teaching me a way to do it that's so robust and organised, that I'm going to overhaul a bunch of my sites with your approach. Thank you for giving me the order I crave :D.

[@davidomalley9316]

Saying you don't need to know JavaScript and PHP because the page builder will handle it kinda contradicts the whole concept of how a professional performs their work.

[@Gearyco]

Why?

[@davidomalley9316]

What I mean is in the previous video, you used the analogy of a photographer needing to know things like ISO, shutter speed etc. Wouldn't a web developer using a page builder to handle the PHP and JavaScript instead of learning them, be kinda similar to the analogy of the photographer using a phone to take pictures instead of learning to use a DSLR?

[@Gearyco]

No, it would be like a photographer shooting on aperture priority and using exposure compensation vs shooting full manual. It just takes care of some of the heavy lifting so you can focus on other things.@@davidomalley9316

You are not selling page builders but you are selling AutomaticCSS.

[@Gearyco]

Why does that matter?

[@BGdev305]

That's a bit unfair. For one, he never even mentioned ACSS. Secondly, in the MAJORITY of his teaching / tutorial videos he doesn't even mention ACSS or Frames. Lastly, maybe I missed it, but I don't remember him 'selling' anything. In fact he doesn't even have any sponsor here.. he doesn't even link to his own ACSS or Frames in the description! (And personally, I would have)!

[@stripedgoat8470]

🤦🏼‍♂

[@clafflin493]

Dude, he is not selling ACSS. Get a life! Appreciate the man who shares this gold knowledge.

[@colinboyan8167]

Not sure if you're suggesting that the motivation for creating all of this content is only to sell more subscriptions to ACSS and Frames? Or (even if that were true) that this is a bad thing? Regardless of those two products (full disclosure, I own and use both of them), this information is accurate, complete, factual, and helps to foster better development standards for people doing WordPress development. If Kevin gets recognition and kudos for being so knowledgeable and having the expertise to explain this clearly, that is well deserved. If people buy his products because they trust the foundation on which they are built, all the better. You can't claim to know something unless you can teach it and explain it in a simple fashion. Kevin clearly knows his stuff. It's fine to be a sceptic but these lessons are 100% free ... you don't HAVE to watch them you know?