Front-End Development Roadmap

Internet (optional)

• DNS
• Host
• HTTP
• Handshaking

HTML

• Basic
• SEO
• Form

CSS

CSS Preprocessor

• Sass
• PostCss (optional)

CSS architecture

• BEM
• OOCSS (optional)
• SMACSS (optional)

modern CSS (optional)

• CSS in Js (Styled component and styled JSX)
• CSS Modules

CSS Frameworks (optional)

• Tailwind

• Material UI

• Element UI

• Chakra UI

• Radix UI

  Resources

  • MDN
  • CSS for JavaScript Developers
  • CSS Trick
  • Smashing magazine

JavaScript

• javascript roadmap

  Resources

  • MDN
  • You Don't Know JS
  • Eloquent Javascript
  • javascript.info

SPA(Vue)

• Vue roadmap

SSR(Nuxt)

SSG

Web Performance

smashing magazine

TypeScript (optional)

Resources

• typescriptlang.org
• tutorialspoint.com

Git

• Basic
• Repo

package managers (optional)

• NPM
• Yarn

  resource

  • MDN

Build Tools (optional)

• Task Runners: npm scripts
• Module Bundlers: webpack, esbuild, Vite, Parcell

Linter and formatter (optional)

• Prettier
• ES Lint

Test framwork (optional)

• unit testing
• integration testing
• end to end testing
• performance testing
• ...
• confluence docs

Data Logs (optional)

• google analytics
• google tag managers
• webengage
• ...

PWA (optional)

• workbox

• manifest

• pwa configs

• access

  resource

  • Web.dev
  • MDN

HTTP Request

• axios
• ky
• got
• superagent

  Resources:

  • compare
  • trends

Clean code

• Writing Clean Code in JavaScript

Web components

• Shadow Dom

  Resources:

  • MDN
  • WEBCOMPONENTS.ORG

Web Security

• HTTPS ¹
• CORS ²
• Content Security Policy ³
• Session/Cookie ⁴
• AuthN/AuthZ ⁵
• Secret Key Management ⁶
• OWASP Security Risks ⁷

  Resources :

  • MDN
  • Martin Fowler: The Basics of Web Application Security

---

Resources

• https://roadmap.sh/frontend
• https://frontendmasters.com/guides/learning-roadmap/
• https://www.decipherzone.com/blog-detail/front-end-developer-roadmap-2021
• https://medium.com/emit-stories/frontend-developer-roadmap-2021-ff89e4bea685
• https://javascript.works-hub.com/learn/front-end-development-roadmap-b08ed
• https://vitto.cc/the-complete-front-end-developer-roadmap-2021/
• https://digitalya.co/blog/the-frontend-roadmap/

course

• https://www.udemy.com/course/the-complete-junior-to-senior-web-developer-roadmap/

junior to senior

• https://distantjob.com/blog/junior-front-end-developer-skills/
• https://medium.com/zerotomastery/dont-be-a-junior-developer-the-roadmap-9fde5cf384bb
• https://javascript.plainenglish.io/a-practical-guide-to-become-a-senior-frontend-developer-553ec50e2933
• https://www.cleverism.com/job-profiles/senior-frontend-developer/
• https://betterprogramming.pub/the-differences-between-a-junior-mid-level-and-senior-developer-bb2cb2eb000d

Image

Footnotes

1. HTTPS (HyperText Transfer Protocol Secure) is an encrypted version of the HTTP protocol. It uses SSL or TLS to encrypt all communication between a client and a server. This secure connection allows clients to safely exchange sensitive data with a server. ↩

2. Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any other origins (domain, scheme, or port) than its own from which a browser should permit loading of resources. ↩

3. Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. ↩

4. An HTTP cookie (web cookie, browser cookie) is a small piece of data that a server sends to the user’s web browser. The browser may store it and send it back with later requests to the same server. It is used primarily for session management. ↩

5. Authentication is the process of verifying who a user is, while authorization is the process of verifying what they have access to. ↩

6. Secrets management refers to the tools and methods for managing digital authentication credentials (secrets), e.g. passwords, keys, APIs, and tokens. ↩

7. The Open Web Application Security Project® (OWASP) is a non-profit organization that is proficient in the field of web application security. It provides the list of critical security concerns for web application security. ↩