Web development project ideas from the experts

Chris Coyier

Founder: CSS-Tricks, Co-Founder: CodePen, Co-Host: ShopTalk, Author: A clear, helpful book called Practical SVG

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.

Commentary

What I like about Chris's suggestion:

1. It can be whatever difficulty level you want.
2. You won't run out of projects until you run out of sites on the entire internet.
3. It deals with the importance of giving credit where credit is due.

Jim Hibbard

JavaScript Editor at Sitepoint

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.

A few years back I helped organize a contest on SitePoint in this vein and ended up taking an extended peek beneath the hood of jQuery. That was very educational.

Commentary

Here's what I like about Jim's approach:

• Deeper understanding
  Implementing things in different ways helps give you a deeper understanding of the tools you use.
• Self-reliance
  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.

Sara Soueidan

Award-winning freelance front-end developer, writer at Codrops, and speaker

Project ideas from Sara

My advice can be summarized as follows:

1. 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.
2. 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.
3. 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.
4. Learn the basics—HTML5, SVG, CSS and plain JavaScript; the rest follows as you need it.
5. Be persistent, and don't let yourself get overwhelmed. Only learn the stuff that you need, when you need it.

Commentary

If you're looking for other people's code to play with, Codrops and Codepen are great places to start.

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.

Benjie Moss

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.

Start by selecting a common project, building a sliding drawer navigation for example. The best way to accomplish that is with JavaScript, so build it using anything but JavaScript, pure CSS for example. In doing so you’ll learn *why* JavaScript is a better choice than CSS for that project (it has better event detection).

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.

Commentary

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.

Laurence Bradford

Founder at Learn to Code With Me; Also offers free portfolio course

Project ideas from Laurence

As far as project ideas go, a person can create a simple quiz using HTML, CSS, and JavaScript.

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.

Commentary

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.
• Collaboration skills
  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.

Parker Phinney

Founder at Interview Cake

Project ideas from Parker

Write a javascript bookmarklet that manipulates /other/ websites in an interesting and helpful way. Some ideas:

• 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.

Great way to practice JavaScript and DOM manipulation. And hopefully it makes you feel slightly subversive and powerful--that's key to getting hooked on coding in the early days.

Commentary

What I like about Parker's answer:

• The practicality
  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.

Zell Liew

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.

Commentary

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.