2020 Frontend Web Developer Roadmap

1_sxW4-fYvbgZ9hRS8XaaJDg

Astep-by-step guide has been released to become a modern frontend developer at Roadmap.sh. As Digitalact’s Frontend Community, we wanted to elaborate this roadmap and contribute to the guide. We will publish the main topics on the roadmap as a new blog post every two weeks. Keep reading, hang the last image in the head corner of your room 🙂

2020 FRONT-END WEB DEVELOPER ROAD MAP

HTML
  • Learn the basics
  • Form and Validations
  • Accessibility
  • SEO Basics
  • Conventions and Best Practices
Web Components
  • HTML Templates
  • Custom Elements
  • Shadow DOM
Version Control Systems
  • Basic Usage of Git
  • Terminal
  • GUI Clients (SourceTree, Fork, GirKraken)
  • Repo hosting Services
  • GitHub
  • Bitbucket
  • Gitlab
CSS
  • Learn the basics
  • Responsive design and Media Queries
  • Making Layouts
  • Floats
  • Positioning
  • Display Box
  • Model CSS
  • Grid
  • Flex Box
CSS Architecture
  • BEM
  • OOCS
  • SMACSS
CSS Preprocessor
  • Sass
  • PostCSS
  • Less
CSS Frameworks
  • CSS first frameworks
  • Bootstrap
  • Materialize CSS
  • Bulma
  • Js based frameworks
  • Reactstrap
  • Material UI
  • Tailwind CSS
  • Chakra UI
Modern CSS
  • Styled Component
  • CSS Modules
  • Styled JSX
  • Emotion
  • Radium
  • Glamorous
JavaScript
  • Syntax and Basic Constructs
  • Learn DOM Manipulation
  • Learn Fetch API / Ajax (XHR)
  • ES6+ and modular Javascript
  • Understand the concepts, Hoisting, Event Bubbling,
  • Scope, Prototype, Shadow DOM, strict…
JS Framework
  • React.js
  • Redux
  • MobX
  • Vue.js
  • VueX
  • Angular
  • RxJS
  • NgR
Type Checkers
  • TypeScript
  • Flow
Progressive Web Apps (PWA)
  • Storage
  • Web Sockets
  • Service Workers
  • Location
  • Notifications
  • Notifications
  • Device Orientation
  • Payments
  • Credentials
  • Accelerated Mobile Pages (AMP)
Performance
  • PRPL Pattern
  • RAIL Model
  • Performance
  • Metrics
  • Using Lighthouse
  • Using DevTools
Server Side Rendering (SSR)
  • React.js
  • Next.js
  • After.js
  • Angular
  • Universal
  • Vue.js
  • Nuxt.js
GraphQL
  • Apollo
  • Relay Modern
Static Site Generators
  • Next.js
  • GatsbyJS
  • Nuxt.js
  • Vuepres
  • Jekyll
  • Hugo
Mobil Applications
  • React Native
  • NativeScript
  • Flutter
  • Ionic
Desktop Applications
  • Electron
  • Carlo
  • Proton Native
Package managers
  • Npm
  • Yarn
Testing your Apps
  • Jest
  • React-testing-library
  • Cypress
  • Enzyme
Build Tools
  • Linters and Formatters
  • Prettier
  • ESLint
  • StandardJS
Module Bundlers
  • Webpack
  • Rollup
  • Parcel
Web Security Knowledge
  • HTTPS
  • CORS
  • Content Security Policy
  • OWASP Security Risks
1_TV6MjGnbQjfTrhGm_cQ6dg

Stay tuned for more…

by Emre Aktaş

Comments

There are no comments yet.

Leave a comment