Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
0% found this document useful (0 votes)
117 views

Frontend Dev Roadmap

The document presents a roadmap for learning front-end development. It includes topics such as HTML, CSS, JavaScript, version control systems like Git, web security, package managers, CSS preprocessors, linters and formatters, build tools, and front-end frameworks. The roadmap notes that the order is not strict and topics can be learned anytime, and provides a link for more detailed resources and other roadmaps.
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
117 views

Frontend Dev Roadmap

The document presents a roadmap for learning front-end development. It includes topics such as HTML, CSS, JavaScript, version control systems like Git, web security, package managers, CSS preprocessors, linters and formatters, build tools, and front-end frameworks. The roadmap notes that the order is not strict and topics can be learned anytime, and provides a link for more detailed resources and other roadmaps.
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Find the detailed version of this 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

HTTPS Content Security Policy



 pnpm Package Managers

CORS OWASP Security Risks



 BEM CSS Architecture


 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

Web Sockets Remix 



Server Sent Events 

React 
 Next.js 

Service Workers PRPL Pattern


Location RAIL Model Server Side Rendering (SSR) Angular 
 Universal 

Notifications Performance Metrics Vue.js 
 Nuxt.js 

Device Orientation Using Lighthouse
Svelte 
 Svelte Kit 

Payments Using DevTools

Credentials Calculating, Measuring




Static Site Generators
and improving performance
Eleventy 

Learn di!erent Web
APIs used in PWAs Astro 

Next.js 


 Apollo GraphQL 

GatsbyJS 


 React Native 
 Relay Modern
Vuepress 


 Flutter

 Jekyll 

Ionic Mobile Applications
Hugo 

NativeScript
Electron 
 Nuxt.js 



Desktop Applications Tauri 
 Remix 

Flutter 


 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?

What is Domain Name





 What is HTTP? Internet




 Browsers and how they work? What is hosting?


 Rust Go 
 Git 
 

GitHub

Learn a Language Version Control Systems




GitLab

Repo hosting services




Bitbucket

 Java JavaScript 


 C# Python 

Terminal Usage 


 PHP Ruby 

POSIX Basics
stdin, stdout, stderr, pipes


 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

Key-Value Database Indexes 




  More about Databases
Data Replication 

Sharding Strategies 


 HATEOAS Learn about APIs Scaling Databases
CAP Theorem 


 Open API Specs


 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

HTTPS OWASP Risks


Software Design & Architecture CI / CD 

CORS SSL/TLS

Content Security Policy


Design and Development Principles


 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

Di!erence between these


Migration Strategies 

Types of Scaling 



Observability
Metrics logging and other
Have a look at the DevOps Roadmap observable items that can help
in debugging and solving
DevOps Roadmap
Issues when things go wrong.

You might also like