Turn it in!
The Flexbox and CSS grid layouts can be difficult to get the hang of at first. So, for this assignment, you will get to practice using both CSS grid for page layout and Flexbox for image placement in a dynamic single-page layout.
This assignment has two parts:
- Use CSS grid to create a page layout that contains at least three sections. You'll use these sections to identify yourself, your selected puzzle, your puzzle image, and the assignment date.
- Use Flexbox to assemble a puzzle image, pieced together with Flexbox properties and attributes.
The activity links below each contain a zip file full of images. Each set of image files are pieces that belong to a large picture. You will download at least one of these zip files and place the image pieces in an image folder in this project's directory. Add these image pieces as flex items inside a flex container. You need to use a combination of CSS properties to assemble the puzzle inside the flex container.
Watch out! Each puzzle set contains one piece that doesn't fit. Include this image in your flex container, but use the display property to keep it from showing up when viewed in a browser.
Your completed assignment should contain the following CSS grid sections:
- Your name and the name of the puzzle you chose
- Flex puzzle pieced together
- Flex container properties were used to solve the puzzle.
- The display property is used to hide the faulty puzzle piece.
- The puzzle is solved correctly.
- The puzzle piece files are kept in an image folder.
- The date you completed your assignment
When you're done, save your HTML file and upload your project file to your GitHub repository. Then submit the assignment link to your teacher. You will be graded using the following rubric:
| CSS Grid Layout |
|---|
| Correct use of CSS grid properties to lay out the assignment page with all three required sections. |
| Flex Properties |
| Proper CSS properties were used with flex container properties as part of the solution. |
| Display |
| The trick puzzle piece is included but hidden from view in the browser. |
| Solution |
| The puzzle is solved correctly. |
| File Organization |
| Images are kept in their own directory. |
| Design |
| Creative use of CSS styling to create a visually appealing project layout. |
