Final Project

This assignment is an opportunity for you to demonstrate how much you’ve learned over the quarter. Make sure to refer to the course readings and resources as needed.

Description

You have the option to work individually or in groups of up to 4 for your final project. Note that the more people in the group, the higher the expectations for the final product. Broadly, we want your final project to:

  • Demonstrate an understanding of good and accessible design
  • Demonstrate proficiency with basic web programming (HTML, CSS, and JavaScript)
  • Demonstrate an understanding of modern web development (optimization, responsive design)
  • Demonstrate adaptability and willingness to learn (integration of a new framework or technology)

After you’ve implemented your project, create a README with instructions on everything required to set up and run your site– remember to include any required downloads. Then, record a short video showcasing your site, justifying your design choices, and explaining your code. Upload your video to GDrive or YouTube, making sure it’s viewable to anyone with the link. Include this link in your README.

While the final project is fairly open-ended, we’re including some ideas below in case you’d like some inspiration.

Create a website

Design and implement a website of your choice. You could:

  • Make a personal portfolio
  • Make a website for a customer (real or imaginary)
    • You could peruse web dev listings on sites like UpWork, Fiverr, Toptal, etc. for ideas of what customers are searching for.
  • Redesign an existing website that needs improvement
  • Make a website on a topic of interest (e.g., music, art, current events)

Create a web application or visualization

Design and implement a web-based application of your choice. You could:

Create an API-centered website

Create an interactive website that demonstrates the capabilities of a third-party API (e.g. Spotify, CTA, Divvy Bikes API, Twitter, Flickr, etc.). Some examples include:

  • Everlysn: “a web application that helps users explore music and find new recommendations. It is built off of Spotify’s API and it gives users an essentially infinite source of new recommendations.”
  • Imginn: “Anonymous web instagram viewer”
  • Where2Go: “a site that allows users to quickly find events and weather for the current and next 6 days. It implements a variety of technologies including SASS, Materialize, jQuery, Moment, the Yelp Fusion API, the OpenWeatherMaps API.”
  • Weather App: “The app tells the current temperature and some additional information like Air Quality Index, Real Feel, Humidity, Highest Temperature, Lowest Temperature, Wind Speed, Wind Direction, Visibility, Pressure, Sunrise and Sunset.”

What to Submit

Submit a zipped folder containing:

  • Your README with your name and all team member names (if applicable) as well as a link to your video
  • All the files required to run your site

Remember all submissions are done through Canvas.

Requirements

Submission (FC: 5 points)

  1. Zipped folder contains all files necessary to run site
  2. Zipped folder includes README
  3. README includes information for running site from included contents
  4. README contains link to project video

Video (FC: 10 points)

  1. Video showcases project site, demonstrating each page and all available interactions
  2. Video demonstrates site’s responsive and accessibility features
  3. Site in video is fully functional with no broken images or links
  4. Video demonstrates browser console with no errors
  5. Video presents student’s code, including code explanations

Design and User Experience (FC: 10 points)

  1. Site has a good, cohesive design
  2. Site is responsive and mobile-friendly including:
    • Is usable across various browsers
    • Is usable across various devices of various sizes
  3. Site is dynamic
  4. Site is accessible. At a minimum, site:
    1. Is keyboard-only navigable including:
      1. All buttons, links, and inputs are can be selected (reached) without a mouse (i.e., via tabbing)
      2. Any element currently selected (in-focus) is perceivably different (e.g., underlined or boxed)
      3. All buttons, links, and inputs are can be activated (clicked) without a mouse
      4. There are no ‘keyboard traps’
    2. Is screen-reader friendly including:
      1. Headings are used logically and with no skipped heading numbers
      2. All pages have accurate page titles and metadata 1. Code makes appropriate use of semantic HTML including use of <nav> and <main>, and others as applicable 1. <div>s and <span>s are used sparingly and only where semantic HTML wouldn’t make sense
      3. All images have appropriate alt text
    3. Has sufficient contrast (applicable to all themes if that’s one of the features implemented)
    4. Has an option to enable and disable any automatic animations
    5. Is usable with up to 400% magnification
    6. Is usable with stylesheets disabled
    7. Is usable with images disabled
    8. Is usable with JavaScript disabled

Programming (FC: 5 points)

  1. HTML and CSS are free of syntax errors
  2. JS (and JQ, if used) is free of syntax errors
  3. JS (and JQ, if used) is used appropriately and efficiently
  4. Browser console gives no errors
  5. Browser console gives no warnings

Organization (FC: 5 points)

  1. CSS is in external stylesheet
  2. JS is in external script
  3. JQ, if used, is in external script
  4. Images are in their own folder
  5. Scripts are in their own folder

results matching ""

    No results matching ""