Interactive Flexbox Tutorial

A1) Start file + semantic structure

Create your HTML with a semantic skeleton. Do not change class names; add your content where noted.

Your HTML should include:

• A <header> with an <h1> for your page title and a <p> for a description
• A <main class="container"> element
• A <nav class="sidebar"> with 5 anchor links. Use <a href="#"></a> as placeholders for now—we'll connect them to sections next.
• A <div class="content"> with 3-5 sections. Give each section an id attribute labeled id="section-1", id="section-2", etc.
• Each section needs a <div class="deco" id="deco-1"> for decoration. Give each deco div a unique id: id="deco-1", id="deco-2", etc.
• A <footer> with basic info (note: place this outside the <main> element)

A2) Add Content

Now that you have your structure, you need content to fill it! We've provided sample flexbox-themed content for you to use.

What you'll get:

• 5 navigation link titles (e.g., "What is Flexbox?", "Flex Containers", etc.)
• 5 sections of varied-length content about flexbox concepts
• Mix of educational and engaging text to test your layout

=====================================
NAVIGATION LINK TITLES (5 items)
=====================================

1. What is Flexbox?
2. Flex Containers
3. Flex Items & Alignment
4. Common Patterns
5. Best Practices

=====================================
SECTION 1: What is Flexbox?
=====================================

Flexbox, short for Flexible Box Layout, is a powerful CSS layout module designed to help us create responsive and flexible layouts with ease. Before flexbox, developers relied heavily on floats, positioning, and complex calculations to achieve even simple layouts. Flexbox changed the game by introducing a more intuitive way to distribute space and align content within a container.

The beauty of flexbox lies in its one-dimensional focus. It excels at arranging items in a single direction—either as a row or as a column. This makes it perfect for navigation bars, card layouts, toolbars, and any interface where you need elements to adapt fluidly to different screen sizes. Whether you're building a mobile-first design or ensuring your desktop layout scales gracefully, flexbox provides the flexibility modern web development demands.

=====================================
SECTION 2: Flex Containers
=====================================

Every flexbox layout starts with a flex container. When you apply display: flex to an element, it becomes a flex container, and its direct children automatically become flex items. This parent-child relationship is fundamental to understanding how flexbox works. The container controls the overall layout direction, spacing, and alignment of its items.

Flex containers come with several powerful properties. The flex-direction property determines whether items flow horizontally (row) or vertically (column). You can also reverse the order with row-reverse or column-reverse. The justify-content property controls spacing along the main axis—whether items should be packed to the start, centered, spaced evenly, or spread out with space between or around them.

Another essential property is align-items, which handles alignment along the cross axis (perpendicular to the main axis). This is where you can vertically center items effortlessly, align them to the top or bottom, or stretch them to fill the container's height. The gap property is a modern addition that adds consistent spacing between flex items without needing margins, making your CSS cleaner and more maintainable.

Flex containers also support wrapping with the flex-wrap property. By default, flex items try to squeeze into a single line, but enabling wrapping allows items to break into multiple rows or columns when space runs out. This is incredibly useful for responsive grids and galleries that adapt to varying viewport sizes.

=====================================
SECTION 3: Flex Items & Alignment
=====================================

While the container sets the stage, flex items have their own set of properties that give you fine-grained control over individual elements. The most important of these are flex-grow, flex-shrink, and flex-basis, often combined into the flex shorthand property. Understanding these three values is key to mastering flexbox layouts.

The flex-grow property determines how much an item should expand relative to its siblings when extra space is available. A value of 0 means the item won't grow at all, while a value of 1 (or higher) allows it to claim a share of the remaining space. This is perfect for creating flexible columns where one section takes up most of the screen while a sidebar stays fixed.

Conversely, flex-shrink controls how much an item can shrink when space is limited. By default, items can shrink to prevent overflow, but setting flex-shrink: 0 keeps an item at its defined size no matter what. This is useful for elements like logos or buttons that should maintain their dimensions regardless of screen size.

The flex-basis property sets the initial size of a flex item before any growing or shrinking occurs. Think of it as the starting point—similar to width for rows or height for columns, but more flexible. You can use length values like 300px, percentages, or even auto to let the content determine the size.

Flex items also have their own align-self property, which overrides the container's align-items setting for individual elements. This is handy when most items should align one way, but one or two need special positioning. Whether you need an icon centered while text aligns to the top, or a call-to-action button pushed to the bottom, align-self gives you that control.

=====================================
SECTION 4: Common Patterns
=====================================

Flexbox shines when it comes to solving common layout challenges that used to require hacky workarounds. One of the most popular patterns is the "holy grail" layout—a header at the top, a footer at the bottom, and a main content area with a sidebar. Flexbox makes this trivial with a combination of flex-direction: column for the overall structure and flex-direction: row for the main content area.

Navigation bars are another perfect use case. Whether you want a horizontal menu with evenly spaced items or a vertical sidebar with aligned links, flexbox handles it elegantly. Using justify-content: space-between spreads items across the full width, while align-items: center ensures text and icons line up perfectly. Add flex-wrap: wrap, and your navigation automatically adapts to smaller screens.

Card layouts benefit immensely from flexbox's flexibility. Imagine a row of product cards where each card has an image, title, description, and button. With flexbox, you can ensure all cards have the same height, all buttons align to the bottom, and content adjusts gracefully when users resize their browsers. The flex-grow and flex-shrink properties ensure cards expand or contract proportionally, maintaining a balanced, professional appearance.

=====================================
SECTION 5: Best Practices
=====================================

As you build with flexbox, keep a few best practices in mind. First, avoid applying too many flex properties unnecessarily. Start simple—set display: flex on the container and see how far that gets you before adding complexity. Many layouts work beautifully with just a few key properties like gap, justify-content, and align-items.

Second, remember that flexbox is one-dimensional. If you find yourself fighting to control both rows and columns simultaneously, you might need CSS Grid instead. Flexbox and Grid complement each other—flexbox for linear layouts, Grid for two-dimensional structures. Don't be afraid to combine them within the same project. Modern web development is about choosing the right tool for each job, and knowing when to reach for flexbox versus Grid is a valuable skill that will make your layouts more maintainable and performant.

B1) Identify the Flexbox parent

Question: What element do you think the flexbox parent is? Why?

Once you've identified the flexbox parent, add CSS to make it a flex container. This sets up your two-column layout.

B2) Sidebar vs. content sizing

Give the sidebar a fixed 300px width that won't grow or shrink. Let the content area flex to fill the remaining space.

For the sidebar (.sidebar):

• Set width: 300px;
• Set flex-grow: 0; (don't grow)
• Set flex-shrink: 0; (don't shrink)
• Set flex-basis: 300px; (start at 300px)
• Add some styling: padding, background, and border-radius

For the content (.content):

• Set flex-grow: 1; (grow to fill space)
• Set flex-shrink: 1; (can shrink if needed)
• Set flex-basis: auto; (start with content size)

B3) Understanding what you just did

Let's break down what you accomplished with those flex properties:

C1) Make the sidebar sticky

Now let's make the sidebar stay pinned while you scroll the page. This is pure CSS—no JavaScript needed!

📚 First, do some research:

1. Read the MDN docs on position: sticky
2. Pay attention to:
   • What value you need for the position property
   • What the top property does with sticky positioning
   • How to handle overflow with max-height and overflow

Your task: Add CSS to .sidebar to make it stick to the top of the viewport when scrolling.

D1) Test your anchor links

Verify your HTML setup:

1. Check that each navigation link has an href pointing to a section id (e.g., href="#section-1")
2. Confirm each section has a matching id attribute (e.g., id="section-1")
3. Click each navigation link to test—does it jump to the correct section?

D2) Smooth scroll + heading alignment

Right now, clicking anchor links causes an instant jump. Let's add smooth scrolling and prevent headings from being cut off at the top.

📚 Research these CSS properties:

1. Smooth scrolling: Read about scroll-behavior on MDN
   • What element does this property go on? (html or your sections?)
   • What value creates smooth scrolling?
2. Scroll margin: Read about scroll-margin-top on MDN
   • Why would you need space at the top when jumping to a section?
   • What's a good value to prevent headings from being glued to the edge?

Your task: Add CSS for smooth scrolling and proper spacing when jumping to sections. Also, add some visual styling to your sections (padding, background, borders, etc.).

E1) Download icons from The Noun Project

Let's add visual interest to each section with thematic icons related to flexbox and web design.

📥 Download icons:

1. Go to The Noun Project
2. Search for flexbox-related terms like:
   • "layout" or "grid"
   • "container" or "box"
   • "align" or "arrange"
   • "responsive" or "adapt"
   • "web design" or "code"
3. Download 5 icons (one for each section) as PNG or SVG files
4. Choose icons that complement your content themes
5. Note: Free icons are available! Look for the "Free" filter or create a free account

E2) Add icons to your HTML

Now let's add the icons to each section's deco div.

For CodePen users (using Snipboard):

1. Go to Snipboard.io
2. Click "Upload Files" and select your 5 icons
3. Once uploaded, click each image and copy its direct URL
4. In your HTML, update each deco div to include an <img> tag:

   <div class="deco" id="deco-1">
     <img src="SNIPBOARD_URL_HERE" alt="">
   </div>

5. Repeat for all 5 sections with their respective icon URLs

For local files (working outside CodePen):

1. Create an images folder in your project directory
2. Move your downloaded icons into that folder
3. Reference them in your HTML:

   <div class="deco" id="deco-1">
     <img src="images/icon-flexbox.svg" alt="">
   </div>

E3) Style the decorative icons

Style the icons so they add visual interest without interfering with content.

📚 Research CSS positioning:

• Read about position: absolute and how it removes elements from normal document flow
• Learn about pointer-events: none to prevent icons from blocking clicks

Your task: Style the .deco class and the img inside it:

• Position decorations absolutely so they don't affect layout
• Make them semi-transparent with opacity
• Prevent them from blocking clicks with pointer-events: none
• Size the images appropriately (try 150-200px)

E4) Position each icon uniquely

Style each decoration differently using their unique ids. Place icons in different positions to create visual variety.

Your task: Use id selectors to position each icon differently:

• #deco-1 — Try top: -10%; left: -5%;
• #deco-2 — Try top: 50%; right: -5%;
• #deco-3 — Try bottom: -10%; left: 50%;
• Continue for remaining sections with your own creative positions!

Optional Enhancements

Polish your project with these accessibility and usability improvements. Note: While optional, completing Part F demonstrates attention to accessibility and can earn you extra consideration in grading.

• Add a focus style for sidebar links (:focus-visible)
• Style the active link based on scroll (stretch goal with IntersectionObserver)
• Add a "Back to top" link at the end of each section

G1) Copy reflections to your HTML

Save your reflections directly in your CodePen HTML file so they're preserved with your work.

📋 Steps:

1. Click the "Copy All Reflections" button below
2. Go to your CodePen HTML editor
3. Scroll to the very bottom of your HTML (after the closing </footer> tag)
4. Paste your reflections
5. Your reflections are now saved as an HTML comment in your code!

What to submit to Canvas

1. Your CodePen link — Make sure your pen is saved and public
2. That's it! Your reflections are already in your HTML at the bottom

Add to your homepage

Link to this tutorial from your workspace homepage (index.html):

<a href="YOUR_CODEPEN_LINK">Flexbox Tutorial</a>

This way, your instructor can easily find all your work from your main workspace page.

Final Checklist

• Sidebar is 300px and sticky
• Five nav items link to matching ids
• Right column flexes to fill space (Flexbox only—no grid)
• Smooth scrolling works; headings aren't jammed at the top
• Each section includes a decorative icon that doesn't block content
• Basic accessibility: reasonable contrast, visible focus on nav links

Grading Rubric (10 pts)

• 4 pts — Layout correctness (Flexbox, 300px sidebar, sticky behavior)
• 3 pts — Anchors & scroll polish (IDs matched, smooth scroll, scroll-margin)
• 2 pts — Decorative icons (positioned safely with absolute positioning, varied locations)
• 1 pt — Reflection quality (clear, specific, shows understanding)