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
(getElementByI
d,
getElementsBy
ClassName,
querySelector,
innerHTML,
innerText,
getAttribute,
setAttribute).

Event handlers,
onClick,
stopPropagatio
n,

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, Creating

getting your schemas while
free 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

Internationalizatio
n
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/Rabit
MQ)

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