Final Project Overview

During the last 4 weeks of the course, you will be designing and implementing a short project of your choosing. Think of this project as one step towards a larger goal you might work towards — dedicated to a web-related topic or idea that you’re excited about, and a step beyond what you currently know how to do. You don’t have to complete your whole vision…just a slice of it. The most important thing is for you to pick something you’re interested in and excited about.

Don’t be afraid to take a risk and explore something you do not yet know how to do. We’re here to help, and we’re not going to penalize you for making a good faith effort to learn something new…even if everything doesn’t work out perfectly.

Scoping Criteria / Ground Rules

Aim to scope your project so that you can arrive at a coherent stopping point by the end of the quarter. I am hesitant to provide too many scoping criteria/restrictions a priori. I would rather work with you to scope something that is doable after first seeing what you’re interested in. That said, here are a few guidelines:

• You may work on your own or in groups of 2-3. Your work plan should be commensurate with the number of people in your group.
• You may focus on depth or breadth. In other words, you can go deep in one particular area (e.g. design + CSS, animation, data visualization, etc.), or build something that uses a little bit of everything.
• You will be completing 3 project deliverables in the coming weeks (which you will set for yourself). You will also be presenting your final deliverable during your last tutorial class. Given this, think about how you might break your project into 3 coherent parts.
• Each deliverable should represent about 4-6 hours of effort (per teammate). We realize that this is difficult for us to qualitatively assess when we’re grading you, and will give you the benefit of the doubt. That said, if your scope of work is significantly less than that of the homework assignments, this will be obvious to us.
• You’re welcome to connect this to a larger project you’re working on outside of this class. That said, your three deliverables must be original work that you complete over the course of this class. Moreover, you cannot double-count this work with work in another class.
• You are welcome to explore something that wasn’t directly covered in class. That said, at least 50% of your project should connect with the technologies and ideas from the class.
• This project is not your life’s work — it’s the beginning of a longer journey into web technologies. As such, scope your project to something reasonable. You can always build on these ideas later.

Some Sample Project Ideas

A. Design-Oriented Project (Front End)

Designing and implementing a front-end web interaction using primarily HTML and CSS (and perhaps some JavaScript). This would involve really delving into the design principles (symmetry, color, etc.) and justifying / defending your choices and how they communicate the ideas / values of your website. Example ideas:

1. Making a portfolio
2. Making a personal website (or a part of a website) on a topic of interest (music, art, current events)
3. Helping an existing business / organization / initiative w/their website (or building one from scratch).
4. Redesigning an existing website that needs improvement.

B. Animation (Front End)

Creating a web animation / experience using JavaScript and Canvas. Take a look at some of these libraries and examples (which I think are really inspiring).

• Three.js
• Flamingo (turn on the sound)
• Graphic Novel (Boat)
• p5.js
• anime.js
• Paper.js

C. Data Visualization / Journalistic Interactive (Front End)

Creating an interesting, interactive data visualization and/or media presentation that communicates an issue or idea. Take a look at a few examples:

• Information is Beautiful
• Flowing Data
• NYT Visual Stories: NYTimes Interactive 2020
• Scrollytelling Guide

These libraries may be useful:

• d3.js
• Leaflet Maps
• Highcharts
• Vega

D. Data-Driven Web App for an Existing Database

Creating some interactive web front end that works with a third-party API (e.g. Spotify, CTA, Divvy Bikes API, Twitter, Flickr, etc.). For instance, this is a web app that interacts with the Spotify API (like this one).

E. Full Stack Web App (with Custom Database)

Designing and implementing a small REST API with a database, and using it to drive your website. This is only recommended for students who have had at least two programming classes (typically CS majors / minors), as it will involve taking some initiative (reading web framework tutorials, database tutorials, etc.). Historically, around 2-3 students have gone this route (and have been very successful), but it requires some initiative to do some tutorials on your own.

Project Milestones

In an effort to provide some structure as you work to complete your projects, I’ve set up a schedule of interim deliverables, to help you stay on track and get regular feedback.