Software Development Class (Syllabus)

It’s not too late to learn about coding! This is a short intro. class on design-driven software development for the MBA/businessperson. When I teach it at UVA Darden, it’s (very) roughly 40 hours of content, including class time and assignment time.

It’s designed for a learner that’s comfortable with the basics of software design, including user stories and related techniques on software design that I cover in this class: Software Design. That class is not a prerequisite, but if you haven’t taken it you may need to budget a little extra time to loop back and cover a few key topics.

Course Descriptions + Objectives

By the end of this class, you will have lost your fear of tinkering (with software). You’ll also have a hands-on introduction to how modern software design relates to actual development.

As an MBA considering roles like product manager, founder, or consultant, this is important. Between working software developer and knowing zero about coding, there’s a productive middle place. This is a place where you can:
– follow discussions about software development
– engage confidently in meaningful learning about the software/system you’re managing
– create front-end prototypes

By the end of this class, you will be able to:
1. Take user stories & prototype and translate render them into functioning web applications using HTML, CSS, and Javascript
2. Evaluate alternative approaches to software implementations
3. Work through software malfunctions with analytical debugging techniques

Prerequisites

There are no course prerequisites and this course does not assume any prior programming experience.

The course does require projects that have been through the Software Design class, Applied Innovation class , or a similar independent study. The input into this class is user stories and prototypes that have been through a substantial customer discovery and design process- something like the Venture Design process we use in the aforementioned class. A suitable design would have most of the elements you see in this Venture Design template

Teams + Projects

While the assignments are a mix of individual and team assignments, students will work in teams of 2 (min) to 4 (max) individuals. Students can organize around student-submitted projects with the prerequisites above. Student projects must be accepted in advance or by the first class session.

Course Structure

Your primary deliverable is working software and a portfolio entry about what you built and why. We’ll prototype on JS Fiddle and deploy on WordPress.

You’ll spend a lot of your class hours learning how to make stuff work. That’s normal, and it’s necessary, but the core objective is for you to understand what it takes to move from design narrative to working software. For this reason, we intersperse the class with sessions on peer review and discussion about your implementation. It’s also why your portfolio entry is a significant part of your grade.

The material below is organized around ‘sessions’ of roughly 90 minutes/each.

Grading

Category Due Date Percent of Final Grade
1. Attendance & Participation Every day/ongoing 50
2. Team Project- Working Software (as stated on Canvas) 35
3. Team Project- Portfolio Entry Exam period 15

Attendance & Participation: 50%

My objective is to provide a stimulating environment for you to learn the process of software development. This portion of your grade includes the following:
being prepared for class: understand the topics at hand and being able to discuss your work and your team’s work
on-time, full attendance
posting questions, responses, and ideas to the forum (on Piazza)
I expect you to inform me before class if you will be missing. Absences for reasons other than illness for which I do not receive prior notice will count against your class participation grade.

Team Project- Working Software: 35%

This is your final team deliverable in the form of working software on your WordPress site.

Team Project- Portfolio Entry: 15%

This is your team explanation of what you did and why in the form of a portfolio entry on Behance.

Where Things Are

The following table describes the location of resources for the class.

You It
I want a current, comprehensive overview of the class so I know what’s happening in class and what assignments are coming. Canvas
I want to turn in an assignment so it’s recorded as on time and complete and can be reviewed and graded. Canvas
I want to set up and manage my WordPress instance so I can [start building things, create a restore point, restore to a restore point]. WP Engine is the place. If you’re a team lead, create an account. If you’re on a team, your team lead will send you a login.
I want to add, modify, code on my site so I can implement my user stories and wireframes. For this go to the admin page on your WordPress instance, which will be [your site]/wp-admin.
I want to notes on setting up WP Engine and WordPress so I don’t have to figure out everything from scratch. Please see our handy WP Engine/WP Notes: WP Engine & WordPress Notes for Software Development Class
I want to post a question on Piazza so I can get help from my peers and the teaching team. Please see our handy WP Engine/WP Guide: Piazza Site for GBUS 8633

Session 1: Introduction to HTML

Objective

Achieve basic working proficiency with HTML.

Case

From Prototype to HTML

Assignment

  1. Read the case. Looking at the sample code on JS Fiddle, can you identify all the HTML elements? Can you explain their roles? Suppose you wanted to create rounded corners on the div elements with a solid border? How would you do that? What else do you think is worth trying? Try it out!
  2. In order to have something you can show and discuss in class, you’ll need to fork the JS Fiddle and save your edits
  3. We’ll also discuss the role of the ‘businessperson’ in a modern (agile) team. Here are a few OPTIONAL questions and readings.
    A) What roles outside of engineering itself are pivotal to a productive agile team? Agile is a development methodology where autonomous teams work in short (1-3 week) cycles which conclude with working software they can test. Here is one perspective on that question from Laura Klein: Solving Agile UX.
    B) Is a technical co-founder necessary for a new venture or project? Why or why not? If not, what product-related skills does the founder need to have? Here is one perspective from Mahmoud Swehli You Don’t Need a Technical Co-Founder.

Notes:
In class, we’ll step through the elements of the page and edit them based on ideas for moving it forward. Doing Google searches like ‘create round border on a div’ is a great way to learn and get comfortable working through implementations.

Supporting Materials

  1. Written Tutorial- HTML Introduction
    This is a good introduction. If you want something more guided to ease you into the concepts, see the next item.
  2. Online Course- Learn HTML
    I would stick to just the first module ‘HTML Elements and Structure’ and (unless you’re interested) skip the module on tables, ‘HTML Tables’.
  3. Slides for Class
    COMING SOON

Session 2: Making HTML Manageable with CSS

Objective

Achieve basic working proficiency with CSS.

Case

Making HTML Manageable

Assignment

  1. Why might consistency be important to a good user experience? What’s an example (digital) experience where you thought consistency improved the experience? Where inconsistency detracted from it? Where you’re not really sure how important consistency actually is to an experience? Here’s one perspective: Design principle: Consistency.
  2. How does consistency of presentation and experience relate to CSS?
  3. Read the case. Looking at the sample code for Prototype 2, can you trace the CSS entries back to their application in the HTML? Try rounding the corners on the borders around the various HVAC parts. Does it work?
  4. How would you tackle the items in Exhibit B? Reminder: log in to JS Fiddle to save your work.
  5. What else do you think is worth trying? Try it out!
  6. In order to have something you can show and discuss in class, you’ll need to fork the JS Fiddle and save your edits

Notes:
In class, we’ll step through the elements of the page and edit them based on ideas for moving it forward. Doing Google searches like ‘create round border on a div’ is a great way to learn and get comfortable working through implementations.

Session 3: Development-Ready Design

Objective

Apply your understanding of user stories and prototypes to prepare for actual development.

Project Preparation

Organize and assign your user stories by team member, with supporting prototypes. At a minimum, have story cards in Trello and assigned to your team members.

Assignment

  1. Why are user stories important? How do they relate to the solution you implement? Here’s one perspective: The Importance Of Writing Good User Stories.
  2. Why might code reviews be important for a team? How does the practice relate to other things you’ve learned about team collaboration? Here’s one perspective: The Importance of Code Reviews.
  3. Select a team and familiarize yourself with their project.
  4. Prepare your user stories. Assign them and organize your team workflow on a Trello board. Do the user stories have all three clauses? Are there prototypes in Balsamiq or similar supporting them? How are you dividing up the work? How might tasks and elements overlap?

Notes:
We’ll step through how your team has thought through what they want to build and prepared themselves for a successful execution. Our primary focus will be on the completeness of the stories and their relationship to the available wireframes.

Supporting Materials

  1. Preparing a Trello Board
    See here for a Trello board you can copy as a starting point (or not): HVAC in a Hurry Kanban Board.
  2. Writing User Stories
    User Story Tutorial.
    Additionally, here are a few videos from my Coursera course, ‘Agile Meets Design Thinking‘: 1) Preparing for Great User Stories 2) Writing Great User Stories 3) Adding Test Cases to User Stories.
  3. Creating Prototypes
    Prototyping Tutorial.
    Additionally, here are a few videos from my Coursera course ‘Running Design Sprints‘: 1) The Inexact Science of Interface Design 2) Usability with Donald Norman’s 7 Steps Model 3) The Importance of Comparables & Prototyping 4) Creating Interactive Prototypes in Balsamiq.

Session 4: Your Working Prototype

Objective

Apply your understanding of user stories and HTML to develop a static page prototype.

Project Preparation

Based on your assigned stories, develop at least one static page (per team).

Assignment

  1. If you’re acting in the role of designer, why might it be important to be able to code? Is it? Here’s one perspective: 5 Good Reasons Why Designers Should Code.
  2. Select one or more stories to work.
  3. Make sure you have a clear idea of what you want from your prototypes.
  4. Render the page in HTML on JS Fiddle.

Notes:
We’ll step through how your team has moved from design objective to static HTML execution.

Session 5: Building Less Software & Deploying Software on Platforms

Objective

Achieve working fluency with 3rd party environments (which much (most?)) software is built.

Case

Building Less Software

Project Preparation

Based on your wireframes and prototypes, select a WordPress theme that maps to your target navigation and feel, then integrate your pages and CSS onto this new platform.

Assignment

  1. What are the advantages of building on platforms vs. building from scratch? Here’s one perspective that has to do with the implementation itself: 8 Reasons This Salesforce Developer Loves Heroku. Here’s one that has more to do with UX and strategy: Building on Slack Saved Our Startup.
  2. Investigate the available WordPress themes and choose one you think is a good starting point. Don’t worry, they’re pretty easy to switch if you change your mind later. Which WordPress theme did you select? Why? How did you/will you validate it?
  3. Move your HTML and CSS onto Page items within WordPress and integrate them with the navigation (and any other relevant facilities). How did you port your current JS Fiddle prototype over to WordPress? What updates did you make to the HTML & CSS?

Notes:
We’ll step through both your design choices and how you moved your work over during our class session.

Supporting Materials

  1. Using WP Engine & WordPress
    See here for notes on getting started: Notes on Using WP Engine

Session 6: Debugging HTML & CSS

Objective

Achieve basic working fluency with analytical debugging of HTML & CSS.

Case

Debugging HTML & CSS

Assignment

  1. What’s the relationship between debugging and programming itself? How do you teach yourself to be a strong analytical debugger? Also, what’s the relationship between analytical debugging and other test-driven disciplines like Lean Startup? Here’s one perspective (note: the Slack excerpt may be a little hard to follow and, if so, please skim/skip it): Teaching Novice Programmers How to Debug Their Code.
  2. For each issue described in the case:
    A) What is the HTML element concerned? How does it relate to the elements around it?
    B) What are the applicable CSS selectors (classes, ID’s, etc.)? What CSS entries do you see for those? Note: the DEVTOOLS will show you which CSS has precedence if there’s overlapping entries.

Notes:
In class, we’ll step through the analytical debugging process you used to resolve the issues. In this context, the process is much more important than the final answer or fix.

Session 7: Making Stuff Happen with Javascript

Objective

Achieve basic working proficiency with Javascript and JQuery.

Case

Making Stuff Happen with Javascript

Assignment

  1. What is the Model-View-Controller framework and how does it relate to the material in the case? What’s what? For an introduction, see MVC Tutorial.
  2. Read the case. Looking at the sample JS code in Prototype 4, can you trace see what the code is doing? Do you understand what’s logging to console and why?
  3. Looking at the sample code for Prototype 4, can you toggle (show/hide) the #search-controls div with JQuery?
  4. How about a somewhat more involved challenge?! Right now, the code allows the user to filter by manufacturer and model. How would you extend it to also filter by part type?
  5. What else do you think is worth trying? Try it out!
  6. In order to have something you can show and discuss in class, you’ll need to fork the JS Fiddle and save your edits

Notes:
In class, we’ll step through the JS code and discuss how to extend it.

Supporting Materials

  1. Introduction to JQuery on Codecademy
    I would start with just the first lesson, JQuery Setup, and see if you’re comfortable engaging with the case after that. There are a couple of items in that lesson (currently #3, #4) that deal with how you add Javascript to a page: don’t worry about those (see Exhibit B for how to do it in JS Fiddle). Proceed to the other lessons if you feel you need to and I think you’ll be fine with just the free items.
  2. Just for Backup: Introduction to Javascript on Codecademy
    If you just feel overwhelmed by programming and Javascript, you can ease into the material very gently by starting here. I noticed that it didn’t allow me to skip items within a lesson but you can skip forward to different lessons.
  3. Just for Reference: Symbol Reference for Javascript

Session 8: Debugging Javascript

Objective

Achieve basic working fluency with analytical debugging of Javascript.

Case

Debugging Javascript

Assignment

  1. Why might Javascript be a good choice for the first programming language you learn? Here’s one perspective: The first programming language you should learn is… . What about that take do you think is vs. is not applicable to your career trajectory?
    OPTIONAL: If you found that article particularly interesting, there are even more perspectives on this Quora post: Why is JavaScript the only client-side language available? (Spoiler: It isn’t, technically, but practically speaking it kind of is.)
  2. Read the case and work through the objectives with the sample code on JS Fiddle.
  3. What line(s) of Javascript is the Console returning errors against, if any? What do you see there. Pro tip: Filter on ‘index’ to see just the content of the JS Fiddle?
  4. What assumptions are baked into the code? Which ones might be incorrect?
  5. How might you use logging to Console to help you isolate the issue(s)?

Notes:
In class, we’ll step through the analytical debugging process you used to resolve the issues. In this context, the process is much more important than the final answer or fix.

Session 9: Automating Your Gruntwork with Javascript

Objective

Achieve working fluency in controller/algorithim development.

Case

Automating Your Gruntwork with Javascript

Assignment

  1. How will automation affect MBA jobs in 10 years? Is coding a job for everyone? Finally, why is the skill set of being able to find answers so much more important today? For one perspective, see The Rise of Automation: Why Coding Is Becoming a Job for Everyone.
  2. Read the case. There’s some code in the sample code for dealing with the JSON feed- don’t worry about that for now. Can you follow what the readData and drawDiv functions are doing?
  3. Let’s suppose Frangelico has realized he wants to display the part type in a new row on the overlay div so you can see it when you hover over a part. How would you extend the code to do that?
  4. What else do you think is worth trying? Try it out!
  5. In order to have something you can show and discuss in class, you’ll need to fork the JS Fiddle and save your edits

Notes:
In class, we’ll step through the JS code and discuss how to extend it.

Supporting Materials

  1. Just for Backup: Introduction to Javascript on Codecademy
    If you just feel overwhelmed by programming and Javascript, you can ease into the material very gently by starting here. I noticed that it didn’t allow me to skip items within a lesson but you can skip forward to different lessons.
  2. Just for Reference: Symbol Reference for Javascript

Session 10: Your Interactive Page

Objective

Apply your understanding of user stories, HTML, CSS, and JS to develop an interactive page prototype.

Project Preparation

Based on your assigned stories, develop at least one interactive page, applying Javascript (per team).

Assignment

  1. How and why is prototyping a good investment for teams? Here’s one perspective: How & Why Prototypes Are Mandatory for Good Design. What mistakes can prototype help you avoid? How do those relate to the interfaces on a team (designer to businessperson, businessperson to developer, designer to developer, etc.)?
  2. Select one or more stories to prototype.
  3. Make sure you have a clear idea of what you want from your prototypes.
  4. Render the page on JS Fiddle (or WordPress if you prefer).

Notes:
We’ll step through how your team has moved from design objective to code execution.

Session 11: Your Coding Project I

Objective

Achieve working fluency in web application development.

Assignment

  1. Live Case: In pairs, you will step a peer through your design (user story and mockup) and your code.
  2. Work on your team project. What have you implemented against your stories?

Notes:
We’ll spend part of class time working with help available (lab) and part of the time reviewing your work.

Session 12: Your Coding Project II

Objective

Achieve working fluency in web application development.

Assignment

  1. Live Case: In pairs, you will step a peer through your design (user story and mockup) and your code.
  2. Work on your team project. What have you implemented against your stories?

Notes:
We’ll spend part of class time working with help available (lab) and part of the time reviewing your work.

Session 13: Project Demos

Objective

Achieve working fluency in web application development.

Assignment

  1. Work on your team project. What have you implemented against your stories?

Notes:
We’ll spend part of class time working with help available (lab) and part of the time reviewing your work.

Session 14: Contents & Wrap Up

Objective

Achieve working fluency in web application development and portfolio development.

Assignment

  1. Create a portfolio entry on Behance (like this: Zach’s Power) and be ready to share it in class. Make sure it has at least all the elements described in the tutorial below, including a video demo.

We’ll spend class reviewing your portfolio entries and work with a brief wrap-up at the end.

Supporting Materials

  1. Tutorial on Creating a Software Development Portfolio Entry
    This tutorial has instructions and an example: Application Development Portfolio Entry.