An open API service indexing awesome lists of open source software.

https://github.com/hpt-dev/introtoblazorwasm


https://github.com/hpt-dev/introtoblazorwasm

Last synced: 3 months ago
JSON representation

Awesome Lists containing this project

README

          

# Blazor for ABSOLUTE beginners

Source code from this video: https://www.youtube.com/watch?v=MhQpGbLxeF0

In this tutorial you will learn the basics of building a website with Blazor and how the default Blazor project template works. If you have any problems feel free to leave a comment and I will try and get back to you. I've also added some notes below that you might find useful.

#dotnet #dotnetprogramming #dotnet6 #programming #csharp #programmingforbeginners #csharp #csharptutorial #csharpdotnet #aspnetcore #programmingtutorials #blazor #blazorserver #blazorwasm #wasm #webassembly #todolist

▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
0:00 - Introduction
0:50 - Download and Install Visual Studios
2:01 - Creating a new Blazor Project
3:13 - Overview of the default pages
4:38 - Razor pages and the Counter page
7:44 - Editing the Counter page
9:21 - Home page and Introduction to components
11:33 - Understanding the SurveyPrompt component (and one-way binding)
13:26 - Creating an error message component
17:27 - Understanding Layout files
20:39 - Adding a new page to your website
22:52 - Outro

▬ Helpful Notes ▬▬▬▬▬▬▬▬▬▬
Blazor Home Page - Find out more
https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor

Visual Studios Download Page
https://dotnet.microsoft.com/en-us/platform/tools

HTML Tutorial
Basic 30min tutorial: https://html.com/
Detailed tutorial if you want to learn more: https://www.w3schools.com/html/

Bootstrap Tutorial
Bootstrap is a library that comes preinstalled with Blazor and has lots of high quality, well designed components like buttons, text boxes, dropdown menus etc that you can use in your project.

Tutorial: https://dev.to/kemystra/day-1-bootstrap-basics-2i49
Official Documentation: https://getbootstrap.com/docs/5.2/getting-started/introduction/

Debug guide if Blazor Templates don't appear in Visual Studios
(Windows Help) https://stackoverflow.com/questions/59272624/missing-visual-studio-2019-blazor-webassembly-app-template
(Windows Help) https://stackoverflow.com/questions/67646512/can-not-find-blazor-app-project-template-in-visual-studio-2019
(Mac Help) https://stackoverflow.com/questions/60324442/missing-blazor-webassembly-app-template-for-visual-studio-for-mac

What to do next
I would try building a todo list page once you have finished this video. Here is a tutorial you can follow: https://www.c-sharpcorner.com/article/building-a-todo-list-using-blazor/

Useful reference website for learning Blazor (not super beginner friendly) https://blazor-university.com/

If you watched this video and are new to web dev/.net development I would also spend some time learning C#. A great first project is a basic calculator console app: https://docs.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-console?view=vs-2022

Other good C# Tutorials
https://docs.microsoft.com/en-us/dotnet/csharp/tour-of-csharp/tutorials/
https://www.w3schools.com/cs/index.php