Lesson 04 | Flexbox

In this video tutorial, you’ll complete a Flexbox layout challenge designed to strengthen your understanding of modern CSS layout techniques. Follow along as we create a fully responsive webpage that includes a horizontal navigation bar, hero image, main content area, Font Awesome icons, an address section, and a footer — all styled using Flexbox principles. By the end of this lesson, you’ll know how to structure and style a complete web layout using Flexbox, Google Fonts, Font Awesome, and responsive media queries inside Visual Studio Code. 🧠 WHAT YOU'LL LEARN: How to structure HTML with semantic elements (nav, section, footer, etc.) How to apply CSS Flexbox for horizontal and vertical alignment How to connect Google Fonts and Font Awesome via CDN How to style a hero image section with text and buttons How to use pseudo-classes and hover states for interactivity How to apply media queries for a responsive layout How to reset browser defaults with box-sizing: border-box How to refine spacing, typography, and color for a professional finish 💻 TOOLS USED: Visual Studio Code HTML5 + CSS Flexbox Layout Module Google Fonts (Poppins & Style Script) Font Awesome Icons (CDN) Live Server Extension RESOURCES: CSS Flexbox Layout Guide - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Basic concepts of flexbox - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox