Flexbox and Box Model

In this project you'll learn about using Flexbox and CSS selectors!

Check out the Flexbox Froggy tutorial to learn about Flexbox and look at the W3 Schools documentation if you get stuck.

Click Here to View Full Screen!

1. Set the background-color of the body to your favorite color.

Using HTML, make one div in the body of the page with a unique class name such as "container", and then put 6 div's inside the "container".

Tip: It can be helpful to give each div a border for now -- it makes them easier to see.

Click Here to View Full Screen!

2. Create an img with a different picture inside each div, and then set the height and width of each img to be 100px in your CSS.

Click Here to View Full Screen!

3. Using CSS, set the height and width of the "container" div to be 100% of the screen. Set each of the six div's to have a height and width of 200px.

Tip: Make sure that you also set the height and width properties of your html and body tags to take up 100% of the screen in your CSS.

Click Here to View Full Screen!

4. Using CSS, give your img tags 10px of padding, a black border of 2px, and set their background-color to white.

Click Here to View Full Screen!

5. Use Flexbox to center the items inside your "container" vertically and horizontally.

Tip: You can optionally use the text-align property to center the images inside their divs.

Click Here to View Full Screen!

6. Change the background-color of the first two images to your second favorite color using id's, and then change the background-color of the 3rd and 4th images to your third favorite color.

Click Here to View Full Screen!

7. Give each image a box-shadow and then use the hover selector to change the background-color of the images to yellow if moused-over.

Click Here to View Full Screen!

8. Give each image a hyperlink that links back to the source of the image, and remove the div's borders if you were still using them.

Click Here to View Full Screen!