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 00:00 Introduction – Overview of the Flexbox Layout Challenge 00:34 Project Goals – Navigation, Hero Image, Content, Address, Footer 01:20 Reviewing the HTML Structure 02:25 Setting Up the Container and Bootstrap Reference 03:05 Exploring the Stylesheet (Reset and Base Styles) 04:10 Adding Google Fonts (Poppins & Style Script) 06:00 Embedding Fonts in Visual Studio Code 07:20 Linking Font Awesome via CDN 08:25 Adding Icons to List Items 10:00 Adjusting Spacing with Span Class and Multiple Cursors 11:20 Understanding the Container-Fluid Class and Layout Spacing 12:15 Adding Hero Images Across Pages (Index, Yurts, Activities, Reservations) 14:10 Styling the Hero Image with Flexbox Alignment 15:25 Applying the Style Script Font to the H1 Heading 16:05 Adding Text Shadows and Typography Styling 17:00 Creating and Styling the Hero Text Button 18:05 Adding Hover States and Transition Effects 19:00 Styling the Navigation Bar with Flexbox 20:00 Using Justify-Content Options (space-between, space-evenly) 21:05 Styling the Address Section (Contact Class) 22:15 Adjusting Line Height and Paragraph Spacing 23:00 Making the Layout Responsive with Flexbox and Media Queries 24:10 Final Review – Responsive Layout and Media Query Adjustments 24:40 Conclusion – Mastering Flexbox Alignment and Responsive Design