This Portfolio Hack Will Help You Get Hired as a Software Developer

How to Build Beautiful Projects for Your Software Development Portfolio

If you are a software developer applying to get your first job, having an outstanding portfolio should be one of your main priorities. Even though your resume is important and will be the first thing employers look at, your portfolio will be your secret weapon to stand out and show the complexity of the projects you have worked on.

However, even if you have built some really complex projects, if you can’t show them in a way that will get the employer’s attention, all your efforts will be in vain. To put it in simple words, if your portfolio doesn’t look good, you won’t look good in the eyes of the employer.

I know this because I help people from all around the world become software developers and get their first remote jobs. Every day, I see the huge impact that having a strong portfolio has on their chances of landing their first job.This is especially important if you want to get a job as a front-end or full-stack web developer. Your HTML & CSS skills are important, but you are ultimately supposed to build great UI/UX.

In a real job, there will most likely be a designer in your team that will take care of designing the UI/UX. However, you need to show that you can build beautiful products based on the specs of the designer.

But, how do you do that if you don’t have a designer to help you with your portfolio?

Here is the not-so-secret-now hack that we ask our students to use:

Build a few fully-spec’ed projects using someone else’s designs

If you want your portfolio to stand out, build a few beautiful-looking frontend projects that communicate your attention to detail and love for great UI/UX.

You could just copy any website that you like (such as Pinterest). However, it will cause a much better impression if you build something beautiful that not many people know about.

One approach is to visit dribbble.com and find a few concept websites that you can build. Many designers take the time to reimagine how certain websites would look like if they were built from scratch. However, those designs often don’t get implemented. Here is where you come in: just pick one and build it from scratch. Here are a few examples — and remember to link to the original designer if you follow this idea.

However, the problem with this approach is that most of those designs will have visual assets (for example, background images) that you can’t export to include in your implementation. Also, as a junior developer you are probably not great yet at paying attention to all the little details that the designer thought about (such as margins, paddings, font sizes, and so on).

Here is an alternative approach that will make your portfolio projects look as amazing as the original designs:

‍Find free Sketch templates, export them to Zeplin, and build them based on detailed specs

Let’s analyze this approach step by step:

Step 1: Download a free Sketch template

Sketch is one of the most popular design tools used by product designers nowadays. Just go to Google and search for free sketch templates website. Open a few of those results and find a website design that you want to build. Here is a great one I just found using this approach.

Now download and install Sketch (there is a free 30 day trial) and open the Sketch template you downloaded in the previous step with it. Unfortunately, Sketch is only available for Mac. If you are a Windows user, you can try Lunacy instead.

Make sure the design is complete and that it’s something that you want to build. Once you find a design that you like, move on to the next step.

Step 2: Export the design to Zeplin

Zeplin is another amazing tool built to help designers and developers collaborate more effectively with each other.

Designers upload their designs to Zeplin, and Zeplin shows all the font sizes, margins, and paddings so that developers can easily get those details without having any design knowledge. Zeplin even generates the CSS code for many of those components for you. Finally, it also lets you export all the images from the original Sketch file so you can easily use them when building the website.

Go ahead and sign up for Zeplin. You can use their free account that is valid for 1 project (that’s all you need). Now restart Sketch and go to the Plugins menu. If you see an option there called Zeplin, you are good to go. If you don’t see the option, follow these instructions to manually install the plugin.

Once the Zeplin plugin is installed in Sketch, go to Plugins > Zeplin and click on Export Selected Artboards. The Sketch design you have downloaded might have multiple artboards, each one corresponding to a different view of the app/website.

Follow the instructions and upload all the artboards you want to implement to Zeplin.

Step 3: Build the design based on its detailed specs

Open your recently uploaded designs in Zeplin and notice how many details you get when you hover on each element of the design. Since the design has been organized using layers in Sketch, Zeplin can differentiate each element and show you specs such as font sizes and spaces between elements.

If you want to export an image, click on the image in Zeplin and look for the option to download the PNG image on the right menu.

If you don’t see that option, go back to Sketch, click on the image you want to make exportable, and click on the option that says Make Exportable. After that, just re-upload the artboards to Zeplin and try again.

Finally, just use all these detailed specs and high-quality assets to build the website. And remember that great UIs are made out of hundreds of tiny details. Even though you might not appreciate those details individually, implement each one of them carefully using the specs from Zeplin and you will see how the final result looks more beautiful than anything you have ever built before.

Step 4: Add the finishing touches

Following this approach won’t just help you have a great portfolio that catches the attention of potential employers. It will also help you appreciate the great effort behind the work of designers, and it will make you much better at working with designers on your team. This, by itself, is also a great learning experience that employers will value.

You can follow this same approach to find existing portfolio designs to build your actual portfolio page. You don’t need the design your portfolio from scratch for it to be unique, you just need the content within it to authentic.

Remember to add all your previous projects to your portfolio, even the back-end ones. For those, try to use cards that show the title of the project with some cool font over a solid color or just a little piece of the UI of the project. That will make the design of your portfolio consistent.

Every project should list the technologies used and even a small description. More importantly, you should link to the live version of those projects (that’s where your new front-end projects will shine) and to the GitHub repos containing the code of your projects.

Finally, don’t forget to include your contact information, a link to your GitHub profile, and a list of other things that will make your portfolio unique (for example, open source contributions, articles you have written and anything else unique about you).

Wrapping up

Building an eye-catching portfolio is a really powerful hack, but don’t forget that you will ultimately have to pass technical and behavioral interviews in order to show that you can get the work done and get the job.

At Microverse, we ask our students to dedicate hundreds of hours of our online coding program to coding structures and algorithms and preparing for the interviews. Make sure to prepare yourself for that next step, too.

If you want to learn more about Microverse, and becoming a remote software developer, get started below.