Coding With David

I wanted to keep rolling with my series on turning raw HTML, CSS, and JavaScript into clean Blazor components—and honestly, I just wanted to build something fun for a change. So, I put together a little playground I'm calling David's Cool Components . It's got a colorful countdown timer, a sleek digital clock, a rotating testimonial slider, and a slide-out navigation menu tying it all together. No grand enterprise architecture here. Sometimes you just want to make stuff move on the screen, watch numbers tick down, and say, "Hey, that actually looks pretty slick!" But beneath the fun stuff, it turned out to be a solid exercise in taking plain web component behaviors and expressing them naturally in Blazor. Check out the demo site!! Four Colorful Boxes and Something to Look Forward To The countdown is the first thing you see when you land on the app. It features four chunky, rounded cards displaying days, hours, minutes, and seconds against a dark backgr...

When building a Blazor application, it is easy to reach for a heavy component library every single time you need something visual on the screen. Component libraries certainly have their place, but they are never a hard requirement for building clean, attractive user interfaces. Blazor lets us use the exact same HTML and CSS that power the rest of the web. We can build robust layouts with CSS Grid, arrange content cleanly with Flexbox, animate navigation panels with CSS transitions, and rely on ordinary buttons, links, and images. Then, we wire up the interactions using C#. To prove this out, I put together a small .NET 10 Blazor WebAssembly application featuring three distinct examples: A slide-out navigation menu. A custom multi-select control. A responsive restaurant menu complete with food photography. None of these examples relies on a third-party UI component library. Their visual presentation comes purely from HTML and CSS, while their application behavior is...

Say what it is, not how it looks How meaningful markup makes Blazor applications more accessible, maintainable, resilient, and understandable. Blazor lets us build interactive web applications with C# and Razor components. That changes how we write application logic, but it does not change what the browser receives: HTML. That last detail matters. A polished Blazor application can look correct while still being difficult to navigate with a keyboard, confusing to assistive technology, hard for search engines to interpret, and unnecessarily complicated to maintain. Semantic HTML helps solve these problems by giving content a clear purpose. Instead of describing how an element should look, semantic HTML describes what the element is. <!-- Describes presentation through class names --> <div class="top-navigation">...</div> <div class="page-content">...</div> <!-- Describes purpose through native elements --> <nav aria-la...