Welcome to Blazor: Beginner to Intermediate — a hands-on series where we go from "I've never touched Blazor" to building real, interactive web pages, one small win at a time. No prior web experience required. If you can read a little C#, you're in.

Here's the plan. Over twelve parts, we'll build a mini patient app called ClinicApp together — a friendly nod to our Conversation to System Design series, where we designed a clinic database from a real chat with a doctor. That series turned a conversation into data. This one turns data into a working app you can click.

So what is Blazor, exactly?

For most of the web's history, there was one rule: if you wanted a page to do something in the browser, you wrote JavaScript. Blazor breaks that rule. It's a framework from Microsoft that lets you build interactive web apps using C# — the same language you'd use for a desktop app or an API. Buttons, forms, live updates: all in C#, no JavaScript required. If you've been learning C# already (and if not, here's why C# is a great first language), Blazor means your existing skills carry straight over to the web.

How does C# end up running in a browser? In short: Blazor apps are built from components — small pieces of UI written in files ending in .razor — and Blazor keeps what's on screen in sync with your C# code, either from the server over a live connection or right inside the browser via WebAssembly. That's the ten-second version; the full story lives in our What is Blazor? overview, and the curious can also peek at What is WebAssembly?. Here's the picture to keep in your head:

You write C# + Razor components Blazor compiles & renders Browser shows plain HTML & CSS
Blazor turns the C# and Razor components you write into the HTML and CSS every browser understands.

Step 1: Install the .NET SDK

The .NET SDK is the toolbox that builds and runs everything we'll write. Grab it from dotnet.microsoft.com — .NET 10 is the current LTS (long-term support) release, so that's the one to pick — and run the installer. It's a straightforward next-next-finish affair on Windows, macOS, and Linux.

Then open a terminal and check that it worked:

dotnet --version

If a version number prints out, you're set. If the command isn't found, close and reopen your terminal — installers sometimes need a fresh window to be picked up.

Step 2: Pick an editor

Two great options, and you can't really go wrong:

  • VS Code with the C# Dev Kit extension — free, lightweight, works everywhere. This is what we'll assume in the series.
  • Visual Studio — the full-featured IDE, also free in its Community edition, if you prefer everything built in.

Step 3: Create and run ClinicApp

Time for the fun part. In your terminal, navigate to wherever you keep your projects and run: 

dotnet new blazor -o ClinicApp
cd ClinicApp
dotnet run

The first command creates a new project from the Blazor Web App template in a folder called ClinicApp. If a wizard or prompt asks about interactivity, choose Server — that's the setup this whole series is built on. Then we step into the folder and run it.

After a few seconds of building, you'll see a line like Now listening on: http://localhost:5163 (your port number will differ). Copy that address into your browser, and — there it is. Your first Blazor app, alive and running on your own machine.

Take it for a spin

What are you looking at? A simple home page with a navigation menu down the side. Click Counter in that menu. You'll land on a page with a button — click it, and watch the count go up. Click it again. And again.

It feels tiny, but pause on what just happened: a button on a web page ran a C# method, which updated a C# variable, and the page updated instantly — no page reload, and not a line of JavaScript written by you. That little counter is the whole promise of Blazor in miniature, and by the end of this series you'll understand every moving part behind it.

Tip: While learning, start the app with dotnet watch instead of dotnet run. It rebuilds and refreshes your browser automatically every time you save a file — perfect for the "change something, see what happens" experiments this series will encourage a lot.

What's next

Right now, ClinicApp is a folder full of files you didn't write and might not recognize. That changes next. In Part 2, we'll walk through the project file by file — what each one does, why it's there, and which ones you'll actually touch — so that nothing in your project ever feels like magic. See you there!