20 web dev portfolio project ideas to make your resume shine

If you don’t have much web development experience, and you’ll be looking for a job soon, you want to do everything you can to make yourself an attractive candidate for the positions that you’re interested in. That means polishing up the resume.

Want your resume to shine? Think about adding a “side project” to it.

A side project can be any software that demonstrates your skill. It doesn’t have to be super complicated, like the next Facebook or whatever. It’s just there to give hiring managers help in evaluating what you can do.

Unless you’re a masochist, you should focus on a side project in an area that interests you. If you create a project that builds a robot buggy using the raspberry pi, that’s definitely pretty cool… but if you’re going to be applying for web developer positions, you may lose out to someone else whose portfolio demonstrates web programming experience. So don’t go for something that’s got a million bells and whistles if it doesn’t interest you. Work on a project that you like. That way, it will be easier to work on it, and get it finished. And it will be more likely to lead to a job that you like.

If you’re having trouble coming up with ideas for side projects, here is a list of 20 different ones to help you get started, including links to example sites:

(1) A to-do list. Examples: https://todoist.com/ or https://www.rememberthemilk.com/

(2) A slugify tool: https://blog.tersmitten.nl/slugify/

(3) An online stopwatch, timer, or alarm clock. For example: https://www.online-stopwatch.com/

(4) A web shop which displays images from Amazon: https://docs.aws.amazon.com/AWSECommerceService/latest/DG/EX_RetrievingImages.htmlAmazon has a lot of APIs and SDKs – pick one that interests you and build something!

(5) A tic-tac-toe game https://playtictactoe.org/

(6) A simple login page which uses the Google login or Facebook login API

(7) A tip calculator e.g. https://www.calculator.net/tip-calculator.html or http://www.itipping.com/tip-calculator.htm

(8) A URL encoder or decoder https://meyerweb.com/eric/tools/dencoder/

(9) A histogram generator which plots a histogram from some input, e.g. https://www.socscistatistics.com/descriptive/histograms/ and bonus points for taking input from a Google Drive spreadsheet.

(10) A MadLibs game site, for example http://www.madlibs.com/

(11) A hangman game site https://en.wikipedia.org/wiki/Hangman(game)

(12) A web scraper https://www.webscraper.io/

(13) A site which consumes the MediaWiki API e.g. https://www.mediawiki.org/wiki/API:Picture_of_the_day_viewer

(14) Build an “echo” chat bot https://www.codersbistro.com/blog/chat-bot-microsoft-bot-framework/

(15) A word counter service https://wordcounter.net/

(16) Something like MindMapper https://www.mindmapper.com/

(17) Build a REST API that takes a zip code as input and returns the average income for that zip code using https://catalog.data.gov/dataset/zip-code-data

(18) A word cloud generator https://www.jasondavies.com/wordcloud/

(19) A URL shortener https://bitly.com/

(20) A bookmark (URL) manager https://pinboard.in/

As you develop your side project, think about the following things:

(1) Use version control from the get-go. Having a git commit history with informative comments demonstrates that you care about code maintenance.

(2) Plan things. Create a README and if possible draw some wireframes.

(3) Write unit tests.

(4) Maybe add documentation using a wiki.

(5) Include code documentation such as Javadoc.

(6) Keep a consistent naming convention.

(7) Use consistent tabbing/whitespace/source code formatting.

(8) Avoid code duplication. Copy/paste is lazy and leads to unmaintainable code – refactor!

(9) Think to yourself – is the code maintainable, organized, and easy to understand? If not, refactor.

(10) If possible, use a continuous integration (CI) system for deploying to a hosting service.

(11) Use tools to compute code coverage and code complexity.

(12) Validate user inputs and handle exceptions nicely.

(13) Do not ignore security! Have you avoided SQL injection and cross site scripting attacks? If this is a web app, make sure it’s secure by using HTTPS.

(14) Work together with someone else, if possible, to show you can work on a team.

(15) Be able to demo your software live during an interview.

(16) Be able to talk about it comfortably and answer questions about your design and coding choices.

(17) Avoid surprise bugs during the demo – make sure you have performed QA on your application.

Once you finish one project, you will probably want to start on another one. Over time, you’ll be able to show prospective employers a portfolio of working projects. This won’t guarantee you a job, but it will probably give you an edge over other candidates.

If you want some real world experience, I’ll be honest and tell you that I never had a portfolio of projects that helped me get a job. I came to software development as a STEM graduate (not computer science), and I relied on that background to help “ease” my way into dev work. In fact, it was not easy! I found that some computer science majors are very skeptical of people who make lateral moves into software. They assume the worst about your coding style and competency. When I look back, I wish someone had suggested to me that I build some small projects that would have helped to demonstrate my abilities, especially when finding my first job. I think my job searches would have been easier.

If you found this interesting, click the subscribe button below! I write a new post about once a week.

1 thought on “20 web dev portfolio project ideas to make your resume shine

  1. Pingback: Do you need a portfolio to get a software job? – Full Stack Oasis

Leave a Reply

Your email address will not be published. Required fields are marked *