Scribd
Upload
35 views22 pages

Web Development Roadmap

The document outlines an ultimate roadmap for web development, covering essential topics such as how the internet works, basic tools, and various paths including front-end, back-end, desktop, mobile applications, and machine learning. It details specific technologies, frameworks, and skills required for each path, along with soft skills necessary for personal development. The content is structured with a table of contents and categorized sections for easy navigation.

Uploaded by

abdullahsunasra19
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
35 views22 pages

Web Development Roadmap

The document outlines an ultimate roadmap for web development, covering essential topics such as how the internet works, basic tools, and various paths including front-end, back-end, desktop, mobile applications, and machine learning. It details specific technologies, frameworks, and skills required for each path, along with soft skills necessary for personal development. The content is structured with a table of contents and categorized sections for easy navigation.

Uploaded by

abdullahsunasra19
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

WEB

DEVELOPMENT 01

ROADMAP
ULTIMATE DEVELOPMENT ROADMAP
TABLE OF CONTENTS PAGE NO.
1. How The Internet Works 3
2. Basic Tools 4
3. HTML 5
4. CSS 6
5. Time To Choose 7 02

Front-End Path 8
Back-End Path 14
Desktop Applications 18
Mobile Applications 19
Machine Learning / AI 20
Soft Skills & Personal Development 21
1. HOW THE INTERNET WORKS

Topics Resources
Hosting How Internet
DNS Works 03

Http What is Internet ?


Browsers
Domain Names
2. BASIC TOOLS
Text Editor Browser
Visual Studio Code Chrome
Sublime Text Edge
Atom Firefox
Vim 04

Terminal
Design Powershell
Figma Zsh
Adobe XD Hyper
Sketch iTerm
Photoshop Bash
Git Bash
3. HTML

Topics
Best Practices
Semantic HTML 05

Forms & Validations


Accessibility
SEO
4. CSS

Basics
Flexbox
CSS Grid
Custom Properties 06

Responsive Design
CSS Preprocessors
Modern CSS
CSS Frameworks
TIME TO CHOOSE
FRONT-END PATH
BACK-END PATH 07

DESKTOP APPLICATIONS
MOBILE APPLICATIONS
MACHINE LEARNING / AI
SOFT SKILLS & PERSONAL DEVELOPMENT
FRONT-END PATH
JAVASCRIPT

Basic Syntax 08
DOM Manipulation
Fetch API
JSON
ES6+
TypeScript
JAVASCRIPT - FRONT-END FRAMEWORK

React
Vue
Svelte
Angular
09

JAVASCRIPT - FRONT-END FRAMEWORK - STATE MANAGEMENT

Context API (React)


Redux (React)
Vuex (Vue)
Services (Angular)
JAVASCRIPT - FRONT-END FRAMEWORK - STATIC SITE GENERATORS

Gridsome (Vue)
Nuxt.js (Vue)
11ty
Next.js (React)
Gatsby (React)
10

JAVASCRIPT - FRONT-END FRAMEWORK - SERVER SIDE RENDERING (SSR)

Next.js (React)
Nuxt.js (Vue)
JAVASCRIPT - PROGRESSIVE WEB APPS (PWA)
JAVASCRIPT - GRAPHQL

Apollo

JAVASCRIPT - WEB ASSEMBLY


11
Rust
C
C++
JAVASCRIPT - JAMSTACK
JavaScript
API
Markup
JAVASCRIPT - MORE TOOLS
Browser Dev Tools
VS Code Extensions
Emmet
Axios

12
JAVASCRIPT - MORE TOOLS - PACKAGE MANAGERS
yarn
npm

JAVASCRIPT - MORE TOOLS - VERSION CONTRO


Git
GitHub
JAVASCRIPT - MORE TOOLS - BUILD TOOLS - TASK RUNNERS
npm scripts
Gulp

JAVASCRIPT - MORE TOOLS - BUILD TOOLS - LINTERS / FORMATTERS


Prettier 13

ESLint

JAVASCRIPT - MORE TOOLS - BUILD TOOLS - MODULE BUNDLERS


Webpack
Parcel
Rollup
BACK-END PATH
PICK A LANGUAGE
JavaScript (Node.js)
JavaScript (Deno) 14

Python
Rust
C#
Java
PHP
Go
Ruby
BACK-END FRAMEWORKS
Laravel (PHP)
Spring (Java)
Ruby on Rails (Ruby)
15
Express (Node.js)
Koa (Node.js)
Django (Python)
Flask (Python)
Blazor (C#)
DATABASES
DATABASES - RELATIONAL
PostgreSQL
MySQL
Azure Cloud SQL
MS SQL 16

DATABASES - NOSQL / CLOUD


MongoDB
Airtable
AWS
FaunaDB
Firebase
DATABASES - APIS

DATABASES - APIS - AUTHENTICATION


OAuth
17
JWT

DATABASES - APIS - AUTHENTICATION -PROVIDERS


Auth0
Firebase
DESKTOP APPLICATIONS
ELECTRON
Examples: 18
VS Code
Twitch
Slack
Figma
Discord
MOBILE APPLICATIONS
React Native
Flutter 19
NativeScript
Ionic
MACHINE LEARNING / AI
Python
TensorFlow.js 20

Brain.js
SOFT SKILLS & PERSONAL DEVELOPMENT
Attention to Detail
Creativity
Interpersonal Skills 21
Teamwork
Time Management
Work Ethic
Problem Solving
Leadership
Communication
Adaptability
THANK YOU
-- --
CODING HOME

You might also like