[!] [=title "Week 9 Homework"] [=content-]

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).

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.

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.

# Part 1: Modern Art

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):

Do NOT use an image. I won't be awarding points on a technicality for this, you have to actually USE the grid.

Hint: this is the sort of assignment that's very easily solved if you read the lecture notes. Simple collage

# Part 2: Market Research

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.

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.

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. Emulated website Clear attribution

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 will be stretching the screen to see how it performs. Doesn't fail on small or large screens

# Part 3: To Clip Or Not To Clip

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., `span` for text!).

This is a hard one because you'll have to find your own resources - as always, be careful on the Internet, and make sure to attribute images you use. If you aren't sure how to provide attribution (e.g. it's not clear on the site), don't use the image. Copyright is serious.

Wikimedia, Pics4Learning, etc are good places to start, mainly because they are the least likely ones to attract lawyers.

Clearly chosen scene, attributed At least 3 attributed images composing a set Some text describing the scene

# Extra Credit

- 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 `border`!)
- 5 points if you can integrate a flexbox somewhere useful on the page
- 10 points if you can figure out how to use `font-family` to switch up the fonts to something less terrible
- 15 points(!!!) if you can make your Market Research page convincingly "enterprise".
- 5 points generally for making it look polished and aesthetic in some other way.

# Self-Study

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 the Border property and the Font property. It's especially important to understand font, because most of the time you don't want to use it - you want to use its subproperties, `font-family` and co.

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.

# Submission

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 guess. Which can only end badly.

[/] [#template.html]