University of Washington HTML, CSS & Java Script to Create a Website

For this assignment, your task is to take an XD design and develop the site to match it.

This will be a relatively simple, single-page web app about the UNC-Duke rivalry (note: we’ll be calling them web apps, not websites, from now on, because that’s what they really are). You do not need interior pages or working links to any external sites. You do, however, need to build the app to exact specifications. It should be responsive, using Flex and the layout shown in the prototype and XD file. Your finished app should look like the two designs in the XD prototype (desktop and mobile). Use Chrome dev tools (cmd + option + I on a Mac) to check that your app looks right on both screen sizes.

The design specs are available here:

https://xd.adobe.com/view/d57ecbbd-a952-47ed-b291-647a412875e7-802d/

https://xd.adobe.com/view/6100acb4-b420-46b3-b1a1-ffa15e562ff8-3453/

Please use the assets included in the design specs (the UNC and Duke logos, the icons, and the timeline photo). Just download them to the images subfolder in your project folder and link to them in the usual fashion.

Please zip your folder and submit it to Sakai as: firstname_lastname_assignment5

Grading:

The goal of this assignment is to make sure you truly understand responsive web development and are ready for Project 2. As such, I’m concerned more about effort than adherence to a rigid scale. The grading will be as follows:

A+ (110 points): – You complete the assignment before class on Monday, September 28, and it matches the XD design exactly, using clean and efficient code. Extra credit.

A: If you are unable to match the design, try creating your own responsive design using the same assets. You can arrange the layout however you’d like, as long as it works, looks good, and uses Flex correctly. Submit this option before class on Tuesday, along with a note in Sakai to let me know where you ran into trouble. That’s an A.