[!] [=title "Week 9 Homework Walkthrough"] [=content-]

Sorry for how confusing week 9 was! To make it more doable, I've written up this step-by-step walkthrough to complete the whole thing. The homework can be found here; you'll need to have it open to follow this effectively.

Part 1
1. Read through Grid 1 and Grid 2 - they're useful throughout this entire assignment, so I recommend keeping them open for reference.
2. Use what we've learned about grid to set up a very simple grid with 5 rows and 5 columns. You can use `repeat` if you want; there are quite a few different ways to do this.
3. Set up your grid elements (how you do this is up to you - you could write 25 individual `div`s, for instance - but there is a trick to minimize how much work it takes).
4. Finally, pick colors for the grid. Note that at least a few of these should be shared between cells: you should have a real collage, not just a strange checkerboard. See the graphic in the main homework page.
5. Goal 1: Check your collage. Make sure it has at least a few distinct colors, arranged in grid cells properly to give the impression of a few large squares that fit together perfectly. It's okay if it isn't "perfect", as long as it's recognizably a grid collage.
Part 2
6. Search up some websites and pick a good one! While you can use any website you like, here are a few suggestions:
   - The wikipedia page on websites: Don't try to actually replicate Wikipedia's layout if you decide to do this one. A simple header and three-column layout would suffice.
   - NASA's Homepage: This one might be a little tricky, but the layout can mostly be done with a grid.
   - GNU Foundation: Their page is simplistic and classic, and easy enough to do in grid.
   Remember that you don't have to replicate anything but the layout - you don't have to do content or images or anything. A very simple grid with some words describing the purpose of each cell (or area) would be fine.
7. Set up your page. Use a large grid covering the whole screen (you may set this up with any technique you like - `display: grid; height: 100vh;` on your grid element is perfectly fine).
8. Use `grid-template-rows`, `grid-template-columns`, and the other properties to replicate the major parts of your target website's layout - e.g. the main content area, etc. You do not have to use `grid-template-areas` if you don't want to, but it makes this a lot easier.
9. Add elements to the grid and label them: a `div` containing "this is the header/footer/main content/sidebar/whatever" is quite sufficient. You may set borders, background colors, fonts, or any other styles you want on these, but you aren't required to.
10. Using whatever technique you can think of, add in some detail - things like the position of links in a header (hint: Flexbox is useful for this!) or the padding in a central panel.
Goal 2
11. Make sure the layout is close enough to be recognizable - it doesn't have to be perfect, but it should be clear enough where major elements (e.g. a header, a sidebar) are supposed to go.
Goal 3
12. Include a link to the website you're replicating somewhere, to make it easier for me to tell what the layout does.
Goal 4
13. Stretch the screen a bit to see how it performs on different sized devices! It doesn't have to work exactly, but try to make it consistent across sizes. Note that many websites use various techniques to change their layout on different screen sizes - you do not have to implement anything like that.
14. If you need to change something to fix how it behaves on different screen sizes, make sure to think about Flexbox: it makes many such problems much simpler!
Part 3
15. Search for a scene from pop culture that you like. This can be absolutely anything! Some possible examples are,
    - The AT-AT scene from Star Wars: The Empire Strikes Back - image hosted here
    - The classic baby Simba scene from The Lion King (image here)
    - The Abbey Road album cover (image); this one might be a little harder but riffing Abbey Road is a tradition
16. Use our normal sources (P4L, Wikimedia, etc) to find 1-2 images representing the setting. They don't have to be identical to the real scene - or even anything like it at all! - but go for the same "vibe". For instance, much of Avatar's setting could be represented with some images of the Amazon rainforest.
17. Do the same to find 2-3 images of props - things in the scene that aren't actually the main focus. For instance, this could be boulders on the ground, or a bunch of tropical fruit in the trees, or meteors against the starscape.
18. Pick out 2-3 images of the actual subject: the people and/or things that make up the main focus of the scene.
Goal 6
19. While you do not have to exactly match the numbers of images described above, make sure there are at least 3 total.
20. Plan out where on the page they should go. Aim for a scene big enough to fill your screen, but not big enough to scroll much. Print out the images and do paper cutouts to arrange them, if you want to! You should get a good feel for where on the screen everything should go.
21. For each image, set an absolute position. You can read about absolute positions in Week 8: Position. Use the absolute positions to arrange them on the page in a rough approximation of the original scene.
22. Optionally, change the sizes of the images (through whatever technique you like - `width` in CSS or in the HTML works fine) to better fit the goal. If the images are very large, you'll have to do this.
Goal 5 and 7
23. Set up a text blurb to briefly describe the scene (as short as "Super Mario stomping on a goomba" is fine, this doesn't need to be detailed).
24. Explain where the scene is from; ideally give me enough information to find the actual scene with a quick Google search. You can link to an image of the actual scene if you want, but don't include such an image in your page.
25. Properly attribute all of the images.

At this point you'll have a passable result for Week 9. This deliberately doesn't cover the extra credit - you can still attempt the extra credit even having followed this guide, but I won't explain how to do it in detail.

Make sure to submit it by emailing me once you're done.

[/] [#template.html]