10 Tips for Awesome Portfolio Site For Web Developers

Adem Hodzic

Written by: Adem Hodzic

10 tips for awesome portfolio website for web developers

If you are a web developer you should probably have a portfolio site. Whether you want to land that dream job or jumpstart your freelancing career.

But if you know how to build sites doesn’t necessarily mean that you can design them.

Been there, done that.

So here are my 10 tips to improve your portfolio site and start landing offers.

Use Favicons

If you have ever had more than 10 tabs open at once you most probably navigated between the sites by checking out the logo in the corner of the tab.

That logo is called a favicon (I found out it’s pronounced fave-icon instead of fav-icon the other day). It’s amazing how much this little thing can make your website look more professional.

And no, you don’t need to hire a designer to make it for you.

You can use your logo and any favicon generator that’s out there like favikon.

Make It Responsive

A responsive site is a site that responds to the size of the screen it’s currently viewed on.

More than half of internet traffic is via a mobile device so your portfolio must look good on desktop, tablet and phone sizes.

Back in 2015, Google began rewarding responsive sites in terms of SEO.

It is also good for UX of your site.

And with the addition of features like flexbox and grid to CSS, it’s easier than ever to make your site responsive.

Use Semantic HTML

If you are anything like me you have probably used <div> for everything. But it’s a huge anti-pattern because it severely hurts accessibility of your site.

Accessibility (a11y) means that your website is designed and developed in such a way that it is approachable by people with disabilities.

This includes stuff like:

The web is made for everyone so it’s up to us, the developers, to make sure that it stays that way.

Free Domain & 50% off Shared Hosting

Use Text With Logos

If you are a developer you can probably guess at least 50% of logos in the image below.

Programming Logos

But guess what? Karen from HR has no idea what these are.

Jokes aside, not everyone is a techie.

You need to be transparent about your skills if you want to land a client/gig/job so use text besides logos in your skills section.

Keep It Simple

My three most visited sites are Reddit, 4chan and Hacker News.

These sites look like something that was designed back 2004 (Reddit recently went through a redesign).

So why do I keep coming back to them? Content.

You can have the fanciest website in the world as your portfolio but if there is no content it’s not that particularly useful.

It’s enough that your website is well-optimized, responsive, clean and accessible.

Fancy animations, amazing copy and stunning graphics are great but they can do more harm than good if not done correctly.

By keeping it simple and making key things correct you set your website for great success.

If You Can, Have Testimonials And Case Studies

Testimonial is a person’s written or spoken endorsement of a product.

In this case, the product is you.

You can ask your clients to give you a testimonial or ask them to use one of their compliments as a testimonial on your site.

Case Study is a document or a web page which contains an analysis of a project, identification of factors that have driven it to success and the strategy used to accomplish it.

This is what you write on your own without disclosing any critical information about the project without the client’s consent.

Here are some effects that they create:

Like What You're Reading?

Powered by EmailOctopus

Don’t Overuse Animations

I’ve seen so many developers trying to do animations to show off but the experience gets just downright annoying.

If you don’t know what you are doing with animations it’s better to stay with simple fade-ins and those very very short animations that serve as attention-grabbing technique.

Add Contact Information

You might think just because you’ve sent someone your portfolio website they will be only ones who will see your portfolio so they will have information on how to contact you.

Well, what if they send your website to their boss or share it with someone else?

Or what if your site ranks very well on Google and potential clients find you via Google Search?

This is why it’s important to put up some contact information on your website.

This one sounds so obvious but I’ve seen quite a few portfolios that don’t follow this tip.

Focus On Problem You Can Solve, Not What You Know

This is one of the core fundamentals of marketing.

Focus on the value your product brings and problem your product can solve rather than focusing on specific details of your product.

Instead of saying

‘I have X amount years of experience in Y technology’


‘I’ve used X technology in the past to solve Y problem’.

Marketing Examples has a great article on how to write great copy.

You can read it here.

Follow Some Basic UX Principles

You don’t have to be a genius to implement basic UX principles.

Some simple things you can do to improve the UX of your portfolio are:


These were my 10 tips you can do improve your portfolio website.

To reiterate, these things are:

I know you might not have time to put all these things to practice but these are just my recommendations on what you should do if you want to impress your potential employers.

If you have any suggestion please do reach me so we can discuss them.

“Quality means doing it right when no one is looking.” – Henry Ford

Like What You're Reading?

Powered by EmailOctopus