A portfolio is a great way to show off your skills to potential employers. And it's especially helpful for entry-level developers who might not have any professional work experience.
However, a common problem you might have when building a portfolio is knowing what to include in it.
Is the simple web page you built for a course good enough to put on your website? Do you have to only include projects you were paid for, or can you include even the smallest of things? Is there a 'right' number of projects to have?
The purpose of this article is to provide some guidelines to how to populate your frontend developer portfolio, by way of example projects.
Here's a quick summary of the projects we'll be covering in this article:
- A portfolio website
- A clone website
- A CRUD web application
- An API-connected website
- A 'perfect score' website
Note: this doesn't mean you have to build all these projects. This list is just to provide you with ideas on the sort of projects you can build.
Also, these projects are geared towards entry-level developers who've covered the basics of frontend development and are looking for slightly more advanced projects.
1. Build a Portfolio Website
So long as you've built your portfolio website by yourself, it's perfectly fine to include it in your projects list. If you tend to change your portfolio design regularly, you can also include previous versions.
When including a project in your portfolio, you're not only showing off your skills, but you're also explaining the mindset behind the design. And this is something that potential employers are usually interested in.
For frontend developers, explaining how you arrived at your chosen layout is just as important as having an aesthetically appealing design.
You can go further and describe the steps you took to ensure your website followed the best developer practices. For example, share how you focused on improving the SEO and performance of your site.
Resources and examples: This article by Laurence Bradford provides more information on the structure of a portfolio and includes examples of awesome web developer portfolios you can use as inspiration.
Recommended technology: For beginners, I'd recommend using HTML, CSS and vanilla JavaScript to build a portfolio, especially if it's the first time.
2. Build a Clone Website
Being able to accurately convert a design to a fully functional webpage is a skill every frontend developer should have.
To do this, you need to have a keen eye for layout and colours. You'll also need experienced-based knowledge such as knowing the best CSS display property to match a layout or being able to render an animation according to specification.
In most organisations, frontend developers are responsible for translating mockups and prototypes to webpages, so it's beneficial if your portfolio displays your 'design-to-code' skills. Building a clone website is a good way to do that.
There are two ways to go about building a clone website:
First, you can recreate an existing website. A common challenge for junior developers is cloning the Google homepage.
This method is particularly useful for understanding real-life applications of style choices in popular websites. You can inspect elements in the page and try to understand the methods used for the box-model, positioning, and display.
Second, you can recreate a design from scratch. For a more challenging project, you can look up designs on Dribble or Behance and attempt to translate the design to code.
To make this method more beginner-friendly, try recreating a simple page or feature such as a login form or weather app.
Recommended technology: Cloning the design of a website doesn't require any functionality, so HTML and CSS only would work fine. You can also use this time to familiarize yourself with a CSS framework or preprocessor such as SASS.
Note: all designs uploaded to these platforms are the copyrighted property of their owners, so you're not allowed to use them for commercial purposes. However, if you send them an email or leave a comment asking for permission to recreate the design for non-commercial purposes, the designer might be open to letting you recreate their designs for free.
It's also important to specify on your portfolio that the project is a cloned work or recreation of someone else's design.
3. A CRUD web application
Carrying out CRUD (Create-Read-Update-Delete) operations is a very common feature for most websites (like blogs, e-commerce, dashboards, and so on) so it's something you need to be accustomed to building as a front-end developer.
A basic form of a CRUD application is a To-Do List or a Notes webpage. Having one of these projects on your website shows your skill with manipulating data structures. It's also a good opportunity to display your work with a frontend framework.
Tania Rascia's article on working with local storage is a helpful introduction to learning how to create CRUD web applications with vanilla JavaScript. Or, if you want a more framework-specific article, check out the same author's article on Building A Crud App with React Hooks
Recommended technology: CRUD apps require use of reusable components so it's a good idea to build them using a framework such as React or Vue, depending on your familiarity.
Example site: React CRUD App with Hooks
4. An API-connected website
A lot of large scale projects require some sort of communication with a backend server and displaying data fetched from that server. This requires the use of an Application Programming Interface (API) in most cases.
An API is... I like to think of it as a digital librarian. Imagine having books stored in a library and you need to use these books for a report.
So, you go to the librarian and ask to check out a book. You need to tell the librarian certain keywords (let's say the name of the book and the name of the author) and have the right authorization (in this case, a library card) to get this book.
Now replace 'library' with 'server', 'books' with 'data', 'report' with 'website' and 'librarian' with 'API'.
APIs allow frontend developers to collect, modify and delete data from a backend database. Building a site that consumes an API to display data is a great project to include on your portfolio.
Example sites: You can choose to create a data display site (for example, a website that connects to a weather API and displays the current weather) or, for a more challenging project, you can set up a RESTful API and carry out the operations on your website.
5. A 'perfect score' website
A perfect score website is a website that scores 100% across all categories on the Chrome Lighthouse audit report. Building a website that meets all the required features shows your skill at following best practices and ensuring high quality projects.
You can read up on how to optimize your website for performance and accessibility to get a perfect Lighthouse score in this article How I Built My Perfect Score Portfolio Website.
Conclusion
So there you have it: 5 projects you can include in your frontend end portfolio. Also, these don't all have to be separate projects. You could create a perfect score cloned website or a CRUD application that uses an API to call data from a JSON file.
Now you can go forth and build. Happy coding :)
If you found this article helpful or if you have any questions, you can let me know on Twitter.