I highly recommend projects in general as a way to learn to code: they’re more hands-on and can be more rewarding than watching a lecture or reading a textbook. Interactive learning by actually doing the coding is more effective for faster learning than lecture. The learning curve can feel steeper, but the skills you learn will be much stickier.
I wrote this article to give you actually good beginner projects:
- Not too hard or easy
- Contribute a skill you can put on your resume
- Help you build an employable portfolio
If you’re reading this article, I’m assuming:
If that’s you, this article will be a useful resource in your job hunt.
OK, I’m not going to assume too much prior knowledge. I want to quickly cover the basics so we’reon the same page.
Warning: They’re tricky. You won’t be able to finish them in one sitting. They’re going to require a little bit more than copy-paste-enter, but when you do them, you’ll have a much greater feeling of satisfaction.
A framework is basically a prepackaged chunk of code that does something specific. Think of it as a cheat, or a shortcut. Frameworks rise and fall in popularity.They’re definitely worth knowing about, but I wanted to start with some vanilla, simple projects. These don’t rely on any frameworks.
🔗 1. Build a Simple Web Crawler
Subscribe to my YouTube channel if this video was helpful!
🔗 2. Complete a guided course
Okay, so this isn’t exactly a stand-alone project, but an interactive course that forces you to write a lot of code can get you started on the right foot.
🔗 3. Build a weather app.
The weather app is genuinely useful and has a chance of being used in your day-to-day life. This tutorial that I’m linking to is perfect for beginners because it’s going to help you understand the core basics of the DOM and teach you how to use the fetch API to call and get data from a third-party service.
The app tutorial will walk you through building a location-based weather app. Based on your current location, the app will show you the weather there.
🔗 4. Build a landing page for your website.
The guy making the videos has 1.62 million subscribers and tons of positive comments. I found his teaching style to be really engaging and straightforward. He also offers the full code so you can check it out and poke around for yourself.
🔗 5. Build a restaurant menu page
Maybe I’m hungry as I write this because this is the first of several food-based tutorials we’re going to be looking at.
It’ll teach you higher-order functions like
filter. Higher-order functions are great to learn because they have really high reusability, so you’ll get to code smarter, not harder.
🔗 6. Make a grocery list
🔗 7. Create a platformer game
🔗 8. Recipes app
- the listing with all the recipes
- a form to add a new recipe
- a detailed view of the selected recipe.
(It’s also full of tantalizing pictures of chicken fajita pasta.)
It uses a lot of frameworks - you’ll be using vue2, vuex, vuetify, and Cosmic.js. It’s definitely on the more ambitious side. But it’ll create something really cool, beautiful, and potentially useful.
🔗 9. News Website
If you like to keep up-to-date in these trying times, good for you. Here’s a tutorial that will teach you to build a web application for reading the news with Vue.js.
This tutorial uses the API from newsapi.org. It’s definitely more self-guided than some of the other tutorials on this list - the video just shows the guy typing and he doesn’t explain anything - but I still found it useful.
🔗 10. To-do app
I also quite like CJ’s mustache.
🔗 11. User registration and login
You can read the article I linked above, and you can also check out the GitHub repo that has all the details.
🔗 12. Trello clone
This tutorial is heavy on learn-by-doing and low on guidance, so keep that in mind as you dive into the GitHub repo.
🔗 13. Temperature converter app
When I was eighteen, I moved to England and found that everybody there uses Celsius. Did I know what 18 degrees C felt like? Absolutely not. This confusion led to me dressing either very warmly or very coldly for the weather. (Sure, I could have Googled it, but I was lazy.)
Because Angular is a more complex concept, I’ve kept most of these tutorials on the simpler side of things.
🔗 14. Build an audio player
By the end of this tutorial, you will have developed an audio player app. You will have handled audio operations and application state. You also have even secured your application using Auth0. The writer of the tutorial also included all his code on his GitHub repo.
🔗 15. Bare Bones
It’s a GitHub repo with a very short readme file and has the npm modules, configuration, scripts, folders, and routing in place. It’s a minimal app - perfect for poking around. Get it up, get it running, and see where you go next.
🔗 16. Budget calculator
I find it a visually appealing app - it’s very satisfying to make these kinds of applications that look and feel smooth to use, especially once you know what’s behind the curtain.
🔗 17. Create a Google map powered by Angular
Who doesn’t love maps? This tutorial teaches you to create interactive Google Maps powered by Angular. That’s a pretty cool idea!
The tutorial walks you through instantiating the map, geocoding by address and location, working with markers, and programmatically adjusting the radii (plural for radius, of course) of circles for location. There’s also a GitHub repo where you can snag the code.
The written tutorial is pretty comprehensive. It runs at about a 9-minute read, but of course, you’ll spend much longer implementing the code. I love this tutorial because it gave you all the code, but also explained what the code was doing, why it was important, and even how you could tweak it yourself.
🔗 18. The front end of a personal blog
The style of this written tutorial assumes that you don’t know anything. That’s why I like it for beginners, even though creating the front end of your blog is pretty advanced.
🔗 19. The Google homepage
Generally, you want a project that doesn’t assume or require any prior knowledge, but that will still stretch you and challenge you. All the tutorials in this article fit that bill.
Once you’ve got a project in mind, treat it like baking a new recipe. Start by reading through all the requirements. Get your “ingredients” all set up – any IDE you might use, any frameworks, anything like that. Then take it one step at a time, troubleshooting as you run into issues. By the end, you will have a beautiful finished project you can add to your portfolio with pride.
There are so many more libraries and frameworks beyond what I’ve provided you in this article, but this is a good starting point for beginners. If you caught any of the other frameworks I referred to, you might be interested in checking out more about them once you’ve worked your way through those tutorials.
🔗 Other resources
For beginners: we recommend our Learn Python for all brand-new coders looking to learn computer science. It’s the first course in our curriculum and starts right from the beginning as you interactively code your first basic project – a video game.