○ " " ○ " ○ ○ " ○ Find the detailed version of this roadmap Personal Recommendation / Opinion Order in roadmap not strict (Learn anytime) What is HTTP? What is Domain Name? Internet " ○ What is hosting? Learn the basics " ○ Accessibility HTML " ○ SEO Basics Forms and Validations CSS Learn the basics JavaScript Making Layouts Conventions and Best Practices " ○ Floats " ○ Positioning " ○ Display Box Model Syntax and Basic Construct Responsive design and Media Queries " ○ " ○ " ○ Writing Semantic HTML " ○ " ○ " ○ Browsers and how they work? " ○ " ○ " ○ DNS and how it works? How does the internet work? " ○ " ○ http: // roadmap.sh Front-end I wouldn't recommend " ○ " ○ along with resources and other roadmaps Alternative Option - Pick this or purple " ○ CSS Grid Flex Box Learn DOM Manipulation Learn Fetch API / Ajax (XHR) ES6+ and modular JavaScript " ○ Understand the concepts Version Control Systems Repo hosting services What are they and why you should use one Create account and Learn to use GitHub " ○ " ○ Basic Usage of Git Hoisting, Event Bubbling, Scope, 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 " ○ npm " ○ " ○ Content Security Policy Package Managers OWASP Security Risks CORS yarn BEM OOCS SMACSS " ○ Sass CSS Architecture CSS Preprocessor With modern frameworks and CSS-in-JS you don't With how the modern frameworks there has been have to worry about these anymore but still it would more push towards CSS-in-JS so you may not nee be a good idea to get familiarized with BEM atleast. these but still a good idea to familiarize yourself. " ○ PostCSS Less " ○ " ○ Prettier npm scripts Build Tools Task Runners " ○ ESLint Linters and Formatters Gulp StandardJS " ○ Webpac Webpack " ○ " ○ Module Bundlers Rollu Rollup " ○ React.js " ○ Pick a Framework Vue.js " ○ Jest Testing your Apps react-testing-library Cypress Enzyme " ○ Shadow DOM CSS Frameworks " ○ " ○ Custom Elements Glamorou " ○ " ○ HTML Templates " ○ Web Components Radium " ○ " ○ VueX Modern CSS Emotio " ○ " ○ NgR Styled JSX " ○ " ○ RxJS Angular " ○ CSS Module " ○ " ○ MobX Styled Component " ○ " ○ Redux " ○ Parce Parcel Reactstrap Material UI " ○ Tailwind CSS " ○ Chakra UI Materialize CSS Learn the difference between Unit, Integration You can fill all your testing " ○ Bootstrap " ○ " ○ " ○ Bulma 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 JavaScript applications. components by default Mocha Chai Jasmine Ava needs with just these. " ○ " ○ " ○ Progressive Web Apps Storage TypeScript Flow Web Sockets Service Workers Location " ○ " ○ " ○ PRPL Pattern Notifications RAIL Model Device Orientation Performance Metrics Payments Using Lighthouse Credentials Using DevTools Learn different Web Calculating, Measuring APIs used in PWAs and improving performance Server Side Rendering (SSR) React.js " ○ Next.js Angular Vue.js " ○ Apollo GraphQL Relay Modern " ○ " ○ Universal Nuxt.js " ○ " ○ Ionic " ○ Desktop Applications Electro " ○ GatsbyJS Nuxt.js " ○ " ○ Jekyll 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 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 " ○ Carlo Proton Native Web Assembly " ○ " ○ Vuepres Hugo " ○ " ○ " ○ Static Site Generators Mobile Applications " ○ " ○ Next.js NativeScript " ○ After.js React Native Flutter "○ ○ " Type Checkers " ○
