This list is simplified from roadmap.sh/frontend.

Internet

• Domain Name

• The Domain Name System (DNS)

• Basics of SEO

CSS - CSS pre-processors

• Making layouts

• Responsive Web Design

  • Grid

  • Flexbox

• CSS pre-processors - SASS

  • CSS Pre-processors Explained

  • Why Use Pre-processors?

  • Media Queries

  • sass-lang - mixin

  • sass-lang - function

JavaScript

• DOM Manipulation

  • DOM tree - https://javascript.info/dom-nodes

  • What are DOM, Shadow DOM and Virtual DOM? - https://www.youtube.com/watch?v=7Tok22qxPzQ

  • JavaScript Fetch API - https://www.javascripttutorial.net/javascript-fetch-api/

• ✨♻️ JavaScript Visualized: Event Loop - https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

• 🚀⚙️ JavaScript Visualized: the JavaScript Engine - https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf

• ⭐️🎀 JavaScript Visualized: Promises & Async/Await - https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke

• JavaScript ES6, ES7, ES8

• var, let and const - 🔥🕺🏼 JavaScript Visualized: Hoisting - https://dev.to/lydiahallie/javascript-visualized-hoisting-478h

Web Security Knowledge

• ✋🏼🔥 CS Visualized: CORS - https://dev.to/lydiahallie/cs-visualized-cors-5b8h

• HTTPS

• OWASP Security Risks

Package Managers

• npm

• yarn

• pnpm

Build Tools

• Linters formatters

  • Prettier

  • ESLint

• Module Bundlers

  • Vite

  • ESBuild

  • Webpack

Framework basic concepts

• Vue - Nuxt.js

• React - Next.js

• Angular - need more time to learn

Modern CSS

• Styled components

• CSS Modules

• Emotion

CSS frameworks

• Tailwind CSS

Unit Test

• Jest

Authentication Strategies

• Basic Authentication

• Session Based Authentication

• Token Based Authentication

• JWT Authentication

• OAuth

• SSO

Type Checkers

• TypeScript: basic syntax

Progressive Web Apps

• Web Storage API

• Web Sockets

• Apply instant loading with the PRPL pattern

Use development tools:

• Browser DevTools

• Browser Lighthouse

Building type

• Single Page Application (SPA)

• Server-side rendering (SSR)

• Static Site Generators (SSG)

• Incremental Static Regeneration (ISR)

More detail at:

• What is the Difference Between SPAs, SSGs, and SSR?

• What does CSR, SSR, SSG and ISR means and why should you care?

Mobile applications (option for a web developer)

• React Native

• Ionic framework