upload 42 minutes past the nick of time

site/introwebdev/week-9-homework.html

@@ -0,0 +1,99 @@
+[!]
+[=title "Week 9 Homework"]
+[=content-]
+<p>
+	In contrast with the highly technical material previous, this assignment is WAY more artistic than usual.
+	Be creative and have fun with the process; the goals should really be the bare minimum. Try to make something
+	YOU enjoy looking at (even if it's deeply annoying to grade).
+</p>
+<p>
+	Where the instructions are unclear, you may interpret that as giving you artistic license - the point of this is
+	to test your creative problem-solving skills, so if you cleverly work around a badly phrased goal,
+	I won't deduct points.
+</p>
+<p>
+	I really was serious about taking off points for absolute positioning - but parts of this are more fun if you can
+	use the entire toolbox, so I'll allow it for this one assignment.
+</p>
+<h1>Part 1: Modern Art</h1>
+<p>
+	Using CSS grid, create a simple collage! Use at least 5 rows and 5 columns.
+	An example of what I'm talking about (although yours should have more detail): 
+</p>
+<!-- sorry, intrepid slackers, but I did this in Inkscape so you can't copy it ;) -->
+<img src="pietmondrianish.png" />
+<p>
+	Do NOT use an image. I won't be awarding points on a technicality for this, you have to actually USE the grid.
+</p>
+<p>
+	Hint: this is the sort of assignment that's very easily solved if you read the lecture notes.
+	<span class="goal">Simple collage</span>
+</p>
+<h1>Part 2: Market Research</h1>
+<p>
+	Find a website you like online (it can't be this one, if by some incredible circumstance you like this one), and
+	use a grid to copy the layout. If it can't be done easily with a grid, pick another one! Make sure to clearly indicate
+	which website you're simulating.
+</p>
+<p>
+	You do not have to fully faithfully replicate it - as long as the main layout elements are recognizable, it's fine.
+	Pick your own colors, images, and content (use lorem ipsum!) to avoid a copyright lawsuit.
+</p>
+<p>
+	You can use any other technique we've learned (flexbox, sticky positioning if you did the extra credit, etc), as long
+	as a grid is a major part of it.
+	<span class="goal">Emulated website</span>
+	<span class="goal">Clear attribution</span>
+</p>
+<p>
+	The previous assignment can be brute-forced with defaults, but this one will require you to think seriously about
+	space usage, sizes, and alignments. I <i>will</i> be stretching the screen to see how it performs.
+	<span class="goal">Doesn't fail on small or large screens</span>
+</p>
+<h1>Part 3: To Clip Or Not To Clip</h1>
+<p>
+	Find a scene from a book, movie, show, video game, etc that you can roughly replicate
+	using absolutely positioned images (and whatever other elements you need - e.g., <code>span</code> for text!).
+</p>
+<p>
+	This is a hard one because you'll have to find your <i>own</i> resources - as always, be careful on the Internet,
+	and make sure to <b>attribute images you use</b>. If you aren't sure how to provide attribution (e.g. it's not clear on the site),
+	<b>don't use the image</b>. Copyright is serious.
+</p>
+<p>
+	Wikimedia, Pics4Learning, etc are good places to start, mainly because they are the least likely ones to
+	attract lawyers.
+</p>
+<p>
+	<span class="goal">Clearly chosen scene, attributed</span>
+	<span class="goal">At least 3 attributed images composing a set</span>
+	<span class="goal">Some text describing the scene</span>
+</p>
+<h1>Extra Credit</h1>
+<ul>
+<li>5 points if you can recognizably replicate the style of Piet Mondrian or another similar artist in the collage assignment (this may require teaching yourself about <code>border</code>!)</li>
+<li>5 points if you can integrate a flexbox somewhere <b>useful</b> on the page</li>
+<li>10 points if you can figure out how to use <code>font-family</code> to switch up the fonts to something less terrible</li>
+<li>15 points(!!!) if you can make your Market Research page convincingly "enterprise".</li>
+<li>5 points generally for making it look polished and aesthetic in some other way.</li>
+</ul>
+<h1>Self-Study</h1>
+<p>
+	We haven't talked about fonts or borders yet. A better-organized course would go into both before layout.
+	If you'd like to correct my failing (and make all of your websites some 10x nicer), read on your own about
+	<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border">the Border property</a> and
+	<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font">the Font property</a>.
+	It's especially important to <b>understand</b> font, because most of the time you don't want to use it - you want
+	to use its subproperties, <code>font-family</code> and co.
+</p>
+<p>
+	I'll give 1 point of extra course credit to anyone who can demonstrate
+	a nice usage of fonts and borders this or next Friday.
+</p>
+<h1>Submission</h1>
+<p>
+	As always, email me the link to your homework. If I don't get the email, I won't know what commit to read when I grade two weeks later,
+	and so I'll have to <i>guess</i>. Which can only end badly.
+</p>
+[/]
+[#template.html]