Create a centred box (500px by 500px) in the middle of a full width page using flexbox.
Create a row of 4 boxes (200px by 200px) using flexbox.
Test out some different ways to align the boxes on the horizontal axis using justify-content.
Build a similar navbar to the image below with flexbox. Add it to your component library you started yesterday.
Complete the following Ed challenge https://edstem.org/courses/4230/challenges/10881
Build a similar card based layout using the video below as a reference.
Think about what you'll need to attack this problem.
- A
containerflexbox - Children inside of the flexbox
- Media queries for the different sizes of the children based on screen sizes
- A background image inside of the child
- Content that sits just below the background image
- Using margin to ensure that the edge of your children have the same vertical position as your header
- Complete the flexbox froggy game https://flexboxfroggy.com/
- If you enjoyed flexbox froggy try flexbox zombies https://mastery.games/p/flexbox-zombies
Create a page with a navbar (with a height of 60px) and a container (with a height of 100vh) underneath the navbar.
You'll need to look up CSS calc for an elegant solution in making sure the page doesn't scroll at all.
Once you solve that implement a similar box-shadow on the navbar, style the links and ensure that the message in the container is perfectly centered on the page using flexbox.
Create a similar form to the image below (with a username, password and submit button) using flexbox.
Think about what you'll use for your flex-direction. Centre the form in the middle of the page.
- Read through chapters 7 to 9 of the interneting is hard documentation.
The image below of eastbay.com is the goal layout.
This is a tricky task that will require a lot of flexbox. Start simple. Think about the individual components the layout might be using.
The top navbar with text could be its own flexbox. The filter section could be its own flexbox. The cards could also be their own flexbox 🤯.
The card section is a tough one. Think about making your flex children have the width and your inner card can take the height and margin.
Here is the result of some code I wrote that demonstrates a bare bones setup for the goal layout. Let me know if you have questions.
Create this layout with flexbox.
In the map section add a Google Map using the Google Maps API.
This challenge ties everything we've done in CSS together. It's practice for your portfolio assignments.
Firstly, go to this link and download the template HTML and CSS files.
Your goal is to style the provided markup 🎨. So no editing of the HTML! You can only write CSS.
If you're proud of your work I'd love for you to demo it to the class on Tuesday next week!
Watch all of Wes Bos's flexbox tutorials.
Complete all of the freecodecamp flexbox challenges.