Project 1: Responsive Landing Page with Flexbox

Welcome to your first major capstone project in Intermediate CSS! Throughout the earlier chapters, you learned about Flexbox containers, alignment properties, custom CSS variables, and media queries. Now, it is time to assemble these concepts into a production-grade, commercial-quality website.

In this project, we will design and code a complete Educational Coaching Academy Landing Page ("Apex Academy"). The entire layout—from the sticky navigation header to the hero banner, features cards, statistics ribbon, and footer—is powered purely by modern Flexbox and CSS variables.

1. Project Blueprint and Wireframe

Before typing CSS, professional developers examine the visual wireframe to identify how containers split along main axes and cross axes across desktop and mobile screens:

+-------------------------------------------------------------------------+
|                  DESKTOP FLEXBOX LAYOUT (min-width: 768px)              |
+-------------------------------------------------------------------------+

  [HEADER] (display: flex; justify-content: space-between; align-items: center)
  +-----------------------------------------------------------------------+
  | [LOGO]                [Home] [Courses] [Faculty] [Results]    [ENROLL]|
  +-----------------------------------------------------------------------+

  [HERO SECTION] (display: flex; align-items: center; gap: 40px)
  +-----------------------------------+-----------------------------------+
  | LEFT COLUMN:                      | RIGHT COLUMN:                     |
  |  - High-impact Headline           |  - Visual Hero Card / Image       |
  |  - Descriptive Paragraph          |  - Floating Experience Badge      |
  |  - Flex CTA Buttons Container     |                                   |
  +-----------------------------------+-----------------------------------+

  [STATS RIBBON] (display: flex; justify-content: space-around; gap: 20px)
  +-----------------+-----------------+-----------------+-----------------+
  | 15,000+ Alumni  | 98.4% Top Ranks | 50+ Top Mentors | 4.9/5 Rating    |
  +-----------------+-----------------+-----------------+-----------------+

  [3-CARD FEATURES] (display: flex; flex-wrap: wrap; gap: 24px)
  +---------------------+ +---------------------+ +---------------------+
  | Card 1 (flex: 1 1)  | | Card 2 (flex: 1 1)  | | Card 3 (flex: 1 1)  |
  +---------------------+ +---------------------+ +---------------------+

+-------------------------------------------------------------------------+
|                  MOBILE RESPONSIVE COLLAPSE (max-width: 767px)          |
+-------------------------------------------------------------------------+

  - Header navigation stacks or wraps cleanly.
  - Hero section flips direction: flex-direction: column-reverse or column.
  - 3-Card features wrap automatically to 100% width via flex-basis: 100%.
  - Stats ribbon wraps into a 2x2 cluster.

2. Core Concepts Reinforced in this Project

1. 1
   Global Design Tokens (:root): Centralizing theme colors, typography fonts, and border radii so changing a brand color takes 2 seconds.
2. 2
   Sticky Flex Navigation: Using position: sticky, top: 0, and backdrop-filter for modern frosted glass navigation.
3. 3
   Equal-Height Flex Cards: Utilizing align-items: stretch so all feature cards match height automatically regardless of text length.
4. 4
   Flexible Responsive Wrapping: Combining flex-wrap: wrap with flex: 1 1 280px to create fluid columns that adapt to any screen width without hardcoded pixel widths.
5. 5
   Fluid Button Groups: Laying out primary and secondary action buttons using a nested flex container.

3. Step-by-Step Architecture Breakdown

Step 1: Design Tokens & Base Setup

We establish CSS variables for our brand color palette (deep slate blue, vibrant emerald green accents, and neutral background tones):

Step 2: The Navigation Bar (Space-Between Flex)

The brand logo sits on the far left, links in the center, and the call-to-action button on the far right using justify-content: space-between:

Step 3: Two-Column Hero Split

On desktop monitors, text and image sit side-by-side. When the screen drops below 768px, media queries switch the hero container to flex-direction: column:

Step 4: The 3-Column Feature Cards Deck

Instead of writing complex math, we use flex: 1 1 280px. On desktops, three cards sit on a single row. On mid-size tablets, two cards sit on row 1, and the third stretches across row 2. On phones, each card occupies 100% width!

4. Complete, Runnable Project Code

Here is the entire standalone HTML and CSS file. You can save this as index.html and open it directly in any browser:

5. Do's and Don'ts

6. Quick Revision Summary Cheat Sheet

• Sticky Navigation: position: sticky; top: 0; paired with backdrop-filter: blur(10px); produces modern frosted headers.
• Hero Stacking: Change flex-direction: row to flex-direction: column inside media queries for effortless mobile adaptations.
• Multi-Card Wrap: Set display: flex; flex-wrap: wrap; gap: 24px; on the parent and flex: 1 1 280px; on each card for automatic multi-device grids.
• Nested Flex Containers: Use inner flex columns (flex-direction: column; justify-content: space-between;) to push card action buttons neatly to the bottom edge.

Multiple Choice Questions

1. In the 3-card features deck, what is the effect of setting flex: 1 1 280px on each card inside a container with flex-wrap: wrap?

A. The cards will be strictly locked to 280px width regardless of screen size B. The cards start with a base width of 280px, can grow equally to fill extra space, and can wrap onto new rows when space shrinks C. Only the first card will grow while the other two will hide D. The browser ignores the width and centers the cards vertically Answer: B Explanation: flex: 1 1 280px sets flex-grow: 1, flex-shrink: 1, and flex-basis: 280px. Combined with flex-wrap: wrap, cards automatically adapt to the screen width and wrap onto new lines when necessary.

2. Which Flexbox property on the navigation bar keeps the brand logo on the left and the CTA button on the right?

A. align-items: stretch B. justify-content: space-between C. flex-direction: column D. justify-content: center Answer: B Explanation: justify-content: space-between distributes remaining space between child items along the main axis, placing the first item at the start edge and the last item at the end edge.

3. How does the hero section transition from a side-by-side desktop layout to a stacked mobile layout?

A. By applying display: none to the image B. By switching flex-direction: row to flex-direction: column inside a media query C. By changing position: absolute to position: static D. By setting z-index: -1 Answer: B Explanation: Switching flex-direction to column changes the main axis from horizontal to vertical, naturally stacking the text content and hero graphic.

4. Why is backdrop-filter: blur(10px) paired with a translucent background like rgba(255, 255, 255, 0.9) on the sticky header?

A. To prevent links from being clickable B. To create a modern frosted glass effect where page content blurs softly as it scrolls behind the header C. To force the browser to enable 3D hardware acceleration D. To disable text selection on mobile devices Answer: B Explanation: When the page scrolls underneath a sticky header, the translucent background combined with backdrop-filter creates a frosted glass effect that keeps the navigation readable.

5. Why should design variables like --primary and --radius-md be declared inside the :root selector?

A. Because :root applies styles only to mobile screens B. Because :root corresponds to the top-level HTML document, allowing all child elements to inherit the variables C. Because variables declared in :root do not consume memory D. Because :root disables user agent stylesheet overrides Answer: B Explanation: :root represents the root <html> element, providing global scope so any CSS selector throughout the entire stylesheet can access those custom properties.

Hands-on Practice Challenge

Enhance the Apex Academy landing page by adding a responsive FAQ accordion preview section using pure CSS Flexbox.

Requirements:

1. 1
   Create a section titled "Frequently Asked Questions" with a container max-width of 900px.
2. 2
   Build 3 FAQ question-and-answer rows using display: flex; flex-direction: column; gap: 16px;.
3. 3
   Each FAQ card must have an inner header flexbox row (display: flex; justify-content: space-between; align-items: center;) with the question on the left and a circular plus icon on the right.
4. 4
   Add smooth hover elevation with a subtle border highlight.

Complete Solution: