Get started

Todo tutorials can be fun — but here’s how to

build your own projects from scratch
Chris
Blakely
Apr 7 · 8 min read

There are many great tutorials that walk you through creating apps, from simple todo
lists to fully working web apps. But how do you start your own projects from scratch?
Without the safety net of a tutorial, you might feel a bit lost on what to build, or even
how to get started.

These are the steps I followed that helped me create my own projects when I was a
junior developer — and also set me up with the skills I needed to become a software
team lead. But first…

Why build my own projects when I can follow

tutorials?
Good question, curious reader! Tutorials are great up to a point, but creating your own
projects gives sooo many other benefits:

It makes you think

When sitting down and starting your own project, there are many things to think about.

• How do I start?
 • What will it look like?

• What technologies do I need?

And other stuff like that (we’ll talk about how to get started in a minute). This is exactly
what your job as a developer will entail — designing a solution and seeing it through to
the finish. Creating your own projects allows you to practice these skills, and will set you
up for the start of your career.

You’ll encounter problems you never knew existed

Often when following a tutorial, you are exposed to the happy path — which is basically;

“OK we’re building a thing, here’s the steps to get the thing working, it works! Hurray!
The End”

Which is great if you’re learning a new technology — plus it would be a pretty terrible

tutorial if the thing you are building didn’t work at the end.

Unfortunately, the lives of web developer’s are not as straightforward as this. When
you’re writing code, you will hit issues at some point. Plain and simple.

By creating your own projects, you’ll encounter problems naturally and it gives you a
chance to practice overcoming them. This what developers do every day and practicing
will make this a lot easier.

It’s fun & you’ll always learn something

We’re a lucky bunch, we developers. We can sit down to a laptop, and build whatever
we want, using whatever technology we want. We can also do it more or less for free. I
doubt Bill the Aerospace engineer would get a good response from his boss if he asked,
“to borrow that Boeing 747 for the weekend because he wants to try out a new jet
engine he made at home”.

It’s fun to build your own projects. Something you can use, show off to friends and
family, or learn from. And it’s a pretty safe hobby. It might work, it might not. You might
like it, you might f*** the whole thing up. But it’s not a big deal, just throw the project
files in the virtual trashcan and start again. Easy!

On to the good stuff…

Ok! Now we’re happy that creating our own project’s is a great way to learn and have
fun. Let’s look at how to get started creating your very own projects.

Expand on your tutorial projects

There is something intimidating about starting a brand new piece of work. You’ll sit
down to a new file, and think, “what do I do first?” The nicer way to start building your
own projects is to build upon your existing tutorial apps and coding exercises. This
gives you a bit of a head start, as opposed to starting from a blank slate.

So, if you have completed a todo app tutorial (if you haven’t, where have you been?!),
you could build upon it in whatever way you want. For example, you could:
 • Allow saving the todo list (to a database, localStorage, etc) so the user can come
back it later

• Give the user some customization options (change the color of todo items)

• Add login ability

You get the idea — basically, use your imagination! The possibilities are endless, so
throw caution to the wind and build whatever you feel like!

Build stuff you’ll use

Everyone has their own ideas for a web app. Use your newly found web development
skills to build your own! Write down some ideas for an app that you’ve had over the
years, specifically those that you would actually use. It doesn’t have to be an overly
complex app and can be as simple as a todo list.

By creating an app that you’ll use, it’ll keep you interested enough to see the project
through to completion. Also, by using the app once it’s finished, you’ll naturally find
ways to make it better, which gives you another project to complete— and the circle of
(coding) life repeats!

Another similar approach, is to replicate a popular app that you use. You don’t have to
go into the same level of detail as the app you are replicating, but see if you can get the
basic functionality working. For example:

• Use the GitHub API to create your own GitHub dashboard

• Use the Twitter API and make your own Twitter feed

• A web app that allows you to manage your budget

Start small
A sure fire way to get overwhelmed when starting your own projects is to go all out and
try to create massive projects. While the ambition is good, you might find yourself
getting stuck and frustrated at your progress.

Start small for your first few projects. Instead of making a fully fledged scientific
calculator, create a basic one that does simple additions and subtractions, for example.
Then as you become more comfortable, add new features. Before you know it, your
small project will have turned into a fully fledged app.

This also gives you the added benefit of practicing how software is built in the real
world. Small features will often be developed, tested, and deployed in increments. This
is typically called Agile Development (have a nosey at freeCodeCamp.org for more info
about this).

Have a goal in mind

There is a popular quote by Leonardo da Vinci:

Art is never finished, only abandoned.

The same can be said for software. Once you’ve started your own project, it can often
be difficult to know when to keep going, and when to stop and move onto the next one.
If you start with a goal in mind, it will give you something to aim for, as opposed to
feeling like you are aimlessly wandering the desert.

So what do I mean by a goal? A goal in this sense is basically what you want to
achieve with your project. Instead of simply aiming to build a GitHub dashboard you
could say:

“I am going to build a dashboard that shows how many commits I’ve made to my own
repositories last month.”

This gives you a clear direction in which to work. Once you have reached that goal, you
could add more features, or move onto another project. A goal can be anything you
want:

• “I want to learn how to write clean code”

• “I want to learn CSS Grid”

• “I want to be able to call an API using React”

• “I want to learn how to write tests in Python”

BONUS TIP — remember to put everything onto your own GitHub repository, and state
the goal in the description (you should put projects on your CV/Resume as well!). This
will show employers that you are passionate about learning, and will also be good
motivation for yourself when you look back on old projects!

Example projects to try

Here’s some example projects to get your creative flow going.

(Quick note: I will be creating these projects myself, along with articles on how I did
each one, how/why I made the decisions I made, and my general thought process. As
well as completed code, of course. Make sure to subscribe to my blog to get updated
when these articles are available!)

Calculator web app

Create a calculator that allows the user to perform basic operations: Add, subtract,
multiply & divide. When you have got that far, you can build upon it:

• Add more scientific calculations (modulus etc)

• Improve the UI (HINT: CSS Grid will be your friend here)

• Create “undo” functionality (HINT: the react tutorial has a good example of this)

GitHub dashboard
Use the GitHub API to create your own dashboard. This dashboard can be anything you
want. A possible starting point would be to display information about your own GitHub
account.
 • Total commits over the past month

• Total number of repositories

• Displays your most used/favourite language

HINT: Even though this is a client-side project, you will have to interact with an API. Use
Postman or similar to get a feel for how the API works, how to authenticate requests
and things like that.

A Quiz app
Create a quiz app that randomly displays a question with a multiple choice of answers
to the user. If the user gets the answer correct, display a “hurray!” message, update
their score, you get the idea. I like this app as the possibilities are endless when it
comes to expanding on it:

• Add categories

• Add high scores

• Add a countdown

• Allow multiple players (HINT: You could go really advanced and use Socket.io to
allow online play!)

HINT: Remember not to go overboard at the beginning! Set your goal for the initial
project, and get to that point first. Then, see if you want to add more stuff or move onto
something else.

A Real Time weather app

Use something like Open Weather Map to create an app that displays the latest
weather for a certain location in real time.

HINT: Try not to be put off by the term real-time. At its simplest level, this could be
writing some logic that calls the api every 5 seconds and displays the data.

We all know how shopping carts work, but can you build one? Display a list of products
to the user, and let them add it to their cart. As a starting point, you could create
functionality that:

• Let’s the user add an item from the product page to their cart

• Shows the items in the cart

• Show’s the total cost of the items in the cart

HINT — You can simply hardcode the products that appear on the product’s page as a
first step to get going.

More projects!
If you’re looking to get your hands on more projects, check out this GitHub repo . There
are projects for different levels that will keep you busy for a while!

Thanks for reading!

Thanks for reading!

To get the latest guides, tips, and courses for junior developers straight to your inbox
(as well as some exclusive stuff!), make sure to join the mailing list at
www.chrisblakely.dev!

Originally published at www.chrisblakely.dev on April 7, 2019.

Programming Technology JavaScript Junior Developer Software Development

2K
5
claps

Chris Blakely Follow

Lead Web and Mobile Developer | www.chrisblakely.dev — Guides and
Tips For Junior Software Developers

freeCodeCamp.org Follow
Stories worth reading about programming and technology from our open
source community.