Supercharge your web development skills
Build reliable, modern web applications faster (using Blazor in .NET 6)
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.
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.
"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!"
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...
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."
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.
Microsoft has effectively taken the best parts of those frameworks and used them to create its own simple (but powerful) component model.
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."
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
- 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
- Use Event Callbacks to trigger changes in other components
- Use two-way binding to show and update data
- Use HTML Selects (dropdowns) in Blazor
- 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
- 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 - 3 Months Practical ASP.NET Pro Membership (usually $75)
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.
Sign up for the Complete Package and you'll be enrolled, automatically, in the community for 3 months, where you can connect with your fellow developers and get your questions answered.
Your membership will automatically end after 3 months; No auto-renewal or lock in, just 3 months complete access.
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...
Build more reliable web applications, faster, with Blazor and .NET 6
Just the course
Get started building applications using Blazor's component model.
- Instant online access
- PDF version for offline reading
- 'Starter' projects source code
The Complete Package
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.
- Instant online access
- PDF version for offline reading
- 'Starter' projects source code
- 3 Month Practical ASP.NET Pro Subscription
- Tailwind CSS upgrade videos
- Tailwind CSS upgrade source
- Practice exercise solutions
- Practice exercise source code