<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>

Pink highlighted notes added later.

• [x] HTML
  • [x] Non-semantic elements (<h1>, <p>, lists, links, <img> vs. <picture>)
  • [x] Semantic elements (<header>, <section>, <nav>)
  • [x] Forms (<input> types, validation attributes, <input type=”text”> vs. <textarea>)
  • [x] Metadata (viewport metadata, open graph metadata, link to stylesheet, link to favicon, how to add Google Analytics or Tag Manager)
  • [x] Accessible HTML (well-understood by screen readers)
  • [x] SVG basics

• [x] CSS
  • [x] The box model
  • [x] Display value types (block, inline-block, inline, flex, grid)
  • [x] Positioning (static, absolute, fixed, relative)
  • [x] Selectors (a, .component, .component > a)
  • [x] Pseudo-classes (:hover, :active)
  • [x] Specificity, !important (and when to use !important responsibly)
  • [x] Responsive web design (@media queries, relative units like em, mobile-first design philosophy)
  • [x] Default stylesheet and reset.css
  • [x] Animation basics (@keyframes)
  • [x] Understanding of CSS frameworks and their trade-offs (experience with one preferred)
  • [ ] Understanding of Sass (mixins, loops, conditions, functions)
  • [ ] Understanding of BEM methodology

• [ ] JavaScript

  • [x] Functions
  • [x] Pass by value vs. pass by reference
  • [x] Values, types, and basic operators (arithmetic, assignment, comparison, difference between == and ===)
  • [ ] Truthiness and it’s quirks

  JavaScript 101: Truthiness

  • [ ] 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

• [ ] Web