Teaching
/
Intro to Web Dev (Spring 2022)
/
Final Project
Next:
What's Next?

Final Project

Congratulations, you’ve reached the end of Intro to Web Development!

You’ve learned a ton in the past few weeks. You learned GitHub, GitHub Pages, how to work with code files, HTML tags, CSS selectors, CSS rules, flexbox, grid, JavaScript, DOM manipulation, variables, event callbacks, if statements, for loops, arrays, libraries, p5.js, objects, fetch, JSON, Bootstrap, and accessibility.

Take a second to pat yourself on the back. That’s a lot!

To practice all of that, we’ll close out the course with a final project.

Ideas

The real power of coding comes from being able to create anything you want, so rather than tell you what to build, I encourage you to create something that’s personally meaningful to you.

That could be a personal homepage, or it could be a portfolio webpage showcasing your art, or it could be a data visualization for a cause you believe in.

Here are a couple ideas to get you thinking, organized roughly by complexity.

Mild:

  • Create a personal homepage that links to your social media pages
  • Show a random picture that you’ve taken
  • Show different greetings depending on what time of day or year it is, or what the user tells you their name is

Medium:

  • Create an interactive choose-your-own adventure game
  • Find an API that provides interesting data and output it as HTML
  • Code Pong in p5.js
  • Use the Google Maps JavaScript library to show a list of your favorite places. See the Google Maps tutorial and the Washington DC Tour Map example for more info.

Spicy:

  • Make a Wordle clone. Start simple!
  • Make a game like Flappy Bird
  • Find an API that provides interesting data and use p5.js or the Google Charts library to visualize it

For more inspiration, check out these resources:

  • CodePen Challenges gives a different challenge every week. This is a great way to play with web development!
  • Genuary is an event that gives you a different procedural generation prompt every day in January. This is a great way to play with p5.js!
  • The Coding Train has a ton of videos, including a programming with p5.js video series that has tons of ideas about what you can do with p5.js.

Grades

I want you to focus on stretching your web development muscles and building something that’s personally meaningful to you, rather than worrying too much about jumping through hoops for grades.

With that in mind, projects will be worth 10 points (same as every other project), and I’ll grade based on 5 things:

  1. Do you use HTML tags?
  2. Do you use CSS? You can write your own CSS or use Bootstrap.
  3. Do you use JavaScript?
  4. Do you have one of the following
    • Event callbacks
    • DOM manipulation
    • Creating a variable
    • If statements
    • For loops
  5. Do you have one of the following:
    • Flexbox
    • Grid layout
    • Arrays
    • Objects
    • Use of a JavaScript library (not counting Bootstrap)
    • Calling the fetch function
    • 100% accessibility score in Lighthouse

Each of these 5 criteria is worth 2 points, but it’s up to you what you build with them! I encourage you to build something that’s interesting to you.

Getting Started

In previous projects, you’ve worked from a preexisting starter code directory. In this project, you’ll be writing all of the code from scratch!

There are two main options for getting started:

  1. Create a new directory in your existing repo, called final-project (or anything you want) which will then contain your HTML, CSS, JavaScript, and any image or data files you need.
  2. Create a new repository and activate GitHub Pages in the settings. Then you can put your files directory in this repo, separate from the rest of your projects. I would choose this option if you want your final project to be a standalone project that you keep working on after class.

After you have your directory or repository set up, I would start by creating a barebones HTML file. You might also start by copying over some files from a previous project and then building on that.

Checklist

  1. Create a new directory or repository.
  2. Add some barebones starter code, or copy over the files from a previous project.
  3. Push those changes to GitHub and confirm you can see them in your GitHub Pages site.
  4. Iterate! Build out your project in small steps, and create something that you’re proud of.
  5. Double-check that you have the above 5 requirements.
  6. Get ready to present your work. Make sure your camera and microphone work!
Next:
What's Next?