10/13/24, 8:21 PM Web dev

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, [Link])

Simple frontend, DOM

[Link] 1/8
10/13/24, 8:21 PM Web dev

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

[Link]/Bun/Cloudflare Runtime - Various JS runtimes

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

HTTP Servers

[Link] 2/8
10/13/24, 8:21 PM Web dev

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

[Link] 3/8
10/13/24, 8:21 PM Web dev

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

[Link] 4/8
10/13/24, 8:21 PM Web dev

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

[Link] 5/8
10/13/24, 8:21 PM Web dev

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

[Link] 6/8
10/13/24, 8:21 PM Web dev

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

[Link] 7/8
10/13/24, 8:21 PM Web dev

Easy Medium Hard

Advance BE communication
queues (redis)
pub subs (redis/kafka/RabitMQ)
Scaling ws, http servers
[Link] vs golang vs rust for
performance

More topics

•⁠⁠ZOD
* ⁠Serverless BE
•⁠⁠openAPI spec
•⁠⁠Autogenerated clients
•⁠⁠Rate Limiting
•⁠⁠Captcha
•⁠⁠ddos protection
•⁠⁠sharding, replication, Resiliency
•⁠⁠GRPC
L dB l

[Link] 8/8