Web Development Skill Progression
Dec. 20th, 2021 07:08 pmI formed the following list of technical skills in front-end web development, helping to develop a career progression track for front-end devs at our company. When do you ask for a title change and a pay raise as a front-end web developer? And which skills do you talk about to justify it? At the higher levels your qualifications will mostly be leadership skills, not just the technical skills. But for the sake of length, I'm going to focus on technical skills here.
Some experienced devs might wonder why some things are not in an earlier level; like why does Local Storage and Web Sockets come so late? That's because the placement of a skill reflects the number of companies and projects likely to need it, more than it reflects its difficulty. And an employer might assign anything on this list to Junior Developers even if it's asking too much of them. That's based on the business need and whether a company can attract enough Senior Developers. So you just never know.
There's a lot to learn in front-end web development. So much that you will never need most of it at any given employer you are likely to work for (they'll all require different parts to a greater or lesser degree for different projects). Once you reach the level of a senior front-end developer, or close to it, there are plenty of high-dive boards in the "deep end of the swimming pool". Fortunately, the "pool" has a shallow end which gets deeper on a gradual slope. That's helpful for learning when you're starting out!
Some experienced devs might wonder why some things are not in an earlier level; like why does Local Storage and Web Sockets come so late? That's because the placement of a skill reflects the number of companies and projects likely to need it, more than it reflects its difficulty. And an employer might assign anything on this list to Junior Developers even if it's asking too much of them. That's based on the business need and whether a company can attract enough Senior Developers. So you just never know.
A lot of people will probably be upset that testing didn't come earlier, and by "earlier", I mean "first". Most companies will make lip service to testing, and then absolutely not allot the time in which to do so. Or they will do so on the back end, and not allot time for tests of the Javascript. On the one hand, every workplace is a better place to work if it has good test coverage. On the other hand, you won't be using it unless the company you work for is amazing. I'm tailoring this list of skills not to the creme de la creme who work for a Silicon Valley startup, but to non-technical people who are considering a career change and just want income security.
I like to divide technical skills into four major categories, each with a large number of skills: HTML, CSS, Javascript, and a smattering of miscellaneous things you're expected to do (version control, task runners, configuring DNS).
I also like to divide technical skills in those four categories into five levels: Associate, Level 1, Level 2, Level 3, and Senior Developer. Most companies have no level 3, but there's a lot to learn which should be rewarded with a change of title and a pay raise. With only three or four levels, if you tried to divide technical skills into a schema like the one I'm about to describe, skills within one level would be of such disparate difficulty that the schema would be incoherent. My point is, you're almost certainly underpaid compared to the amount of money you're making for your employer and the job market as it stands. Consider these levels accordingly.
Even within each level, there is a gradual slope. Each time you want a raise and promotion, you should get conversant enough to hold a conversation about most the things you need to know at the level you're aiming for, and be solid on a few of them, and passingly familiar with the rest. Also, make sure you're really solid on most of the things in the level you're looking to leave, and passingly familiar with the rest in your current level. And make very sure you've have mastered everything in the level behind you.
Level 1: Associate Developer
This is the stuff to teach yourself when you are just starting out. This is pre-Junior, mostly jobs placed through temp agencies working in content management systems.
For the HTML category, learn the following in this order:
- Gain the ability to use any HTML at all.
- Make an HTML form.
- Become passably familiar with conventions, best practices, and/or semantic markup.
- The top like five or six things about accessibility. Get the browser extension called Axe, run it on your page, and do what it says. This puts you ahead of a lot of professionals in accessibility. Learn the top like five things and it'll get you most of the way.
For the styling category, learn the following in this order:
- Gain the able to use any CSS at all.
- The Box Model.
- Floats and/or Positioning.
- Responsive design & media queries.
The scripting and miscellaneous categories have no skills in this level. You can get a job in which you never even use version control; you just click Publish in a content management system. You're not a Junior Developer yet.
Level 2: Junior Developer
For HTML, learn the following in this order:
- Rudimentary SEO (search engine optimization). Mostly just put <meta> tags in your page <head>. There is not much that can be done to improve SEO, and if someone says otherwise, it's a scam or dubious at best.
- At least 1 templating language (Razor, Jinja, Mustache, etc).
For CSS learn the following in this order:
- Grid.
- Flexbox.
- At least 1 preprocessor (Sass, Less, PostCSS, etc).
- At least 1 CSS-1st framework (Bootstrap, Materialize, etc).
For Javascript, learn the following in this order:
- Basic Javascript syntax (loops, functions, types, etc).
- DOM manipulation.
Miscellaneous:
- Learn any version control system (you should choose Git if you're given the choice) well enough to clone, pull, merge, & push.
Level 3: Intermediate Developer
HTML:
- At least 1 thing about security (HTTPS, CORS, CSP, etc).
CSS:
- Animations.
- At least 1 architecture (BEM, OOCSS, SMACSS, etc).
Javascript:
- Use breakpoints in browser developer tools.
- Fetch API/Ajax (XHR).
JS + CSS:
- At least 1 of Styled Components, CSS Modules, Styled JSX, etc.
- At least 1 of Reactstrap, MaterialUI, Tailwind, Chakra, etc.
Miscellaneous:
- Basic usage of any version control repo host (Github, TFS, etc).
- Put static files on a hosting service, buy/use a domain name, set up basic DNS for it.
Level 3: Still an Intermediate Developer
Javascript:
- Javascript version 6 features (AKA: "EcmaScript 6") including its modular JS features.
- Linters and formatters (Prettier, Eslint, etc).
- At least 1 framework (React, Angular, Vue, ect).
- Scope, hoisting, event bubbling.
- The Prototype concept in Javascript.
- The Prototype concept in Javascript.
Miscellaneous:
- At least 1 task runner (npm scripts, Gulp, etc).
- At least 1 module builder (Webpack, Rollup, Parcel, etc).
- At least 1 module builder (Webpack, Rollup, Parcel, etc).
- Stash/reset/squash (etc) with any version control system.
Level 4
Javascript:
- Local Storage.
- At least 1 state manager (Redux, RxJS, Vuex, etc).
- Web Sockets.
- At least 1 testing framework (Jest, Cypress, Enzyme, etc).
- At least 1 type checker (Typescript, Flow, etc).
- Shadow DOM and/or Web Components.
- Service Workers.
- Server Side Rendering (SSR) in any framework.
- GraphQL (Apollo or Relay Modern, etc).
Dev Ops:
- Measuring/improving performance (PRPL, RAIL, devtools, etc).
What do you think?