TL;DR

You'll fork a starting CodePen, then build a complete webpage layout using flexbox, floats, and positioning.

You'll also find or create your own five 400×400 px square images to use in the design.
Resources:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries

https://web.dev/learn/design/welcome

 

Submit

A CodePen link

Project Brief

1. Start the project

• Go to this CodePen template:
  👉 Layout Challenge Starter
• Click "Fork" (top right) to create your own editable version.
• Rename it using this format: lastname-firstname-layout-challenge
• All your work will be done directly in that CodePen.

2. Objective

Build a responsive webpage layout that demonstrates:

• A sticky navigation bar (positioning)
• Text wrapping around an image (float)
• A two-column content layout (flexbox)
• A responsive photo gallery (flexbox or inline-block)
• Consistent image sizing and spacing

3. Image Assets

• Collect or create five square images, each 400 × 400 px.
• These can be your own photos, AI-generated images, or free-use images from:
  • Unsplash
  • Pexels
• Upload your images to CodePen or host them elsewhere (e.g., Imgur, GitHub, Dropbox) and replace the image src URLs in the HTML.
• You'll need:
  • square1.jpg through square5.jpg for the gallery
  • square6.jpg for the article feature image

Tasks

1. Navigation (Flexbox)

• Display all <li> items in a horizontal row.
• Add equal spacing between items with smaller padding on the ends.
• Make the navigation sticky so it stays visible when scrolling.

2. Feature Image (Float)

• Float the .feature image to the left or right.
• Wrap text around it with a comfortable margin for readability.

3. Main Layout (Flexbox)

• Place <article> and <aside> side by side using flexbox.
• The article should be about 3× wider than the sidebar.
• Add a 20px gap between them.
• Collapse to a single column on smaller screens.

4. Photo Gallery (Flexbox or Inline-Block)

• Display your five square images in two equal-width columns.
• Maintain a 5px gap between images.
• Ensure all images are responsive.

Hints + Tips

• No need to edit the HTML structure—focus on CSS.
• Use justify-content and align-items to control spacing.
• Combine position: sticky and top: 0 for the nav.
• Test your layout at different screen sizes.
• Use DevTools to debug and preview responsiveness.