Skip to main content

Frontend Roadmap

1 - 📄 HTML​

HTML (HyperText Markup Language) defines the structure and meaning of a web page. It’s where you describe content using semantic elements (like header, nav, main, section, article, button, form) so browsers, screen readers, and search engines understand what each part is. Good HTML improves accessibility, SEO, and maintainability by making the UI logical, consistent, and easy to extend.

2 - 🎨 CSS​

CSS (Cascading Style Sheets) defines how the HTML looks and behaves visually. It controls layout, spacing, typography, colors, and responsiveness through the cascade, specificity, and features like Flexbox, Grid, media queries, and CSS variables. Good CSS architecture keeps styles scalable and predictable (design tokens, utility classes, CSS Modules, BEM), helping teams ship consistent UI quickly without creating messy, fragile styling rules.

3 - 🟡 JavaScript​

JavaScript is the language that makes web pages interactive and dynamic. It runs in the browser to handle user actions (clicks, typing, gestures), update the UI without reloading, manage state, and communicate with servers via APIs (fetch, WebSockets, streaming). A strong JavaScript foundation includes understanding the event loop, async/await and promises, scope/closures, modules, DOM manipulation, and performance implications—so you can build reliable, responsive experiences at scale.

4 - 🐈 Git​

Git is a version control system used to track changes in code, collaborate with teams, and maintain project history in a structured and organized way. To make this history easier to understand and automate workflows, the Conventional Commits standard defines a clear, consistent format for commit messages (like feat:, fix:, and refactor:). With Conventional Commits, every commit message communicates the type of change introduced, the scope, and sometimes impact, making it easier to generate changelogs automatically, improve code reviews, and understand why changes happened. Combining Git with this convention leads to cleaner documentation, better communication across teams, more reliable releases, and a more maintainable long-term software evolution.

5 - 📡 HTTP Protocol​

HTTP is the application protocol browsers use to request and receive resources (HTML, CSS, JS, images, APIs). Understanding methods (GET/POST/etc.), status codes, headers, caching directives, cookies, content negotiation, and HTTP/1.1 vs HTTP/2 vs HTTP/3 helps you debug issues, design better APIs, and ship faster pages.

6 - 🌐 Networking​

The internet is a “network of networks” that moves small data packets between devices using shared protocols. Your device gets an IP, looks up server addresses via DNS, and packets hop through routers across ISPs (guided by BGP) to reach the destination. TCP/UDP/QUIC transport the data, TLS secures it, CDNs/cache bring content closer, and the browser assembles the bytes into the page you see—fast, reliable, and (ideally) secure.

7 - 🔺 GraphQL​

GraphQL is an API query language where the client requests exactly the data it needs, often reducing over-fetching and under-fetching. It introduces schemas and typed queries/mutations, and it changes how you think about caching, pagination, error handling, and performance (N+1, query cost, persisted queries).

8 - 🌍 Browser Engine​

A browser engine turns bytes into a UI: it parses HTML/CSS, executes JS, loads subresources, applies security policies, manages memory, and coordinates rendering. Knowing the major subsystems (parser, JS engine integration, networking stack, renderer/compositor boundaries) helps you reason about performance and tricky bugs.

9 - ⚙️ Web Rendering​

Web rendering is how the browser transforms DOM + styles into pixels: building the render tree, calculating layout, painting, and compositing layers on screen. This includes concepts like the event loop, task queues, and how rendering work can be triggered by JS, style changes, scrolling, animations, and user input.

10 - 🛤️ Critical Rendering Path​

The Critical Rendering Path is the sequence of steps the browser follows to convert HTML, CSS, and JavaScript into pixels on the screen. When a page loads, the browser parses the HTML and builds the DOM, parses CSS to build the CSSOM, then combines both into a render tree, calculates layout, and finally paints the content on the screen.

11 - ♿ Web Accessibility​

Accessibility (a11y) is building interfaces everyone can use, including people using keyboards, screen readers, or alternative inputs. It starts with semantic HTML and focus management, then expands into ARIA patterns, contrast, motion preferences, and testing against common WCAG expectations.

12 - ⚛️ React​

React is a UI library for building component-based interfaces with predictable state updates. Key skills include composition, hooks, rendering behavior, state vs derived state, data fetching patterns, routing, forms, and how to avoid performance pitfalls (re-renders, memoization misuse, expensive renders).

13 - 🧩 Design patterns​

Design patterns in frontend are repeatable solutions for common problems: composition over inheritance, container/presentational splits, controlled vs uncontrolled inputs, state machines, dependency injection boundaries, and scalable folder/module structures. Patterns help teams keep complexity under control as products grow.

14 - 🕹️ Design system​

A design system is a shared set of UI building blocks and rules that keeps a product consistent and scalable. It combines design tokens (colors, spacing, typography), components (buttons, inputs, modals), and guidelines (accessibility, usage, do’s/don’ts) so teams can build faster with less rework. In practice, it reduces UI fragmentation, improves UX quality, and makes it easier to maintain and evolve the interface across multiple pages and teams.

15 - 🧪 Testing​

Testing in software covers multiple layers and perspectives to ensure quality and reliability. Unit tests validate small, isolated pieces of logic, while integration tests verify how those pieces work together. End-to-end tests simulate real user flows across the full system. Visual regression tests ensure UI changes don’t unintentionally alter the layout or appearance. Accessibility testing checks if the interface is usable for people with disabilities, and security testing helps identify vulnerabilities and risks. Web Page Quality tests measure aspects like performance, SEO and best practices, and load and stress testing evaluate system behavior under high traffic or extreme conditions. Finally, mutation testing improves test robustness by purposely introducing changes in the code to verify that the test suite can detect failures effectively.

16 - ⚡️ Performance​

Frontend performance optimization is a critical area in web development, focused on improving the speed and efficiency with which resources are loaded and displayed in web browsers. This process aims to provide a smooth and responsive user experience by minimizing page load times and enhancing the interactivity and responsiveness of web applications.

To make more structured and actionable, we divide it into five key stages: Build Optimization, Critical Rendering Path, Network & Delivery, Runtime & Rendering, and Interaction & Responsiveness. Each stage focuses on a specific part of the user journey — from how the code is prepared to how users actually interact with the page. This layered approach makes it easier to diagnose performance issues, prioritize improvements, and build applications that feel fast and fluid for everyone.

17 - ❤️ Core Web Vitals​

Core Web Vitals are a set of performance metrics defined by Google that measure real user experience on the web, focusing on loading speed, interactivity, and visual stability. The main three metrics today are LCP (Largest Contentful Paint), which measures how fast the main content becomes visible, INP (Interaction to Next Paint), which tracks responsiveness when the user interacts, and CLS (Cumulative Layout Shift), which measures how stable the layout remains while loading. These metrics help developers quantify user experience in a standardized way and guide optimizations that improve usability, engagement, and search ranking.

18 - 🛡️ Web Security​

Web security is about preventing browser-based vulnerabilities and protecting users and data. Core topics include XSS prevention, CSRF defense, CORS behavior, secure cookies, CSP, safe DOM usage, and storage risks (localStorage/sessionStorage), plus secure handling of user-generated content.

19 - 🔐 Authentication Strategies​

Authentication is how you prove who a user is, and it shapes your whole frontend architecture. Common approaches include cookie-based sessions, JWTs, OAuth2/OIDC social login, refresh token rotation, silent re-auth, and multi-factor flows—each with trade-offs in security, UX, and implementation complexity.

20 - ⚔️ Cybersecurity Attacks​

Cybersecurity attacks are deliberate and malicious attempts by individuals or organizations to breach the security of another's digital systems. ⚠️ They're designed to exploit vulnerabilities for a specific gain, such as stealing sensitive data, disrupting services, or causing financial damage. Understanding the methods behind these common threats is the first and most critical step toward building effective defenses and securing our digital world.

21 - Frontend cybersecurity focuses on securing the code that runs in a user's browser. As a frontend developer, your primary responsibility is to protect users from attacks that exploit the client-side environment to steal data, perform unwanted actions, or inject malicious content.

21 - ☁️ Infrastructure​

Infrastructure is everything around your app that makes it reliably available: hosting, CDN, caching, CI/CD, environment configs, monitoring/observability, logging, and incident workflows. Understanding infra helps you ship safely, debug faster, and scale traffic without breaking the user experience.

22 - 📐 System Design​

Frontend system design is the skill of turning requirements into a scalable, maintainable architecture: choosing rendering strategies, data-fetching and caching, state ownership, module boundaries, security posture, performance budgets, and operational concerns. In interviews, it’s about trade-offs, clear APIs/contracts, and showing you can design for real-world constraints.