week 9 guide

site/introwebdev/index.html

@@ -56,7 +56,7 @@ TBD. Will post an announcement when this is worked out.
 	<li><a href="week-6-homework.html">Week 6 Homework (due on February 20th)</a></li>
 	<li>Week 7 spring break</li>
 	<li><a href="week-8-homework.html">Week 8 Homework (due on March 13th)</a></li>
-	<li><a href="week-9-homework.html">Week 9 Homework (due on March 13th)</a></li> 
+	<li><a href="week-9-homework.html">Week 9 Homework (due on March 13th)</a> - walkthrough available <a href="week-9-walkthrough.html">here</a></li> 
 </ul>
 <h2>Lecture notes</h2>
 <p>

site/introwebdev/week-9-walkthrough.html

@@ -0,0 +1,140 @@
+[!]
+[=title "Week 9 Homework Walkthrough"]
+[=content-]
+<p>
+	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 <a href="week-9-homework.html">here</a>; you'll need to have it open to follow this effectively.
+</p>
+<ol>
+<b>Part 1</b>
+<li>
+Read through <a href="week-8-grid-1.html">Grid 1</a> and <a href="week-9-grid-2.html">Grid 2</a> -
+they're useful throughout this entire assignment, so I recommend keeping them open for reference.
+</li>
+<li>
+Use what we've learned about grid to set up a very simple grid with 5 rows and 5 columns. You can use <code>repeat</code> if you want;
+there are quite a few different ways to do this.
+</li>
+<li>
+Set up your grid elements (how you do this is up to you - you could write 25 individual <code>div</code>s, for instance - but there
+<i>is</i> a trick to minimize how much work it takes).
+</li>
+<li>
+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.
+</li>
+<li>
+<b>Goal 1</b>: 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.
+</li>
+<b>Part 2</b>
+<li>
+Search up some websites and pick a good one! While you can use any website you like, here are a few suggestions:
+<ul>
+<li><a href="https://en.wikipedia.org/wiki/Website">The wikipedia page on websites</a>: 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.</li>
+<li><a href="https://www.nasa.gov/">NASA's Homepage</a>: This one might be a little tricky, but the
+layout can mostly be done with a grid.</li>
+<li><a href="https://www.gnu.org/">GNU Foundation</a>: Their page is simplistic and classic, and easy enough to
+do in grid.</li>
+</ul>
+Remember that you don't have to replicate <i>anything but the layout</i> - 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 <i>area</i>) would be fine.
+</li>
+<li>
+Set up your page. Use a large grid covering the whole screen (you may set this up with any technique you like -
+<code>display: grid; height: 100vh;</code> on your grid element is perfectly fine).
+</li>
+<li>
+Use <code>grid-template-rows</code>, <code>grid-template-columns</code>, 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
+<code>grid-template-areas</code> if you don't want to, but it makes this a lot easier.
+</li>
+<li>
+Add elements to the grid and <b>label</b> them: a <code>div</code> 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.
+</li>
+<li>
+Using <i>whatever technique you can think of</i>, 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.
+</li>
+<b>Goal 2</b>
+<li>
+Make sure the layout is close enough to be <i>recognizable</i> - 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.
+</li>
+<b>Goal 3</b>
+<li>
+Include a link to the website you're replicating somewhere, to make it easier for me to tell
+what the layout does.
+</li>
+<b>Goal 4</b>
+<li>
+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 <i>not</i> have to implement anything like that.
+</li>
+<li>
+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!
+</li>
+<b>Part 3</b>
+<li>
+Search for a scene from pop culture that you like. This can be absolutely anything! Some possible examples are,
+<ul>
+<li>The AT-AT scene from <i>Star Wars: The Empire Strikes Back</i> - image hosted <a href="empirestrikesback.jpg">here</a></li>
+<li>The classic baby Simba scene from <i>The Lion King</i> (<a href="lionking.avif">image here</a>)</li>
+<li>The Abbey Road album cover (<a href="abbeyroad.jpg">image</a>); this one might be a little harder but riffing Abbey Road is a tradition</li>
+</ul>
+</li>
+<li>
+Use our normal sources (P4L, Wikimedia, etc) to find 1-2 images representing the <i>setting</i>. 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.
+</li>
+<li>
+Do the same to find 2-3 images of <i>props</i> - 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.
+</li>
+<li>
+Pick out 2-3 images of the actual subject: the people and/or things that make up the main focus of the scene.
+</li>
+<b>Goal 6</b>
+<li>
+While you do not have to exactly match the numbers of images described above, make sure there are at least 3 total.
+</li>
+<li>
+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.
+</li>
+<li>
+For each image, set an <i>absolute position</i>. You can read about absolute positions in <a href="week-8-position.html">Week 8: Position</a>.
+Use the absolute positions to arrange them on the page in a rough approximation of the original scene.
+</li>
+<li>
+Optionally, change the sizes of the images (through whatever technique you like - <code>width</code> 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.
+</li>
+<b>Goal 5 and 7</b>
+<li>
+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). 
+</li>
+<li>
+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.
+</li>
+<li>
+Properly attribute all of the images.
+</li>
+</ol>
+<p>
+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.
+</p>
+<p>
+Make sure to submit it by emailing me once you're done.
+</p>
+[/]
+[#template.html]