Final Project: Website Option
This final project option asks you to apply what you’ve learned to create a website or web application that expands on what you have learned over the course of the class. Please calibrate your implementation according to your experience level with programming (i.e. do more if you’re more experienced): you’ll get out of it what you put into it. See the rubric below to get a sense of how you will be evaluated on this assignment.
1. Choose a Website Option
If you chose this option, you have several directions that you can go:
A. Make a 2-3 Page Website
Make a 2-3 page website. Some potential website ideas could include:
- Making a portfolio of your work (for job searches, etc.).
- Making a personal website (or a part of a website) on a topic of interest (e.g., music, art, current events, advocacy websites).
- Helping an existing business / organization / initiative w/their website (or building one from scratch).
- 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 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).
C. 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.
2. Browse sample projects from past students
There were many different kinds of projects, and most students learned these technologies as they went along. Don’t feel like you need to conform to any of these ideas. Make this assignment your own!
- Personal Portfolio, by Deanna Wexler
- Film Festival, by Dhruv Mehra
- North by Northwestern, by Sakke Overlund
- Personal Portfolio, by Kitra Razin
- Educational Game, by Vanessa Stuart
- Travel Blog, by Ashley Wei & Paris Wang
3. 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
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)
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
Other Animation Libraries and Tutorials
- AnimeJS
- Some interesting CSS Shorts on LinkedIn learning, which deconstruct various design techniques / flourishes.