CS396: Spring 2021

Intro to Web Development

CS396: Spring 2021

Final Project Overview

During the last 3 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. Also, while many of you are seniors and may have a well-defined sense of what you like / what you gravitate towards, We also want to encourage you to not box yourself into either “front-end” or “back-end” without first giving yourself an opportunity to explore each. You may have an affinity for one, the other, or both that you may not yet be aware of…so keep an open mind!

1. 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. We are hesitant to provide too many scoping criteria/restrictions a priori. We 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:

2. Potential Technologies You Can Explore

Here is a list of possible technologies you might explore. Note that this is not an exhaustive list! Just some suggestions to get you thinking:

A. Front End Technologies

CSS

Client-Side JavaScript

Alternative Clients

Note: if you go this route, we may not have the bandwidth to support you, but if you’re OK with that, go for it!

B. Back End Technologies

Some Sample Project Ideas

These ideas listed below are but a few of the many directions you might pursue. That said, we want you to pursue something that YOU are interested in, so feel free to chart your own course.

1. Project that Focuses on Front-End

Designing and implementing a front-end web interaction using primarily client-side web technologies (HTML, CSS, JavaScript). This would be a very UX/UI focused project that focuses on design (e.g. principles of composition, interaction design, etc.). Example ideas:

  1. Designing and building a web portfolio from scratch.
  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.

2. 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:

3. Data-Driven Web App for an Existing Database

Creating some interactive web front end that works with a existing, 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).

4. Full Stack Web App (with Custom Database)

Designing and implementing a small REST API with a database, and using it to drive your website. For instance, make your own journaling app, photo sharing app, etc.

Project Deliverables

Below is a rough guide to the schedule of deliverables and how you will be assessed (subject to change):

Week Submission Points Evaluation Criteria
Week 5 Project Proposal 5
  • Completeness
  • Demonstrates attention and thought to the scope, nature, and breakdown of the tasks
  • Did some legwork to explore what kinds of examples, tutorials, and web resouces are out there
Week 8 Deliverable 1 20
  • Completes rough draft of first deliverable
  • The scope of work / effort demonstrated is commensurate with the size of the team (4-6 hours of development effort per person).
  • Submits a thoughtful reflection / next steps document (can be short)
Week 9 Deliverable 2 20
  • Same as Deliverable 1
Week 10 Final Presentation 5
  • Presents finished product (live demo works)
  • Describes the vision of the project and what they hoped to accomplish
  • Describes technologies used and principles followed
  • Describes next steps / what they would do next if there were more time
Week 10 Final Deliverable 20
  • Incorporates TA / instructor / peer feedback from previous 2 submissions
  • Implements third deliverable
  • Writes a (short) thoughtful reflection of the intent of the project and any lessons learned.