Five Common Mistakes Found on Frontend Portfolio Sites
By: Roxy A
Tags: Bootcamp, Career Advice, Freelancing, Coding Bootcamp Students, Frontend

Photo by Thought Catalog on Unsplash

As a front-end developer, having a portfolio site is crucial to your success. It is industry-standard to have a portfolio site.

Most job applications ask for your portfolio site. Some hiring managers do not consider applicants that do not have a portfolio site.

Your website is an ongoing showcase of some of your best work. As a developer, use your portfolio site to show what you know.

The first impression hiring managers have of you is often formed based on your portfolio site and resume. If those two do not impress — you may not be called for an interview.

If you are a bootcamp grad, having a compelling portfolio site is one of the most crucial ways you can get your application to stand out.

Here are five common mistakes found on frontend portfolio sites that you should avoid:

Creating your site using a template

As a front-end developer, you should have front-end development skills and a bit of an eye for design. This should be showcased on your portfolio site.

Your site should be made completely from scratch.

You are not showcasing your eye for design or development skills if you use a WordPress or Wix template. Many hiring managers can instantly recognize a template. Often, they are turned off.

You should design and develop a site that you proud of. Here are some web developer inspirational portfolio sites to get inspired.

On my site, I showed some personality through the use of cartoons/Bitmoji’s, a light-hearted font and copy.

Not using your skills on your site

While you can list all the skills you have, why not show them through your portfolio site.

You can incorporate some cool CSS animations and transitions on your site.

There are various CSS buttons you can use to take your site to the next level:

Not showcasing your work

As a front-end developer, whether you have work experience or not, it is important to showcase your projects.

Most developers with a few years of experience only put certain projects on their portfolio sites. They select the most unique, impressive or exciting projects to showcase on their site.

If you don’t have professional work experience, you can still add in projects you did while learning how to code.

Here are seven front-end projects you can do to include in your portfolio.

On my site, I included a project I did while doing a coding bootcamp. I designed and developed the front-end of an eCommerce chocolate site.

I have a few images on a slide show, the name of the company, my role on this project. After this I have a couple short sentences on what this project is about, my role and the technologies I used.

I added a button that opens this project/site on another tab. This project was deployed on Heroku.

Not Optimizing Your Site

With so many websites available at our fingertips, we need to create a website that will keep someone’s short attention span.

One of the biggest turn-offs is a site not loading. If a site takes too long to load, the user may click out of the tab and not go back to your site again.

To avoid that, there are a few ways to optimize your portfolio site:

Compress images. I have many images on my site and use Optimizilla to compress images. This online image optimizer uses a smart combination of the best optimization and lossy compression algorithms to shrink JPEG and PNG images to the minimum possible size while keeping the required level of quality.

I have many images on my site and use Optimizilla to compress images. This online image optimizer uses a smart combination of the best optimization and lossy compression algorithms to shrink JPEG and PNG images to the minimum possible size while keeping the required level of quality. Minimize and combine files. My site is built using SCSS which compiles all the CSS onto one file. If you built your site from scratch, it will likely run faster than many templates. Sites built using template builders often run slower because they have separate HTML, CSS and JavaScript on each page.

My site is built using SCSS which compiles all the CSS onto one file. If you built your site from scratch, it will likely run faster than many templates. Sites built using template builders often run slower because they have separate HTML, CSS and JavaScript on each page. Defer loading of JavaScript. This will make the JavaScript on your site run after the content loads. Check out this article on how to efficiently load JavaScript with defer and async.

Not being easy to contact

While this may be an obvious one — make sure your contact information is easy to find on your site.

I have an Email Me button placed at the bottom of my portfolio site.

On each page I mention that I am available for freelance work. I link to my LinkedIn, GitHub, Medium and Twitter accounts.

The button that gets you to send an email to me.