Real projects, real skills
Building the same apps that students use daily helps them engage.
What better first project to build than your own website. It's simple, touches on all of the basics and best yet - the student can share the result with friends.
Bolt is a good example of elegant design that just works. It also has all of the common website layout elements like navbar and columns. This website gives a deeper understanding of what HTML and CSS are capable of.
Everyone uses chat. In fact it's probably one of the most used utilities for the internet and smartphones. Students are intimitely familiar with how to use them, now how about we figure out how they're built! The end result is chat that actually works. The example on the right is live, go ahead and try it!
Multiplayer drawing game
Use arrow keys to move, press the space key to draw a box. Try it in a new window! Games teach coding really well, because of the variety of commands needed and lots of little things to tweak. It's a good thing students get excited for this. This game actually syncs data with the server so there's a lot to learn. Yet in Viimsi High School the students were able to pull it off on the fourth day of study.
Math homework automation
An app that lets you calculate the surface area and perimeter of different shapes. Once a student learns how to program this, they'll have a much better understanding of math itself. Code doesn't like being vague.