Junior Front end Developer Road Map

✉️ Welcome!

This is a comprehensive (and ambitious 🥵) list of things you might need to know to become a front-end Junior web developer.

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.

HTML

1. Non-semantic elements (<h1>, <p>, lists, links, <img> vs. <picture>)
2. Semantic elements (<header>, <section>, <nav>)
3. Forms ( types, validation attributes, vs. )
4. 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)
5. SVG basics

CSS

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

JavaScript

1. Functions
2. Pass by value vs. pass by reference
3. Values, types, and basic operators (arithmetic, assignment, comparison, difference between == and ===)
4. Truthiness and it’s quirks
5. The Document Object Model (getElementById, onClick, window.location.reload)
6. Data structures (Objects, arrays, arrays as queues, arrays as stack, Set) and how to manipulate them (loops, map, filter, reduce, Object.keys)
7. How to send and and handle HTTP requests using fetch
8. Promises and asynchronous programming (chaining promises, handling errors, awaiting multiple promises in order, await keyword)
9. Basics of regular expressions (matching characters, wildcards, anchors, quantifiers, greediness)
10. How to encode and decode text (base64, url encoding)
11. Cloning objects
12. ES6 syntactic sugar (arrow functions, destructuring assignments, object initializer shorthand, rest parameters, spread operator)
13. Prototypes (constructor functions and new keyword, this keyword, basics of prototypical inheritance)
14. Cookies, local storage, session storage

React (or equivalent)

1. Virtual DOM
2. JSX (syntax, JSX’s relation to React.createElement)
3. Props (when to use, prop drilling)
4. State (when to use, global state, avoiding unnecessary renders)
5. Lifecycle methods and/or Hooks
6. Uncontrolled vs controlled components
7. Refs
8. Class-based components vs functional components
9. Context API

Tools

1. Git (clone, add, commit, push, pull, branch, log, rebase)
2. GitHub (forking, pull requests)
3. npm (package.json, package-lock.json, upgrade)
4. Chrome Developer Tools (how to track requests, inspect storage, clear cache, preview website on mobile, simulate slow network)
5. Cross-browser testing tool like Browserstack
6. Visual Studio Code or equivalent (search, search and replace, refactor tools, productive extensions, productive shortcuts)
7. How to install and utilise HTML, CSS, and JavaScript linters
8. Precompiler like Babel
9. Any platform where you can deploy your website (GitHub pages, Netlify, Digital Ocean,Vercel)
10. Unix commands (cd, ls, mv, cp, rm, touch) or Windows equivalent
11. What is continuous integration?

Web

1. HTTP methods (POST, PUT, etc.)
2. HTTP status codes (404, 400, 501, 200)
3. JSON
4. Basics of REST methodology (motivation, principles, “rules”)
5. Basics of web security (HTTPS, XSS, CORS, how to fix a website with blocked mixed content) and familiarity with OWASP top 10
6. Authentication
7. Cookies (Session cookies, session ID, expiration)
8. Tokens (JWT, refresh tokens)
9. Basic computer networking (firewall, DNS, private vs public IP)
10. Client-side web sockets

Performance

1. Image optimisation (webp, png, ImageOptim)
2. Minification and bundling
3. Critical rendering path
4. What is server-side rendering?

Data structures and algorithms

1. Recursion and call stack
2. How to implement fundamental data structures (stack, queue, list, linked list, set)
3. How to implement fundamental algorithms like sort (bubble sort, heap sort, quick sort)
4. Rudimentary understanding of Big O

Testing

1. Unit testing and why it’s useful (mocking)
2. Testing tool (like Mocha or Jasmine)
3. Test-Driven Development (red, green, refactor)
4. Basics of integration testing

Software design

1. Refactoring (rule of 3, DRY)
2. Good principles (divide and conquer, reduce coupling, increase reusability, designing for flexibility, defensive programming)
3. Basics of diagrams (user flow, UML)