Supercharge your web development skills

Build reliable, modern web applications faster (using Blazor in .NET 6)

Already convinced?

JavaScript is no longer the only game in town…

For over a decade JavaScript was considered a prerequisite if you needed to build fast, responsive "modern" web applications.

Like a dog chasing its own tail, the JavaScript machine went round, and round, generating endless frameworks and a sometimes incomprehensible ecosystem.

Build tools, package managers and compilers; all intended to help you package your code but in truth, you just crossed your fingers, hit publish and hoped the stars aligned to generate something you could actually push to your server.

And where did all this toil 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 felt less and less productive.

You battled, slogged, finally deployed 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 had gone up in flames again.

But now, finally, we have a viable JavaScript alternative.

Build fast, responsive, modern web apps using C# and .NET 6

Microsoft has released a new version of Blazor WASM (Web Assembly) with .NET 6 and there's never been a better time to jump aboard the Blazor train.

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, written using C#, run entirely in the browser (just like JavaScript). You can build complex, rich, interactive web applications without writing a lick of JavaScript.

"I've worked through your Blazor WASM by Example course (fantastic by the way), and plan to revisit the updated version in time.

I've never had more fun with a SPA framework than I have with Blazor!"

Ryan Spain

But how do you actually get up and running with Blazor?

Sure you can create simple "Hello World" apps, but what about building something real?

It's not always easy to find meaningful examples of Blazor applications. If you've seen the Blazor demo app once you've seen it a hundred times...

hello world

Start working on your own Blazor app and you're bound to end up with more than a few questions…

How do you break a requirement down and build it using components?
How do you organise your components?
How do you pass data between components?
Should you be passing simple primitives or entire objects?
Where does your data access code go?
Do you need to build your own components for everything?

It's a lot to learn, especially when you're just getting started.

But you don't have to go it alone.

Save yourself endless hours of web searches, scouring the official docs and trying to piece together meaningful examples from the Internet.

Now you can quickly grasp the fundamentals and fast-forward to the good bit, the bit (where you get to build interesting web applications) with my newly updated (for .NET 6) Blazor course.

"BBE was easy to follow. What I liked most was the context sensitive inline links to mentioned topics like two-way binding and the PoC development approach especially the Feature Pattern. Very well explained."

Eric Brunner

Build your web apps in half the time with Blazor (in .NET 6)

I'm Jon Hilton, author of Blazor by Example.

When I first started learning Blazor I realised I had an advantage.

You see, Blazor borrows a lot of concepts from the leading JavaScript frameworks out there (React, Angular and Vue)

Microsoft has effectively taken the best parts of those frameworks and used them to create its own simple (but powerful) component model.

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

But the good news? Once you get your head around a few basic principles, building web applications with components is really, really fast, and Blazor by Example is here to help you do exactly that.

"It is very good and very interesting. In general I would recommend Blazor and your courses. I like the way you explain things and it's easy to understand."

Olivier Ilunga

Get up to speed with Blazor (and fast)

Save yourself from endless tutorials and frustrating dead-ends with Blazor by Example.

Learn how to break a requirement down into components and build those components, 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.

Here's what you'll build with Blazor by example

Hello World (component basics)

Spin up a Blazor project
Create simple components
Render multiple instances of a component
Pass data in via parameters
Use routing

Pomodoro Timer

Use .NET 6's new PeriodicTimer
Use StateHasChanged to signal Blazor to render your UI
Update the browser window's title from your Razor Component
Inject dependencies into your components
Implement IDisposable to clean up after yourself!

Pomodoro Timer (with base class)

Refactor to use component base classes
Inject dependencies into a base class
Implement IDisposable in a base class

Shopping Cart

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

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

Slack-style message list

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

Application Dashboard

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

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.

Plus discover how to use Visual Studio 2022 and .NET 6's new Hot Reload feature to build Blazor apps.

Bonus - Banish your CSS woes with Tailwind CSS

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!

The standard examples in the course all use Bootstrap 5.x, but there's a 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)

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)

Spruce up the Pomodoro timer example using Tailwind CSS

Slack - but with a little more style (VIDEO)

Make the Slack 'clone' come to life using Tailwind
Handle different screen sizes (make it responsive)

Bonus - Practical ASP.NET Pro Membership

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 Practical ASP.NET Pro community has your back.

screenshot showing ASP.NET community threads and members

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

Leave JavaScript And Its Ecosystem Behind

Build more reliable web applications, faster, with Blazor and .NET 6

Just the course

$39

Get started building applications using Blazor's component model.

Instant online access
PDF version for offline reading
'Starter' projects source code

Buy Now

The Complete Package

$89

Get started building applications using Blazor's component model, plus build better looking components with Tailwind CSS and compare your practice exercise code to mine.