These notes are part of the recommendations of Andrei Neagoie in the Real Web Developer Roadmap 2020. I invite you to review The complete web developer in 2020 course or if you have some experience The complete junior to senior web developer in 2020 course and get your own insights. So, this an awesome feedback about what should we focus on in this 2020 as Web Developers. This first part covers the FrontEnd point of view in the roadmap, the BackEnd part is coming 😅.

Important note: The links and notes marked with the 🚀 are highly recommend

General recommendations

• Master your IDE
• Improve your basic fundamentals
  • Git / Github
  • Terminal skills
  • Learn to upload your files to your hosting and create your own domain
  • Learn more about JSON / gRPC

Front End

Web APIS provided by the browser 🚀

• Fetch / XHR
• DOM
  • Local Storage and Session Storage
• Service Workers and PWA
• i18n

HTML5 🚀

• Semantic HTML
• Accessibility
• SEO
• Forms

Responsive Mobile First 🚀

CSS3 🚀

• Animations
• CSS Variables
• Rem vs EM vs PX
• Media Queries
• Preprocessors
  • SASS 🚀
• CSS Layout 🚀
  • Flexbox module and ZerotoMastery Resources
  • Grid module
• CSS in JS
  • CSS Modules
  • Styled-components
• Organizing CSS
  • Atomic CSS 🚀
  • BEM
• Frameworks and libraries
  • Tachyons
  • Tailwind
  • Bulma

JavaScript

• Fundamentals 🚀
  • Asynchronous JavaScript
  • DOM Manipulations + Web APIs
  • OPP vs FP
  • Modules
• Compilers / Transpilers
  • TypeScript
  • Svelte
  • ELM
  • ReasonML
  • Babel
• Frameworks / Libraries
  • ReactJS 🚀
  • Angular
  • Vue
  • RedwoodJS

State Managment

• Vuex
• NgRx
• Mobx
• Redux 🚀
• Apollo GraphQL 🚀

SSR 🚀

• Sapper
• Next.js 🚀
• Angular Universal
• Next.js

Helpers 🚀

• Babel 🚀
• ESLint 🚀
• Prettier 🚀
• Husky
• SASS Lint

Build Tools

• NPM Scripts 🚀
• Bundlers
  • Parcel
  • Webpack 🚀
  • Rollup

Web Components

• Stencil
• Polymer
• LitElement

Package Management

• Npx 🚀
• Npm 🚀
• Yarn
• Npm Registry 🚀

Popular libraries

• Axios
• D3.js
• MomentJs
• Ramda
• RxJS
• Immer
• Lodash

JAM Stack 🚀

• Static Sites
  • Hugo
  • Jekyll
  • Scully
  • Gatsby 🚀
  • Gridsome
• CMS
  • Wordpress
  • Headless CMS 🚀
  • Contentful 🚀

Unit Test

• Jest 🚀
• Ava
• Mocha / Chai / Sinon
• Jasmine
• React Testing Library 🚀

End to End Test

• Protractor
• Cypress 🚀
• nightwatchjs
• TestCafe 🚀

Continuous Integration / Continuous Delivery

• Gitlab CI
• Travis CI 🚀
• Jenkins 🚀
• Circle CI 🚀
• Github Actions 🚀

Back End

Static Hosting

• Zeit / Vercel
• Surge
• Gitlab Pages
• Github Pages 🚀
• Netlify 🚀

Managed Hosting

• Blue Host
• Hostgator 🚀

Cloud

• Heroku 🚀
• Digital Ocean 🚀
• AWS 🚀
• GCP
• Azure

Web Servers

• Nginx 🚀 and [Nginx Load Balancing](http://nginx.org/en/docs/(http/load_balancing.html)
• Caddy 2 🚀
• Apache
• CDN Cloudfare 🚀

Serverless

• AWS Lambda
• Netlify Lambda

Node.js

• Express.js 🚀
• Nest.js
• Koa.js
• Hapi.js

🦕 Deno

Python 🚀

• Flask
• Django

API Consumption

• GraphQL 🚀
• REST
• Web Sockets
• gRPC 🚀

Authentication

• Managed: Firebase 🚀
• Third Party: Oauth2 🚀
• Cookie Based Authentication
• Token Based Authentication 🚀

Containers

• Docker 🚀

Relational Databases 🚀

• PostgreSQL
• MySQL
• NewSQL

NoSQL Databases 🚀

• MongoDB
• Cassandra
• Redis 🚀
• RethinkDB
• CouchDB
• DynamoDB

Managed Databases

• AirTable 🚀
• Firebase 🚀
• Prisma
• AWS / GCP / Azure

Mobile

• React Native 🚀
• Flutter 🚀
• PWA 🚀
• Ionic
• NativeScript

Desktop

• Electron

Machine Learning

• Prebuild Models 🚀 like cloudML / Firebase ML / Clarify / IBM ML / AWS ML
• Brain.js
• Tensorflow.js 🚀

Web Assembly 🚀

• Blazor

PS: If you are starting your Web Development career, I suggest you can start with this Complete Web Developer 2020 Course by ZTM and get a 10% discount using that link.

PS2: To review more post like this, I invite you to my blog 🤖.

Cheers and keep learning! 🍻