PB101: L03 - EVERYTHING is a Box

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 ***

*** 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!

*** SOCIAL ***

*** 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)

[Gearyco]

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.

[mmaayta]

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 👌

[itspraveensharma]

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...

[steveclark]

' "..and I'm sitting here, dragging stuff around like a chump!" - That's some chump like behaviour' - love it!

[rafidiul-albani]

Thank you so much. Unfortunately I don't understand spoken English well, because I'm still learning the pronunciation of English words, but with you it's different, you have a very clear pronunciation, which is why I understand a lot of what you say, thank you for that.

[robertfleming]

Feeling I am having my Chumpery peeled off as each lesson proceeds...

[dahunsi]

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.

[КсенияМохамед]

It is crazy I'm watching this for free

[SingaporeMathsAcademyUK]

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.

[rafidiul-albani]

I bought a course on Udemy for HTML and CSS (in German, my native language)… still haven’t watched it because it’s presented in a very monotonous tone. But with you: I love watching your videos. You’re also a great way for me to improve my English. I found you at the right time because my goal is to become a professional web designer.

[DominikWernerCreativeArt]

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

[juliocesarsobrino]

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!

[stephendunning]

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!

[saravolf]

Yo. This is the most pragmatic, straightforward tutorial series I've ever seen on coding for page builders. Thank you!!

[mannhans]

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

[perria]

I will never go back to Divi!! Thanks Kevin!!

[darkhorse-fpzh]

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

[rewiredweb]

Absolutely brilliant, what a professional you are.

[nchrtd]

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!

[ReubenHochstetler]

This training is so valuable. I’m having my team watch it.