Skip to content

Latest commit

 

History

History
116 lines (94 loc) · 3.5 KB

WebsiteProjectIdeaBank.md

File metadata and controls

116 lines (94 loc) · 3.5 KB
Raw

Project Ideas

Need an idea? Look here to get inspired. Have an extra great idea that you won’t be using? 
Drop it in the Slack channel!
  • Portfolio page Photo
  • Javascript game
  • Tic-tac-toe
  • Quiz App
  • Trivia Copy a Buzzfeed quiz
  • Budget Tracker

Track budget and make recommendations about changing spending habits Advanced option: add dynamic graphs: https://d3js.org/ Variation: Make a client eligibility calculator (this was done for a real non-profit!) Need to determine based on a client’s financial info if they are eligible for pro bono legal services Determine income (weekly, biweekly, monthly yearly) Other income: SSI SSDI Child Support Alimony Rental Income Make sure to determine calculate this income (weekly, biweekly, monthly, yearly) Family size, 1-8 Calculate federal poverty line percentage Use this guide: https://aspe.hhs.gov/poverty-guidelines

  • Make a copy of a website you like Suggestions: Facebook, Twitter, Pinterest
  • Redesign your favorite restaurant’s website Include a reservation form Include an image slider Online store app Add items to inventory, let customers add/delete items to/from a cart, etc. Advanced option: Add a backend!
  • Cloud databases with free sandbox options: https://mlab.com/ https://firebase.google.com/
  • Make a game!
  • Beginner-friendly Javascript-based Game library: http://phaser.io/
  • Shopping list app Add/edit/delete items on your list Add a recipe suggestion tool Advanced option: Add a backend! Cloud databases with free sandbox options: https://mlab.com/ https://firebase.google.com/ Build a front end framework Include responsiveness Include accessibility Build a Chrome Plugin https://developer.chrome.com/extensions/getstarted

API Integration Suggestions

Adding an API is a great way to get new information returned to your site without adding a backend. This list is just a suggestion - there are many more out there! Google Maps API https://developers.google.com/maps/documentation/javascript/

Youtube API https://developers.google.com/youtube/v3/getting-started

Foursquare API https://developer.foursquare.com/

Soundcloud API https://developers.soundcloud.com/docs/api/guide#authentication

Giphy API https://developers.giphy.com/

Meetup Api https://www.meetup.com/meetup_api/

What elements should your project include?

Have an idea, but not sure what to add to make it competitive? Try implementing these elements. Not sure how to get started? Try searching the term on https://codepen.io/ to see how others have done it. HTML/CSS/Javascript/JQuery Accessibility Database on the backend (bonus) Responsiveness HTML5 banners that makes use of Javascript Animation/Image slider Integration of pictures Drop-down menu Forms

Getting started with Github New to Github? Here’s how to get started:

  1. Create an account here: https://github.com/
  2. Try out this tutorial to learn the basics: https://guides.github.com/activities/hello-world/
  3. Commit your project as you go Make sure to commit your final project to the master branch before the end of the day!

Resources:

Find a great resource? Share it on Slack! Mozilla Developer Network: https://developer.mozilla.org/en-US/ W3 Schools: https://www.w3schools.com/ Marksheet: http://marksheet.io/ OverAPI: http://overapi.com/ Centering with CSS: https://www.w3.org/Style/Examples/007/center.en.html#block CSS Reference: https://tympanus.net/codrops/css_reference/ and http://ref.openweb.io/CSS/ Places to look for answers: Stack Overflow: https://stackoverflow.com/ Quora: https://www.quora.com/