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 - https://www.facebook.com/marketingkev/ 👉 LinkedIn - https://www.linkedin.com/in/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)