Portfolio Project Ideas for Web Developers
Two questions come up over and over again when talking with you guys about building a portfolio and applying for web developer jobs:
- “What should I build for practice and to gain experience?”
- “What projects should I build to show to employers?”
“I don’t feel like I have enough experience to get hired. What should I attempt to build as practice, and to put in my portfolio?” ~ Everyone
Here are seven of my favorite ideas for projects that you could build to include in your portfolio.
Working on your portfolio?
Get my free portfolio checklist (at PortfolioTips.co)—I've broken out the 10 most important things to include in your portfolio. Also includes 3 bonus ways to make your portfolio stand out from the crowd.
1. A website for your local taco joint
La Superior have the most delicious tacos in Williamsburg, but their website has room for improvement. You could redesign and rebuild your favorite restaurant’s website from scratch, or use a modern template from html5up, templated, or w3layouts.
When you’re finished you could send them a link to the website you created too, and see if they’re interested in buying it :money_with_wings: or give them a lovely gift and your work might be repaid in burritos.
2. A website just for fun!
Jessica Hische is my passion project hero. The website in the screenshot above is www.momthisishowtwitterworks.com - one of Jessica’s incredible personal projects. Check out her fantastic talk on Procrastiworking from GitHub’s Passion Projects series for more personal project inspiration!
A shout out to Jennifer Dewalt’s 180 Websites In 180 Days too. Great for project ideas—and what a feat!
3. Code up a design from Dribbble
Use Dribbble’s search bar to filter for the type of thing you’d like to build, pick out something you like, and code it up!
4. An HTML5 game
5. A website for a friend
Got a friend that’s in a band? Owns a small business? Better still… do you know a local not-for-profit, charity, or church that you could build a website for?
My buddy Greg built a website for his a friend that’s a musician and it came out awesome. It’s nice to have a bit of added peer pressure to get it completed too.
6. A clone of a website
Students of coding workshop Thinkful build out a clone of Google.com as an exercise in front-end web development. This is a great way to explore how some of your favorite sites are constructed.
Pick a site that you like, and build a clone of it yourself, trying to look at the source code as little as possible.
You can see all of the Thinkful student Google clones by googling “thinkful google clone”.
7. Part of a user interface
You don’t need to build an entire website, you could spend time building a few smaller parts of a user interface to include something in your portfolio. Codepen.io features a lot of these.
A few ideas for parts of an interface that you could design:
- A contact us box
- A sign up flow
- A set of buttons
Codepen lets you embed pens right into your portfolio, with a toggle that allows viewers to switch between viewing your interface and your code.
The more relevant, the better
It’s helpful to keep the type of job you’re going to be applying for in mind when selecting your personal projects to work on. Ideally you want it to be something that they’re going to be impressed by and find relevant to the job you would be doing there.
Have fun building!