Gridsome yarn HTML Front-end Learn the basics Writing Semantic HTML Forms and Validations Conventions and Best Practices CSS Floats Positioning Display Box Model CSS Grid Flex Box Learn the basics Making Layouts Find the detailed version of this roadmap along with resources and other roadmaps Responsive design and Media Queries JavaScript Syntax and Basic Constructs Learn DOM Manipulation Hoisting, Event Bubbling, Scope, Prototype, Shadow DOM, strict Understand the concepts Learn Fetch API / Ajax (XHR) ES6+ and modular JavaScript roadmap.sh http : / / Internet How does the internet work? What is HTTP? Browsers and how they work? DNS and how it works? What is Domain Name? What is hosting? Accessibility SEO Basics Basic Usage of Git GitHub Repo hosting services Create account and Learn to use GitHub Version Control Systems What are they and why you should use one Package Managers npm npm and yarn both are fine, pick much difference. one or learn both, there is not Bitbucket GitLab Web Security Knowledge Personal Recommendation / Opinion I wouldn't recommend Order in roadmap not strict (Learn anytime) Alternative Option - Pick this or purple CORS HTTPS Content Security Policy OWASP Security Risks Get at least a basic knowledge of all of these CSS Preprocessors With how the modern frameworks there has been more push towards CSS-in-JS so you may not need these but still a good idea to familiarize yourself. CSS Architecture With modern frameworks and CSS-in-JS you don't have to worry about these anymore but still it would be a good idea to get familiarized with BEM atleast. BEM SMACSS OOCSS Build Tools Task Runners npm scripts Linters and Formatters Prettier ESLint StandardJS Webpack Webpack Rollup Rollup Parcel Parcel Module Bundlers Pick a Framework React Angular Vue.js Redux MobX Modern CSS Less VueX RxJS NgRx Styled Components CSS Modules Emotion Flow Apollo Static Site Generators GatsbyJS Next.js Nuxt.js Vuepress Jekyll CSS Frameworks CSS first frameworks which don't come with JavaScript framework components by default. Bootstrap Bulma JS based and better to use with your framework based JavaScript applications. Tailwind CSS Material UI Chakra UI You can fill all your testing needs with just these. react-testing-library Enzyme Jest Cypress Testing your Apps and Functional tests and learn how to write them with the tools listed on the left. Learn the difference between Unit , Integration , Chai Ava Jasmine Mocha Type Checkers TypeScript Progressive Web Apps Service Workers Storage Location Notifications Device Orientation Payments Credentials Web Sockets Learn different Web APIs used in PWAs PRPL Pattern RAIL Model Performance Metrics Using Lighthouse Using DevTools Calculating, Measuring and improving performance Server Side Rendering (SSR) React Next.js After.js Angular Universal Vue.js Nuxt.js Desktop Applications Electron Carlo Mobile Applications React Native NativeScript Flutter Hugo Ionic GraphQL Relay Modern Web Assembly Keep Learning Web Assembly or WASM is the binary instructions generated from 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. take quite some time to go mainstream though. W3C accepted it as an official standard at the end of 2019. It will still Web Components HTML Templates Custom Elements Shadow DOM Proton Native PostCSS Sass Styled JSX Webpack esbuild Parcel Vite Recoil Radix UI Eleventy More Detail This entry was written on June 5, 2022 19.30