Back to Track
FREECODECAMP

workshop flexbox photo gallery

Step 1: Start this project by linking your `styles
Step 2: Add a `header` element within the `body` element...
Step 3: Below your `
Step 4: Next, give each `img` a `src` attribute according...
Step 5: In order to better visualize how your elements...
Step 6: Notice how the blue image border extends beyond...
Step 7: The `border-box` sizing model does the opposite of...
Step 8: Now that you have figured out your `box-sizing`...
Step 9: Now your images are too big
Step 10: Remove the margin from your body element, set...
Step 11: Align your `
Step 12: Flexbox is a one-dimensional CSS layout that can...
Step 13: Flexbox has a main and cross axis
Step 14: The `flex-wrap` property determines how your flex items...
Step 15: The `justify-content` property determines how the items inside...
Step 16: The `align-items` property positions the flex content along...
Step 17: Give your `
Step 18: Notice how some of your images have become...
Step 19: Your images need some space between them
Step 20: Smooth out your images a bit by giving...
Step 21: The `::after` pseudo-element creates an element that is...
Step 22: The `alt` image attribute should describe the image...