Two free video courses: Intro to ASP.NET MVC and Responsive UI with Bootstrap

I'm really excited to announce that two of my latest courses on Microsoft Virtual Academy are now live! Both are recordings of live courses Christopher Harrison and I lead in the beautiful Channel 9 studios, and include downloads of all slides, code and live chat logs.

These are live events with two instructors and an active chat, and we pushed the demo code to GitHub throughout the event so attendees could get their hands on it immediately. One really nice benefit of this format (compared to most other video training) is that we were able to watch for common questions and answer them live. It's also hugely motivating to hear from viewers around the world, many who are staying up late at night. Nothing starts the morning off like "Hello from Bangladesh! Hi from Brazil!" Hellos from Holland, Poland, Bulgaria... even New Jersey!

Hey! These two courses are part of our new Web Wednesdays series on MVA. Be sure to join us for the next session: Lighting Up Real-Time Web Communications with SignalR with Brady Gaster and me on September 24!

Quick links for the impatient:

Note: These courses are on Microsoft Virtual Academy, which requires you to log in with a (free) Microsoft Account. No cost or obligations, and the account bookmarks where you're at across multiple courses which is pretty helpful.

Introduction to ASP.NET MVC

Christopher and I put on Developing ASP.NET MVC 4 Web Applications Jump Start last year, built from the ASP.NET MVC certification course materials. Since the course materials are usually covered in a week long class, we had to move pretty quick to cover everything. We've heard from a lot of happy viewers that really liked it (many of whom have written to tell us it was a big part of their successful certification test prep). You can read more about my thoughts on that course here.

However, we also were aware that it was a little fast for some developers who were completely new to the space, e.g. developers who were new to web development or front-end web developers who weren't familiar with C# or Visual Studio. And in the meantime, Christopher had joined Microsoft as a fulltime member of the MVA team (woo hoo!). When Christopher contacted me to strategize about some ideas for courses, we decided it was time for an  MVC course that spoke to absolute beginners.

This course is broken into the following modules:

  • Basics of MVC and the Moving Parts
  • Creating and Configuring Models
  • The Power of Visual Studio
  • Deep Dive into Controllers
  • Deep Dive into Views
  • Introduction to Bootstrap
  • Introduction to Authentication in MVC​
  • Supplement Your Knowledge

View the course here: Introduction to ASP.NET MVC

Building Responsive UI with Bootstrap

Boostrap is a front-end framework that makes it easy to build nice looking sites that respond well to different display sizes using CSS media queries. That means your sites automatically adapt to look nice on desktop, laptop, tablets and phones without any hacky code (on server or client) to try to guess if the user probably wants a "mobile" view of the site (what does that even mean now that we've got giant phones, tiny tablets, and convertibles like the Surface?).

All the ASP.NET project in Visual Studio 2013 (Web Forms and MVC) are built with Bootstrap. It's automatically in every new ASP.NET application.

That's a good start, but I felt like all of the presentations and training I'd seen using on Bootstrap with ASP.NET had been pretty simple: "Hey, check it out, we have Bootstrap now, responsive design is great, here's a new theme, yay! Done!" That's definitely about all I'd covered in my presentations.

Sure, Bootstrap is neat, but there are some challenges: The grid system can be a little complex, especially if you want your content to lay out differently at different sizes. Do I really have to memorize all those Bootstrap class names (especially fun for complex components or layouts)? How do I keep my site from looking like every other Bootstrap site out there? And my personal pet peeve: how do I take advantage of Bootstrap without turning my HTML into a horrible mess of <div class="col-lg-6 col-md-4 col-sm-3"> Bootstrap classes that seem to want to take over?

That's what this class is about. Christopher and I cover the basics pretty quickly, then go deep with things like responsive page design, making Visual Studio pick up some of the hard work, and taking advantage of Less to get the HTML under control. Here's the outline:

  • Introduction to Bootstrap
  • Bootstrap Components
  • Page Design
  • Visual Studio and ASP.NET Integration
  • JavaScript Functions
  • Using Bootstrap with LESS
  • Bootstrap in the Real World

    View the course here: Building Responsive UI with Bootstrap

    I'm really happy with this course - I think we really nailed it, and judging from the live response it sounds like they thought so, too. I'll do a follow-up blog post digging into the Bootstrap / Less stuff, it's pretty slick.

    We'll Do It Live!

    As I mentioned earlier, having two trainers gives us the opportunity to do a lot of things live. We both take turns participating in the attendee chat and giving answers to common questions as they come up. We also work against a live repository on GitHub (using the built-in Visual Studio support), pushing the demo code as soon as each session's completed. If you're able to catch a live event in the future, please do!


    Comments have been disabled for this content.