Web Developer Roadmap

Web
Develper
Roadmap

Introduction Front-end Back-end DevOps

Introduction

Required for any path Git - Version Control Basic Terminal Usage Data Structure and Algorithms GitHub Licenses Semantic Versioning SSH HTTP/HTTPS and APIs Design Patterns Character Encodings

Front-end

Internet How does the internet work? What is HTTP? Browser and how they work? DNS and how it works? What is Domain Name? What is hosting?

HTML Learn the basic Writing Semantic HTML Forms and Validations Conventions and best practices Accessibility SEO Basics

CSS Learn the basic Responsive design and media queries Making layout Floats, Positioning, Display, Box model, CSS grid, Flex box

JavaScript Syntax and basic constructs Learn DOM manipulation Learn Fetch API/Ajax(XHR) ES6+ and modular JavaScript Understand the concepts Hosting, Events Bubbling, Scope, Prototype, Shadow DOM, strict,..

Version Control Systems Basic usage of Git Repo Hosting Services GitHub GitLab Bitbucket

Web security knowledge HTTPS CORS Content security policy OWASP security risks

Package Manager npm yarn

CSS Architecture BEM OOCSS SMACSS

CSS Proccessor Sass PostCSS Less

Build Tools Task Runners npm scripts Gulp Module Bundlers Webpack Rollup Parcel Linters and Formatters Prettier ESLint StandardJS

Pick a Framework React.js Redux MobX Angular RxJS NgRx Vue.js VueX and Formatters

Modern CSS Style Component CSS Module Styled JSX Emotion Radium Glamorou

Web Component HTML Templates Custom Elements Shadow DOM

CSS Framework JS based and better to use with framework based JavaScript applications

Reactstrap

Meterial UI

Tailwind CSS

Chakra UI CSS first frameworks which don't come with JavaScript components by default

Bootstrap

Materialize CSS

Bulma

Testing your Apps Jest react-testing-library Cypress Enzyme CSS Mocha Chai Ava Jasmine

Type Checker TypeScripts Flow

Progressive Web Apps Learn different Web APIs used in PWAs
Storage
Web Sockets
Service Workers
Location
Notifications
Device Orientation
Payments
Credentials Calculating, Measuring, and Improving 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 Vuepress JekyII Hugo Gridsome

Mobile Apps React Native NativeScript Flutter Ionic

Desktop Apps Electron Carlo Proton Native

Web Assembly Web Assembly or WASM is the binary instruction 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. 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 Never end

Back-end

Go to GitHub

DevOps

Go to GitHub

Design by : SRENG RITHEA

Resource from : https://github.com/kamranahmedse/developer-roadmap

t o p