To be 100% clear, projects are often a great way to learn any coding language. However, problems arise when people attempt certain projects before they know enough of the basics to judge what’s reasonable.
I’m not about to let that happen to you, so here’s what we’ll cover:
- how to avoid the common traps and learn more effectively
- when and how to start doing projects
- how to know which concepts to use once you start doing projects
The Common Phrase that Often Leads to Failure
They’ll try to make the slideshow, and one of two things will usually happen:
It’ll be too hard, and they tell themselves they’ll “come back to it later” — which often means giving up forever.
They’ll succeed in creating the slideshow, but since they had to cover so much material at once, they won’t be able to apply it afterwards. This leads to discouragement, which can mean, once again, giving up forever.
Why does this happen?
The Trap of Too Much, Too Soon
Once they attempt it, they discover it’s harder than they thought. Making a slideshow might involve arrays, functions, loops, animation, timing, event listeners, DOM manipulation and more. This can be an overwhelming number of new concepts for someone who is starting out.
Alternatively, some people will succeed in creating a slideshow, but it’ll be cobbled together with a ton of help from tutorials and relatively little understanding of what’s happening. In those cases, you frequently hear phrases like, “I was able to follow along with the tutorial, but then I couldn’t apply any of it on my own.”
These scenarios happen not just with slideshows but other projects that learners will attempt too soon. For example, a to-do list sounds simple, but that can be a full-stack project if the data is to be saved outside the browser’s local storage or cookies.
Which Projects Often Hinder Learning?
In order to make this discussion more concrete, here are some specific, simple-sounding projects people often attempt too early, and the concepts that are actually involved.
|Quiz||Arrays, objects, functions, forms, event listeners|
|To-do list||Arrays, objects, functions, some form of storage (front-end or back-end), DOM manipulation, event listeners|
What’s the point?
The point of this section is not to scare you off from attempting new things. You can arrive at some of these projects faster than you’d expect as long as you don’t start with them from the beginning.
All you need is a better approach.
How to Learn More Effectively
Here are a couple of strategies to avoid the traps associated with doing projects too soon:
- start with concepts
- practice like real life
Strategy 1: start with concepts
Instead of jumping directly into big projects, try learning the smallest pieces of functionality first. This way, you’ll start with a stronger base of knowledge and have an easier time coding things.
For example, show text inside a div with
innerHTML. Change the color of a paragraph’s text. Add two numbers together. Write your first function. Get comfortable with variables. Store a collection of things in an array or an object. Make something happen when a button gets clicked. Learn about logic with
else. Try some loops.
Play with these concepts and get comfortable with them. You’ll soon find yourself able to create lots of things. In addition, your newfound experience will make you much better at deciding which projects to do. As you see yourself succeed more, your confidence will grow, and the momentum will carry you forward much faster than trying to rush into a big project at the beginning.
To be clear, challenges are important, because they help you grow. It’s great to stretch beyond your comfort zone, but not so far that it gets in the way of your progress.
Strategy 2: practice like real life
As you learn, make sure to take some time to practice under real conditions. That means using your own text editor and your own browser and coding something without relying on a tutorial.
The more you practice coding in real-life conditions, the less likely you are to feel stuck when it’s time to create something for real.
This is a great way to avoid the problem of being able to do something with a tutorial but not being able to apply it on your own.
So When Do the Projects Happen?
While it’s important to challenge yourself, you don’t want to try building an end-to-end digital banking app, for example, before you know how to display a line of text on the screen.
Let’s look at some specific examples of concepts you can learn and mini-projects you can then do. The examples in this table are ordered — each item building on the previous knowledge.
|New concepts learned||Possible mini-projects|
|Variables, functions||Create a greeting function that takes your name from a variable and displays a greeting to you on the page.|
|Click handling, changing a class||Create a “more information” button that makes a blurb of information appear or disappear. Also, try creating two theme selection buttons. When you click either one of them, a bunch of stuff on the page changes colors and styles to fit a theme.|
|If statements, random numbers||Create a game where there are two doors and you have to click on the correct one to get the prize.|
|Arrays, loops||Create the front end of a social posting site. Use an array to hold a list of text posts. Loop through that array to display the posts.|
Where is this going?
Notice that we’ve done things in a different order this time. Instead of starting with a project and trying to play catch-up with the required concepts, we’ve started with the concepts and built projects based on those.
This has a profound impact on how you learn, because instead of jumping too far ahead and feeling behind, you learn the foundations that let you move forward confidently at each step. The little things you learn build on each other, and soon enough, you arrive at the bigger projects you wanted to do in the first place.
How to Know Which Concepts to Use in a Project
Let’s say you’ve learned some concepts, and you’re starting to try projects.
How do you think about which concepts to use and which concepts to avoid?
To use a non-coding analogy, let’s say you’re building a chair and you want to fasten two pieces of wood together with a screw. You could use your hand and it would work, but it would be painful and tedious. Since you know about screwdrivers, you know they would be better. An electric screwdriver would be much better.
In this example, the more tools you know, the more you’ll be able to look at a problem and know which tool to pick.
To bring this example back to coding, each concept is like a tool. The more concepts you learn, the bigger your coding toolbox, and the more you’ll feel like you know what to use.
With that background in mind, here are some practical ways to think through a project:
- First, break the project down into smaller pieces.
- Write in plain language what you want each piece to do. This way, you can do your thinking without getting bogged down in the details of code.
- Build each piece of the project, starting with concepts you know. If you’ve been learning concepts first (instead of jumping into projects at the beginning), you should have a reasonable tool set by now.
- When there’s a gap in your knowledge, reduce it to the smallest possible piece of functionality and look it up.
- As you’re learning, don’t obsess over perfection. Perfection hurts progress.
- Don’t be afraid to experiment with different approaches and ideas. Those polished tutorials you see online often go through a lot of experimentation before being presented anywhere.
- After you’ve tried a project yourself, look up similar projects in order to learn from other people’s approaches.
As you take these steps with more and more projects, you’ll begin to feel more comfortable picking the right concepts for the job.
The rest is just practice.
Projects too early = trap.
Concepts first, projects second.
To avoid the project trap, play with concepts first, and then do mini-projects based on those concepts. That way, you’ll end up with a stronger understanding, better retention, more momentum, and faster progress. You’ll feel less overwhelmed, too.
Practice like real life.
The more you practice under real-life conditions, the less likely you are to get stuck when it’s time to let go of the tutorials.
In closing, it should be said that everyone learns differently. None of the ideas in this article are meant to be hard and fast rules. Instead, they are friendly suggestions that I hope will help you or someone you know avoid the traps I’ve seen too many people fall into.
Now that you’re here, what do you think of all this? Are there any questions, stories, or experiences you’d like to share about learning to code?
Feel free to let me know in the comments.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Form Design Patterns