PB101: L03 - EVERYTHING is a Box

Become an official student FREE at https://pagebuilding101.com

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) - https://automaticcss.com
🔥 Frames - https://getframes.io
See all my recommended tools here: https://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: https://geary.co/inner-circle/

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