Create a great UX with Blazor
summary
Shows how to make Blazor pages feel faster and friendlier by wiring actual tools: adds Blazor scoped CSS NuGet and its JS, demonstrates the configure-services call and scoped style tag to produce isolated selectors that turned component backgrounds red and blue. Imports bootstrap source SCSS via a compilerconfig to generate site.css and moves complex class lists into Sass variables and modules. Implements EditForm + DataAnnotations hooks to swap Bootstrap valid/invalid classes, a spinner, a progress bar and 50 animated row delays for a cascading fade-in; components and effects work live.
AI-written summary · about
chapters (55)
- 0:00Intro
- 0:40Why UX has changed
- 1:10Bootstrap
- 1:24UX Rabbit Hole
- 1:55About me
- 2:34The brain
- 2:55Dopamine
- 3:52Oxytocin
- 4:20Speaker Travel
- 4:42Male Shrimp
- 5:00Serotonin
- 5:36endorphins
- 6:05cortisone
- 6:53two users
- 7:21Scope CSS
- 8:32Add Scope CSS
- 9:02Add Style Component
- 9:18Add JavaScript
- 9:45Add CSS
- 11:00Add Scoped Style
- 11:25Write Styling
- 12:29Fetch Data
- 13:29Return
- 13:47SAS
- 14:12HTML
- 14:53Components
- 15:23Downloading Blazor
- 15:51Creating a folder
- 16:16Creating a bootstrap file
- 16:45Creating a compiler config
- 17:10Changing the main layout
- 18:41Changing the nav object
- 19:41Changing the knob
- 20:02Changing the link
- 20:16Navigation SAS file
- 21:25Apply age
- 21:52Edit form
- 22:11Add class
- 22:38Add form
- 23:13Add button primary
- 23:30Extract bootstrap styles
- 24:01Checkmark
- 24:14Reinforcements
- 24:26Fetch
- 24:37What is happening here
- 26:20Adding an animation
- 26:51Adding a for loop
- 27:31Reload
- 27:50Visual cortex
- 28:38Create a component
- 29:00Add a watermark
- 29:35Display attribute
- 30:36Success message
- 31:10Progress summary
- 31:43Questions
