Scribd
Upload
5 views

Web dev syllabus

The document outlines a comprehensive web development curriculum, categorized into various difficulty levels across multiple topics including HTML, CSS, JavaScript, Node.js, databases, React, TypeScript, and more. It includes project ideas for practical application, such as building a TODO app, Gmail clone, and real-time chat applications. Additionally, it covers advanced backend concepts, testing methodologies, and auxiliary stacks like Firebase and Strapi.

Uploaded by

sciak7128
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Web dev syllabus

The document outlines a comprehensive web development curriculum, categorized into various difficulty levels across multiple topics including HTML, CSS, JavaScript, Node.js, databases, React, TypeScript, and more. It includes project ideas for practical application, such as building a TODO app, Gmail clone, and real-time chat applications. Additionally, it covers advanced backend concepts, testing methodologies, and auxiliary stacks like Firebase and Strapi.

Uploaded by

sciak7128
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Web dev

Foundations
Easy Medium Hard
HTML
CSS
Bash basics (cd, ls, pwd, mkdir,
touch, vi)
Bash medium (grep, piping, reverse
search)
Git/Github
JS Intro, Single threaded nature of
JS
Async JS, callback queue, event
loop
Creating promises, Common
Promise API methods
Common JS APIs (map, filter,
reduce, Object.keys)

Simple frontend, DOM


Easy Medium Hard
Intro to DOM, DOM Tree Structure
Common DOM APIs
(getElementById,
getElementsByClassName,
querySelector, innerHTML,
innerText, getAttribute,
setAttribute).
Event handlers, onClick,
stopPropagation,
localStorage
DOM Manipulation, Dynamic
frontends
Creating a simple reconciler,
Foundation for react

Project
1. Pure frontend TODO app using DOM Manipulation

Node.js/Bun/Cloudflare Runtime - Various JS runtimes


easy medium hard
What is a JS runtime
Node.js installation, common APIs
file system api, fetch.
External packages, axios vs fetch
v8, cf runtime
stream, worker threads, cluster
module,

HTTP Servers
Simple Medium Advance
What are HTTP Servers
Methods, routes, URLs, IPs and
domains
headers, body, query parameters
Intro to express, creating routes
Middlewares in express
File system like DBs
Authentication using jwts, basics of
jwts
Secret management using Doppler

NoSQL Databases
Easy Medium Hard
Intro to Databases
SQL vs NoSQL
MongoDB Intro, getting your first
DB
mongoose, Schemas etc. Simple
CRUD
Relationships intro
Relationsips in Mongo
Aggregations in mongo

SQL Databases
Easy Medium Hard
Recap SQL vs NoSQL
Postgres intro, getting your free Creating schemas while dealing
with SQL databases, CREATE TABLE
Creating schemas while dealing
with SQL databases, CREATE TABLE
SQL queries (CRUD)
Indexes
Transactions and Concurrency
Control
Normalization
Sub queries, batch queries

ORMs
Simple Medium Hard
Intro to ORMs
Prisma basics, setup, schema
generation and CRUD queries
Transactions and relationships in
prisma
Drizzle basics, setup, schema
Txns and relationships in drizzle

React
Revise DOM, foundation of React,
why frontend frameworks
Components in react useState, useEffect
Routing in react Connecting FE to BE
useRef, useMemo, useCallback
Custom hooks
Context API
Intro to state management
intro to recoil, atoms and selectors
atomFamily, selectorFamily

Styling React apps


Easy Medium Hard
Material UI
Tailwind
Shadcn

Typescript
Easy Medium Hard
TS vs JS, why TS?
types in ts
interfaces in ts
Advance TS APIs (Partial, Exclude …)

Project
Pure frontend -
1. Gmail clone
Full stack
1. Excelidraw

NextJS
Easy Medium Hard
Why NextJS, SSR vs CSR
File based routing
Middlewares
SSG, ISR
Tailwind, shadcn integration
API routes
Data fetching
NextAuth, Cookie based auth
Internationalization

Monorepos, Turborepo, lints


Easy Medium Hard
What is linting
Prettier, eslint
pre commit hooks/husky
lints in CI
What is a monorepo
Basic yarn workspaces monorepo
What is turborepo
Turborepo

Websockets, rtc
Easy med hard
one way vs two way comm
what are ws, how are they diff from
http
Creating a websocket server
Client side logic to connect to a ws
server
UDP vs TCP communication, webrtc
SFUs and Mediasoup

Project
1. Build a chat app (simple)
2. Build a chess app/other real time game

Testing
Easy Medium Hard
Why testing?
Unit tests
Integration tests
End to end tests

Advance backend
Easy Medium Hard
Advance BE communication
queues (redis)
pub subs (redis/kafka/RabitMQ)
Scaling ws, http servers
Node.js vs golang vs rust for
performance

More topics

•⁠⁠ZOD
* ⁠Serverless BE
•⁠⁠openAPI spec
•⁠⁠Autogenerated clients
•⁠⁠Rate Limiting
•⁠⁠Captcha
•⁠⁠ddos protection
•⁠⁠sharding, replication, Resiliency
•⁠⁠GRPC
•⁠⁠Load Balancers
•⁠⁠CAP theorem

Project
1. Building codeforces/leetcode
2. Scale your realtime app

Good auxilary stacks to know -


Firebase
Strapi

You might also like