Search Tech Journey

Find topics, journeys and posts

back to blog
system designintermediate 18m read

From Novice to Fluent on the Modern Microsoft Web Stack — 22-Chapter Self-Study Plan

An opinionated 22-chapter self-study plan from zero to fluent on the modern Microsoft web stack: PowerShell + .NET + ASP.NET Core + React + TypeScript + Azure + KQL + Polly + Bicep — with hand-built HTML diagrams per chapter.

From Novice to Fluent on the Modern Microsoft Web Stack

A complete, opinionated 22-chapter self-study plan that takes you from total novice to fluent on the modern Microsoft web stack — the kind shipped inside Microsoft product teams and by every enterprise running ASP.NET Core + React + Azure today.

Each chapter is a self-contained deep-dive (~30 minutes reading + a weekend of exercises). This hub is the map.

The whole production system in one picture

Client
Browser
React 19 · TS
Edge
Front Door / CDN
TLS · cache · WAF
Host
App Service
Linux · Kestrel
App
ASP.NET Core API
min APIs · DI
Data
Cosmos · Azure SQL
primary store
Identity
Entra ID
tenant · app reg
Secrets
Key Vault
refs · certs
Auth
Easy Auth · MI
headers · IMDS
Analytics
Kusto / ADX
KQL queries
Observability
App Insights
logs · traces · metrics
Browser→Front Door→App Service→API→DB · KQL · AI

The whole production system, in one picture. Every chapter teaches one slice.

What each chapter delivers

Sequenced lessons
Clear learning objectives, ordered to build on each other.
Depth notes
Good-enough-to-ship vs expert — know when to stop digging.
Hands-on exercises
No employer codebase needed — every exercise is self-contained.
Self-check questions
Verbal-mastery checks. If you can't answer them, you don't own it.
High-signal resources
Official docs first, then a book or canonical practitioner blog.
Weekly milestones
Pace yourself; the plan is a menu, not a calendar.
Capstone hooks
How each chapter shows up in the final analytics-dashboard project.

Pick your cadence

Sprint mode
~4 weeks of weekdays
  • •1 chapter per evening
  • •Weekends for exercises
  • •Best if you have momentum
Weekend mode
~11 weekends
  • •2 chapters per Saturday
  • •Exercises on Sunday
  • •Best if weekdays are busy
Job-prep mode
~2 weeks
  • •Front-load ch 3, 4, 5, 9, 10, 14, 15, 21
  • •Skip the rest until needed
  • •Best if you have an interview booked
Deep-dive mode
~22 weeks
  • •One chapter per week
  • •Full exercises + self-check
  • •Best for true mastery

The 22 chapters

Phase 1 — Foundations

ch 1–5
  1. 1Ch 1 · Developer toolingPowerShell, Git's three trees, VS Code, DevTools, package managers.→
  2. 2Ch 2 · Web fundamentalsHTTP, headers, cookies, TLS, REST, CORS, JSON.→
  3. 3Ch 3 · C# languageType system, LINQ, generics, async, records, pattern matching.→
  4. 4Ch 4 · .NET runtime + asyncCLR, GC, Task/ValueTask, cancellation, NuGet, global.json.→
  5. 5Ch 5 · ASP.NET CoreHosting, DI, middleware, routing, configuration, options, ProblemDetails.→

Phase 2 — Frontend stack

ch 6–11
  1. 6Ch 6 · Modern frontend baselineSemantic HTML, a11y, CSS cascade + Flexbox + Grid, modern JS.→
  2. 7Ch 7 · TypeScriptStructural typing, narrowing, generics, discriminated unions, utility types.→
  3. 8Ch 8 · Frontend build toolingVite + HMR, bundling, tree-shaking, npm vs pnpm, env vars.→
  4. 9Ch 9 · ReactComponents, hooks, rendering, effects, refs, error boundaries.→
  5. 10Ch 10 · Routing + state in SPAsReact Router, URL-as-state, TanStack Query, Zustand.→
  6. 11Ch 11 · HighchartsOptions model, series, axes, performance for high-cardinality data.→

Phase 3 — Platform layer

ch 12–17
  1. 12Ch 12 · Kusto / KQLPipeline syntax, summarize, joins, time-binning, injection defence.→
  2. 13Ch 13 · Azure App ServicePlans, slots, app settings, Key Vault refs, networking, scale rules.→
  3. 14Ch 14 · Identity for cloud appsEntra ID, OAuth/OIDC, Easy Auth, Managed Identity, OBO flow.→
  4. 15Ch 15 · ObservabilitySerilog, App Insights, correlation, OTel, KQL on telemetry.→
  5. 16Ch 16 · Resilience patternsRetry, timeout, circuit breaker, bulkhead, fallback, Polly v8 pipelines.→
  6. 17Ch 17 · CachingIMemoryCache, IDistributedCache, HybridCache, stampede protection.→

Phase 4 — Delivery + cross-cutting

ch 18–22
  1. 18Ch 18 · CI/CD with Azure DevOpsYAML pipelines, templates, SDL gates, federated identity.→
  2. 19Ch 19 · IaC + rollout orchestrationBicep, region rollouts, Ev2 / Argo / Spinnaker.→
  3. 20Ch 20 · Security baselineOWASP, secrets, transport, auth hardening, supply chain.→
  4. 21Ch 21 · TestingxUnit, WebApplicationFactory, Vitest, RTL, Playwright, contract tests.→
  5. 22Ch 22 · Cross-cutting professional skillsReading code, debugging, PRs, docs, on-call.→

Capstone — Analytics Dashboard

Once chapter 17 lands, you have everything you need to start the capstone: a small but production-grade web app that exercises most of the stack together.

1 · User
Browser
2 · Edge
Front Door
WAF · TLS
3 · UI
React SPA
Vite · TS · TanStack
4 · API
ASP.NET Core
min APIs · Polly · cache
5 · Identity
Entra ID
OIDC · Easy Auth
6 · Metadata
Azure SQL
queries metadata
7 · Analytics
Kusto cluster
KQL · time-series
8 · Ops
App Insights
traces · logs · metrics

End-to-end correlation via operation_Id across SPA → API → SQL → KQL → AI.

Capstone architecture — one resource group, eight services, every pattern from chapters 1–22 in one repo.

Stack ingredients (all introduced above):

Frontend: React 19 + TypeScript + Vite + TanStack Query + React Router + Highcharts.
Backend: ASP.NET Core minimal APIs + EF Core + Polly v8 + HybridCache + Serilog.
Auth: Entra ID via Easy Auth (frontend) + Managed Identity (backend → SQL/KQL).
Data: Azure SQL for metadata, Kusto cluster for analytics queries the dashboard charts.
Ops: App Insights end-to-end correlation; structured logs; p99 latency alerts.
Delivery: Azure DevOps pipeline with templates; Bicep deploys two regions; staging slot + swap.
Security: SDL gates, signed commits, dependency scanning, no secrets in code.
Tests: xUnit + WebApplicationFactory + Vitest + RTL + one Playwright smoke per critical path.

The capstone post (linked at the end of chapter 22) walks through repo layout, Bicep module structure, the pipeline YAML, and how each pattern from chapters 1–21 shows up in the codebase.

How to use this hub

Start here

➡️ Chapter 1 — Developer tooling

Or jump to any chapter: