2023

FULLSTACK
WEBDEV ROADMAP

Basics of HTML, CsS &JS

Choosing a framework
Version Control Complete 7 Months Guide
Choose a language for backend
Head to Databases
Devops CI/CD
LEARN THE BASICS (1 MONTH)
HTML
" Forms & Validations
" Conventions and Best Practices D
CSS
" Making Layouts
Floats, Position, Display, Grid,
Flexbox, Box Model
" Responsive Design
D
JavaScript
" Syntax &Basic Construct
" DOM Manipulation
"Fetching APls / AJAX JS
" ES6+ Syntax
SAVE & SWIPE
 CHOOSE AFRAMEWORK (1.5 MONTH)
(Choose any 1)
B
CSS *My Preference

"Bootstrap
" Tailwind Sass
" Bulma, Foundation or any other.

PREPROCESSOR
SASS
" Less

JavaScript
"React
" Angular
" Vue

SAVE & SWIPE

VERSION CONTROL SYSTEM (15 DAYS )
" Git

" Github/Gitlab / BitBucket git

Package Managers
" NPM
" Yarn

Module Bundlers
" Webpack
Rollup
" Parcel

*Note - If you have chose ReactJs you should also learn

" NextJs
"ReduX NEXT. SAVE & SWIPE
 FRAMEWORK
LIBRARIES

FRONTEND DONUT <Link/> <Image/) Rovter CLl

React.JS
Wanna have a donut?

CSS
Floats & positions
Flexbox
HTML
" Forms and vd<idations
NEXT.
CSS Grid
" Semantic Tag BUILD
" Accessibility & SEO basics
" Displey & transform " Convention & best practices
Box Model
Media Queries </> fully guctional
Responsive Design J« Web ApP

VCS Everything explained on

GIT @developers_community__
GITHUB
" Gitlab DESIGN TOOLS
" Bit Bucke Figma
(ay oe) AdobeXD
Photoshop
llustrator
(3-4 MONTHS )
Frontend Finished
JAVASCRIPT

FRAMEWORKS
" React Js SS

" Angular JAVASCRIPT(ES6) S H A

" Vue Js
(any one) " Syntax & basic constructs
" Bootstrap " DOM Manipulation
" Tailwind " Functions, Classes & Objects
" Bulmo w o J S N Y L

" Semantic UI CSS 3

"Fetch API or AJAX
CSS 3
PREPROCESSSOR " ES6 + Syntax
" SASS " Hoisting, Closures, Prototype
" LESS " Event Bubbling, shadow DO

ARRAYS IN WAYS TO REMOVE

9 JAVASCRIPT
CSS CSS GRID FLEXBOX OR GRID!
JAVASCRIPT DUPLICATES FROM
AN APRAYI SHORTHANDS! FILTER)
7256
USE CASES!

WEB AP, YOU SPREAD OPERATOR 8 WAYS TO LOOP CSS FLEXBOX CSS CSS PSEUDO
NEED TOO KNOW! USE CASES! OVER AN ARRAY USE CASES! :SELECTORS
MEDIA QUERY
Idiziy
BACKEND STARTS (1.5 MONTH)

Choose &Learn a language (Choose :

" JavaScript
"Java
" C#
" PHP
" Python
" Ruby
" Go
" Rust
" NodeJs

Some Knowledge on OS &

terminal commands
" Process Mangement
" Threads and Concurrency
SAVE & SWIPE
"Basic NetworkingConcepts
HEAD TO DATABASES (1 MONTH)
Choose 1

DATABASES

Relational Non -Relational

" PostgreSQL " MongoDB
" MySQL " CouchDB
" MariaDB Cassandra
" MS SQL " InfluxDB
" Oracle "Firebase

SAVE & SWIPE

DEVOPS (2 MONTHS)
Learn Some CI/CD Tools
" Gitlab CI
" Jenkins
" Azure Devops
" Circle CI Microsoft
Azure
Cloud Providers
" AWS aws
"Google Clouds
" Azure, Linode Google Cloud
" Heroku, Digital Ocean
H heroku
What is & howto setup
" Reverse & Forward prOXy
" Load Balancer
SAVE & SWIPE
" Caching Server
" Firewall
 BACKEND BURGER
Containerization Architectural patterns
" Docker Microservices
" rkt (Prefer Docker) " Monolithic
" LXC " Serverless
" CORS
CI/CD Tools " SOA
" Jenkins APls
" Azure (any one) " REST
Circle CI " JSON
" SOAP
VCS Caching " GSON
" G|T " CDN
" GITHUB " Server Side
(any one)
" Gitlab " Client-Side
" Bit Bucket " Redis

Frameworks Testing
" Django Integration Testing
Depending on " Unit Testing
" ExpressJS language you picked
Laravel "Functional Testing
" Ruby on Rails
(any one)
DATABASE
" RELATIONAL
Chooseaprogramming " NON RELATIONAL
language (any one) PostgreSQL
" MySQL
" JAVA " C# MongoDB
" PYTHON " NODE JS MS SQL RethinkDB
" RUBY " GO Oracle
Want this DynamoDB
" MariaDB
PHP " RUST CouchDB
(any one in both)
burger? GraphQL