YoVDO

Build web apps with Blazor

Offered By: Microsoft via Microsoft Learn

Tags

Blazor Courses Web Development Courses User Interface Design Courses Data Binding Courses

Course Description

Overview

  • Module 1: Evaluate whether Blazor is appropriate to build your next web application, learn how pages and components of Blazor work to build a web application and evaluate when to use Blazor WebAssembly or Blazor Server
  • By the end of this module, you'll be able to:

    • Evaluate whether Blazor is appropriate to build your next web application.
    • Describe how Pages and Components of Blazor work to build a web application.
    • Evaluate when to use Blazor WebAssembly or Blazor Server
  • Module 2: Learn how to set up your development environment and build your first web app with Blazor, Visual Studio Code, and C#.
  • In this module, you will:

    • Configure your local environment for Blazor development with Visual Studio Code
    • Create a new Blazor project
    • Add client-side logic to a Blazor web app
  • Module 3: Learn how to create a graphical user interface in a Blazor web app by creating and assembling Blazor components. Access data and share it for display on multiple pages within your app.
  • By the end of this module, you'll be able to:

    • Assemble a user interface for a web app by creating Blazor components.
    • Access data to display in your web app.
    • Share data in your web app between multiple Blazor components.
    • Bind an HTML element to a variable in a Blazor component.
  • Module 4: Learn how to optimize your app's navigation, use parameters from the URL, and create reusable layouts in a Blazor web app.
  • By the end of this module, you'll be able to:

    • Improve your Blazor app's navigation using the router component and NavLinks
    • Enhance functionality with route parameters
    • Reduce duplicate code by using layouts in your Blazor app
  • Module 5: Learn how to use DOM events, forms, and validation in a Blazor app
  • By the end of this module, you'll be able to:

    • Improve your app's interactivity using Blazor event handlers
    • Use forms in Blazor to facilitate data entry
    • Extend forms in Blazor with server and client-side validation
  • Module 6: Learn to use advanced features of Blazor in web apps. You'll learn how to interoperate with JavaScript code, use templated components, and handle events in the lifecycle of components.
  • By the end of this module, you'll be able to:

    • Call JavaScript functions from .NET code and call .NET code from JavaScript in Blazor apps
    • Handle events in the lifecycle of Blazor components.
    • Create reusable components that can be incorporated into Blazor Server apps using templates
  • Module 7: Use Razor Class Libraries to package and deploy components with Blazor
  • By the end of this module, you'll be able to:

    • Build a Razor class library containing Blazor components
    • Package a Razor class library for use in other Blazor applications
    • Reference a Razor class library in a Blazor application and use its components

Syllabus

  • Module 1: Introduction to Web Development with Blazor
    • Introduction
    • What is Blazor?
    • When to use Blazor
    • Knowledge check
    • Summary
  • Module 2: Build a web app with Blazor
    • Introduction
    • What is Blazor?
    • Exercise - Create and run a Blazor web app
    • Blazor components
    • Exercise - Add a component
    • Data binding and events
    • Exercise - Data binding and events
    • Summary
  • Module 3: Interact with data in Blazor web apps
    • Introduction
    • Create a user interface with Blazor components
    • Exercise - Create a user interface with Blazor components
    • Access data from a Blazor component
    • Exercise - Access data from a Blazor component
    • Share data in Blazor applications
    • Exercise - Share data in Blazor applications
    • Bind controls to data in Blazor applications
    • Exercise - Bind controls to data in Blazor applications
    • Summary
  • Module 4: Use pages, routing, and layouts to improve Blazor navigation
    • Introduction
    • Use the Blazor router component to control your app's navigation
    • Exercise - Change navigation in your Blazor app using the @page directive
    • Explore how route parameters affect your Blazor app's routing
    • Exercise - Use route parameters to improve your apps navigation
    • Build reusable Blazor components using layouts
    • Exercise - Add a Blazor layout to reduce duplication in your code
    • Summary
  • Module 5: Improve how forms and validation work in Blazor web apps
    • Introduction
    • Attach C# code to DOM events with Blazor event handlers
    • Exercise - Create a Blazor event handler for onclick events
    • Take advantage of the power of Blazor forms
    • Exercise - Create an address form with Blazor components
    • Validate user input implicitly without writing validation code
    • Exercise - Add server-side and client-side data validation to the address form
    • Summary
  • Module 6: Build rich interactive components for your Blazor web apps
    • Introduction
    • Create a user interface with Blazor components
    • Exercise - Use JavaScript libraries in Blazor apps
    • Improve app interactivity with lifecycle events
    • Exercise - Improve app interactivity with lifecycle events
    • Reuse components by creating templates
    • Exercise - Reuse components by creating templates
    • Summary
  • Module 7: Build Reusable Components with Blazor
    • Introduction to Razor class libraries
    • Razor class library creation and concepts
    • Create a Razor class library
    • Package a Razor class library
    • Create a NuGet package
    • Summary

Tags

Related Courses

Intro to the Design of Everyday Things
Udacity
Android. Programación de Aplicaciones
Miríadax
Programming Mobile Applications for Android Handheld Systems: Part 1
University of Maryland, College Park via Coursera
Mobile and Ubiquitous Computing
Georgia Institute of Technology via Coursera
Android: Introducción a la Programación
Universitat Politècnica de València via edX