Fed up of fighting javascript frameworks?
Build amazing web applications, using C#

Already convinced? Buy now
We need to talk about "modern" web development.
For over a decade Javascript has been considered a prerequisite if you need to build fast, responsive "modern" web applications.
Like a dog chasing its own tail, the javascript machine goes round, and round, generating endless frameworks and a near incomprehensible ecosystem.
Build tools, package managers and compilers; all intended to help you package your code but in truth, you just cross your fingers, hit publish and hope the stars align to generate something you can actually push to your server.
And where does this leave you, the diligent developer trying to build your "simple" web application?
Tired, frustrated and less enthusiastic by the day.
With every new framework, build tool, state management library, you feel less and less productive.
You battle, you slog, you finally deploy your application only to have some maverick update an NPM package you didn't realise you relied on and, poof, just like that your site's gone up in flames again.
Oh to side-step the JS churn and get back to the fun part; building interesting web applications.
Build amazing web applications with Blazor WASM
Javascript is still an important part of the modern web development puzzle (albeit often a frustrating, perplexing, energy-sapping part) but now we have another option...
Microsoft has released Blazor WASM (Web Assembly), and with that arrives a JS alternative.
Finally, you can bring your C# skills to the fore, enjoy the benefits of strong-typing, a familiar ecosystem (and tools), and build web applications that rival all those fancy "JS heavy" applications you encounter every day.
Blazor WASM applications are written using C#, and run entirely in the browser (just like javascript). You can build complex, rich, interactive web applications without writing a lick of javascript.
But now you face a new challenge...
How do you give Blazor a spin, learn the fundamentals and decide if it's the right option for your next project?
Blazor is still new, and it's tough to find meaningful examples; I mean, if you've seen the Blazor demo app once you've seen it a hundred times...
But it's simple right?
Open Visual Studio, create a new Blazor application and you're off; go forth and build your applications!
Except... now you have questions:
- How do I break a requirement down and build it using components?
- How do I organise my components?
- How do I pass data between components?
- Should I be passing simple primitives or entire objects?
- Where does my data access code go?
- Do I need to build my own components for everything?
It's a lot to learn, especially if you're just trying to figure out whether Blazor is for you.
What if you could fast-forward to the good bit, the bit where you get to build interesting projects?
Learn Blazor today
Hey, I'm Jon, author of Blazor by Example.
When I first started learning Blazor I realised I had an unfair advantage.
You see, it turns out Blazor borrows a lot of concepts from the leading javascript frameworks out there (React, Angular and Vue)
Essentially Microsoft has taken the best parts of those frameworks and used them to create its own simple (but powerful) component model.
Having spent the last decade or so learning and using most of the leading javascript frameworks, Blazor's component model philosophy instantly clicked for me.

But here's the rub, Blazor is unlike any previous incarnation of ASP.NET.
Where MVC deals in views, and Razor pages returns, well, pages... Blazor is all about components.
And "thinking in components" is fundamentally different to building your app using pages or views.
So I decided to use this advantage for good! and help other .net developers get on board with the fundamentals of building applications using Blazor components.
Blazor by Example
A focused collection of bite-sized examples, Blazor by Example really hammers home how to move from design (or mockup) to working features.
Learn how to break a requirement down into components and then build them, quickly, using Blazor's powerful component model:
Within a few hours you'll understand:
- How Blazor's component model works
- How to create small, re-usable components
- How to compose several components together to make bigger features
- Where to put your data access code
Here's one of the modules (building a simple blog)...

It's stressful when you're trying to learn something new and can't find concrete examples to work from.
It's maddening when you know what you're trying to build, but don't have the right words to put into Google to find answers to your questions.
But once you have a few examples under your belt and a repeatable strategy for breaking the requirement down into smaller parts, you'll realise you can build almost anything.
What's included?
Hello World (component basics)
Discover how to...
- Spin up a Blazor project
- Create simple components
- Render multiple instances of a component
- Pass data in via parameters
- Use routing
Pomodoro Timer

Discover how to...
- Use StateHasChanged to signal Blazor to render your UI
- Use JS Interop to change the browser window's title
- Inject dependencies into your components
- Implement IDisposable to clean up after yourself!
Pomodoro Timer (with base class)
Discover how to...
- Refactor to use component base classes
- Inject dependencies into a base class
- Implement IDisposable in a base class
Slack-style message list

Discover how to...
- Build components from a sketch/mockup
- Use one-way binding to show information
- Write your UI logic using @code in your component
- Bind to a list (to show multiple instances of a component)
- Apply CSS styles
- Handle events (to add new messages)
- Display a menu "on hover"
- Toggle the UI between read only and edit mode
Shopping Cart

Discover how to...
- Use Event Callbacks to trigger changes in other components
- Use two-way binding to show and update data
- Use HTML Selects (dropdowns) in Blazor
Product Search

Discover how to...
- Filter a list using two-way binding
- Choose when to update a binding's value (onchange or oninput)
Application Dashboard

Discover how to...
- Extend your app by creating new components (instead of modifying existing ones)
- Build re-usable components
- Use ChildContent Render Fragments to inject content into your components
A Simple Blog

Discover how to...
- Use two-way binding to view/modify data
- Retrieve and persist data to a database
- Render raw HTML
- Use auth in your web applications
- Use validation in your forms
- Implement one validator which runs in the browser and on the server
- Restrict access based on user role
Learn important Blazor concepts by building different examples
With each new example, you'll discover vital Blazor concepts and see them in action:
- One-way and two-way binding
- Validating forms
- Using StateHasChanged to trigger the UI to render
- Composing several components together
- How to break down a big feature into lots of manageable components
- Communicating between components
- Where to put your domain logic
- How to connect Blazor components to data (and business logic)
Learn how to trigger an instant filter of a list in the Product search example.
Build a user interface from several components, which all communicate with each other (as in the Slack Clone example).
Use Event Callbacks to react to changes in child components (like refreshing the shopping cart when items are deleted).
Packed with step-by-step instructions and explanations of all the key Blazor concepts.
Most of the examples also include bonus "next step" practice exercises for you to try, to really drive the concepts home.
Bonus #1 - Banish your CSS woes
If you're anything like me you don't exactly rush to take on 'front-end' work, especially when it involves fiddling around with CSS for hours!
Thankfully, there is a much quicker (and easier) way to make your Blazor application look good, using Tailwind CSS.
Watch over my shoulder as I take some of the Blazor examples from the course, eradicate Bootstrap and use Tailwind CSS to make them come to life.
Goodbye Bootstrap. Hello Tailwind CSS (VIDEO)
Discover how to...
- Remove Bootstrap from the standard Blazor template
- Add Tailwind CSS to your Blazor site
- Use Tailwind to 're-skin' a simple Hello World example
A better looking Pomodoro Timer (VIDEO)
Discover how to...
- Spruce up the Pomodoro timer example using Tailwind CSS
Slack - but with a little more style (VIDEO)
Discover how to...
- Make the Slack 'clone' come to life using Tailwind
- Handle different screen sizes (make it responsive)
Bonus #2 - Connect with your fellow ASP.NET/Blazor developers
Building software is tough.
Learning a new framework is tough.
Doing both completely on your own is even harder!
I bet you've had this experience at some point in your development career...
- Spend an hour cursing something which blatantly should work but doesn't
- Question the framework, documentation, browser, Stack Overflow and anything else you can think of
- Spot the typo you made an hour ago
- Fix said typo
- Laugh at your own stupidity!
Sometimes you just need someone to cast an eye over your code, or somewhere you can ask a question and save yourself from hours of floundering, scouring the depths of the Internet and generally questioning your life choices!
The new Practical Dot Net online community has your back.
Sign up for the Complete Package and you'll be enrolled, automatically, in the community, where you can connect with your fellow developers and get your questions answered.

In the community you'll find curated content (links to the most useful .NET articles, videos etc.) plus exclusive content and discounts on future courses...
Just the course
Get up and running with Blazor WASM quickly
- Instant online access
- PDF version for offline reading
- 'Starter Projects' source code
- Source code for every example
The Complete Package
Everything you need to start building real applications, plus ongoing resources and support if you get stuck
- Instant online access
- PDF version for offline reading
- 'Starter Projects' source code
- Source code for every example
- Tailwind CSS upgrade videos
- Tailwind CSS upgrade source
- VIP Community access and support
- 'Practice' exercise solutions
- 'Practice' exercise source code
Full contents List
Still on the fence? Here's a complete listing of the core course modules, so you can see exactly what's included...
Start Here!
PDF download available
Server or Client?
It all starts (as always) with a new project
Example 1 - Hello World
A little databinding goes a long way...
Wire up the submit button
Final code
A Pomodoro Timer - The Requirement
A simple version of the UI
Make the timer count down!
Blazor needs a nudge to render
Display minutes and seconds
Stop that timer
Too many timers
Dispose of the timer
Show the time in the browser title
Refactor the logic to a base class
Update your links
Next Steps
A Slack Clone - The Requirement
Start with the building blocks
Drive it from data
Should you pass objects or values to your components?
Build the UI for posting new messages
Implement an Event Callback
Build the UI for editing a message
Show Edit prompt on hover
Toggle Edit Mode
Make editing actually work
Wrapping up
Practice Feature - Show Reactions
A Shopping Cart - The requirement
Break it down into components
A brief Bootstrap primer
Shared Models
Populate the cart from real data
Delete items from the cart
Change line item quantities
Actually update the quantity in the DB
Another way to update the UI
Re-render cart when quantity changed
A Product search/filter - The Requirement
Implement the basic UI
Show search results
Returning search results faster
The requirement and initial prototype
Different looking panels
Re-usable components
An expandable panel?
Make it full screen
A fullscreen wrapper
Fix the icon
A Simple Blog - The Requirement
HTTP Client Factory?
View a specific post
Add new posts
How to test adding a new post
Validate user input
Check that slug
Unique slugs
Edt Posts
Restrict access
Next Steps
Bonus feature - Make the Blog support Markdown!
Source Code (links)
About the starter projects
Frequently asked questions
I'm not sure I've got much time to learn something new at the moment, how long will this take?
We're all going through some weird stuff at the moment and I am acutely aware that people's ability to commit time and energy to learning something new will vary right now.
I've designed Blazor by Example to be as accessible as possible. Each example is self-contained and designed to work at your pace, on your schedule.
If you wanted, I bet you could blitz through the entire thing in a few hours! But equally you might find it much more useful to take your time, and work through the examples at a more leisurely pace.
My hope is you'll get plenty of those, "Aha, so that's how that works!" moments even if you can only spare 10 minutes here and there over the coming weeks.
What if I buy but subsequently decide it's not for me?
No worries, just drop me an email and I'll happily refund you in full.
Do I need any prior knowledge of C# and/or .NET to follow along?
Ideally yes. Although you can follow the examples without prior knowledge of C# the course doesn't go into particular details about the C# syntax. The included backend APIs can be used "as-is" without prior knowledge but in order to fully explore/understand them, some experience of building applications using .NET would be useful.
All the examples are built with full step-by-step directions so you can re-create them for yourself.
I've also made sure to include explanations for Visual Studio, VS Code, and just using a terminal where possible, so there should be no stopping you!
Do I need to have "tried" Blazor already?
No! The course assumes no prior knowledge 👍
If you've already had a go at using Blazor, you may find some of the earlier walkthroughs pretty straightforward, but even then you'll be able to plug any gaps in your knowledge and try out my approach to building simple web apps using components.
Do I have to show up at certain times or anything like that?
No, everything is instantly available to you as soon as you sign up.
As you've seen from the screenshots above, it's mostly text-based with images to give you a better understanding of how all the pieces fit together, and designed for you to absorb at your own pace.