141 lines
6.9 KiB
HTML
141 lines
6.9 KiB
HTML
[!]
|
|
[=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]
|