<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
- [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)
- [ ] Accessible HTML (well-understood by screen readers)
- [ ] 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)
- [x] Understanding of Sass (mixins, loops, conditions, functions)
- [x] 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 ===
)
- [x] Truthiness and it’s quirks
- [x] 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
)
- [x] 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)
- [x] Cloning objects
- [x] 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
- [ ] Web
- [x] HTTP methods (POST, PUT, etc.)
- [ ] HTTP status codes (404, 400, 501, 200)
- [x] 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