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
