11/18/23, 6:51 AM Frontend Developer Roadmap: What is Frontend Development?

Roadmaps Best Practices Teams NEW ⌘K Login Sign Up

PARTNER Get the latest Frontend news from our sister site TheNewStack.io

Create your own version of this roadmap

Frontend Developer
Step by step guide to becoming a modern frontend developer in 2023

← All Roadmaps Share Download Suggest Changes

0% DONE 0 completed · 0 in progress · 0 skipped · 123 Total Track Progress

What is Frontend Development?

TIP Right-click on a topic to mark it as done. Learn more.

https://roadmap.sh/frontend 1/9
11/18/23, 6:51 AM Frontend Developer Roadmap: What is Frontend Development?

Personal Recommendation / Opinion For resources and other roadmaps

Alternative Option - Pick this or purple https://roadmap.sh
Order in roadmap not strict (Learn anytime) Are you just getting started?
I wouldn't recommend
Front-end Visit the Beginner Version

Internet How does the internet work?

What is HTTP?
TIP Right-click on a topic to mark it as done.
Learn the basics
What is Domain Name?

https://roadmap.sh/frontend 2/9
11/18/23, 6:51 AM Frontend Developer Roadmap: What is Frontend Development?

Writing Semantic HTML

What is hosting?

HTML Forms and Validations

DNS and how it works?

Accessibility
Browsers and how they work?

SEO Basics

Git

CSS Learn the basics Learn the Basics

Version Control Systems

Making Layouts Learn DOM Manipulation

VCS Hosting
Responsive Design Fetch API / Ajax (XHR)

GitHub

JavaScript
GitLab

Bitbucket
We have trimmed down the CSS part for the sake of brevity.
However, I would recommend reading about CSS in JS,
React
CSS Modules, Styled Components, Vanilla Extract, Panda CSS npm

and look into different frameworks with pre-built components Vue.js

pnpm
such as MUI, daisyUI, Chakra UI and Mantine.
Angular
yarn

CSS Architecture Writing CSS Pick a Framework Package Managers

BEM Tailwind Svelte

TIP Right-click on a topic to mark it as done. Vite
Parcel

Radix UI Solid JS esbuild

Webpack
https://roadmap.sh/frontend 3/9
11/18/23, 6:51 AM Frontend Developer Roadmap: What is Frontend Development?
p

CSS Preprocessors Qwik Webpack

Webpack

Shadcn UI Rollup
Rollup

Sass Module Bundlers Parcel

Parcel

PostCSS Task Runners npm scripts

Build Tools Linters and Formatters Prettier

ESLint

Authentication Strategies Testing your Apps Vitest

JWT, OAuth, SSO, Basic Auth, Session Auth etc
Jest

Playwright
Web Security Basics CORS HTTPS Learn the difference between Unit, Integration,
and Functional tests and learn how to write
Cypress
Content Security Policy them with the tools listed on the right.

OWASP Security Risks

Next.js

React Remix
HTML Templates
Angular Universal
Web Components Custom Elements
Vue.js Nuxt.js
Shadow DOM
Svelte Svelte Kit
Type Checkers TypeScript
TIP Right-click on a topic to mark it as done.

S Sid R d i (SSR)
https://roadmap.sh/frontend 4/9
11/18/23, 6:51 AM Frontend Developer Roadmap: What is Frontend Development?
Server Side Rendering (SSR)

Storage PRPL Pattern Apollo GraphQL

Web Sockets RAIL Model
Relay Modern
Server Sent Events Performance Metrics
Service Workers Using Lighthouse

Location Using DevTools

Progressive Web Apps Static Site Generators
Notifications Calculating, Measuring
Device Orientation and improving performance
Vuepress Astro
Payments
Performance Best Practices
Credentials Jekyll Eleventy

Learn different Web Hugo Next.js

Electron
APIs used in PWAs
Nuxt.js Remix
Tauri

Flutter

Mobile Applications
Bonus Content Desktop Applications

React Native

Flutter

Ionic

NativeScript
Continue Learning with following relevant tracks
TIP Right-click on a topic to mark it as done.
TypeScript Roadmap Node.js Roadmap
https://roadmap.sh/frontend 5/9
11/18/23, 6:51 AM Frontend Developer Roadmap: What is Frontend Development?

Frequently Asked Questions

What are the job titles of a Frontend Developer?

Front-end developers are also known as front-end engineers, front-end web developers, JavaScript
Developers, HTML/CSS Developer, front-end web designers, and front-end web architects.

Each of these roles mostly encompass the same front-end development skills but require different levels of
expertise in different front-end development skills. It's better to look at the job description to get an idea
about the job requirements.
TIP Right-click on a topic to mark it as done.

https://roadmap.sh/frontend 6/9
11/18/23, 6:51 AM Frontend Developer Roadmap: What is Frontend Development?

How to become a Frontend Developer?

How long does it take to become a Frontend Developer?

What are the Frontend Developer salaries?

Should I learn everything listed on the Frontend Roadmap?

Test your Knowledge NEW All Quizzes →

JavaScript 75 Questions

React 51 Questions

Related Roadmaps All Roadmaps →

Full Stack Step by step guide to becoming a full stack developer in 2023

JavaScript Step by step guide to learn JavaScript in 2023

Node.js Step by step guide to becoming a Node.js developer in 2023

React Step by step guide to become a React Developer in 2023

Angular Step by TIP

stepRight-click
guide to onbecome
a topic atoAngular
mark it asDeveloper
done. in 2023

https://roadmap.sh/frontend 7/9
11/18/23, 6:51 AM Frontend Developer Roadmap: What is Frontend Development?

Vue Step by step guide to become a Vue Developer in 2023

Design System Step by step guide to building a modern Design System

Community
roadmap.sh is the 6th most starred project on GitHub and is visited by
hundreds of thousands of developers every month.

258k GitHub Stars Join on Discord

Roadmaps Best Practices Guides Videos FAQs YouTube

roadmap.sh by @kamrify

Community created roadmaps, articles, resources The leading DevOps resource for Kubernetes,
and journeys to help you choose your path and cloud-native computing, and the latest in at-scale
TIP Right-click on a topic to mark it as done.
grow in your career. development, deployment, and management.

https://roadmap.sh/frontend 8/9
11/18/23, 6:51 AM Frontend Developer Roadmap: What is Frontend Development?

© roadmap.sh · Terms · Privacy · DevOps · Kubernetes · Cloud-Native

TIP Right-click on a topic to mark it as done.

https://roadmap.sh/frontend 9/9