How do you create a frontend developer portfolio?

Good question right? And at this point, I can’t answer it.

But I do have a plan that may prove to be an answer.

Developer Job Listings

These have been my go-to source for information about what to include in a developer portfolio.

There are always loads of FE dev jobs listed so I started reading through some of the ones near me, but from companies or agencies that I think I’d like to work for – or who are just so well-known that I thought it was worth seeing what they’re looking for.

The plan then is to look at the sort of skills listed and work out how to show off those skills. And they are often just skills, not necessarily a portfolio that demonstrates those skills.

The Skills

The following lists of skills were found on Indeed. I’ve listed the advertising Agency/Company to add a bit more context to each of them.

The listings progressively get more and more detailed, which I think aligns fairly well with the size/reputation of the companies involved – though some still make me stop and wonder:

‘Here is a list of buzzwords to give you a flavour’

Err… OK?

These 4 lists’ of required skills will become the guidance I will use to narrow my focus and to be able to provide direction for research and the creation of ideas to demonstrate these skills.

 

The Job Listings

I found these whilst searching for ‘Frontend Developer’ roles in ‘Scotland’ using Indeed.

I’d imagine if you search for the same in your area, you should be able to find a similar range of posts.

As I progress my own learning, I will refer to these listings and highlight how they’ve shaped or influenced a particular approach.

 

1. UI/Front-end Developer – Screenmedia

Required skills and experience

  • SASS / CSS, HTML5 and CSS3
  • Task runners Gulp and Webpack
  • Assistive technologies for accessibility
  • Technology to support SEO best practices
  • Flexbox and CSS Grid.
  • JavaScript frameworks React, Vue or Angular.

 

2. Web Developer – Whitespace

Here is a list of buzzwords to give you a flavour:

LAMP, Craft CMS, Laravel, HTML5, jQuery, Webpack, Gulp, ES2016, Node, SASS, PHP, Composer, Varnish, Capistrano, macOS, GIT, Basecamp, JIRA, Slack.

Skills Required

  • Technical degree or equivalent work/life experience
  • Excellent English written and verbal communications
  • Experience hand-coding standards-compliant, accessible, and semantically correct HTML
  • Browser testing
  • Neat, efficient CSS
  • Responsive Web Design techniques
  • Modern Javascript
  • Modern PHP including frameworks such as Laravel or Symfony alongside – MySQL-
  • CMS knowledge – preferably in Craft or Drupal (but WordPress, Umbraco and Joomla! also handy)
  • Working understanding of caching and performance concepts
  • Experience using deployment tools
  • Experience using Sketch/Figma/Adobe XD or similar
  • Ability to multi-task and prioritise

 

3. Front End Engineer – Amazon

Basic Qualifications

  • Experience with object-oriented design
  • Professional non-internship experience with front end, web or mobile software development using JavaScript, HTML and CSS

Preferred Qualifications

  • Understand view layout and rendering technologies (e.g., responsiveness, progressive enhancement, browser/device support). Know when it is appropriate to make graceful fallback.
  • Understand the importance of testing front-end components and has experience with creating unit and integration tests related to the front-end components they develop.
  • Experience using Amazon Web Services (AWS) desirable
  • Able to demonstrate knowledge of front-end system design, interaction with backend APIs, and performance/security considerations.
  • Able to solve difficult software and UX problems with some ambiguity.
  • Pushes for information to avoid solving the wrong problem and mitigate UI risks early in the process to avoid feature delays. Can decompose a problem into clear software and UX design actions.
  • Experience delivering front-end software that is accessibility compliant (WCAG 2.1 AA)
  • Understand how to optimize the delivery of code and assets (e.g., images, fonts) to a browser or device (e.g., lazy loading assets, using CDNs, caching, compression, etc.).
  • Understand how to be efficient with resource usage (e.g., application impact on memory and CPU, caches appropriately, respectful of customer’s devices, etc.).
  • Experience building and using with design systems

 

4. Senior Front End Developer – PublicisSapient

Qualifications
Your Skills & Experience

  • 8+ years of industry experience.
  • 5+ years of experience developing large-scale web sites (>1000 pages); experience with web content management systems required.
  • Experience working with and maintaining design systems using technologies such as Storybook.
  • Expert level of experience with JavaScript, Typescript, and frameworks including such as Angular, React, and Vue.
  • Hands-on experience with state management tools such as Redux/Mobx.
  • Expert level of understanding with Node.js based tooling like Webpack, Grunt/Gulp, NPM, ExpressJS, Babel, Create React App, etc.
  • Experience producing and consuming RESTful micro-services.
  • Experience creating Node.js modules and scripts.
  • Experience working with responsive web designs across multiple platforms.
  • Experience with unit testing using frameworks such as Mocha, Chai, Enzyme, Cypress, or Jest.
  • Experience with behavioural testing using frameworks such as Cucumber.
  • Experience with content delivery networks and an understanding of web caching.
  • Experience with Drupal CMS preferred.
  • Experience with Jenkins and Docker a plus.
  • Excellent analytical and process-oriented skills.
  • Excellent verbal and written skills.
  • Experience in working on multiple projects simultaneously.
  • Ability to work collaboratively on multi-disciplinary teams (in a consulting firm or agency preferred).
  • Experience with mocking up proof-of-concepts based on wireframes.
  • Ability to learn new UI technologies quickly.
  • Experience with accessibility-driven design and Section 508 Compliance
  • Understanding of SEO and accessibility issues as they relate to the front-end.
  • Expert understanding of web markup, including HTML5 and CSS3

Set Yourself Apart With:

  • Experience working closely with design systems and design teams
  • Understanding of video, editing or animation would be a big plus
  • Experience working remotely
  • Experience working in React and Angular