Congratulations! You finished Mock-Up, and now it's time for Prototype! This project will involve you turning 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 come to TA hours for help.
Navigate to your
cs132/ course directory and create a
You should implement all of your HTML, CSS, and JS in their individual files. We expect at least 3 files, with any additional images or resources your prototype may need. Remember that any media your web app uses must either link to a website online or a local path.
Part 1: 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 and different jquery libraries to make your layouts nice and your transitions fancy. Remember to keep in mind that your website should be viewable across different devices, and good luck!
Part 2: Show off Your Work
Like in Assignment 3, you will share your work with fellow students in a Canvas discussion (Link). This time, we want students to be able interact with your work, so instead of posting screenshots, you will post a link to your prototype hosted on GitHub Pages. Here are some instructions on how to use GitHub Pages.
As always, if you have any questions, come to design hours, or email us!
In Assignment 3, we asked you to mockup mobile and desktop views. We will be grading your coded mockups in Chrome. We will view the mobile view of the prototype using Chrome’s device mode. We expect your app should 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 3. 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 README.md. Good luck designers!
Make sure your project directory contains the HTML, CSS, and JS files (for example
index.js). You can include a
README.md if you ran into any problems or explain any issues that may arise while creating your interactive mockup.
Upload your prototype here by April 5: Link