Fed up of fighting javascript frameworks?

Build amazing web applications, using C#

Blazor by Example Logo

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...

hello world

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.

Avatar of Jon Hilton

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

Discover how to...

  • Filter a list using two-way binding
  • Choose when to update a binding's value (onchange or oninput)

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...

  1. Spend an hour cursing something which blatantly should work but doesn't
  2. Question the framework, documentation, browser, Stack Overflow and anything else you can think of
  3. Spot the typo you made an hour ago
  4. Fix said typo
  5. 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

$39  

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

$89  

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...

Up and running

Start Here!

PDF download available

Server or Client?

It all starts (as always) with a new project

Example 1 - Hello World

What day were you born?

A little databinding goes a long way...

Wire up the submit button

Final code

A Pomodoro Timer

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 style message list

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

Shopping Cart

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

Product Search

A Product search/filter - The Requirement

Implement the basic UI

Show search results

Returning search results faster

Application Dashboard

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

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!

Bonuses & Source Code

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# to follow along?

No, although it will certainly be easier for you to pick up if you do. I've been careful to provide explanations of key C# concepts as they apply to Blazor.

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?

This is largely the same answer... 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.