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.

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.

Grab images from their Foursquare & Yelp photo galleries to use on your website like I did with the one above (nice taco photography, Chris C).

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

Building a game is an especially great way to show off some Javascript skills and programming concepts.

Check out Phaser. It’s a free JavaScript game development library that will help you prototype out an HTML5-based game quickly, using common structural patterns. This massive Getting Started With Phaser article is a great place to begin and includes lots of game examples.

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
• A JavaScript gallery

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!