Final Project Overview

During the last part 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. 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. I’m here to help, and I’m 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 semester. 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 will complete (1) a project proposal, (2) an intermediate project deliverable, and (3) a final project deliverable. Given this, think about how you might break up your work into two pieces: one that you complete before Thanksgiving, and one that you complete by the end of the semester.
• Both of your deliverables should represent about 4-6 hours of effort (per teammate).
• You’re welcome to connect this to a larger project you’re working on outside of this class. That said, your project must be original work that you complete over the course of this 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 Potential Project Ideas

A. Make a 2-3 Page Website

Make a 2-3 page website. Some potential website ideas could include:

1. Making a portfolio of your work (for job searches, etc.).
2. Making a personal website (or a part of a website) on a topic of interest (e.g., music, art, current events, advocacy websites).
3. Helping an existing business / organization / initiative w/their website (or building one from scratch).
4. Redesigning an existing website and making it better.

If you choose this route, you may use an existing HTML Template, or any third-party libraries that interest you. We will go over some examples of these libraries and templates in class.

B. Make an Animation

You can also extend the animation you made in Project 1 using p5.js. This would require about 8-12 hours of additional work to add new functionality.

C. Make a Web App that Uses an Existing Data API

Creating some interactive web front end that works with a third-party API (e.g. Spotify, Yelp!, ART Bus System, Twitter, Flickr, NASA, etc.). For instance, this is a web app that interacts with the Spotify API (like this one).

D. Propose your own idea

If you have another idea for a project that does not fall into one of the categories above, feel free to propose it and Sarah will give you feedback on it / let you know if it is feasible / meets the spirit of the assignment.

Resources To Check Out

Today we’ll be taking a tour of some front-end techiques involving multimedia and animation. We’ll just be glancing at a series of ideas. Some interesting links and resources I found online:

Free Templates & Widgets

• https://html5up.net/
• Free Carousel Widgets
• More Carousel Widgets
• More UX/UI Widgets
• Photo Gallery Widgets
• Leaflet (Interactive Maps)

Icons & Images

• Font Awesome Icons
• Pexels (Stock Photography)
• Unsplash (Stock Photography)

CSS Transitions & Animation

A review (also discussed in Tutorial 5)

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
• https://thoughtbot.com/blog/transitions-and-transforms
• https://thoughtbot.com/blog/css-animation-for-beginners
• https://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation–cms-21068

Image Backgrounds

A review (also discussed in Tutorial 5)

• background-attachment
• CSS filters

Scrollytelling

• http://www.rleonardi.com/interactive-resume/
• Horizontal scroll tutorial
• https://codepen.io/tutsplus/pen/QWGYKMN?editors=0010
• https://webdesign.tutsplus.com/tutorials/how-to-animate-a-coffee-drinking-sprite-with-scrollmagic–cms-24795
• https://speckyboy.com/10-css-javascript-parallax-scrolling-code-snippets/
• https://codepen.io/animaticss/pen/orWRWp?editors=0010

Parallax Libraries

• https://github.com/dixonandmoe/rellax
• https://alexfox.dev/lax.js/
• https://github.com/electerious/basicScroll#demos
• https://bashooka.com/coding/parallax-animation-javascript-libraries-2019/
• https://chriscavs.github.io/rallax-demo/
• https://github.com/geosigno/simpleParallax.js

Processing (p5.js)

• To download the starter kit: https://p5js.org/download/support.html
• Get Started (the “hello world” example): https://p5js.org/get-started/
• Learn: https://p5js.org/learn/
• Examples: https://p5js.org/examples/

Other Animation Libraries and Tutorials

• AnimeJS
• Some interesting CSS Shorts on LinkedIn learning, which deconstruct various design techniques / flourishes.