If you’ve recently started learning tech skills and are looking to get hired as a front end developer, it’s important to take time to build a portfolio showcasing your work. Setting up a portfolio might seem simple if you’re an artist or designer, but what does a front end developer portfolio look like? How do you show off your code and get employers interested in hiring you?

In this article, I’ll walk through:

• Why having a front end web developer portfolio is critical to your career in code
• How to start building your portfolio
• What projects to add to your portfolio
• How to describe your work
• How to get unstuck while building your portfolio

Why is your portfolio so important?

I’m a front end developer, and I learned to code through a bootcamp. After spending six days a week, twelve or more hours a day, for five months learning front end development, UI design, and UX design, I was ready to graduate and start working. But there was one thing left to do in order to complete my program — build a portfolio. At that time, I was fighting burnout and a substantial inclination to binge-watch every show I had put on pause for five months. Now, five years later, I could not be more grateful that I took the time to build a portfolio to showcase my projects and my new skills.

For one thing, having a portfolio can be critical to getting hired. Before the technical screens, take home assignments, algorithm problems on the whiteboard, and, finally, the wonderful call with your first job offer, you usually have to land an introductory call with a hiring manager. My portfolio has continued to help me get that first call and, to my great and pleasant surprise, land the offer. That’s because it helped me prepare to talk about my work and also conveniently share my work as more people were added to the interview panel.

Beyond landing jobs offers, a front end developer portfolio is also a work of self exploration, as you design elements of your brand and write about who you are and what you like. It has the potential to demonstrate your commitment to learning, too. Being willing to learn and explore is crucial to growing as a developer and also staying relevant. Technology can change quickly. I once took a two-week vacation to come back and find that ReactJS launched Hooks.

(back to top)

How to start building your front end developer portfolio

Make design decisions

The content of your portfolio is important, but so is the look and feel. Showing your attentiveness to design will set you apart because, as a front end developer, you are often responsible for delivering a great user experience.

After being heads down in code, it may be tough to transition into picking fonts, color palettes, and layouts. The most important question to ask yourself is: Is navigating between parts of my portfolio and accessing relevant information easy? If the main purpose of your portfolio is to land a job, make sure your project experience and contact information is easy to discover.

You can also tailor your portfolio design to compliment the projects you’ll feature without using a complicated layout. For example, Atriples Studio’s portfolio concept site for Y3 Sports Shoes uses a simple layout to highlight visuals.

Making your portfolio responsive or adaptive is also important when considering that you don’t know how your end users will be viewing your site. Planning for experiences across browsers and devices is also part of the job of being a front end developer, so use your own site to demonstrate that skillset.

Finally, when planning your site design, think about how and where you’ll feature yourself and not just your work. Having a picture and description about yourself can help people get to know the person behind the code. Many tech companies and teams prioritize work culture. Sharing your story and personality in your portfolio can help employers envision you working with the rest of the team.

📌 Related: How to Update Your Professional Online Identity (and Why It’s So Important)

Host your code in a public repository

As a front end developer, a portfolio is a place to show your code itself, as well as your projects, personality, and UI/UX sensibilities. Hosting your code on a public repository means pushing your development work for your portfolio to a platform where people can see your code, file structure, and any documentation you added. There are different platforms, such as GitHub, GitLab, and SourceForge to host your portfolio. I decided to use GitHub at the time I built my portfolio because it was and is the most commonly used platform.

These development platforms can display your contribution activities not only to your portfolio but also to any other public projects, which makes it easy for hiring managers to see what kind of projects you like to work on.

The chart of your contribution history on any of these platforms provides a great way to show you’re still actively coding while job hunting too.

Pick a tech stack to use for your portfolio

A tech stack includes the languages, frameworks, libraries and any tools you use to build a project. While building for yourself is an opportunity to have complete authority over what language, framework, and/or libraries to use to serve your own designs, there’s definitely potential for a lot of decision fatigue, especially around picking your tech stack — but it’s still important to spend time on it.

📌 Related: JavaScript Frameworks vs. Libraries — What’s the Difference?

One possible route is going with a modern framework that is widely used, like ReactJS. A practical route, especially if you’re new to coding, because common modern frameworks are usually well documented and have large supporting communities to help you troubleshoot issues. A popular framework may also help catch the eyes of hiring managers because you may have less difficulty onboarding if the organization uses the same one.

Another route to picking your languages or choosing libraries is to pick based on your site design and what you’re curious about. Going down this path is easier once you have a design in mind. For example, I wanted to include animations when a user hovers over a project tile to create a slightly more interactive experience, so I decided to learn more about CSS animations to improve my foundational knowledge of the stylesheet language.

I also wanted to include a slider of testimonials. With the help of my bootcamp instructor, we found a JS library to implement that had all the features I needed: easy forward and back navigation and an easy way to insert a background with text in the foreground.

Including a simple library, or JavaScript framework, is useful practice. Depending on where you work, you may have to research and gauge how hard frameworks, libraries, or tools will be to implement versus the difficulty of building the functionality from scratch. Even if you decide not to implement the library, getting practice reading documentation and interacting with the tech community is also beneficial to your growth as a developer.

(back to top)

Looking for projects to put in a front end developer portfolio?

Developers are not exempt from the brutal irony of needing experience to get experience. Luckily, with a computer and access to the internet, it’s possible for us to overcome this hurdle. Even before you’ve been hired there are plenty of ways to get experience on projects you can add to your portfolio.

📌 Related: How to Get Experience in Tech So You Can Apply For Jobs

Have you come across an organization’s site that was frustrating and left the user desiring for more? Ask them if you could support them with your coding skills and see how they can support you with a well-resourced and well-scoped first project, as well as a written recommendation.

During my time at the bootcamp, I had the opportunity to build a July fundraising page for a nonprofit organization. The project was well-scoped because it was a single page. It was well-resourced because I was going to jump into the HTML, CSS, and JS while an engineer from the organization would help hook the front-end up to the backend payment system. That meant I could learn while also not being overwhelmed.

Adding my bootcamp work to my portfolio was absolutely valid and helpful, as I talked through this project in a final interview and landed one of my first front end job offers. Learning how to scope and plan out an engineering project is a mark of a more senior engineer, so seek help when you need it, be wary when you’re handed large projects, and know your timeline.

Personal projects are great for portfolios as well. I’ve seen my colleagues work on things like To-Do list apps, chat apps, a tracker to stay up-to-date with TV shows, generating knitting pattern combinations, and numerous games. They picked a problem to solve or a hobby they could explore with their coding skills. During the interview process, they could talk about work they were actually excited about.

There’s probably someone else in your life also looking to have an online professional presence just like you. If you know someone looking to launch their music, acting, chef career, etc., help them design and build their site. It’s definitely a way to get more coding experience and also get to know people in your life better.

📌 Related: Should I Work for Free to Get Experience in Tech?

(I built a site for my brother-in-law who is a musician. I definitely learned a lot more about his process and style while also working on my Adobe Illustrator and JS skills.)

📌 Related: 10 Projects You Can Do to Build Your JavaScript Skills

(back to top)

How to describe your projects and experience

Usually, during the interview process, you will be asked to walk through a project you worked on. I found the walkthrough much easier after adding projects to my portfolio because I already had to describe in detail my role, team, process, and results.

Explain your role and responsibilities on the project

As a front end developer, most likely you will be working closely with designers, project managers, and product managers. Briefly explaining who was on your project team and how assets were handed off to one another will be telling of how you work with a team and how easily you can wear different hats if needed. Asking for client testimonials to vouch for you and the quality of your work is also helpful in reassuring your portfolio viewers how you would be an asset to any team.

Share what tools you used and what was the tech stack.

On the job, you may be handed a project to plan. You will have to make technical decisions regarding what to add or remove to the current stack. You may look into including third party libraries. Highlighting what you used and a quick description of why you did is useful preparation for interviews and also great for your own personal documentation of what you’ve explored.

Showcase the results of your work

There are many ways to judge the results of your work — page load time, number of visitors, revenue, user interactions, complexity of code. These are also helpful to keep in mind while you’re building. Regardless of what metric you use, showcasing and being able to talk about the results of your project can set you apart as a hiring candidate.

As a front end developer, you are responsible for the UI — so, if permitted, use screenshots to show the results. Also, for the UI of your portfolio itself, it’s important for users to quickly see what you have created. Sites go out of business and products are removed so getting these pictures promptly and often is important.

“Pet Plate’ project by Ian Lunn

Highlight what you learned

This is where you can list those courses you are taking and have taken that are relevant to you and your future clients. Other possible learnings to highlight could be challenges you came across during specific projects or specific quirks to a specific language/framework/library. I personally get a kick out of the type conversion of JS. “2” – 1 equals 1 but “2” + “1” equals 21. Yup.

(back to top)

How to get unstuck

If you are stuck on an issue, you’re not alone. There are communities like Stackoverflow, GitHub issues, Medium, or, most likely, the platform or organization that helped you learn to code. The documentation around a technology can provide helpful examples or lead you to a solution as well. Leverage that community around a technology or the larger developer community for a solution.

Picking colors, fonts, a layout, a hosting platform, and finally creating the content can be overwhelming, and it’s likely you’ll feel stuck at some point in the process. Having a deadline may help you make design and content decisions quicker to move forward. Once you’ve picked a deadline, you will know if you need to make the design simpler in some places to explore others. You can make those decisions by asking if you would be required to implement a library you’re unfamiliar with or you would have to dive deeper into a completely unfamiliar framework. You can prioritize what you want to learn the most in creating your portfolio while serving its overall purpose of communicating who you are and what you have worked on.

And if you’re feeling nervous, remember that you’re not limited to the decisions you make right now. This could be just version one of many for your portfolio. As you evolve, your portfolio can too. After all, a software development or engineering career is a journey of learning and iterating.

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals