We now have a YouTube Channel.
[Link]
NEW Topic videos being made on YouTube »
Frontend Developer
Step by step guide to becoming a modern frontend
developer in 2022
← Download Subscribe
NEW Resources are here, try clicking any nodes.
Find the detailed version of this roadmap
Personal Recommendation / Opinion
along with resources and other roadmaps
Alternative Option - Pick this or purple
Order in roadmap not strict (Learn anytime) http : // [Link]
I wouldn't recommend
Front-end
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
Floats
CSS Learn the basics Positioning
Conventions and Best Practices
Display
JavaScript Making Layouts
Box Model
Syntax and Basic Constructs
CSS Grid
Responsive design and Media Queries
Learn DOM Manipulation Flex Box
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 and yarn both are fine, pick
one or learn both, there is not
much difference. Get at least a basic knowledge of all of these
HTTPS Content Security Policy
npm
Package Managers
CORS OWASP Security Risks
yarn
BEM Sass
CSS Architecture CSS Preprocessors
OOCSS With modern frameworks and CSS-in-JS you don't With how the modern frameworks there has been
PostCSS
have to worry about these anymore but still it would more push towards CSS-in-JS so you may not need
SMACSS be a good idea to get familiarized with BEM atleast. these but still a good idea to familiarize yourself. Less
npm scripts Task Runners Prettier
Webpack Build Tools ESLint
Linters and Formatters
esbuild
Webpack StandardJS
Rollup
Module Bundlers Redux
Parcel React
MobX Recoil
Vite
Parcel
RxJS
Pick a Framework Angular
Styled Components NgRx
CSS Modules
[Link] VueX
Styled JSX Modern CSS
Emotion HTML Templates
Web Components Custom Elements
CSS first frameworks which Shadow DOM
Bootstrap
don't come with JavaScript
framework components by
Bulma Tailwind CSS
default. CSS Frameworks
Chakra UI
Material UI
Jest Testing your Apps
Learn the difference between Unit, Integration, Radix UI
react-testing-library
and Functional tests and learn how to write JS based and better to use
Cypress with your framework based
them with the tools listed on the left.
JavaScript applications.
Enzyme
Mocha Chai Ava Jasmine
You can fill all your testing
needs with just these.
TypeScript
Storage Progressive Web Apps Type Checkers
Flow
Web Sockets
Service Workers
[Link]
Location PRPL Pattern Server Side Rendering (SSR) React
Notifications RAIL Model [Link]
Device Orientation Performance Metrics
Angular Universal
Payments Using Lighthouse
Credentials Using DevTools [Link] [Link]
Learn different Web Calculating, Measuring
APIs used in PWAs Apollo
and improving performance
GraphQL
Relay Modern
React Native
[Link]
NativeScript
GatsbyJS
Mobile Applications Static Site Generators
Flutter
[Link]
Ionic
Vuepress
Electron
Jekyll
Desktop Applications Carlo
Hugo
Proton Native
Gridsome
Eleventy
Web Assembly or WASM is the binary instructions generated from
Web Assembly
higher level languages such as Go, C, C++ or Rust. It is faster than
JavaScript and WASM 1.0 has already shipped in the major browsers.
W3C accepted it as an official standard at the end of 2019. It will still
take quite some time to go mainstream though.
Keep Learning
Open Source
The project is OpenSource, 7th most starred
project on GitHub and is visited by hundreds of
thousands of developers every month.
Star 196,888
A considerable amount of my time is spent doing
unpaid community work on things that I hope will
help humanity in some way. Your sponsorship
helps me continue to produce more open-source
and free educational material consumed by
hundreds of thousands of developers every
month.
Sponsor @kamranahmedse
Stay Informed
Subscribe yourself to get updates, new guides,
videos and roadmaps in your inbox.
Subscribe to Updates
Free subscription for updates
Updates & Paid Content
Support the project by paying as little as 5$ per month
Roadmaps
Guides
Videos
Thanks
About
YouTube
[Link] by @kamranahmedse
Community created roadmaps, articles, resources
and journeys to help you choose your path and grow
in your career.
© [Link] · FAQs · Terms · Privacy
