6/20/23, 7:38 PM Frontend Developer Roadmap
Frontend Developer
Step by step guide to becoming a modern frontend developer in 2023
← Subscribe Suggest
0 of 138 Done Track Progress
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
How does the internet work? DNS and how it works?
What is HTTP? What is Domain Name?
Internet
Browsers and how they work? What is hosting?
Learn the basics
Accessibility
Writing Semantic HTML
HTML
SEO Basics
Forms and Validations
CSS Learn the basics Positioning
Conventions and Best Practices Display
Making Layouts Box Model
JavaScript
Syntax and Basic Constructs CSS Grid
Responsive design and Media Queries Flex Box
Learn DOM Manipulation
Learn Fetch API / Ajax (XHR)
Version Control Systems Repo hosting services
ES6+ and modular JavaScript
What are they and why you should use one Create account and Learn to use GitHub
Understand the concepts
Hoisting, Event Bubbling, Scope, Basic Usage of Git GitHub
Prototype, Shadow DOM, strict
GitLab
Web Security Knowledge
Bitbucket
npm
yarn Get at least a basic knowledge of all of these
HTTPS Content Security Policy
pnpm Package Managers
CORS OWASP Security Risks
BEM CSS Architecture
https://roadmap.sh/frontend 1/5
6/20/23, 7:38 PM Frontend Developer Roadmap
Sass CSS Preprocessors
PostCSS
Prettier
Linters and Formatters ESLint
React
Build Tools Task Runners npm scripts
Angular
Vue.js Pick a Framework Module Bundlers Vite
Parcel
Svelte esbuild
Webpack
Solid JS Webpack
Webpack
Modern CSS
Rollup
Rollup
CSS Frameworks
Parcel
Parcel
Styled Components
CSS Modules
Mantine Tailwind
Styled JSX
Chakra UI Material UI
Jest
Emotion
DaisyUI Radix UI
react-testing-library
JS based and better to use with your Cypress
framework based JavaScript apps. Testing your Apps
Playwright
Learn the difference between Unit, Integration,
CSS first frameworks
Bootstrap and Functional tests and learn how to write You can fill all your testing
that don't come with needs with just these.
them with the tools listed on the right.
JS framework
Bulma
components by default.
HTML Templates
Authentication Strategies
JWT, OAuth, SSO, Basic Auth, Session Auth etc Web Components Custom Elements
Shadow DOM
Progressive Web Apps Type Checkers TypeScript
Storage
Web Sockets Remix
Server Sent Events PRPL Pattern
React Next.js
Service Workers RAIL Model
Server Side Rendering (SSR) Angular Universal
Location Performance Metrics
Notifications Using Lighthouse Vue.js Nuxt.js
Device Orientation Using DevTools
Svelte Svelte Kit
Payments Calculating, Measuring
Credentials and improving performance
Static Site Generators Eleventy
Learn different Web
Performance Best Practices Astro
APIs used in PWAs
Next.js
Apollo GraphQL
GatsbyJS
React Native Relay Modern
Vuepress
Flutter
Jekyll
Ionic Mobile Applications
Hugo
N i S i
https://roadmap.sh/frontend 2/5
6/20/23, 7:38 PM Frontend Developer Roadmap
NativeScript
Electron
Nuxt.js
Desktop Applications Tauri
Remix
Flutter
Bonus Content
Continue Learning with following relevant tracks
TypeScript Roadmap Node.js Roadmap
Frequently Asked Questions
What is Frontend Development?
Front-end development is the development of visual and interactive elements of a website that users interact
with directly. It's a combination of HTML, CSS and JavaScript, where HTML provides the structure, CSS the
styling and layout, and JavaScript the dynamic behaviour and interactivity.
As a front-end developer, you'll be responsible for creating the user interface of a website, to ensure it looks
good and is easy to use, with great focus on design principles and user experience. You'll be working closely
with designers, back-end developers, and project managers to make sure the final product meets the client's
needs and provides the best possible experience for the end-users.
What are the job titles of a Frontend Developer?
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?
Related Roadmaps More →
Full Stack
https://roadmap.sh/frontend 3/5
6/20/23, 7:38 PM Frontend Developer Roadmap
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 step guide to become a Angular Developer in 2023
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.
242k GitHub Stars
Join on Discord
Roadmaps
Best Practices
Guides
Videos
Store
YouTube
https://roadmap.sh/frontend 4/5
6/20/23, 7:38 PM Frontend Developer Roadmap
roadmap.sh by Kamran Ahmed
Community created roadmaps, articles, resources
and journeys to help you choose your path and
grow in your career.
© roadmap.sh · FAQs · Terms · Privacy
The leading DevOps resource for Kubernetes,
cloud-native computing, and the latest in at-scale
development, deployment, and management.
DevOps · Kubernetes · Cloud-Native
https://roadmap.sh/frontend 5/5
