Coding User Interfaces with AI

Overview

The secret is out: AI is changing everything about the way we work. Few things have changed more than the way we go from idea to code. If you’re an MBA or a generalist of any sort, all this is very much working in your favor. While coding well is a lifelong pursuit like any other, getting started is now a lot easier. This course will get you started with a product-first coding process that will both help you build great products yourself using AI as well as make yourself a better collaborator to your engineering-focused colleagues. In this first course, we’re going to focus on going from design to code for ‘Views’ or user interfaces (UI’s). We’ll code in HTML & CSS, but mostly we’ll be focused on the underlying design and engineering principles for building user interfaces. This course was developed at the Darden School of Business at the University of Virginia and is taught by top-ranked faculty.

Syllabus

Views with HTML

Get ready to code! As you’ll find, coding itself is no big thing, especially with AI. The big secret is that what outsiders think of as ‘coding’ actually requires a few fairly distinct activities to all work well together. This week, you’ll learn how to create focus like a designer, unfold designs like an architect, choose technology like a CTO, and, yes, code like a developer. And you’ll learn how to do it with AI. (Please note that if you audit this course, only the first module is available and you will not earn a course certificate.)

Views with HTML & CSS

Building Views requires us to do two main jobs: declare an element and define its appearance. You learned how to declare View elements for your UI with HTML. This week, you’ll learn how to more effectively define the appearance and behavior of those View elements using CSS.

Debugging & Grid Systems

Now that you have some practice building Views, we’re going to work on your fundamentals. First, we’ll focus on analytical debugging. To debug is to code, and comfort with the debugging process may be the most crucial component to ‘really’ learning how to code. Bonus item: AI is great both at helping and explaining in this area. We’ll also be looking at responsive design, an approach that helps us make sure our UX works well not just on computers, but also on mobile devices, etc.

Your Working UI

Let’s take it from the top! This week you’re going to go from idea to code for an idea of your own. This will help you more fully internalize the four steps you’ve learned and, we hope, have some fun along the way.