Skip to main content

Assignment 5: Prototype

due March 26, 11:59pm

Setup

Accept the Github Classroom assignment and clone this repo that contains stencil code for Assignment 5. This stencil only includes a README, but we'd like you to hand in via Github on Gradescope, so please add and commit your code to that repository.

Introduction

In this assignment, you will turn your hi-fi mockup into an interactive prototype using HTML, CSS, and JS. You must use all the knowledge you have gained through the previous labs, homeworks, and assignments. Feel free to post on piazza and zoom into TA hours for help.

Overview

For this assignment, you will be implementing the designs that you created for Assignment 4. You only need to do the front end side of this (the styling, the interactions, making sure links work, animations, transitions, etc.), but no need to do anything server-side (Node.js or Express.js). HTML, CSS, and basic JavaScript are sufficient. You may also use Vue or any other JavaScript front-end framework that you're comfortable with or would like to learn.

Implementation

This is your chance to really show off what you've learned so far! Feel free (actually, this is recommended) to do a lot of research on how to make your design very nice. You can use libraries such as Bootstrap, FontAwesome, and different jQuery libraries to make your layouts nice and your transitions fancy.

Your prototype should be responsive following the mobile and desktop views of your mockups in the previous assignment. Responsiveness will be graded using Chrome's device mode. To access Chrome’s device mode, right click on your web page, and click “Inspect”. Click the device icon in the top left corner of the window that pops up upon clicking “Inspect”, and choose the device you would like to be displayed. We expect your app to still be usable upon resizing the browser. For example, all elements should be visible, and no elements should overlap.

There should not be any differences between your coded prototype and your hi-fidelity mockup from Assignment 4. If there are any differences, these differences must be due to design or usability issues from your hi-fi prototype, and must be noted and justified in your discussion post description when you submit. Due to the shortened semester, you are only required to complete three of the main pages of your application. These three pages should all be connected (you must be able to navigate from page one to page two to page three and vice versa), and they should contain the main functionality of your application.

Requirements

Your prototype should:

Handin

Upload your Github repository containing your prototype to Gradescope via Github upload by March 26 at 11:59pm.