Assignment 2

March 1: Assignment is complete, with all requirements listed.

March 2: Assignment #2 Turn-in Guide added to How to Turn in Your Assignment section

Assignment 2 is due on March 24, 2017, by 11:59 PM. Regrade and late policy are listed below. This assignment is worth 25% of your grade for the course.

The below is worth 90% of your assignment grade:

Build a Responsive Website

Build a 2-3 page responsive website, using the principles discussed previously in class. 

You may use your responsive website from Assignment 1 if you wish, or you may build a new one.  

This responsive website should include the following features:

• A responsive website should include a grid system, media queries, and images that resize.
  • Your grid system and media queries should be custom-coded.
  • The grid system can have as many or as few columns as you require.
  • You should include at least two media queries in your CSS. You may have more than this if you require it.
  • The images that resize may be a solution that you download. Use one from class, or use another solution you’ve found that you like better.
• The site should include a navigation bar that links the relevant pages together, and it should be available on all pages of the site.

• Please write your own content for this website. Do not copy content from Wikipedia or some other source. I’d like you to write your own markup from scratch, not copy the markup from some other website and plop it into your document. It’s easy to copy markup if you’re copying content from the web.

• If you need images for your site, you can find many free image websites online. I like http://www.freeimages.com/ (Links to an external site.) but there are many others. Remember that only .jpg, .png, and .gif images work on the web, and remember that you should resize your images to optimize download time. You are also welcome to use image placeholder services like lorempixel.com.

• Post your website on your web hosting space, whether that’s at SiteGround or another service.

Now add Sass

• Write, or rework, your CSS into Sass.
• When compiling your Sass, make sure the output is expanded, not nested, compact, or compressed.
• Make good use of variables, mixins, extend, nesting, math, built-in functions, etc.
  • Use variables whenever values are repeated. Comment the section where variables are stored.
  • Create at least 1 custom-coded mixin. Comment the section where mixins are stored.
  • Demonstrate proper use of extend in at least 1 instance. This can extend an existing style or an extend-only class. Place a comment where the extend exists.
  • Demonstrate nesting to 2 levels in at least one instance. Comment the area where nesting exists.
  • Incorporate at least 2 instances of built-in Sass functions. You may use functions covered in class or any of the functions listed at the Sass website: http://sass-lang.com/documentation/Sass/Script/Functions.html Links to an external site. Comment where you’ve used a Sass function.
  • Demonstrate the use of if/else in at least one instance. Comment your instance of if/else.
• You are not required to use loops or write your own functions with Sass, but you’re welcome to do so for the Instructor's Choice portion of your grade.
• Use at least 2 partial files in managing your Sass.

Now add Bourbon

• Link Bourbon and Neat to your Sass file correctly. Integrate this into your partial files in some way.
• Make use of at least 3 Bourbon mixins, functions, add-ons, and/or settings in your Sass files. Comment each instance of these in your Sass, and include Sass line numbers in your submission.
  
  • As mentioned in the video, many mixins, functions, add-ons, and settings are deprecated from version 4.x to version 5.0 beta 7. You may use deprecated items for this assignment if you wish, provided they are compiling.
• Make use of at least 2 Refills Components and/or Patterns (not Typography, meaning the stuff appearing on the Typography tab at the top of the page. Typography options appearing in Components or Patterns are OK.). Comment your HTML, Sass, and JavaScript (if applicable) to indicate which component and/or pattern you're using. Include line numbers in your submission.
  • Once you've added these components and/or patterns, modify the Sass (and HTML, if applicable) to better match your site and to DRY out your code. Example: reference your own color or size variables.

Color and typography requirements

• Include at least two typefaces that come from the web.
• You may use any source you want for the typefaces, including Google Fonts, Typekit, etc etc etc.
• You may host your own typefaces, provided they are licensed such that they can be shared on the web.
• The typefaces should be either concordant or contrasting. No conflicting typefaces!
• Incorporate type scaling in your design. The type should look good throughout the website, not just at desktop (or mobile) dimensions. See supporting lecture materials or the Typography portion of Refill for some options. Do not use the "Typography" portion of Refill to meet this requirement, or any other type system. I want you to write your own scale. 
• Create a color scheme for your site based on a starting color and its compliment. You may use Natalya Shelburne's Sass formulas in your work, but comment exactly where her work appears in your code.

10% of your grade is "Instructor's Choice" 

Ask in the discussion forum if you're not sure if your idea might count, if it's not listed below.

• Well-structured, interesting, engaging content
• Use of Sass loops: See provided article in week 5. Do not copy the code directly!!! Make your own loop, but use the article to give you ideas and to help you understand the syntax.
• Create your own custom Sass function: Again, do not copy my pxtoem function, but you may use it and the rest of Sass's built-in functions for inspiration for your own functions.
• Super dry, well-structured Sass: making use of variables that link together to control the overall size of the document (i.e. hooking together a base font size with other font sizes, padding, margins, etc), interesting mixin choices that you code
• Work with Neat: Use Neat as your grid system for the responsive design portion of the assignment. Comment your code carefully so it's clear what is your grid system and what is the Neat grid system.
• Write your own color scheme generation system starting with 1-3 colors. Consider monochromatic, analogous, or triad color schemes.
• Something else that catches our eye -- it should relate to Sass, so no jQuery Form Validation, for example.

What Jen cares about

• You create a grid system that makes sense with your design. It doesn’t have to be complicated, messy, or long to do well. Simple is fine.
• Your Sass is DRY and well-formed.
• HTML and CSS validate.

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 what compiler you use for Sass.

How to turn in your assignment

Turn your assignment in via the Assignments link in Canvas.

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

• Paste the URL for the assignment web page in the comment. You do not need to provide a link for the CSS.
• Indicate your browser/operating system combination (Mac/PC, Firefox/Chrome).
• Zip up your Sass files and upload these to the site as well. (We can’t see Sass files for grading!) You do not need to include your HTML, CSS, or JavaScript as these are posted on your website.
• Indicate which partial files and starting line numbers the following requirements are located on:
  • Variables section
  • Custom mixin
  • Extend
  • Nesting
  • Built-in Sass functions
  • If/else
• Indicate which partial files and starting/finishing line numbers for the following Bourbon and Refills items are located on:
  • 3 mixins, functions, add-ons, and/or settings from Bourbon
  • 2 components and/or patterns from Refills (do not use Typography at this time)
• Indicate the relevant lines of code for your two font faces (either in HTML or in Sass). State whether your typefaces are either concordant or contrasting.
• Indicate lines of code where your type scaling is specified.
• Indicate the lines of code for your color scheme.
• List your "instructor's choice" items, if any. Indicate relevant Sass line numbers, and HTML line numbers if needed.

<blink>WARNING</blink>

Canvas occasionally has trouble with an assignment comment AND a file upload. When you submit your work, double-check your submission to make sure BOTH are in place, and that you didn't just give us one or the other. Make your submission, then go back and review it. If you can't see the Sass file zip AND your comment, we can't see them either!

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

Assignment #2 Turn-In Guide

Oh no! I can’t make the deadline!

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

You have one "free pass" to turn in one assignment late for this class. You may use this pass with assignment 1, 2, or 3, but not assignment 4 (due to Extension timelines and end of term). 

Should you choose to use this late pass for this assignment, your assignment is due on March 27, 2017, at 11:59 PM Eastern time. You do not need to do anything special to activate the pass. Simply turn the assignment in late, exactly the way you would have done earlier. We will mark that you've used your free pass in the grade book. Make sure you turn Assignment 3 in on time, or you will receive a zero for that assignment.

If you don't turn in Assignment 2 by March 27 at 11:59 PM, you will receive a zero for this assignment.

Exceptions: In our experience, the #1 reason students need a late pass is due to poor planning. The lectures may look easy, but once you start working on your site, you may hit snags along the way. You need to plan for bad things to happen, both personally and professionally. If you have the assignment done early, that's not a tragedy!

However, we know that life happens when you are in graduate school, and we are willing to work with you in extreme cases if you need an additional extension beyond the one provided. These exceptions include things like being in the hospital (or having a significant other or children in the hospital), a car accident or other debilitating accident, and so forth.

Traveling for work or pleasure is NOT an exception -- budget your time to get the assignment in on time. 

Being sick is NOT an exception, either for yourself or your children or significant other, unless this is an extreme case (like someone in the hospital).

I used my late pass in Assignment 1, now what?

Your assignment is due on March 24, 2017, at 11:59 PM. Please budget your time accordingly.

Grading timeline

Grades will be posted online in Canvas. Jen will send an email to the class when these are ready for viewing. When this email is sent, Jen will indicate the date that regrade requests are due. Typically it takes 1-2 weeks to grade all assignments.

Regrading of assignments

You are permitted a regrade for either assignments 1, 2, or 3. Regrades are not permitted for assignment 4 due to the timing at the end of the term.

Should you wish for a regrade on your assignment, submit your regrade within 3 days of the completion of grading. Jen will send an email when grading is complete with the due date for regrades. A courtesy email to Kourtnie Sanders is appreciated, to indicate you'd like a regrade.

Typically, regrades take longer than the first round of grading, because these are fit into our schedules as possible. If you have not received your regrade within 2 weeks of submitting it, email Kourtnie Sanders to check on status.