How to Build a Project

Welcome to your final year! There are no new topics this year. Instead, you're going to do what real developers do every day: build complete apps, from an empty folder to a finished product.

Before we write a single line of code, let's talk about how to approach a project. Beginners often open a blank file and start typing, hoping for the best. That's like starting to build a house by nailing two random planks together. Here's a much better process:

1. Describe it in plain English. What does the app do? Who is it for? Write a sentence or two.
2. List the features. Break the app into small things a user can do: "add a task," "mark it done," "delete it." Start with the smallest version that's still useful (developers call this the MVP, or minimum viable product), and save the fancy extras for later.
3. Decide on the data. What information does the app need to keep track of? What does each piece look like? (This is usually an array of objects!)
4. Build the HTML skeleton. Get all the elements on the page, even if they don't work yet.
5. Make it look decent with CSS. Doesn't need to be perfect. Just enough that it's pleasant to use.
6. Add the JavaScript, one feature at a time. Get one feature working, test it, then move to the next. Don't write everything at once and then pray.
7. Test everything, including weird cases: empty inputs, very long text, refreshing the page halfway through.
8. Improve it. Add those fancy extras from step 2.

For each project below, you'll get the complete HTML, CSS and JavaScript, along with an explanation of how each part works. Type it all in yourself (yes, really, Orientation Day rules still apply!), get it working, and then try the "Level Up" challenges at the end of each project to make it your own.