Description
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:
- Work through Chapters 3 and 4, copying files from front-end-dev-resources.zip into your project as necessary.
- Confirm that your result matches the Ottergram page shown in Figure 4.27.
- Play both of the following games through to the final level: Flexbox Froggy (or Flexbox Defense as an alternative) AND 2. Grid Garden
- Take screenshots of the completed final level of each game you play, and place them in your project’s img/
- Update html to include your screenshots from Step (4) in the thumbnail-list.
- 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.
Submission
Turn in the code for this homework by uploading your project to a public repository on GitHub. You may discuss this homework assignment with other students, you must complete the work on your own.
To complete your submission, print the following sheet, fill out the spaces below, and submit it to the professor in class by the deadline. Failure to follow the instructions exactly will incur a 10% penalty on the grade for this assignment.
CPSC-349 (-01 and -02) 11 Sep 2020 page 1 of 2
| CPSC 349 Homework Submission 1, due 11 Sep 2020 | ||
| Your name: | ||
| Repository (print): https://github.com/
______________________________/_________________________________________ 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: | ||
