Tyler Clarke
3aef6fa387
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 2m34s
100 lines
4.8 KiB
HTML
100 lines
4.8 KiB
HTML
[!]
|
|
[=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]
|