You want a job in web development, but you don’t have any experience? It’s always worth mentioning, all software engineers have been there.
Most job descriptions require a certain number of years of developer experience, and it always seems unfair to recent graduates and career switchers who have no professional experience. The struggle is real, and more often than not, fresh bootcamp graduates’ portfolios get passed over.
There is a lot of competition in the job market, but this article will guide you on how to put together the perfect portfolio.
There are five aspects of creating a junior web developer portfolio that we focus on in this article:
- Finding good projects to include in a portfolio
- Telling the story behind the examples that you include in your portfolio
- Development examples you shouldn’t add to your portfolio
- Things to avoid when building your own web developer portfolio
- Creative design tips for a good web developer portfolio
How do you find ideas for what to include in a web developer portfolio?
1. Fixing a specific feature of an existing product
Take a look at the applications and websites you use on a daily basis.
It could be the apps you know lots of other people use too. Consider the problems you have with these apps, what slows you down or doesn’t quite do exactly what you need. Don’t just rely on what you think, either.
Do a quick Google search and find out how other people feel about the features you’re thinking about.
After this, try to brainstorm some ideas for a stand alone app or website to add to your personal portfolio that could do this specific task better, and figure out the trade-offs of various solutions. Then go ahead and redesign the product to add to your web developer portfolio.
Make sure your redesign is not only amazing but has solved a problem.
It is also important to remember that your redesign is unsolicited; hence you need to have some humility because it can prevent you from landing on comments like “your sense of style sucks” and instead land you a good web developer job at a great company.
2. Customize your web developer bootcamp work to make it yours
A classic bootcamp portfolio hack is to take personal projects that were previously built, such as websites and applications that were built during your course work, and try to reimagine them.
There are a lot of ways you can do this, but some ideas we’ve seen work, again and again, is taking a basic CRUD app and putting your own spin on it for your web developer portfolio.
A full stack todo list can be a goal tracker or gift registry, and a fizzbuzz calculator can become a savings or investment calculator. If you have a few basic apps and a little imagination, the ideas are really endless.
3. Look for nonprofit and open source work
This is another great option to fill your portfolio. As a recent graduate, you can find non-profits that need volunteer web development or find open source projects. These kinds of opportunities can help you build up your skills as you gain the necessary web development skills. Check out our favorite list of first PR opportunities.
Once you have enough examples of your work in your portfolio, make sure you go the extra mile and add features that will get the attention of hiring managers, and help you come up with good resume bullets, and give your work a more professional polish.
Check out the video below for ideas on how you can update them and add them to your portfolio website before you start applying for web developer jobs.
What should be included in your portfolio project section?
This is such a crucial step in building your portfolio. Most junior programmers make the mistake of describing the work they showcase on their web developer portfolio in a way that most readers cannot understand. Your portfolio project descriptions should feel like a story. You can include information like the following:
- Reasons you built this personal project
- Problems the project solves
- Tradeoffs that you made while creating the project
- Who the project was made for and why they need it
- Some screenshots of the project
- A link to the live-hosted project
- A link to the project’s GitHub README
Speaking of GitHub, you should also consider adding similar content to the GitHub README for each project in your portfolio.
You should think of your README as another place where hiring managers can review your skills and learn about you. For more ideas on what to add to your project’s GitHub README file, check out makeareadme.com.
What should you never include on your portfolio website?
You might be thinking, “I’m a beginner. Shouldn’t I add in as many examples as possible to my web developer portfolio?” That’s where you would be wrong. There are some things that should never appear on any portfolio, so do not make the mistake of adding them to your web developer portfolio.
1. Tutorials or standard bootcamp projects
The portfolio website and everything you built in your web developer bootcamp was great for learning how to develop websites and applications, but they generally are not great examples of mastery or show enough initiative to hiring managers.
That said, you can always remix them and put your own personal spin on them. It’s totally fine to take these as an example of a base you can build and create on top of.
So if you are running out of time and need to add some more content to your web developer portfolio, consider revamping your student work and make it professional enough to add to your portfolio.
2. Previous work that wasn’t related to web development
It’s usually a bad idea to share work that’s unrelated to web development on your portfolio.
I get it. You are still fresh out of school, and your first job may have been design-related. You minored in Art and have a poster or a party flyer you designed in college that looks pretty good.
Meanwhile, you look at your coding examples and feel you have nothing you can put in your portfolio that fills you with the same sense of achievement. As tempting as it may be, you shouldn’t do this.
3. Clients that talk you into doing free work to add to your portfolio
Be careful out there. While you’re looking for a job you may be tempted to work for a business free. This doesn’t work out for most In cases if you are not familiar with them, or the opportunity isn’t coming from an organization that typically helps developers launch their careers.
These types of scenarios are the ones where the clients don’t pay but instead describe the work as “an excellent example for your portfolio.” These clients tend to have little respect for your work and even less for your time. Such work is usually doomed from the start, so they are not worth the risk.
4. Work experiences that did not end well for the web developers involved
There are sometimes situations like these, where things usually start to go sideways or abruptly end halfway through. Maybe you had to quit due to a toxic situation, or the collaborators you worked with ghosted you. Possibly, scope creep took over and everyone just ran out of time.
Including unfinished-looking or any broken applications in a professional web developer portfolio will have prospective recruiters running away from you. You may have your reasons for ending the project, but most hiring managers will be wary and pass immediately if they see lots of errors on your projects or things just aren’t making sense to them.
If you have control of the codebase, and the project is worth salvaging with a little more development work, clone it and fix what isn’t working. Cut features that were never finished, clean up the project, and spend a day creating a solid landing page to introduce the project and come across professionally.
Things to avoid when building your first web development portfolio
Too much or too little work
Including too many web developer portfolio examples on your portfolio can overwhelm your website visitors. While too little, even if it’s a great example, can defeat the purpose of your portfolio. Three or four examples of your work are usually enough for most portfolios.
Lack of context
Potential employers and clients need to see and understand your work, and this is why you need to give them plenty of context about the kind of skills you have what sort of development you want to focus on. Are you a front end developer, full stack, or more interested in the back end?
Try adding more information to aid the interactive experience of your website and applications. Remember to tell stories as we talked about earlier.
What about you should most hiring managers to know? What are your areas of interest and expertise? Can you find that out with just a quick glance at your web developer portfolio site?
Overly complicated web design layouts, navigation, too many colors, and other distracting elements on each page of your website
Avoid complex styling and keep it simple when building your portfolio, exploring web design inspiration, and including examples of your web development work. If you’re a front end developer, make it easy for your potential clients and employers to understand your work and view your website as a showcase of the talent and development services you offer, and don’t let overly creative web design get in the way.
Having no way to get in touch with you on your developer portfolio website
Your portfolio website may be perfect, but you will never get the job if you have not indicated how you can be contacted. Remember to add a link to your email address, GitHub, and LinkedIn profiles, and consider embedding a contact form in addition to having your contact information present on the web developer portfolio website.
Making it too hard to update your web developer portfolio
Once you create your portfolio, you don’t just leave it at that. It should evolve with you, so you will need to keep updating it regularly. Some developers like to use static site generators like Gatsby, but you could use anything as long as it’s something you won’t hesitate to jump into and update later.
Online portfolio web design tips for web developer portfolios
Be consistent with the design of your web developer portfolio
If you use bold colors or bold typography, be sure to stick with that unique style on the portfolio homepage and every other page. If you are the kind of web designer who likes a more minimalist approach,
Show attention to detail as a web developer
If you want to be a software engineer, especially a front end developer, you need to display an intense level of attention to detail to come across as a professional with skills to create marketable work. Online portfolios with typos and broken links are always rejected when competing against web developer portfolios without such minor but totally avoidable issues.
Be proud of your web developer portfolio site
Don’t send your web developer portfolio link out until you’re not afraid of other web developers judging it. Get a professional custom domain. This isn’t just your personal website or blog, this is your portfolio website, your very own portfolio, and you need a lead developer or other potential employers of all technical skill sets to look at your portfolio homepage and immediately see a new developer, regardless of your educational background or lack of experience as a software developer.
Ask a UX engineer or creative designer to review your portfolio website
There is no shame in being a lackluster web designer when you’re a web developer, but at the same time, that doesn’t mean you shouldn’t try and find inspiration or let your portfolio website be a bad example. The interactive experiences you create need to showcase your skill sets, compliment your resume, and quickly let people know the kinds of services you hope to deliver. If a good designer can’t tell much about you from reviewing your portfolio homepage, this should be an eye catching showstopper that your online portfolio isn’t ready, and it should inspire you to improve. Have them review your web developer portfolio examples, and the navigation menu items on your developer portfolio as well to ensure you aren’t being too clever and confusing to visitors.
Test all of your web developer portfolio examples and your portfolio website on tablet and mobile devices.
Solid performance and page speed on a web development portfolio is a great way to spot a professional web developer. If you are using a one page portfolio approach with parallax effects and scroll jacking, consider disabling those on the mobile version of your developer portfolio. Run your site through Google’s Pagespeed Insights tool and look for ways to improve your web developer portfolio page speed performance metrics.
Final thoughts
As much as you hope your professional web developer portfolio website will one day come across as perfect, remember you are just at the beginning of your career.
Do not overload your portfolio simply for the sake of showing off your work but focus on building your portfolio strategically in a way that it remains to be a way for other people to learn about you as a designer.
These tips will help you build a portfolio if you’re a recent coding bootcamp graduate looking for an entry-level software engineering job.
