🔥 Roadmap Web Developer Front End 2020
Tags: frontend, roadmap, javascript
Published: 2020-05-22 21:16:01

---
title: 🔥 Roadmap Web Developer Front End 2020
published: true
description: These notes are part of the recommendations of Andrei Neagoie in the Real Web Developer Roadmap 2020.
tags: frontend, roadmap, javascript
---

These notes are part of the recommendations of [Andrei Neagoie](https://zerotomastery.io/about/instructor/andrei-neagoie/) in the [Real Web Developer Roadmap 2020](https://www.youtube.com/watch?v=57GuRoJ5Bfw). I invite you to review [The complete web developer in 2020](https://academy.zerotomastery.io/p/complete-web-developer-zero-to-mastery?affcode=441520_49y0uhps) course or if you have some experience [The complete junior to senior web developer in 2020](https://academy.zerotomastery.io/p/the-complete-junior-to-senior-web-developer-roadmap?affcode=441520_49y0uhps) 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

{%youtube 57GuRoJ5Bfw%}


## 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](https://developer.mozilla.org/es/docs/Web/API/Fetch_API)
* [DOM](https://developer.mozilla.org/es/docs/DOM)
    * [Local Storage](https://developer.mozilla.org/es/docs/Web/API/Window/localStorage) and [Session Storage](https://developer.mozilla.org/es/docs/Web/API/Window/sessionStorage)
* [Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers) and [PWA](https://developer.mozilla.org/es/docs/Web/Progressive_web_apps)
* [i18n](https://developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/API/i18n)

### HTML5 🚀
* [Semantic HTML](https://developer.mozilla.org/es/docs/Glossary/Semantics)
* [Accessibility](https://developer.mozilla.org/es/docs/Learn/Accessibility)
* [SEO](https://developer.mozilla.org/es/docs/Glossary/SEO)
* [Forms](https://developer.mozilla.org/es/docs/Learn/HTML/Forms)

[Responsive Mobile First 🚀](https://css-tricks.com/notes-agency-starting-their-first-responsive-web-project/)

### CSS3 🚀
* [Animations](https://css-tricks.com/css-animation-libraries/)
* [CSS Variables](https://css-tricks.com/everything-need-know-css-variables/)
* [Rem vs EM vs PX](https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-still-a-big-deal/?ref=heydesigner)
* [Media Queries](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
* Preprocessors 
    * [SASS 🚀](https://sass-lang.com/)
* CSS Layout 🚀
    * [Flexbox module](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [ZerotoMastery Resources](https://zerotomastery.io/resources/)
    * [Grid module](https://css-tricks.com/snippets/css/complete-guide-grid/)
* CSS in JS
    * [CSS Modules](https://github.com/css-modules/css-modules)
    * [Styled-components](https://styled-components.com/)
* Organizing CSS
    * [Atomic CSS 🚀](https://acss.io/)
    * [BEM](http://getbem.com/introduction/)
* Frameworks and libraries
    * [Tachyons](https://tachyons.io/)
    * [Tailwind](https://tailwindcss.com/)
    * [Bulma](https://bulma.io/)

### JavaScript
* Fundamentals 🚀
    * [Asynchronous JavaScript](https://developer.mozilla.org/es/docs/Learn/JavaScript/Asynchronous)
    * [DOM Manipulations + Web APIs](https://developer.mozilla.org/es/docs/Web/API)
    * [OPP vs FP](https://dev.to/digitaldaswani/oop-vs-fp-with-javascript-39jf)
    * [Modules](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/M%C3%B3dulos)
* Compilers / Transpilers
    * [TypeScript](https://www.typescriptlang.org/)
    * [Svelte](https://svelte.dev/)
    * [ELM](https://elm-lang.org/)
    * [ReasonML](https://reasonml.github.io/)
    * [Babel](https://babeljs.io/)
* Frameworks / Libraries
    * [ReactJS 🚀](https://es.reactjs.org/)
    * [Angular](https://angular.io/)
    * [Vue](https://vuejs.org/)
    * [RedwoodJS](https://redwoodjs.com/)

### State Managment
* [Vuex](https://vuex.vuejs.org/)
* [NgRx](https://ngrx.io/guide/store)
* [Mobx](https://mobx.js.org/README.html)
* [Redux 🚀](https://redux.js.org/)
* [Apollo GraphQL 🚀](https://graphql.org/)

### SSR 🚀
* [Sapper](https://sapper.svelte.dev/)
* [Next.js 🚀](https://nextjs.org/)
* [Angular Universal](https://angular.io/guide/universal)
* [Next.js](https://nuxtjs.org/)

### Helpers 🚀
* [Babel  🚀](https://babeljs.io/)
* [ESLint 🚀](https://eslint.org/)
* [Prettier 🚀](https://prettier.io/)
* [Husky](https://github.com/typicode/husky)
* [SASS Lint](https://github.com/sasstools/sass-lint)


### Build Tools 
* [NPM Scripts 🚀](https://docs.npmjs.com/misc/scripts)
* Bundlers
    * [Parcel](https://parceljs.org/) 
    * [Webpack 🚀](https://webpack.js.org/)
    * [Rollup](https://rollupjs.org/guide/en/)

### Web Components
* [Stencil](https://stenciljs.com/)
* [Polymer](https://www.polymer-project.org/)
* [LitElement](https://lit-element.polymer-project.org/)

### Package Management 
* [Npx 🚀](https://www.npmjs.com/package/npx)
* [Npm 🚀](https://www.npmjs.com/)
* [Yarn](https://yarnpkg.com/)
* [Npm Registry 🚀](https://docs.npmjs.com/using-npm/registry.html)

### Popular libraries
* [Axios](https://github.com/axios/axios)
* [D3.js](https://d3js.org/)
* [MomentJs](https://momentjs.com/)
* [Ramda](https://ramdajs.com/)
* [RxJS](https://rxjs-dev.firebaseapp.com/)
* [Immer](https://immerjs.github.io/immer/docs/introduction)
* [Lodash](https://lodash.com/)

### [JAM Stack 🚀 ](https://jamstack.org/)
* Static Sites
    * [Hugo](https://gohugo.io/)
    * [Jekyll](https://jekyllrb.com/)
    * [Scully](https://scully.io/) 
    * [Gatsby 🚀](https://www.gatsbyjs.org/)
    * [Gridsome](https://gridsome.org/)
* CMS
    * [Wordpress](https://wordpress.com/)
    * [Headless CMS 🚀 ](https://headlesscms.org/)
    * [Contentful 🚀](https://www.contentful.com/)

### Unit Test
* [Jest  🚀](https://jestjs.io/)
* [Ava](https://github.com/avajs)
* Mocha / Chai / Sinon 
* [Jasmine](https://jasmine.github.io/)
* [React Testing Library  🚀](https://testing-library.com/docs/react-testing-library/intro)

### End to End Test
* [Protractor](https://www.protractortest.org/#/)
* [Cypress  🚀](https://www.cypress.io/)
* [nightwatchjs](https://nightwatchjs.org/) 
* [TestCafe  🚀](https://devexpress.github.io/testcafe/)

### Continuous Integration / Continuous Delivery
* [Gitlab CI](https://docs.gitlab.com/ee/ci/)
* [Travis CI  🚀](https://travis-ci.org/)
* [Jenkins 🚀](https://www.jenkins.io/)
* [Circle CI  🚀](https://circleci.com/) 
* [Github Actions  🚀](https://github.com/features/actions)

## Back End

### Static Hosting
* Zeit / Vercel
* [Surge](https://surge.sh/)
* [Gitlab Pages](https://docs.gitlab.com/ee/user/project/pages/)
* [Github Pages 🚀](https://pages.github.com/)
* [Netlify 🚀](https://www.netlify.com/) 

### Managed Hosting
* [Blue Host](https://www.bluehost.com/)
* [Hostgator 🚀](https://www.hostgator.co/) 

### Cloud 
* [Heroku 🚀](https://dashboard.heroku.com/)
* [Digital Ocean 🚀](https://www.digitalocean.com/)
* [AWS 🚀](https://aws.amazon.com/)
* [GCP](https://cloud.google.com/)
* [Azure](https://azure.microsoft.com/es-es/)

### Web Servers
* [Nginx 🚀 ](https://www.nginx.com/) and [Nginx Load Balancing](http://nginx.org/en/docs/(http/load_balancing.html)
* [Caddy 2 🚀](https://caddyserver.com/v2)
* [Apache](https://httpd.apache.org/)
* [CDN Cloudfare 🚀](https://www.cloudflare.com/)

### Serverless
* [AWS Lambda](https://aws.amazon.com/es/lambda/features/)
* [Netlify Lambda](https://docs.netlify.com/functions/overview/)

### Node.js
* [Express.js 🚀](https://expressjs.com/es/)
* [Nest.js](https://nextjs.org/)
* [Koa.js](https://koajs.com/)
* [Hapi.js](https://hapi.dev/)

🦕 [Deno](https://deno.land/v1/)

### Python 🚀
* [Flask](https://flask.palletsprojects.com/en/1.1.x/)
* [Django](https://www.djangoproject.com/) 

### API Consumption
* [GraphQL 🚀](https://graphql.org/)
* [REST](https://es.wikipedia.org/wiki/Transferencia_de_Estado_Representacional)
* [Web Sockets](https://developer.mozilla.org/es/docs/Web/API/WebSockets_API)
* [gRPC 🚀](https://grpc.io/)

### Authentication
* [Managed: Firebase 🚀](https://firebase.google.com/?hl=es)
* [Third Party: Oauth2 🚀](https://oauth.net/2/)
* Cookie Based Authentication 
* [Token Based Authentication 🚀](https://auth0.com/learn/token-based-authentication-made-easy/) 

### Containers
* [Docker 🚀](https://www.docker.com/)

### Relational Databases 🚀
* [PostgreSQL](https://www.postgresql.org/)
* [MySQL](https://www.mysql.com/)
* [NewSQL](https://es.wikipedia.org/wiki/NewSQL) 

### NoSQL Databases  🚀
* [MongoDB](https://www.mongodb.com/es) 
* [Cassandra](https://cassandra.apache.org/)
* [Redis 🚀](https://redis.io/)
* [RethinkDB](https://rethinkdb.com/)
* [CouchDB](https://couchdb.apache.org/)
* [DynamoDB](https://aws.amazon.com/es/dynamodb/)

### Managed Databases
* [AirTable 🚀](https://airtable.com/)
* [Firebase  🚀](https://firebase.google.com/?hl=es)
* [Prisma](https://www.prisma.io/)
* AWS / GCP / Azure

## Mobile
* [React Native 🚀](https://reactnative.dev/) 
* [Flutter 🚀](https://flutter-es.io/)
* PWA 🚀
* [Ionic](https://ionicframework.com/)
* [NativeScript](https://www.nativescript.org/)

## Desktop
* [Electron](https://www.electronjs.org/)

## Machine Learning
* Prebuild Models 🚀 like cloudML / Firebase ML / Clarify / IBM ML / AWS ML
* [Brain.js](https://brain.js.org/#/)
* [Tensorflow.js 🚀](https://www.tensorflow.org/js)

## Web Assembly 🚀 
* [Blazor](https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-now-available/)


PS: If you are starting your Web Development career, I suggest you can start with this [Complete Web Developer 2020 Course by ZTM](https://academy.zerotomastery.io/purchase?product_id=1527922&coupon_code=FRIENDS10&affcode=441520_49y0uhps) and get a 10% discount using that link.

PS2: To review more post like this, I invite you [to my blog 🤖](https://codesandtags.github.io/blog/roadmap-web-developer-front-end-2020).

Cheers and keep learning! 🍻