Tyler Clarke
b5aa99b64a
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 26s
65 lines
3.4 KiB
HTML
65 lines
3.4 KiB
HTML
[!]
|
|
[=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]
|