.NET makes frontend web development easy with Blazor, a modern frontend web framework based on HTML, CSS, and C#. In this video series we'll learn the basics of frontend web development with Blazor, including how to set up your development environment, create a new project, run & debug, and work with Blazor components.
Full Series:
- YouTube link: https://aka.ms/dotnet/beginnervideos/youtube/blazor
- Learn link: https://aka.ms/dotnet/beginnervideos/learn/blazor
Individual Video Links:
- What is Blazor?
- Build and run your first Blazor web app
- Introducing Blazor Components
- Pages, Routing, and Layouts in Blazor
- Blazor Web App Project Structure
- Handling UI Events in Blazor Web Apps
- Data Binding in Blazor Web Apps
- Blazor Component Render Modes
- Work with Data in Blazor
- Forms & Validation in Blazor Web Apps
| Goal | Build your first Blazor web application |
|---|---|
| What will you learn | Introduction to Frontend Web Development with .NET using Blazor |
| What you'll need | Visual Studio Code with the C# Dev Kit extension and the .NET SDK |
| Number of videos | 10 |
| Follow Along | sample-code |
Full Series: YouTube link: https://aka.ms/dotnet/beginnervideos/youtube/blazor
Learn link: https://aka.ms/dotnet/beginnervideos/learn/blazor
Blazor home page: https://blazor.net Blazor docs: https://blazor.net/docs Learn Blazor: https://aka.ms/blazor/learn
Welcome to the Frontend Web Development for Beginners! In this episode you'll learn about what Blazor is and how it's used for frontend web development with .NET.
Video link: What is Blazor?
Resources:
- Blazor home page: https://blazor.net
- Microsoft Learn: Introduction to Web Development with Blazor: https://learn.microsoft.com/training/modules/blazor-introduction/
It's time to get your development environment set up to build your first Blazor web app.
Video link: Build and run your first Blazor web app
Resources:
- Blazor tutorial: https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial
- Microsoft Learn: Build your first web app with Blazor: https://learn.microsoft.com/training/modules/build-blazor-webassembly-visual-studio-code/
This episode is all about Blazor components. You'll learn how to create components, how to use them, and how to pass data to them.
Video link: Introducing Blazor Components
Resources:
- Blazor components overview: https://learn.microsoft.com/aspnet/core/blazor/components
In this episode you'll learn how to route page navigations to specific components and how to set up a layout for your pages.
Video link: Pages, Routing, and Layouts in Blazor
Resources:
- Microsoft Learn: Use pages, routing, and layouts to improve Blazor navigation: https://learn.microsoft.com/training/modules/use-pages-routing-layouts-control-blazor-navigation/
Let's take a look at all the files that make up a Blazor Web App project and understand what they do.
Video link: Blazor Web App Project Structure
Resources:
- Blazor project structure: https://learn.microsoft.com/aspnet/core/blazor/project-structure
In this episode you'll learn how to handle all kinds of UI events from your components. We'll also look at handling component child content, working with render fragments, and handling additional component attributes.
Video link: Handling UI Events in Blazor Web Apps
Resources:
- Blazor project structure: https://learn.microsoft.com/aspnet/core/blazor/project-structure
Learn how to bind data to your UI elements and components using Blazor's powerful data binding capabilities. We'll also take everything we've learned so far and build a simple to-do list app.
Video link: Data Binding in Blazor Web Apps
Resources:
- Blazor data binding: https://learn.microsoft.com/aspnet/core/blazor/components/data-binding
- Microsoft Learn: Build your first web app with Blazor: https://learn.microsoft.com/training/modules/build-blazor-webassembly-visual-studio-code/
In this episode we'll look at the different component render modes and the different ways you can make Blazor components interactive.
Video link: Blazor Component Render Modes
Resources:
- Blazor Render modes: https://learn.microsoft.com/aspnet/core/blazor/components/render-modes
Any web app is going to need to work with data. In this episode we connect our Blazor components to a database using Entity Framework Core and scaffolding. We'll also explore the capabilities of QuickGrid, Blazor's built-in data grid component.
Video link: Work with Data in Blazor
Resources:
- Microsoft Learn: Interact with data in Blazor web apps: https://learn.microsoft.com/training/modules/interact-with-data-blazor-web-apps/
Let's use Blazor's built-in components for forms and validation to interact with the data in a database.
Video link: Forms & Validation in Blazor Web Apps
Resources:
- Blazor forms & validation: https://learn.microsoft.com/aspnet/core/blazor/forms
- Microsoft Learn: Improve how forms and validation work in Blazor web apps: https://learn.microsoft.com/training/modules/blazor-improve-how-forms-work/
Be sure to give feedback about this workshop!