FULL-STACK WEB DEVELOPER ROADMAP

HTML
CSS
JavaScript

CSS/UI Frameworks
Front-end Bootstrap /
Tailwind CSS

JS Frameworks
React /
Angular /
Vue

Version Control GitHub / GitLab

Server side languages

Full-stack Back-end
Node.js / Django / PHP / JAVA (SPRING)

SQL - MYSQL / PostgreSQL / Oracle

Database NoSQL - MongoDB / Redis

Android - Kotlin / Java FX

Mobile App IOS - SWIFT / OBJECTIVE C
Cross Platform - React Native / Flutter

Desktop App Electron

 Front-End Road Map 2022

a. Browser
b. HTTP, HTTPS
Internet c. Domain
d. Hosting

HTML

CSS

JavaScript

Version Control
System

Mobile App
Desktop App
 Front-End Road Map 2022

HTML Fundamentals
Internet a. Introduction
b. Typography
c. List, Link, Media
d. Table & Form

Web Accessibility
HTML a. HTML5 / Semantic HTML
b. SEO

Resources
a. HTML Full Course (Beginner to
Advance)
CSS b. My HTML Documentation
c. Sololearn HTML
d. W3School HTML
e. W3School Quiz
f. Projects

JavaScript Projects

Version Control
System

Mobile App
Desktop App
 Front-End Road Map 2022

CSS Course
Internet
CSS Fundamentals
a. Introduction to CSS
b. CSS Selectors & Combinators
c. CSS Typography
d. CSS Box Model

HTML CSS Advanced

e. Shadows & Gradients
f. Transitions & Animation
g. Variables
h. Responsiveness (Media Query)
i. CSS Layout: positioning, display,
CSS floats, Flex, Grid
j. CSS Architecture: BEM / SMACSS

CSS Frameworks
Bootstrap5 / Tailwind CSS
JavaScript

CSS Pre-processor
SASS / LESS / PostCSS

Version Control
System Resources
a. CSS Full Course (Basic To
Advanced)
b. My CSS Documentation
c. Sololearn CSS Course
Mobile App d. W3School CSS
e. W3School Quiz
Desktop App

Do Projects
 Front-End Road Map 2022
JavaScript Course

Internet Fundamentals
a. Introduction to JS
b. JS Tokens
c. Control Statements
d. Object, Array
e. Function
f. DOM, BOM
HTML g. Event, Event Handler
h. Exception Handling

Advanced
i. ES6
j. Synchronous VS Asynchronous
CSS k. Class, Inheritance
l. JSON
m. Web API
n. IIFE, Closure, Currying

Package Manager
npm / Yarn
JavaScript
Type Checker
TypeScript / Flow
My TypeScript documentation

Version Control Build tools

System Module bundlers - Webpack / esbuild / Vite
Linters & formatter – Prettier, ESLint
Task Runner – npm scripts / gulp

Mobile App Testing

Mocha, Jest (JS, React/React Native)
Desktop App Unit, Integration, End-to-end

Framework
React (Redux) / Angular (RxJS) / Vue.js (VueX)
React + TypeScript
React + Testing

Projects
 Front-End Road Map 2022

Internet

HTML

CSS

GitHub / GitLab / BitBucket

JavaScript My GitHub documentation

Add, commit, uncommit files in git

Gitignore, README.md
branching, checkout
Remote repository, push, pull
Version Control Git forking, cloning
System merging- 2 ways, 3 ways, merge conflicts

Mobile App a. Mobile application – flutter/ react native

b. Desktop application – Electron
Desktop App