[!]
[=title "Week 4 Homework"]
[=content-]
<p>
	This homework is more focused on creativity and problem-solving than the previous ones. Don't be afraid to contact me if you get stuck. 
</p>
<p>
	Previous homeworks required you to use specific techniques; this homework will largely require you to figure out technique for yourself.
	You won't have to teach yourself any new patterns to get full credit, but you may be able to get a better result by doing so - I will not deduct
	points for using the "wrong" methods if the end result is good.
</p>
<p>
	This assignment expects you to have a few pages on your website to style - just create new ones and fill them with Lorem Ipsum text
	if you don't want to mess up the old ones.
</p>
<h2>Part 1: Universal Stylesheet</h2>
<p>
	If you don't already have a universal stylesheet from Homework 3 Extra Credit, do that now. Set up a stylesheet shared between every page on your website.
	By "shared" I mean that you should only have to edit a single CSS file to change the behavior of <i>every</i> page of your site - you'll have to use a <code>link</code> tag.
	<span class="goal">Universal stylesheet</span>
</p>
<h2>Part 2: Layout</h2>
<p>
	Create a new page on your website, and use whatever technique you can think of to set up a <i>layout</i> with reasonable
	empty space on both sides of the main content to make reading easier. (Hint: use Lorem Ipsum text to demo it).
	Think of the structure of this page as the "ideal" result - we haven't yet covered enough CSS to replicate it,
	but it's a good example of a page with a central reading column.
	<span class="goal">Readable layout</span>
</p>
<h2>Part 3: Header</h2>
<p>
	Design a header with a centered horizontal list of evenly spaced links. Ensure the header shows up correctly on at least a few pages on your website.
	Headers can be pretty diverse - you can be as creative as you want, but the end result should <i>generally</i> be a horizontal strip of color,
	with appropriate padding, containing a bunch of normal links.
</p>
<p>
	This is a decent minimal example:
</p>
<img src="header-example.png" />
<p>
	Remember that this "header" is <i>actually content</i>, so it should go in the <code>body</code>, but should be above everything else. It should be easy to tell
	that it's a header and not just part of your main body.
</p>
<p>
	<span class="goal">Header at the top of the page</span> <span class="goal">Header links are centered</span> <span class="goal">Header links have space between them</span>
</p>
<h2>Self Study: Flexbox</h2>
<p>
	One of the really cool things you can do with CSS is called <i>flexbox</i>. Flexboxes are single-dimensions (e.g. up/down OR left/right, not both) containers
	that force each element within them into its own "cell", which will be resized based on a set of extremely configurable rules. Flexbox is ridiculously powerful,
	but also quite complicated. I recommend reading about it on <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox">Mozilla's
	web development docs</a>.
</p>
<h2>Extra Credit</h2>
<p>
	If you can figure out how to add a single background image that covers the entire page (without stretching nastily),
	I'll add 2 points to your homework 4 grade.
</p>
<h2>Submission</h2>
<p>
	To submit homework 4 (before midnight on February 6th), email me the link to the appropriate page on your website.
</p>
[/]
[#template.html]