💼
Junior Web Developer Checklist
1.0
Junior Web Developer Checklist 1.0
1
✉
Welcome!
🥵
This is a comprehensive (and ambitious
) list of things you might need to
know to become a front-end Junior web developer in 2022, based on what I
learned speaking with newly-hired developers and Hiring Managers on The
Scrimba Podcast
.
🎙
It’s a template! So click Duplicate in the top-right corner to make your own
copy and fill it in.
As a rule of thumb,
If you check 50%, you have a excellent chance of succeeding in an entrylevel or intern position
If you check 70%, you can probably ignore the 2-3 years of experience
requirement present in many Junior job ads
If you check 100%, you should have started applying months ago! Don’t
worry, the second best time is now.
Skills highlighted in bold orange are non-essential/above and beyond.
🤫 P.S If you’re looking for an excellent learning resource that covers HTML,
CSS, JavaScript, and React at a hireable level, check out The Frontend
Developer Career Path at Scrimba.
All the best,
Alex from Scrimba (follow me on Twitter!)
Junior Web Developer Checklist 1.0
2
HTML
Non-semantic elements ( <h1> ,
Semantic elements ( <header> ,
<p>
, lists, links,
<section>
,
<nav>
<img>
vs.
<picture>
)
)
Forms (<input> types, validation attributes, <input type=”text”> vs. <textarea>)
Metadata (viewport metadata, open graph metadata, link to stylesheet, link to
favicon, how to add Google Analytics or Tag Manager)
Accessible HTML (well-understood by screen readers)
SVG basics
CSS
The box model
Display value types (block, inline-block, inline, flex, grid)
Positioning (static, absolute, fixed, relative)
Selectors (a, .component, .component > a)
Pseudo-classes (:hover, :active)
Specificity, !important (and when to use !important responsibly)
Junior Web Developer Checklist 1.0
3
Responsive web design (@media queries, relative units like em, mobile-first
design philosophy)
Default stylesheet and reset.css
Animation basics (@keyframes)
Understanding of CSS frameworks and their trade-offs (experience with
one preferred)
Understanding of Sass (mixins, loops, conditions, functions)
Understanding of BEM methodology
JavaScript
Functions
Pass by value vs. pass by reference
Values, types, and basic operators (arithmetic, assignment, comparison,
difference between == and === )
Truthiness and it’s quirks
The Document Object Model (getElementById, onClick, window.location.reload)
Data structures (Objects, arrays, arrays as queues, arrays as stack, Set) and
how to manipulate them (loops,
map
,
filter
,
reduce
,
Object.keys
How to send and and handle HTTP requests using
)
fetch
Promises and asynchronous programming (chaining promises, handling errors,
awaiting multiple promises in order, await keyword)
Basics of regular expressions (matching characters, wildcards, anchors,
quantifiers, greediness)
How to encode and decode text (base64, url encoding)
Cloning objects
Junior Web Developer Checklist 1.0
4
ES6 syntactic sugar (arrow functions, destructuring assignments, object
initializer shorthand, rest parameters, spread operator)
Prototypes (constructor functions and
new
keyword,
this
keyword, basics
of prototypical inheritance)
Cookies, local storage, session storage
React (or equivalent)
Virtual DOM
JSX (syntax, JSX’s relation to React.createElement)
Props (when to use, prop drilling)
State (when to use, global state, avoiding unnecessary renders)
Lifecycle methods and/or Hooks
Uncontrolled vs controlled components
Refs
Class-based components vs functional components
Context API
Tools
Git (clone, add, commit, push, pull, branch, log, rebase)
GitHub (forking, pull requests)
npm (package.json, package-lock.json, upgrade)
Junior Web Developer Checklist 1.0
5
Chrome Developer Tools (how to track requests, inspect storage, clear cache,
preview website on mobile, simulate slow network)
Cross-browser testing tool like Browserstack
Visual Studio Code or equivalent (search, search and replace, refactor tools,
productive extensions, productive shortcuts)
How to install and utilise HTML, CSS, and JavaScript linters
Precompiler like Babel
Any platform where you can deploy your website (GitHub pages, Netlify,
Digital Ocean,Vercel)
Unix commands (cd, ls, mv, cp, rm, touch) or Windows equivalent
What is continuous integration?
Web
HTTP methods (POST, PUT, etc.)
HTTP status codes (404, 400, 501, 200)
JSON
Basics of REST methodology (motivation, principles, “rules”)
Basics of web security (HTTPS, XSS, CORS, how to fix a website with blocked
mixed content) and familiarity with OWASP top 10
Authentication
Cookies (Session cookies, session ID, expiration)
Tokens (JWT, refresh tokens)
Basic computer networking (firewall, DNS, private vs public IP)
Client-side web sockets
Junior Web Developer Checklist 1.0
6
Performance
Image optimisation (webp, png, ImageOptim)
Minification and bundling
Critical rendering path
What is server-side rendering?
Data structures and algorithms
Recursion and call stack
How to implement fundamental data structures (stack, queue, list, linked list,
set)
How to implement fundamental algorithms like sort (bubble sort, heap sort, quick
sort)
Rudimentary understanding of Big O
Testing
Unit testing and why it’s useful (mocking)
Testing tool (like Mocha or Jasmine)
Test-Driven Development (red, green, refactor)
Junior Web Developer Checklist 1.0
7
Basics of integration testing
Software design
Refactoring (rule of 3, DRY)
Good principles (divide and conquer, reduce coupling, increase
reusability, designing for flexibility, defensive programming)
Basics of diagrams (user flow, UML)
Junior Web Developer Checklist 1.0
8