Front-End web developers, there are some solid portfolio staples every web developer can pull from (think open source projects and a mix of hard and soft skills), and then there are some specialty-specific tips just meant for you. These are them, a handful of portfolio tips intended to help you slay interviews and showcase the awesomeness that you bring to companies and clients.
When we were searching the internet for kickass portfolio tips and speaking with experienced web developers on their advice, we stumbled across some front-end web development gold we had to share. Here it is:
What You’ll Learn:
- Kickass portfolio tips from experienced web developers, this time geared towards front-end web developers
- Front-End interview advice from an expert who’s been there
- And a bunch of relevant industry stats, research, and knowledge
1. Mention Project Descriptions, Focus on MVP Milestone(s) and the Building Process
When looking for development portfolio tips, we found that project descriptions are only the tip of the iceberg. “It doesn’t matter to me who they build the project for, or what the goal of the project was,” Chris Joel, Google Software Engineer and Former Cloudflare Front-End Development Lead, mentions.
What matters? Joel says, “To me, the project reached at least an MVP milestone, and that the candidate [can] go into detail about the process of building it from a technical and/or product design perspective.”
What’s an MVP?
Not sure what that three-letter acronym stands for? MVP means minimum viable product. It’s a tool that measures customers’ interest in the project vision using as little effort as possible. You’ll see this come up on GitHub, mainly in repositories, commits, and issues. One Redditor compares MVPs to baking; an MVP is the simple, one-layered cake, the final product is the multi-layered wedding cake decked with frosting and decorations.
Explain the “Baking Process”
Baking that single-layered cake, while not as fancy as the triple-decker wedding cake, is a necessary and essential accomplishment, worth discussing in your portfolio and interview, along with the “baking process” for MVP and final product.
Joel says, during interviews, he likes learning about these types of projects, “It [allows] [front-end] candidates an opportunity to demonstrate their passion and know-how with a subject that they are personally invested in.”
2. Demonstrate Your HTML and CSS Skills—Because They’re Fundamental
According to current front-end web development trends, HTML and CSS are passé, while JavaScript takes center stage. However, that doesn’t mean you should leave these fundamentals out.
For your portfolio, Joel advises showing at least one piece that demonstrates HTML and CSS expertise, “HTML and CSS are overlooked skills in this age of monolithic JavaScript frameworks. I usually look out for cleanly organized, concise CSS and markup that demonstrates…the candidate knew what they were doing when they wrote it.”
The Risk of Over-Relying on JavaScript
Of course, JavaScript is an important skill set to know; a JetBrains 2019 study showed, out of all programming languages, in the last 12 months web developers used JavaScript the most.
Using it to create effective, accessible sites is one thing; however, over-relying on JavaScript could hamper portfolio pieces and projects in general. “One tell-tale sign of over-dependence on JavaScript is complex UI widgets made entirely out of <div> (or similarly non-semantic, non-accessible) elements,” Joel says.
One solution to this: validate, validate, validate code using validation tools like, for HTML, https://validator.w3.org/nu/.
3. How Accessible Is Your Portfolio?
Accessibility is a huge portfolio must for front-end web developers. “Accessibility is making sure that your website can be used by a variety of people of different abilities,” says award-winning Senior Software Engineer, Dan Wood.
“Decent color contrast between the text and background for the several kinds of color-blind, [and] using the “Alt” property of each image that conveys information so that [people with visual impairment] who are using screen readers will know what the images are about…are important examples,” Wood states.
Just how big a deal is accessibility? Put it this way: Approximately 1.3 billion people worldwide live with some form of visual impairment. 1.3 Billion. And that’s only one segment of the population who may need a screen reader (if there’s access to IoT devices).
Prospective Employers and Clients May Test for Accessibility
For front-end web developers (as well as full-stack and back-end developers), know prospective employers and clients may test development projects for accessibility (and other user experience metrics like performance). “I will usually test out portfolio projects with a screen reader to get a sense of whether candidates spent time to ensure that their applications and content are accessible,” Joel says.
Accessible portfolio projects, Joel informs, will have well-structured, clean code and be interactive, navigable with keyboard control. “It’s not always possible to convince one’s employer that accessibility is worth the money to add to a project, but there should be at least one example to demonstrate the candidate’s accessibility know-how.”
Wood recommends web developers to consider including an indication of how accessible the site is (and how well it performs) in their project description (see, project descriptions can be an effective portfolio tool): “[This] would be useful to show to clients that this is something on their radar.”
Speaking of User Experience Metrics
Wood encourages web developers (including full-stack and back-end devs too) to keep performance in mind, “Research shows that people are impatient and may give up on a page that takes a long time to load.”
Performance can help with this, Wood says, advising developers to use online resources such as https://webpagetest.org, a tool created by AOL, now open sourced for 11 years, to test performance.
4. Showcase Your Visual Design Side
It doesn’t hurt to include portfolio pieces that show your design side (cue important note take). Joel urges front-end devs to show their strong visual design sensibilities whether they’ve personally done the design work or not (of course, brownie points for design skills):
“They should have at least worked closely on the project with a creative director or designer to execute the vision. These include projects with motion, strong use of color and typography and/or novel use of graphics API like Web GL.”
Web developers without such samples can gain experience from GitHub, searching repositories for design-themed projects.
So What?
One Redditor described front-end as the service-side of a restaurant, with servers taking orders and giving them to the kitchen. Now imagine no service in restaurants. You probably can’t because it wouldn’t be a functioning restaurant.
Put simply, our user experience and user interface wouldn’t be the same without front-end developers. There’s a huge demand and market for you—because we need you.
Any more kickass portfolio tips to share? Leave a comment!
The above comments are personal opinions and do not represent the view or hiring practices and policies of the organizations mentioned.