<aside> ✉️ 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 entry-level 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!)

</aside>

• [ ] HTML
  • [ ] Non-semantic elements (<h1>, <p>, lists, links, <img> vs. <picture>)
  • [ ] Semantic elements (<header>, <section>, <nav>)
  • [ ] 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)
  • [ ] 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
  • [ ] 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)
  • [ ] 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