Find the detailed version of this roadmap

○
" Personal Recommendation / Opinion
along with resources and other roadmaps
"
○ Alternative Option - Pick this or purple
http: // 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 "
○
"
○ Forms and Validations
SEO Basics
"
○
Floats
"
○ Learn the basics
"
○
CSS Positioning
Conventions and Best Practices

Making Layouts
"
○ Display
"
○ JavaScript Box Model
Syntax and Basic Construct
Responsive design and Media Queries "
○ CSS Grid
"
○ 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 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 Preprocessor

OOCS 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 nee
SMACSS be a good idea to get familiarized with BEM atleast. these but still a good idea to familiarize yourself. Less

"
○
"
○ Prettier
npm scripts
ESLint
"
○
Task Runners Build Tools Linters and Formatters
Gulp
StandardJS
"
○ Webpac
Webpack

"
○ Redux
"
○
Module Bundlers
Rollu
Rollup "
○
React.js
"
○ MobX
"
○
Parce
Parcel

"
○
"
○ RxJS
"
○ Pick a Framework Angular
Styled Component NgR
"
○
"
○ CSS Module "
○ "
○
Vue.js VueX
"
○ Styled JSX Modern CSS

"
○ HTML Templates
"
○
Emotio
"
○
Web Components Custom Elements "
○
Radium

Shadow DOM
"
○
Glamorou

"
○ Reactstrap
"
○
Bootstrap
CSS Frameworks
"
○ Material UI "
○
Materialize CSS
"
○ Jest "
○ Tailwind CSS
Testing your Apps "
○
"
○ react-testing-library "
○ Chakra UI
Bulma
Learn the difference between Unit, Integration
"
○ Cypress and Functional tests and learn how to write JS based and better to use CSS first frameworks which

them with the tools listed on the left. with your framework based don't come with JavaScript
"
○ Enzyme JavaScript applications. components by default

You can fill all your testing Mocha Chai Ava Jasmine
needs with just these.

"○
○ "
"
○ "
○ "
○ TypeScript
Storage Progressive Web Apps Type Checkers
Flow
Web Sockets

Service Workers
"
○ "
○
"
○ "
○ Next.js
Location PRPL Pattern Server Side Rendering (SSR) React.js
Notifications RAIL Model After.js

Device Orientation Performance Metrics "

○ "
○
Angular Universal
Payments Using Lighthouse
"
○ "
○
Credentials Using DevTools Vue.js Nuxt.js

Learn different Web Calculating, Measuring "

○
APIs used in PWAs and improving performance "
○ Apollo
GraphQL
Relay Modern
"
○
"
○
React Native "
○
Next.js
NativeScript "
○
"
○ "
○ GatsbyJS
Mobile Applications Static Site Generators
Flutter "
○
Nuxt.js
Ionic "
○
Electro
"
○ Vuepres

"
○ Jekyll
"
○
Desktop Applications Carlo
Hugo "
○
Proton Native

"
○ 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 browser
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