Loading roadmap structure…

~/roadmap

Learning progress and continuous skill telemetry tracked via roadmap.sh

Frontend Developer

Step by step guide to becoming a modern frontend developer in @currentYear@

Syncing progress...

$ notice :: mobile_viewport_detected

Interactive 2D graph view is optimized for desktop & tablet viewports. Showing simplified topic outline below.

Topic Outline Summary

120 topics

InternetPending

How does the internet work?Pending

What is HTTP?Pending

What is Domain Name?Pending

What is hosting?Pending

DNS and how it works?Pending

Browsers and how they work?Pending

HTMLPending

CSSPending

JavaScriptPending

VCS HostingPending

Version Control Pending

GitPending

Package ManagersPending

GitHubPending

GitLabPending

yarnPending

pnpmPending

npmPending

Learn a FrameworkPending

AngularPending

Vue.jsPending

ReactPending

SveltePending

Solid JSPending

CSS FrameworksPending

TailwindPending

Linters & FormattersPending

Module BundlersPending

ParcelPending

RollupPending

esbuildPending

VitePending

PrettierPending

ESLintPending

TestingPending

VitestPending

JestPending

PlaywrightPending

CypressPending

Auth StrategiesPending

Web SecurityPending

CORSPending

HTTPSPending

CSPPending

OWASP RisksPending

Web ComponentsPending

Type CheckersPending

Custom ElementsPending

HTML TemplatesPending

Shadow DOMPending

SSRPending

SveltePending

Vue.jsPending

AngularPending

ReactPending

react-routerPending

Next.jsPending

Nuxt.jsPending

SvelteKitPending

GraphQLPending

ApolloPending

Relay ModernPending

SSGPending

VuepressPending

Nuxt.jsPending

AstroPending

EleventyPending

Next.jsPending

PWAsPending

Mobile AppsPending

React NativePending

FlutterPending

IonicPending

Desktop AppsPending

ElectronPending

TauriPending

FlutterPending

SWCPending

AstroPending

BunPending

BiomePending

RolldownPending

Tanstack StartPending

DeploymentPending

GitHub PagesPending

VercelPending

CloudflarePending

NetlifyPending

RailwayPending

RenderPending

PerformancePending

LighthousePending

DevTools UsagePending

Service WorkersPending

Streamed ResponsesPending

Design SystemsPending

Web APIsPending

AccessibilityPending

Cache-ControlPending

Claude CodePending

CopilotPending

CursorPending

AntigravityPending

How LLMs workPending

AI vs Traditional CodingPending

Code ReviewsPending

Docs GenerationPending

Learn the BasicsPending

AI Assisted CodingPending

Prompting TechniquesPending

GeminiPending

OpenAIPending

AnthropicPending

Implementing AIPending

RefactoringPending

ApplicationsPending

AgentsPending

MCPPending

SkillsPending

Internet

How does the internet work?

What is HTTP?

What is Domain Name?

What is hosting?

DNS and how it works?

Browsers and how they work?

HTML

CSS

JavaScript

VCS Hosting

Version Control

Git

Package Managers

GitHub

GitLab

yarn

pnpm

npm

Learn a Framework

Angular

Vue.js

React

Svelte

Solid JS

CSS Frameworks

Tailwind

Linters & Formatters

Module Bundlers

Parcel

Rollup

esbuild

Vite

Prettier

ESLint

Testing

Vitest

Jest

Playwright

Cypress

Auth Strategies

Web Security

CORS

HTTPS

CSP

OWASP Risks

Web Components

Type Checkers

Custom Elements

HTML Templates

Shadow DOM

SSR

Svelte

Vue.js

Angular

React

react-router

Next.js

Nuxt.js

SvelteKit

GraphQL

Apollo

Relay Modern

SSG

Vuepress

Nuxt.js

Astro

Eleventy

Next.js

PWAs

Mobile Apps

React Native

Flutter

Ionic

Desktop Apps

Electron

Tauri

Flutter

SWC

Astro

Related Roadmaps

Bun

Biome

Rolldown

Tanstack Start

Deployment

GitHub Pages

Vercel

Cloudflare

Netlify

Railway

Render

Performance

Lighthouse

DevTools Usage

Service Workers

Streamed Responses

Design Systems

Web APIs

Accessibility

Cache-Control

Claude Code

Copilot

Cursor

Antigravity

How LLMs work

AI vs Traditional Coding

Code Reviews

Docs Generation

Learn the Basics

AI Assisted Coding

Prompting Techniques

Gemini

OpenAI

Anthropic

Implementing AI

Refactoring

Applications

Agents

MCP

Skills

Scroll inside the canvas container above to browse the full roadmap.

Done

Learning

Skipped

Not Started

Loading roadmap structure…

Frontend Developer Roadmap | Portfolio | Dimas Saputra

Frontend Developer

Step by step guide to becoming a modern frontend developer in @currentYear@

Syncing progress...

$ notice :: mobile_viewport_detected

Interactive 2D graph view is optimized for desktop & tablet viewports. Showing simplified topic outline below.

Topic Outline Summary

120 topics

InternetPending

How does the internet work?Pending

What is HTTP?Pending

What is Domain Name?Pending

What is hosting?Pending

DNS and how it works?Pending

Browsers and how they work?Pending

HTMLPending

CSSPending

JavaScriptPending

VCS HostingPending

Version Control Pending

GitPending

Package ManagersPending

GitHubPending

GitLabPending

yarnPending

pnpmPending

npmPending

Learn a FrameworkPending

AngularPending

Vue.jsPending

ReactPending

SveltePending

Solid JSPending

CSS FrameworksPending

TailwindPending

Linters & FormattersPending

Module BundlersPending

ParcelPending

RollupPending

esbuildPending

VitePending

PrettierPending

ESLintPending

TestingPending

VitestPending

JestPending

PlaywrightPending

CypressPending

Auth StrategiesPending

Web SecurityPending

CORSPending

HTTPSPending

CSPPending

OWASP RisksPending

Web ComponentsPending

Type CheckersPending

Custom ElementsPending

HTML TemplatesPending

Shadow DOMPending

SSRPending

SveltePending

Vue.jsPending

AngularPending

ReactPending

react-routerPending

Next.jsPending

Nuxt.jsPending

SvelteKitPending

GraphQLPending

ApolloPending

Relay ModernPending

SSGPending

VuepressPending

Nuxt.jsPending

AstroPending

EleventyPending

Next.jsPending

PWAsPending

Mobile AppsPending

React NativePending

FlutterPending

IonicPending

Desktop AppsPending

ElectronPending

TauriPending

FlutterPending

SWCPending

AstroPending

BunPending

BiomePending

RolldownPending

Tanstack StartPending

DeploymentPending

GitHub PagesPending

VercelPending

CloudflarePending

NetlifyPending

RailwayPending

RenderPending

PerformancePending

LighthousePending

DevTools UsagePending

Service WorkersPending

Streamed ResponsesPending

Design SystemsPending

Web APIsPending

AccessibilityPending

Cache-ControlPending

Claude CodePending

CopilotPending

CursorPending

AntigravityPending

How LLMs workPending

AI vs Traditional CodingPending

Code ReviewsPending

Docs GenerationPending

Learn the BasicsPending

AI Assisted CodingPending

Prompting TechniquesPending

GeminiPending

OpenAIPending

AnthropicPending

Implementing AIPending

RefactoringPending

ApplicationsPending

AgentsPending

MCPPending

SkillsPending

Internet

How does the internet work?

What is HTTP?

What is Domain Name?

What is hosting?

DNS and how it works?

Browsers and how they work?

HTML

CSS

JavaScript

VCS Hosting

Version Control

Git

Package Managers

GitHub

GitLab

yarn

pnpm

npm

Learn a Framework

Angular

Vue.js

React

Svelte

Solid JS

CSS Frameworks

Tailwind

Linters & Formatters

Module Bundlers

Parcel

Rollup

esbuild

Vite

Prettier

ESLint

Testing

Vitest

Jest

Playwright

Cypress

Auth Strategies

Web Security

CORS

HTTPS

CSP

OWASP Risks

Web Components

Type Checkers

Custom Elements

HTML Templates

Shadow DOM

SSR

Svelte

Vue.js

Angular

React

react-router

Next.js

Nuxt.js

SvelteKit

GraphQL

Apollo

Relay Modern

SSG

Vuepress

Nuxt.js

Astro

Eleventy

Next.js

PWAs

Mobile Apps

React Native

Flutter

Ionic

Desktop Apps

Electron

Tauri

Flutter

SWC

Astro

Related Roadmaps

Bun

Biome

Rolldown

Tanstack Start

Deployment

GitHub Pages

Vercel

Cloudflare

Netlify

Railway

Render

Performance

Lighthouse

DevTools Usage

Service Workers

Streamed Responses

Design Systems

Web APIs

Accessibility

Cache-Control

Claude Code

Copilot

Cursor

Antigravity

How LLMs work

AI vs Traditional Coding

Code Reviews

Docs Generation

Learn the Basics

AI Assisted Coding

Prompting Techniques

Gemini

OpenAI

Anthropic

Implementing AI

Refactoring

Applications

Agents

MCP

Skills

Scroll inside the canvas container above to browse the full roadmap.

Done

Learning

Skipped

Not Started