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.
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
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
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
border!)font-family to switch up the fonts to something less terrible
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.
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]