Assignment 1: Responsive Design
- Due Feb 17, 2017 by 11:59pm
- Points 100
- Submitting a text entry box
Assignment 1 is due on February 17, 2017, by 11:59 PM. Regrade and late policy are listed below. This assignment is worth 25% of your grade for the course.
Edit Jan 30 to add more ideas to "instructor's choice" section and "How to turn in your assignment"
Build a Responsive Website
90% of your grade: Complete the checklist of items below for up to 90% of your grade.
Build a 2-3 page responsive website, using the principles discussed.
- A responsive website should include a grid system, media queries, and images that resize.
- Your grid system and media queries should be custom-coded. (You may not use Bootstrap, Foundation, or another grid system or media queries.)
- The grid system must have at least 3 columns. It can have as many as you want.
- You should include at least two unique media queries in your CSS. You may have more than this if you require it. You may repeat the same media query more than once, but that doesn't count towards "unique" media queries.
- The images that resize may be a solution that you download, or the HTML5 solution. Use a solution from class, or use another solution you’ve found that you like better. You must resize at least one image in the site.
- Demonstrate you know how to properly swap at least one background image based on the material covered in class.
- The site should include a navigation bar that links the relevant pages together, and it should be available on all pages of the site.
- Write your own content for the site. Please don’t use lorem ipsum or Wikipedia entries. The site can be about anything you want provided it’s work-safe, legal, ethical, and moral. If you are redesigning a page or two from a site, you may use that site’s content.
- The site should work in some combination of Mac or PC, Firefox or Chrome.
10% of your grade: Instructor's choice, looking for above and beyond excellence in your work. This may include:
- A particularly lovely color scheme or professional-looking layout
- Nice use of type in the design
- Well-structured, interesting, engaging content
- Including a hamburger button or other JavaScript driven navigation treatment. (In the HTML and/or CSS and/or JavaScript, provide a URL for where you find this code, if you do not write it yourself.)
- Stretching beyond what's covered in class, digging a little deeper. Examples might include: use of vw/vh units, using a mobile-first approach, doing something more than mimicking what was presented in class
- Something else that catches our eye
From Ed Hebert: Mobile Device Emulation Help
Ed Hebert was last year's TA. He put together a helpful, short video on mobile device emulation.
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.
- 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 if it’s a 3-column or 24-column grid system. What’s important is that it’s the right number of columns for your design.
- I don't care about cross-browser compatibility.
How to turn in your assignment
Turn your assignment in via the Assignments link in Canvas.
Include a comment within Canvas, indicating the following:
- Paste the URL for the assignment web page. You do not need to provide a link for the CSS.
- Indicate your browser/operating system combination (Mac/PC, Firefox/Chrome).
- Indicate how many columns are in your grid system, where your responsive image(s) is/are located (a comment in your HTML is appreciated too), where your background image is located, and put in some commenting in the CSS for your media queries.
- Indicate what you think are the "above and beyond" characteristics of your work, if any.
Feel free to utilize the Assignment #1 Turn-In Guide included here:
Oh no! I can’t make the deadline!
This project is due on February 17, 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 February 20, 2016, 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 Assignments 2 and 3 in on time, or you will receive a zero for those assignments.
If you don't turn in Assignment 1 by February 20 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).
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.