Web development project ideas from the experts
It can be tough to think of project ideas.
In fact, this is one of the most common frustrations I hear when I talk to people who are learning to code.
To help everyone out, I decided to ask the experts what sorts of projects they would recommend.
Here's who I asked:
- Chris Coyier (CSS-Tricks and CodePen)
- Sara Soueidan (Dev of the Year and writer at Codrops)
- Ben Moss (Editor at Webdesigner Depot)
- Laurence Bradford (Learn to Code With Me)
- Parker Phinney (Interview Cake)
- Zell Liew (ZellWK.com)
For each person on this list, I'll quote their suggestion and then follow it up with commentary (difficulty level, reasons the suggestion is effective, etc).
Huge thanks to everyone who answered!
Project ideas from Chris
I like the idea of copying a website as closely as you can. You'd only do this for practice, never for something you'd present as your own work. But a lot can be learned from emulating something you already like.
What I like about Chris's suggestion:
- It can be whatever difficulty level you want.
- You won't run out of projects until you run out of sites on the entire internet.
- It deals with the importance of giving credit where credit is due.
Project ideas from Jim
One of the things I'd recommend is taking a component built with one technology and trying to reimplement it yourself in another.
For example, there are a ton of lightbox widgets out there and for a beginner, this can seem like magic — you include the lib, add a couple of data attributes to some elements and voilà, you have lightbox functionality.
What I'd suggest is trying to roll your own (in this case) lightbox with vanilla JS. It's really very simple and can give you a good idea of what this previously magic library is doing under the hood.
You can also look at implementing a React component in Vue.js, or an Ember component in Angular to learn more about how the respective frameworks approach the same problem.
I'd also highly recommend pulling apart common libraries, as that is a great learning experience which will expose you to programming patterns and idioms in the real world.
Here's what I like about Jim's approach:
Implementing things in different ways helps give you a deeper understanding of the tools you use.
It's important to get comfortable enough that you don't need to rely on a plugin for everything.
Better code performance
With practice, you'll be able to write the functionality you need without the extra baggage from a full plugin. To be clear, there are times when it will make sense to use a tool or plugin, but it's important to understand when it makes sense.
Project ideas from Sara
My advice can be summarized as follows:
- Start something today, and don't wait till you've mastered all skills before you start, because given the pace at which our industry progresses, this may mean that you'll never do.
- Share what you learn. You get better at what you do when you help other people understand it because it forces you to understand it well yourself before you can help others do it.
- Break down other people's code, and break it. You'll be surprised at how much insight and lessons you can learn from doing this.
- Be persistent, and don't let yourself get overwhelmed. Only learn the stuff that you need, when you need it.
Here's what I like about Sara's advice:
It deals with the psychology of learning.
I like this answer's emphasis on starting today and focusing on only a few things at a time. This approach is a great way to make progress quickly.
Teaching what you learn has several benefits.
Not only is it a great way to understand and remember, it's also impressive to potential employers and clients. It gives you credibility both in knowledge and communication. It can also help you practice communicating an idea, which can be as important as the idea itself.
Seeing other people's code makes you better.
Playing with other people's code is a quick way to expose yourself to techniques and ideas you might not have thought of on your own. If you apply this consistently, you can absorb years of experience and level up quickly.
Editor at Webdesigner Depot
Project ideas from Benjie
Being a good developer is about solving problems in the most efficient way possible. There are thousands of tools available to you, knowing which one to use means understanding their strengths and weaknesses.
The best way I have found to understand *why* a language solves the problems it does, is to deliberately exclude it from my workflow.
By building projects with artificial restrictions you’ll accomplish several things: you’ll explore lesser-known aspects of secondary tools, broadening your knowledge; you’ll learn to think outside the confines of any one solution when solving problems; you’ll deepen your understanding, not just of *how* a language does something, but *why* it does it.
You can repeat this process with anything you want to learn: animate an SVG chart without using GSAP; load, parse, and write XML data into the DOM without using jQuery; layout a responsive UI without using Flexbox.
You’ll end up with a deeper understanding of your toolset and a broader foundation on which to build your knowledge.
What I like about Benjie's answer:
- You'll learn to think for yourself. It's too easy to end up using certain tools because someone told you to, but if you try to accomplish things without the tools, you understand when they make sense and also when they don't.
- In web development, it's so important to learn to make informed decisions so that your sites and web apps will have performance, maintainability, and more. You'll also start to feel more confident in your work.
Project ideas from Laurence
Here's a jQuery plugin a person can use to get started from: https://github.com/jewlofthelotus/SlickQuiz
I like quizzes because they're fun! It allows a person to show their personality. Plus, if a person makes it funny/useful, it's something other people can use. It may even have the potential to help others.
What I like about Laurence's answer:
Importance of fun and usefulness
It's too easy to focus on dry information without taking the time to make it fun and potentially useful. Enjoyment is an important part of motivation, and it can often make all the difference in your success.
Social aspect as motivation
When learning to code, one of the most satisfying feelings is to show your creations to someone and say "I made that." The social aspect of having other people see your work can help keep you accountable for your progress. As an added bonus, when people try your code creations, you start to learn things about user experience.
I talk a lot about the importance of not depending on plugins, but at the same time, it's important to know how to use them. In a team, you won't be the only one working on a codebase, so it's vital to be able to work with other people's code and tools.
Founder at Interview Cake
Project ideas from Parker
- Remove the feed from Facebook so it's less distracting.
- Re-style the Google search results page to be in "night mode" so it's easier on the eyes.
- Filter all emails from today out of your gmail inbox, so your day's focus isn't as easily pulled into new things.
What I like about Parker's answer:
When you create something practical, you learn, you stay motivated, and you end up with something you can use. You also get something good for your portfolio.
The psychological effect
When learning to code, it's so important to do things that help you enjoy and appreciate these new powers you have. You tend to progress much faster when you're enjoying something.
Front-end developer and founder at ZellWK.com
Project ideas from Zell
- Focus on getting the fundamentals right. Everything becomes so much easier afterwards.
- Learn and teach. Repeat the process. You'll learn clearer and faster.
What I like about Zell's answer:
- It's too easy to jump into projects first without taking the time to understand some of the fundamentals. That can lead to difficulties, so it's important to get the fundamentals first.
- Also, here's another vote for teaching what you've learned as a way of solidifying your understanding and communication.