Це відео не доступне.
Перепрошуємо.
PB101: L03 - EVERYTHING is a Box
Вставка
- Опубліковано 16 сер 2024
- Become an official student FREE at pagebuilding10...
The faster you can learn to visualize and manipulate boxes, the faster you'll become confident with web design.
In this lesson:
✔️ How everything in web design is based on boxes
✔️ Block level boxes vs inline boxes
✔️ Parent vs child boxes
✔️ The CSS box model of styling
✔️ Spacing boxes with Gap
✔️ Semantic box names
✔️ Grouping associated content with boxes
✔️ Moving boxes physically vs dynamically
✔️ Box visualization exercises
✔️ How classes help you style boxes efficiently
✔️ Examples of building simple layouts with boxes
** 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...
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
0:00 Intro
0:48 Obvious Boxes
3:55 Not So Obvious Boxes
5:25 Block vs Inline Boxes
8:35 Boxes Can Have Children
9:54 The CSS Box Model
12:09 Padding vs Margin Mistakes
14:45 Spacing Boxes with Gap
16:19 Semantic HTML
21:21 Grouping Associated Content
24:50 Moving Boxes Physically vs Dynamically
29:00 Visualizing Boxes (Practice)
33:55 Example Build #1 (Basic Hero Section)
38:59 Example Build #2 (Column Content)
49:05 Example Build #3 (Basic Feature Cards)
You may need to watch this one more than once to really bake everything in. Bookmark it so you can come back to it later. It's a critical lesson.
As a Junior Developer, I just wanted to say thank you. This FREE course is pure gold. Having only watched the first 4 videos, it is clear to see that you're a true proffesional web developer / designer.
Any Junior that is lucky enough to work under you, is a very very lucky individual and I hope they realise the position they're in.
Thanks again for this amazing course Kevin 👍
I agree for 100% I feel so dum after seeing the first few video's .. always did it wrong. I just make website's for myself but man.... was I wrong hahahaha @@nicksmith5306
I wish this series was available when I started learning web design it could've saved me a lot of time and effort! If anyone asks me how to learn web design the non-chump way this will be my recommendation 👌
🙌
Columns CSS (GOLDEN NUGGET!!)
Oh man!!! Where were you 09 years ago... !!! Spot on tutorial 👌👌....if a beginner is reading this comment, listen to me, the only content you need to learn things the right way is on this channel... ditch everything else for a while and focus here. the content is pure gold...
🙌🙌
If say someone who's an absolute beginner probably needs to watch Dave's build with bricks course, build a site if their own then come to this course after bricks actually makes sense and watch this to figure out how to build sites going forward
Wow. Amazing stuff. I thought I knew all about the box stuff, but clearly I didn't. Thank you so much!
One little thing to add. Elementor's text widget actually does columns.
The Box Model presented in the simplest way possible. I can't wait for the rest of these lessons. Always something to pick. So much detail. Thanks Kev.
I needed to create the layout of a 70 page website with Elementor, it was the worst experience of my life.
Since then I've been looking for another page builder, I was in doubt between Cwicly and Breakdance, but after this course I have no doubt that Bricks will save me many hours.
Thanks for sharing your knowledge.
💪🏻
As a wedding photographer, I am planning to move to web design and development for wedding photographers. I have just come across these 101 lessons - absolutely fantastic resource. I will dedicate enough time to learn so that I can move from chump to a champ
I have watched this video for about the 6th time, each time for different parts of the video - and just rewatched the part about the classes a couple of times, to check exactly how to do this. It seems so simple, but it is really important to get every detail, to be able to do it right. Thanks again!
I'm only confused with one thing so far, how have you only got 16k subs? This is a brilliant video, so well explained and to the point, love it.
Niche builders instead of making videos for Elementor and such.
This lesson was just fantastic.
🙏
I'm loving this course. Thank you so much ❤
Absolutely brilliant, what a professional you are.
Thanks! 🙏
Bro this is so enlightening, I thought that as I can made a visually good website that I'm all good but 3 videos into the course made me realize I was in complete darkness. Can't thank you enough
This training is so valuable. I’m having my team watch it.
Kevin, you have a great way of explaining things, which makes them easy to understand. Moreover, you are very engaging and successfully keep the listener involved. I am excited for this course to progress to more complicated instruction! So far, I'm having a good time refreshing these fundamentals!
Glad you like them!
Thank you Kevin, I am more than impressed, how much I have learned in these 56 minutes of video. Let's go to the next one!
💪🏻
' "..and I'm sitting here, dragging stuff around like a chump!" - That's some chump like behaviour' - love it!
Come at the perfect time. Just finished watching the L02
IMMENSE value! The way you show the right way of doing things vs. just dragging and dropping the first page builder element we see that might seem to work for the purpose makes all the difference in the long run when maintaining the codebase, adding new features/content, and scaling the website. Loving this series!
💪🏻💪🏻💪🏻
Yo. This is the most pragmatic, straightforward tutorial series I've ever seen on coding for page builders. Thank you!!
Kevin - you continue to rock these trainings! Absolutely love them! I echo the comments of some others, I wish I had these years ago. Keep 'em coming!
You rock!
Great lesson Kevin. I've enjoyed all so far and looking forward to the upcoming lessons. CSS columns was a huge golden nugget.
I'm probably still 60-70% chumpy, but thanks to lessons like this, I'm moving in the right direction. Great lesson, will surely bookmark and rewatch!
You are fr providing extreme value for free, thank you.l
Fantastic video. The more techniques and correct methods I learn from you the more inspired I am to create and build websites. Thanks again for sharing your knowledge. 🙏🏼💫
Such a powerful tutorial laying out a strong foundation for me. Kevin is not only a good communicator but also a brilliant presenter - not a boring moment to follow an otherwise unfamiliar concept. Thank you!
Easily the best web page building tutorial I have ever seen. So glad you use Bricks, thank you. Clear, concise, powerful info. Hope the channel explodes.
Thank you!
The lesson was amazing and I watched it with a lot of interest. Thanks so much…
You're very welcome!
amazing course! thank you
Kevin is such a perfect example of how there are good teachers and then there are GREAT teachers. I've been using WordPress and various builders personally and semi-professionally for a while now and have a "working knowledge" of HTML and CSS. So of course I'm familiar with the first three lessons of this course and the Box Model. And yet, here comes the light bulb moment in this video. Every once in awhile, I will struggle with spacing issues on Web sites and I can not for the life of me understand why. Enter Kevin's PRESERVE THE BOX teaching in this video. It is often inferred (I see this now) but never "explicitly" stated anywhere that I've come arcross in all my years of watching video, reading, etc. Why? Because so many people teaching and doing tutorials assume knowledge and Kevin is fantastic at NOT doing this. Which is exactly why I continue to follow him and anything he puts out that relates to what I'm trying to accomplish.
Love this! Some people don' t understand the value! Thank you.
Kevin, you blow my mind with the CSS Column; WOW!
Nice job Kevin! Loved the training and learned a lot.
Glad to hear it!
I really appreciate you taking the time and care to teach all these basics. No one of your stature would do this so well. Thanks again.
So good, I've already learned more than in the Bricks course I signed up for. Thank you
Been proficient in helping me I found great bricks then I found you thank you so much for your course I am a noob
Kevin thats something phenomenal! Thank you a lot!
I'm sure God is rewarding you for all the good you give people for free!!
Very cool. Great content as always. I'm excited to get back into doing CSS after years of Generatepress and Kadence.
Hi Kevin, i switched to Bricks Builder half a year ago and you already cut my workflow in half in the third lesson. My "chumps" are moving away with each new lesson of yours. Thanks for wanting to turn former "clickers" into better website builders... You have my admiration and many thanks...👌
Great to hear!
Thank you Kevin, good to do some steps back for me and realize what we are doing. More please. More 😊
You're doing an amazing work. Thx you so much for your videos!
Glad you like them!
@@Gearyco If I may suggest something: when you present section vs containers and how they interact with each other, it would help if you add a light background to both elements (just for education sacks). That way, the "gutter / margin / padding / etc." would appear even more clearly during edit.
Anyway. I'm looking forward to watching this series of videos. It's a precious gift you make to the community with this free course.
I am deeply grateful to you!
So far, this has been a great series. I'm really looking forward to getting through the rest. Thank you so much for taking the time to make such an excellent course available for everybody.
You're very welcome!
wow - this just blew my mind!
Kevin Geary: "Pay attention to who you pay attention to".
This should be a quote. I love it so much I think I will always use it:) See it Timestamp @53:10
💪🏻
Wow, this really did me blow away! Great and smart economy of time. So easy to follow you, even not being a native english speaking person. Thanks for that mountain of worthful insights. Cheers from Brazil!
Cheers!
Rockstar attitude, rockstar professionalism. Look forward to watching everything you ship out. Thanks bud.
Much appreciated
I've been making pages in Elementor until recently, but those classes on boxes totally blew my mind :)
this is the most important lesson i've ever watched
Right!?
Thank you so much for the detailed explanations Kevin! 🌸🌸💮💮
I am really digging your content and your teaching style! Pacing, clarity, specificity....bangers.
I appreciate that!
It is crazy I'm watching this for free
This is simply great, quality information totally free, crazy, just thank you!
I'm so glad u put in that I'm the captain scene, would've been a huge disappointment if you missed that.
really appreciate the course so far, thanks a lot Kevin
Feeling I am having my Chumpery peeled off as each lesson proceeds...
This is an impressive course, specially this video! You are a great instructor! Thank you 🙏
a great content if you also want to learn css
I am infinitely grateful for this video. 🙏
Good video Kevin!.. Nice trick the one about columns. Here is another one.. you can use row reverse or even column reverse when using flex in your container to turn your inside elements in the other direction, it's the third icon in the flex direction section of your container. Surely you knew about this one but just in case. Thanks for the tips man!
Totally the best instructional video I've seen ever. Thank you for putting together this amazing course. This is actually life-changing content.
Brillant Kevin :)
Wow, great teaching skills
Thank you! 😃
Great video, Kevin. I look forward to next one. Thank you!
Keviiiiiiin ... I just can't remember when I felt so foolish, like after watching this video. Now, I have always considered my self as a beginner / noob when it comes to webdesign - but you managed to show how wrong I was :) ... probably just the "B" in the word beginner :) :) :)
Yeah, I'm - but hopefully after watching this video I can write I WAS ... I was one of those who manually moved pictures, "cards" then later adding classes because I didn't like it. So yes - after watching this video I felt really ashamed :) :) :)
Thx Kevin ... looking forward to the remaining episodes. GREAT CONTENT !!!
PS : didn't know that something like COLUMNS existed in CSS. Like gaps - I knew them only from GRID, but didn't know, they can be now applied just like that in a builder (without telling it to be GRID). How do you keep up with this = do you like "follow CSS" and when ever a new feature is added, you go and test it / work with it ???
Yep, it’s exhausting haha
this is a web development clinic - master the fundamentals!
GRRREAT lesson Kevin. LOVED it. Leaving my "chump" self behind!
Now this was something...what a tutorial Kevin, I'm blown away 😁. Keep them coming 💪🏼
More to come!
I switched from Elementor to Bricks a couple of months ago, and I haven't regretted it for a single moment. Please don't misunderstand me when I mention that Elementor allows you to break text into columns without writing code. Just wanted to share that information with you. 🙂
I saw. One of the few things they got right.
@@Gearyco 🤭
Perfect, everyone is loving to watch this course 🤩.
Mind blowing video Kevin 🤩. That x, y, z axes thing was amazing 😀.
Thank you!!
Value guys ! VALUE !!!
Thank You so much Kevin !
Fantastic video Kevin. Nuggets in each and everyone for every skill level 👍🏻
Great tips! Really enjoyed the tutorial, thank so much!
What a box(ing) tutorial ! Thank you Kevin 😉
Thank you Kevin. Very helpful for me. Keep up the good work and these lessons of yours are in straightforward and simple manner, that I like.
Very welcome
Finaly a WordPress builder that doing it the right way!
Great Lesson, I learned a lot 😊. Thanks, Kevin!
I had a flashback to Pete Seeger's "Little Boxes" song. Though this is defintely not "ticky-tacky" stuff. I am certain to be leaving "Chumpville" now, discarding older page builder bad habits. I really prefer working smarter to working harder. 😍
I am getting excited again about web design. Bricks is super cool and your content is amazing
Great to hear!
Another great video.
I wish briks made cleaner code though. It seems so much more than I would ever write by hand.
Any examples?
Kevin, this is incredibly insightful!
I will never go back to Divi!! Thanks Kevin!!
Thanks appreciate the detail in the video and overall content. By the way Elementor does now allow you to split text via columns natively within the editor, no hand-coded css needed. Don't get me wrong not saying Elementor is great, just that its built-in already.
I’ll have to check it.
PB101 has been amazing, thank you. Where do you stand with Kadence? Do you find it to create bloat like Elementor? You're videos have made me realize I've been an "assember" for the last 10 years so I'm looking forward to learning more in your Inner Circle and the rest of PB101.
Kadence isn’t good
Thank you Kevin.
Why does UA-cam limit thumbs up/likes to only one single time on each video? I am asking because some videos have so much value that one single like isn't enough for them, such as this YT video tutorial and other tutorials made by Kevin.
I wish I could give thumbs ups on these videos as much as I can. Thank you Kevin.
Thanks fantastic
Amazing ❤
Every time he said something that was "chump-behaviour" he perfectly described me. I just built my 2nd professional (and quite well paid) website, but every single sin on this video I commited (including on other videos in this series). Almost feel like I should rebuild the site, regardless I feel like I am learning the secret ways of the force here.
💪🏻💪🏻💪🏻
Thanks!
Thank you!
Thank you for the valuable content!
Very useful video, thanx for this gold material! These seems like the chinese boxes :)
Yaaaaaaasss found you via josh hall. And most things you tell I already know! So thats good. But i got a bit lazy through elementor. Never realized the dom output was soooo bad.
So my new site ; bricks for builder rest css? And your Automattic css? Good idea? How do i learn that as quick as possible.
I am watching this video on September 8th, 2023 and the custom CSS at the 47 minute mark no longer works the way Kevin did it. At this point you need to put % around the root text so it looks like %root% instead of just root to get it to work.
Fantastic.
This is amazing content. I am blown away. Everything I have done has been with Elementor. I will be making the change. Are there "non-chump" ways of migrating from Elementor to BrickBuilder, for example?
Unfortunately, not. You would have to build again from scratch. I wouldn’t bother rebuilding old sites necessarily unless it’s your own personal site. Just start using a better builder going forward.
You know what would be an amazing idea?
If you could provide us a blueprint of Bricks or a whole WP installation with Bricks where certain things are already set up as basic version. The major issue to start with configurations like Hello Theme + Elementor Pro or Bricks is you need to set up everything from scratch. I do not want to design a 404 page, or archive pages etc. from scratch. And same header and footer. This is a huge amount of work no one wants to do! I even would like to load certain elements as presets and modify them...
But since Bricks comes completely blank this is pain in the ... to set up. So everyone prefers to go with Astra + Elementor (or similar) in order to ship a website as fast as possible... and then elementor or even Astra + Starter Templates come with predefined templates where you can simply add a complete finished webpage and modify it. This is faster as everything you are talking about - and yes I know about the downsides etc. but come on my time has a higher value than (unexperienced and noob) clients - and to be honest no client will thank you for using Bricks (they don't even know about it!).
getframes.io
You are best teacher ever 🌹 explain every thing so easy to learn
Have you talked about css columns with bricks devs?
Not yet there’s bigger fish to fry
@@Gearyco 😅🙏
Css classes are great but if you want to modify the html structure (e.g. add button to the card) you still have to do it like a chump 🙂 cause there are no overwritable components in the Bricks Builder. Did you find an workaround for this?
Bricks is releasing components soon
I am ditching Elementor because of their crap and am switching to Bricks. So I am not defending Elementor, but to be fair 45:35: Elementor does have CSS columns in their text element.