Week 12 Completion Checklist

This week is all about CSS Grid, one of the most exciting new features in CSS.

Video 1: an overview of CSS Grid in Powerpoint
Video 2: introducing Grid, its basic syntax, how it's put together
Video 3: Reviewing the different types of Grid syntax (there's 3 different ways to say everything)
Video 4: A few words on @supports and retrofitting with Grid (useful for assignment)
Video 5: How to recreate a Mondrian painting with Grid (useful for Instructor's Choice)

Assignment 4

This is progressing. Here's the part you can complete so far.

Part 1: Flexbox (22 points)

A: Play a game (5 points)

Work your way through either Flexbox Froggy or Flexbox Defense. When you reach the final screen, take a screenshot. Turn in this screenshot as evidence that you've completed this part of the assignment.

B: Build a web page with Flexbox (17 points)

Rebuild a single page from a previous assignment or build a new page using Flexbox for layout. All pages, as always, must have real content; no Lorem Ipsum or Wikipedia content is accepted.
Build your own Flexbox grid system or work with Flexbox as it is, with your own media queries or anything else you want to use to style. Do not, however, download and use a Flexbox grid system! Do not edit an existing grid system, eliminate some things, and call that your own either! I want you to build your own from scratch.
This should be a full page, with header, navbar, main content, at least one sidebar, and footer (5 elements total at a minimum).
In at least one location, demonstrate grid reordering with media queries. (For example, on the inside page, have the left column show up underneath the right column at smaller screen sizes.)
You may choose to work with Sass or not. If you do work with Sass, no need to turn in the SCSS files, unless you minify your output CSS. If the CSS is human-readable, you do not need to turn in the SCSS files.
Your layout should work in the latest version of Chrome OR Firefox for Mac OR PC (specify your pair when you turn in the assignment).

Part 2: CSS Grid (23 points)

Rebuild a single page from a previous assignment or build a new page using Grid for layout. All pages, as always, must have real content; no Lorem Ipsum or Wikipedia content is accepted.
You may rebuild the same page you just built in Flexbox, again in Grid.
This should be a full page, with header, navbar, main content, at least one sidebar, and footer (5 elements total at a minimum).
In at least one location, demonstrate grid reordering with media queries. (For example, on the inside page, have the left column show up underneath the right column at smaller screen sizes.)
In addition to using Grid for layout, use straight Flexbox (not a Flexbox-based grid system) to layout an appropriate element on your web page. (What's appropriate? Something that works in a "one dimensional layout". See additional reading for details.)
You may choose to work with Sass or not. If you do work with Sass, no need to turn in the SCSS files, unless you minify your output CSS. If the CSS is human-readable, you do not need to turn in the SCSS files.
Your layout should work in the latest version of Chrome OR Firefox for Mac OR PC (specify your pair when you turn in the assignment).

Instructor's Choice (up to 10 points)

Flexbox: Play both Flexbox games, take screenshots of the final screens, and earn 2 extra points.
Grid: As covered in video 5, create your own Mondrian painting with CSS Grid. Use the starting files, which include the painting and starting HTML. Create CSS that will recreate the painting, roughly, using CSS Grid. IC Grid files.zip Download IC Grid files.zip
- It doesn't have to be perfect, but it does have to be recognizable!
- Earn 5 points for recreating the painting in Grid.
- Earn 4 points for creating the upside-down version of the painting in Grid with a tablet-sized media query. (As shown in the video, this may only work in your developer tools!)
- Earn 1 point for creating something totally different on mobile phone. The layout doesn't need to resemble the painting at all.