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.
1. Build a weather app.
I want to start with the weather app because I believe it’s 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.
2. 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.
3. Build a restaurant menu page
It’ll teach you the higher-order functions like map, reduce, and filter. Higher-order functions are great to learn because they have really high reusability, so you’ll get to code smarter, not harder.
4. Complete a course
5. Make a grocery list
6. Create a platformer game
7. Recipes app
Start your coding adventure today
8. 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 news web application 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.
9. To-do app
I love this tutorial because it’s short, sweet, and simple. The creator, CJ, writes really clean and easy-to-understand code, so it’s great to learn from.
I also quite like CJ’s mustache.
10. User reg and login
You can read the article I linked above, and you can also check out the GitHub repo that has all the details.
11. 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.
12. 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. (I could have Googled it, but I was lazy.)
This temperature converter website tutorial could have saved me that pain. I love this tutorial, because it will show you several different solutions that other developers implemented, what tools they used, and how they did it. If you’re more interested in mobile apps, you can see the tutorial on how to build a temperature converter there instead.
Because Angular is a more complex concept, I’ve kept most of these tutorials on the simpler side of things.
13. 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.
14. Bare Bones
Remember how I said I don’t like Hello World projects?
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.
15. Budget calculator
I’m a little weird in that I love doing my budget. Every Sunday morning, I sit down and fill out my budget spreadsheet. That’s why this budget calculator application using Angular was so appealing to me.
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.
16. 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.
17. The front end of a personal blog
This tutorial walks you through creating the front end of a personal blog. It’s a little beyond what I would consider beginner, but it’s still a great passion project. It’s something you can work on more than one, with no real end date. You can also use your personal blog as a portfolio of sorts.
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.
For taking action: