If you are a junior web developer that's looking to get hired, you understand the importance of having a great portfolio website.
But do you know there could be landmines in your portfolio website that may prevent you from getting hired?
Today, I will share the top 3 mistakes I keep seeing on portfolio websites. Hopefully they'll help you improve your site and ultimately get you that offer you've been dreaming of.
At the end, I will be offering a 1 hour one-on-one consultation, during which I will go over your portfolio website, run an audit on it using our proprietary audit tool, provide you with improvement solutions & offer advice on your GitHub, LinkedIn & other social media.
Without further ado, here are the top 3 mistakes junior devs make on their portfolio website.
I know many devs, especially back-end devs, often cringe when I mention the word "design".
"A true engineer doesn't mess with CSS yo!"
 |
| Image on imgur by gwenekozh |
Okay your highness, get off your high horse and listen to me: No one likes an ugly website. As a developer looking to get hired, your job is to present yourself in the best way possible. Having an aesthetically pleasing website can not only exhibit your proficiency in CSS, but also make it easier for recruiters to find the information he/she is looking for.
Here are some of the most common design mistakes I see:
1. No left-right padding in the body. We rarely see websites with content expanding from the very left border to the very right border of the window. And there is a good reason for that. Having left & right padding in the body help create a visual focus on the main content of the page. It also leaves room for display ads if the website will be monetized. A good rule of thumb is to have 20%/15%/10%/5% left/right padding for the 4 device widths.
 |
| A good example of having left & right padding: SoundCloud.com |
2. No top-bottom padding in individual sections. It's important to have top & bottom padding in each individual section. They create clear separation & smooth transition between sections.
 |
| A good example of having top & bottom padding in a section |
3. Inconsistent margin between elements. It's important to have consistent margins between elements. For elements in a grid container, it's best to have the same grid-gap vertically and horizontally.
 |
| A good example of having consistent margins between elements |
4. Completely random & mismatching color palette. Many developers, including myself, have at some point fallen victim to the misuse of colors. This is understandable because coding boot camps and CS programs typically don't teach color theories. However, it is crucial for a website to have a consistent color palette. We all know that Coca Cola is red, Pepsi is blue, Amazon is yellow, Instagram is purple, etc. Color is an essential part of branding.
Here is a tool professionals use to build color palettes: Adobe Color
 |
| Adobe Color. A color wheel that helps you build color palettes |
A good rule of thumb is to have 2 colors that are complimentary to each other. One of them will be used as the main color for the site. The other color can be used on accent pieces, such as buttons, to create visual variety.
5. Not enough contrast between text and background. Not having enough contrast between text and background can cause annoying readability issues. Showing is better than telling. Look at the example below.
 |
| A bad example that shows a lack of contrast between text and background |
Here is a tip on how you can check the contrast ratio of your text. Open up the dev tool in Chrome. Select the text element you want to check. In the "Styles" panel, locate the color property in the CSS. Left click on the color icon, then the color tune dialog will pop up. You can use it to fine tune the text color, and Chrome will indicate whether or not the contrast ratio is adequate.
 |
| Contrast checker in Chrome dev tool |
6. Irregular font size & font weight. Font size and font weight help create visual hierarchy. Generally speaking, your font size and weight should descend in value, from title to heading to subheading to paragraph. Font size and weight also depend on the font-family you're using. A 15px, 600 weight letter in Roboto is going to be of a different size than a 15px, 600 letter weight Futura PT. Make sure you test thoroughly to ensure that the text content on your website has appropriate size and weight.
 |
| A good example of font size & weight |
7. Going overboard with a certain style. UI design can be nuanced. It certainly has a delicate balance. It's good to show off advanced designs, but make sure you don't overdo it.
Here is an example that shows different uses of the "box-shadow" CSS property. You can see how easily one can drift out of the sweet spot and make the element look worse.
 |
| A comparison between different "box-shadow" values |
8. Not having a responsive design. You'd be surprised to know how many devs out there don't yet know the necessity of having a device responsive design. Or worse yet, they're too lazy to do it.
 |
| Good examples of device-responsive websites |
When we build websites and web applications at 1 Stop Coder, we like to set these 4 media queries. We think they're adequate for most device screen resolutions.The ranges are:Desktops: @media(min-width: 1366px)Laptops(notebooks): @media(max-width: 1366px) and (min-width: 1024px)Tablets: @media(max-width: 1024px) and (min-width: 769px)Mobile: @media(max-width: 769px)
The tech lead in charge of the hiring process will likely review the source code of your portfolio website. Sure you're probably already doing a good job of not having any syntax errors. But there are a few extra miles you can go to impress the hiring managers. Here are some tips.
1. Beautify your HTML(or template engine files), CSS(or SCSS/LESS) & JavaScript(or TypeScript) files using a code beautifier. The VS Code extension we use is called "Beautify". Install it first. Whenever you wish to beautify a certain block of code, whether it's HTML, CSS or JavaScript, simply select the code and hit "Beautify selection".
Although the hiring managers aren't able to see your server side code, it's still a good habit to compartmentalize middlewares(for Node.js servers) and comment when necessary.
 | |
|
2. Use short & easy to understand comments wherever you can. Leaving comments in your code is a necessary habit to develop. They will make it easier for other developers to read your code. They will also help you quickly re-familiarize yourself with the code, should you need to revisit them in the future.
 |
| A good example of a JavaScript function with proper comments |
3. Use shorthand notation whenever you can. Shorthand notations not only reduce the lines of code in your JavaScript files, but also show that you're proficient with the language.
 |
| A good example of a shorthand notation of the if/else statement |
Search engine optimization is a subject that is rarely touched in coding boot camps and schools. Yet mastering SEO can bring tremendous benefit to your portfolio website. Recruiters may not just visit your portfolio website via a direct URL. They might land on your site from a Google search, which they will most certainly do.
Here are some tips I can give you to improve the SEO of your portfolio website.
1. Register your domain in Google Search Console. Google will expedite the crawling process if you register your domain in their search console.
 |
| Google Search Console |
2. If your website has multiple pages (paths), generate a sitemap & upload it to Google Search Console. You can use this website to generate a sitemap first. Serve the xml file in a path(usually /sitemap.xml). Then upload it to Google Search Console.
 |
| Sitemap submission in Google Search Console |
Another thing many developers don't realize is that during the hiring process, you're essentially "selling" yourself. You're trying your best to stand out from dozens of other devs who want the exact same job as you do. I'd like to offer these two advice, which I think could help differentiate you from the field.
1. Put call-to-actions such as contact buttons in the appropriate places. One trick we like to use is to put 2 floating buttons on the bottom right corner. One says "Download Resume", the other says "Connect on LinkedIn".
 |
| Portfolio site with call-to-action floating buttons on bottom-right corner |
2. Use unconventional, or even slightly sensational language to catch attention. Fortune favors the bold. It might pay off big time if you use some ballsy words. It can be a hit or miss. You have to be careful with the intensity. But if you hit it just right, you may just rub the right hiring manager just the right way.
You'll learn more tactics about optimizing your portfolio website if you schedule a consultation with me. During our session, we will:
1. Perform a thorough analysis on your portfolio site & your projects.
2. Perform a site audit using our proprietary audit tool.
3. Optimize your portfolio site to the maximum. Deep dive into some of the killer tactics & "WOW" factors.
4. Analyze your social media presence.
5. Answer any questions you might have.
Click the button on the bottom of the page to schedule. I look forward to having a discussion with you soon. Good luck with your dev journey!
J.N.