Assignment 4: CSS grid, Animation, Flexbox, SVG

  • Due May 12, 2017 by 11:59pm
  • Points 100
  • Submitting a text entry box or a file upload

April 21: Assignment is complete!

April 28: Assignment #4 Turn-in Guide added to How to Turn in Your Assignment section

90% of your grade is the following: 

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

Part 3: Transforms, Filters, and Transitions (23 points)

Demonstrate these properties somewhere in your website. This may be on an existing page, or a page unique to this part of the assignment. They can be part of a UI element, or they might be a stand-alone element.

  • Transforms: Include at least 2 types of transforms. 
  • Transition: At least 2 transitions.
  • Filters: At least 2 filters.

All of the above may apply to the same element or to 2 different elements, or any combinations therein. You may also combine these elements with part 4, below, if that makes sense.

Transitions may be triggered on hover, on the active state of a link, or on page load.

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.

Part 4: SVG and CSS animation (22 points)

  • Create your own SVG using Illustrator or similar software, or download a SVG from The Noun Project Links to an external site. or other location. (If you are downloading the SVG, please provide attribution in your turn-in document.)
  • Animate your SVG in some way. For example, morph one SVG into another (similar to what was shown in the video), or come up with something else that's interesting.
  • Combine this with CSS animation.
    • There should be at least 4 keyframes in your animation. You may have more.
    • There should be at least two properties that change throughout the animation (you may have more). Specify their values at the keyframes. (For example, the background changes color, and the SVG turns in space.)
    • If you wish to combine CSS transforms, transitions, or filters from above with this animation, that's great! They will count towards both requirements.
    • Animation may occur on page load, on hover, or in the active state of a link.
  • 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.

10% of your grade is Instructor's Choice

Ideas released weekly. Choose from the below or propose your own. Max total of 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.
  • Transitions, transforms, filters, CSS animation, SVG: Build a really interesting animation. For inspiration, see these examples: 
  • Something else not listed. Come up with your own idea! Run it by Jen if you wish in the Assignment 4 discussion. 

What Jen cares about

  • You write good quality, standards-compliant code.
  • You demonstrate all of the requirements in the assignment.

What Jen doesn’t care about

  • Your graphic design and color matching abilities/inabilities don’t matter to me. Neither does your ability/inability to make pretty pictures.
  • I don't care about browser compatibility issues. Each assignment should work within the browser requirements stated. 

How to turn in your assignment

Turn your assignment in via the Assignments link in Canvas.

Include a Canvas comment or text file in your submission, indicating the following:

  • Flexbox assignment
    • Include a link to the Flexbox web page that you built.
    • Comment your CSS so it's clear where the Flexbox portion of the assignment is located.
    • Comment the grid reordering.
    • Also include the screenshot of the completion screen of the game you chose.
  • CSS Grids assignment 
    • URL for your page(s).
    • Comment your layout reordering.
    • Comment where Flexbox is occurring inside of your Grid layout.
  • CSS transforms, transitions, filters
    • URL for your page(s) where these effects occur.
    • Comment the CSS where the code is found for these effects.
    • If I need to do something to trigger the effects, tell me what to do (i.e. hover over the blue button)
  • SVG and animation
    • URL for your page(s) where these effects occur.
    • Comment the CSS where the code is found for these effects.
    • If I need to do something to trigger the effects, tell me what to do (i.e. hover over the blue button)

Feel free to utilize the Assignment #4 Turn-In Guide included here:

Assignment #4 Turn-In Guide

Oh no! I can’t make the deadline!

This project is due on May 12, 2017, at 11:59 PM Eastern time. It is expected that you will turn the assignment in on time.

There are no late passes for this assignment.

There are no regrades for this assignment.

If you find yourself requiring an extension for this assignment, you will need to go through the Extension School's procedure for doing this. 

Grading timeline

Grades will be posted online in Canvas. Jen will send an email to the class when these are ready for viewing. This will include your grade for Assignment 4 as well as your final grade.

We follow the standard Extension School grading standard:

  • 94-100: A
  • 93-90: A-
  • 89-87: B+
  • 86-84: B
  • 83-80: B-
  • 79-77: C+
  • 76-74: C
  • 73-70: C-
  • 69 and below: Not good!

 

1494647940 05/12/2017 11:59pm