Frontend Dev Roadmap
Frontend Dev Roadmap
Personal Recommendation / Opinion
along with resources and other roadmaps
Alternative Option - Pick this or purple
https : // roadmap.sh
Order in roadmap not strict (Learn anytime)
Front-end
I wouldn't recommend
How does the internet work? DNS and how it works?
What is Domain Name?
What is HTTP? Internet
What is hosting?
Browsers and how they work?
Learn the basics
Accessibility
Writing Semantic HTML
HTML
SEO Basics
Forms and Validations
Floats
Learn the basics
CSS Positioning
Conventions and Best Practices
Making Layouts
Display
JavaScript Box Model
Syntax and Basic Constructs
CSS Grid
Responsive design and Media Queries
Learn DOM Manipulation Flex Box
Learn Fetch API / Ajax (XHR)
ES6+ and modular JavaScript
Version Control Systems Repo hosting services
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
Sass CSS Preprocessors
PostCSS
Prettier
Linters and Formatters ESLint
React
Angular
Build Tools Task Runners npm scripts
Vue.js Pick a Framework Module Bundlers Vite
Parce
Svelte esbuild
Webpack
Solid JS Webpack
Webpack
Modern CSS
Rollup
Rollu
CSS Frameworks Parcel
Parce
Styled Components
Tailwind
CSS Modules
Mantine
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 di!erence 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
Bonus Content
Keep Learning
Personal Recommendation / Opinion Find the detailed version of this roadmap
Alternative Option - Pick this or purple along with resources and other roadmaps
Order in roadmap not strict (Learn anytime)
https : // roadmap.sh
I wouldn't recommend
Backend
How does the internet work? DNS and how it works?
Browsers and how they work? What is hosting?
Rust Go
Git
GitHub
PostgreSQL
MySQL OS and General Knowledge
Relational Databases
MariaDB
Basic Terminal Commands
MS SQL grep, awk, sed, lsof, curl, wget
tail, head, less, find, ssh, kill, dig
Oracle
How OSs work in General
NoSQL Databases
MongoDB InfluxDB
Memory Management
CouchDB TimeScale
ORMs Interprocess Communication
Document DBs Time Series
ACID
I/O Management
Firebase Cassandra
Transactions
Basic Networking Concepts
RethinkDB HBase
N+1 Problem
Threads and Concurrency
Realtime Column DBs
Normalization
Process Management
Failure Modes
Redis
Neo4j
Operating Systems Knowledge
Graph DBs
Profiling Perfor.
DynamoDB
Authentication REST
JSON APIs
Client Side
Cookie Based Redis
SOAP
Caching Server Side
OAuth
Memcached
Basic Auth
gRPC
CDN
Token Auth GraphQL
JWT Web Security Knowledge
MD5 and why not to use it
OpenID
SHA Family
SAML
Integration Testing
scrypt bcrypt
Unit Testing
Testing Hashing Algorithms
Functional Testing
GOF Design Patterns
Architectural Patterns Monolithic Apps
Domain Driven Design
Microservices
Test Driven Development
SOA
CQRS
Elasticsearch
Serverless
Event Sourcing
Solr
Service Mesh
Search Engines
Twelve Factor Apps
RabbitMQ
Kafka
Kubernetes
Docker
Message Brokers
Containerization vs Virtualization LXC
Server Sent Events
WebSockets GraphQL Apollo
Nginx
Relay Modern
Apache
Caddy
Graceful Degradation
Web Servers
MS IIS
Throttling
Backpressure
Loadshifting
Instrumentation
Building for Scale
Circuit Breaker
Monitoring
Mitigation Strategies
Telemetry