Web Developer Roadmap (JS/TS)

WEBDEV_ROADMAP.md

Web Dev Roadmap

Application Development

1. HTML, CSS, & JavaScript Fundamentals

• HTML5, CSS3 & Vanilla JavaScript
• TypeScript

2. Node.js Basics & ExpressJS

• event loop
• async programming / Promises / callbacks
• ExpressJS
• client - server architecture & connects
  • HTTP
  • WebSockets
• request to response flow
  • middleware
• other frameworks: alternatives and more "batteries-included" options
  • NestJS: very opinionated but good patterns that lend easier scaling of codebase
  • koa: successor to ExpressJS
  • Fastify: lightweight & speed-oriented
  • Hapi: been around for a while but 🤷🏾‍♂️
  • Hono: fast, lightweight, designed for any JS runtime (⭐️ my current obsession)

3. UI Frameworks Part 1 - React Basics

• Create React App (CRA)
• components (functional vs class)
• props
• state
• contexts
• hooks
• SSR (server-side rendering) vs CSR (client-side rendering)
• static generation w/ dynamic SSR & CSR

4. UI Frameworks Part 2 - React-based Full-stack Frameworks

• Next.js
• Remix

Deployment, Releases & CI/CD

5. Cloud Hosting Solutions

Below are some potential options for deploying and hosting your websites and web applications.

• serverless (all have free tiers)
  • Vercel
  • Cloudflare Pages
  • Netlify
  • GitHub Pages
• server-ful
  • Render: free tier
  • fly.io: cheap-ish, growing in popularity
  • AWS
  • GCP

Next Steps

Alternative JavaScript Runtimes

Node.js isn't everything. Try out some of these runtimes to understand core JS APIs without relying on Node's internals when you develop. Resulting in more universally runnable code. 🙂

• Deno
• bun.sh
• Cloudflare's workerd

Alternative JavaScript Frameworks

React isn't the only modern approach to UI development. These frameworks are viable alternatives and even competitors you should check out.

• Vue
• Svelte
• Angular

There is a helpful tool called "Component Party" where you can compare how different components are implemented in these frameworks and more!

API Paradigms

• REST (definitely)
• GraphQL (recommend basic understanding)
• tRPC (if ya want)

Programming Techniques

• OOP (Object-Oriented Programming)
• functional programming

Resources

Courses

• Level Up Tutorials
  • TypeScript
• Wes Bos
  • JavaScript 30 day challenge
  • CSS Grid
• Udemy: great course platform but be sure to check curriculums and reviews (often has sales)

Podcasts

• Syntax.fm
• JS Party
• Lex Friedman

References

• MDN Docs: great ref for web standards, APIs, concepts, techniques, and more