Loading...

Mastering HubSpot CMS: Part 45 – HTML Syntaxt Structures & Build Faster with Foundation Building Blocks

🔧 Build Faster with Foundation Building Blocks Learn how to drop-in production-ready HTML/CSS patterns, keep your naming conventions clean, and indent like a pro. Perfect for beginners (and anyone who’s ever wrestled with messy markup!).

Foundation: Building Blocks https://get.foundation/building-blocks/

📌 What you’ll see in this video

🧱 Exploring Foundation’s free layout library

🏗️ Parent-child HTML structure done right

🔡 Lower-case, kebab-case class naming

✔️ 🎨 Clean, indented CSS & media-query placement

🗂️ Copy-paste examples to jump-start your own blocks

🐞 Why clean code = easier debugging

⏰ Chapters

0:00 👋 Intro & why “building blocks” help

0:16 📚 Tour of layout categories

0:37 🔡 Class-name conventions (all lower-case)

1:06 🪜 Parent → child indentation rules

2:25 🖌️ Media-query hierarchy

3:08 🧹 Cleaning messy CSS examples

4:15 💡 Semantic comments & sectioning

5:08 🔗 Resources & next steps 🔗 Resources

🌐 Foundation Building Blocks: https://get.foundation/building-blocks

📄 Cheat-sheet (HTML hierarchy & CSS tips): link to your doc

Leave your comment