Work through Chapters 3 (Styles) and ch. 4 (Responsive Layouts with Flexbox) of the textbook, play some games designed to teach you CSS Layout, and publish the result to GitHub.
Complete the following:
1. Work through Chapters 3 and 4, copying files from front-end-dev-resources.zip into your project as necessary.
2. Confirm that your result matches the Ottergram page shown in Figure 4.27.
3. Play both of the following games through to the final level: 1. Flexbox Froggy (or Flexbox Defense as an alternative) AND 2. Grid Garden
4. Take screenshots of the completed final level of each game you play, and place them in your project’s img/ directory.
5. Update index.html to include your screenshots from Step (4) in the thumbnail-list.
6. Push the contents of your project into a GitHub repository. If you have completed Homework 0, you can add this assignment as a new set of commits to ottergram and push to the same repository.
Verify each of the following items and place a checkmark in the correct column. Each item incorrectly marked will incur a 5% penalty on the grade for this assignment Finished Not finished
□ □ Ottergram page is seen at http://localhost:3000 when browser-sync is running □ □ The appearance of your Ottergram page matches Figure 4.27 in our textbook. □ □ Using Chrome Developer Tools, selecting the otter images on the page highlight the corresponding html code □ □ HTML, CSS code has been reformatted with the atom-beautify plugin □ □ No warnings are shown in Visual Studio Code when editing HTML or CSS code. □ □ The Thumbnail list includes screenshots from the two CSS games you played (see homework requirements above) □ □ Your img directory contains a screenshot with the correct answer for Level 24 of Flexbox Froggy □ □ Your img directory contains a screenshot with the correct answer for Level 28 of Grid Garden □ □ The Project directory has been pushed to the above GitHub repository Comments:
Fill out and print this page, and submit it on the day this project is due.
