In this post, I share 10 project ideas straight out of my notebook. These are not your run-of-the-mill to-do list apps. Each one will be a fun challenge to build, and, as a bonus, they won’t bore you to tears! 😂 If you want a jump-start on your project, grab your free project starter kit which gives you a logo, wireframes, HTML, and CSS so you can get to building quickly!
The best way to learn web development is to find a project that will push you forward. Tony Mastrorio has a great article about getting out of “tutorial purgatory.” Everything he says in it is spot-on.
What's wrong with Tutorials?
What Kinds of Projects Are Best?
The best project ideas solve your own problems (I never wake to an alarm. I need something better.) or fulfill your own desires (I want a place to hang out with other people who collect video game strategy guides.). Sometimes, you’d like to work on an idea that inspires you, but you’re not sure what yet. This list will help get your creative juices flowing.
Start on the 5 Projects that will make you a web developer
Get my free ebook 📘 that will guide you through the 5 projects that will make you qualified to be a professional web developer. You'll also get other useful resources to help along the way.
10 Great Project Ideas
Think of these like writing prompts. Take these ideas and contort them into your own beautiful disasters. If you really want, you’re welcome to build them as described here, but, if you do, you’re missing the point. Your project should be your own.
My only ask is that, if you build one of these, please share it with me. I’d like to become one of your early users.
I thought these were for web development practice. Some of them say “app” right in the description.
“App” could mean a web app or a mobile app. Even building a mobile app, you can still use the same tech you’d use to build a web app. Check out React Native.
These seem hard. I don't think I know enough to build them.
Some are harder than others. What the Stock might be the simplest one on the list.
That said, the point of choosing a personal project is to pick something that reaches past your current skill level. This is what drives your learning. Now, instead of learning the things someone told you to learn or the framework that is mentioned most on Hacker News, you’re learning the things that get you closer to your own personal project goal.
When you find your personal project, start building the part you can build given what you already know. Once you get to a barrier — a piece you can’t build yet — learn that next.
Where to Start If I Know…
Now, this is when it’s perfectly valid to read some books or do some tutorials. Go get a baseline understanding of HTML and CSS. Come back here when you’re done and start working on a project.
If you prefer interactive tutorials, Codecademy’s Learn HTML and Learn CSS offerings are pretty good. (The free lessons are fine. No need to spring for the pro stuff.) If books are your jam, Head First HTML & CSS is a good way to go.
HTML & CSS
You can build the user interface for any of these projects with just knowledge of HTML and CSS.
Here are the projects you can come closest to finishing with just this knowledge:
- What the Stock– You could just write this one as a static site with just HTML and CSS although doing payments for images could be tough.
- Out on a Limb– Build this as a simple HTML site with a list of exercises.
You can also save data, but it will live in the user’s browser. That means, every user of the browser will have the same data. If you were to build Note Log this way and I tried to use it on your computer, I would see your notes instead of mine. My notes would be saved in my browser on my own computer.
At this point you can potentially complete almost any of these projects. For those that require a back-end, you can use a back-end as a service like Firebase.
- Pinboard Reader– Since this one will use Pinboard’s API, it doesn’t matter much that you don’t know how to build a back-end.
- Out on a Limb– Now, you could either randomize the exercise you show or show a specific one each day.
Knowing React opens you up to mobile app development by way of React Native. This is a great time to try your hand at Fog of Explore.
The back-end lets you save data into a database. This is how social networks and other web apps let you have settings and content that follow your user account on that site. If you log into Facebook on any computer, you’ll always have the same friends. If someone else logs into Facebook on your computer, they get their friends, not yours. The database makes this possible.
Having all the site’s data in a single place allows you to show users content created by other users. This is how Facebook shows you posts written by your friends. Without a centralized place to store the posts, Facebook couldn’t do this.
A back-end also lets you do computation on the server instead of in the user’s browser. Once you understand back-end development, you can tackle any of these projects and do it justice.
What to Do Next
Be sure to grab your free starter kit while you’re here so you can quickly get up and running. Procrastination is the enemy of learning. You could download the kit, go through the wireframes, and start writing code within 5 minutes.
Building projects is way better than having your hand held through a tutorial, but what’s even better is building a project you’ve conceptualized that has a special meaning or significance to you. Read my article on how to generate your own project ideas.