Syllabus: Coding for Designers, Managers, & Entrepreneurs

This is a live, online class with Laura Klein and Alex Cowan where you’ll learn how to go from idea to code.

Course Descriptions + Objectives

A Coding Class for You
Do you work with software developers but not as a coder? Would you like to build more prototypes and fewer PowerPoints? Edit web pages yourself? Better understand what on earth the developers are talking about? If so, this class is for you.

A Coding Class for the Work You Do
You’re going to learn how to build and deploy functioning applications in HTML, CSS, and JS. You’ll leave the course with the creative confidence to code where you want to. Rather than an abbreviated ‘CS101’ class, this course is built from the ground up with you in mind- the interdisciplinary superstar!

A Coding Class on Your Schedule
This course is designed around a workload of about 6 hours. Our online sessions are in the evening, Eastern Time in the US (GMT-5). You’ll be supported by a Darden instructor as well as a team of TA’s monitoring help forums and available in office hours.

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

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 Schedule

Part 1

Dates: May 8th – May 29th

Sessions: Session 1 to Session 7

Part 2

Dates: May 30 – June 20th

Sessions: Session 8 to Session 14

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.

Session 1: From Prototype to HTML

Objective

Achieve basic working proficiency with HTML.

Case

From Prototype to HTML

Assignment

  1. Prepare the case: From Prototype to HTML
    A) Fork the starter code on JS Fiddle (see note below on how), then review and update the code relative to the following questions:
    Looking at the sample code on JS Fiddle, can you identify all the HTML tags (headings, div’s, etc.)?
    Can you explain their roles?
    How about their additional properties (like styling)?
    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!
    B) Doing Google searches like ‘create round border on a div’ is a great way to learn and get comfortable working through code. It’s what we all do!
  2. Read Solving Agile UX by Laura Klein
    A) Please make notes on the questions below, which we’ll discuss in our next synchronous session.
    What are the advantages of observing user behavior in small+frequent vs. large+infrequent batches?
    How is that ‘agile’?
    Laura mentions that a hypothesis-driven dev. process is one where the team asks “If we make this change, we predict it will have this effect. Now let’s test to see if we were right or wrong.” How has making a certain change changed user behavior in a project you’ve worked on? How did that whole process work?
  3. Read: You Don’t Need a Technical Co-Founder by Mahmoud Swehli
    A) 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?

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’. The idea here isn’t to make sure you understand every little detail, but to make sure you have enough of a foundation to ask the right questions and answer them yourself to the greatest extent possible.

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: How (and Why) to Write Great 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: Debugging HTML & CSS

Objective

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

Case

Debugging HTML & CSS

Assignment

  1. Read: Teaching Novice Programmers How to Debug Their Code
    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, hypothesis-driven, test-driven approaches you’ve learned (likeLean Startup)?
    Note: The Slack excerpt may be a little hard to follow and, if so, please skim/skip it
  2. Prepare: Debugging HTML & CSS
    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?
    C) There are notes on using the Chrome DEVTOOLS in the case. The Chrome 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.

Supporting Materials (OPTIONAL)

These are just for general reference. They are not a very good fit for the case. They might be useful under certain circumstances for your project.

  1. W3C HTML Validator
  2. CSS Lint

Session 5: 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. Read: 5 Good Reasons Why Designers Should Code
    If you’re acting in the role of designer, why might it be important to be able to code?
    Is it?
  2. Project: Prepare a Static Page Prototype in JS Fiddle
    Be sure to have ready:
    A) The specific user story or stories you’re working.
    Also, make sure you have a clear view of how you would test your implementation for usability.
    B) Optional but highly recommended: Your prototype or prototypes
    Start with a clear design intent. There’s not requirement that you start from a Balsamiq prototype or stick to the original design in your HTML implementation, but be careful you don’t get lost in the details. Implementing against a prototype is a good way to avoid that.
    C) The URL of your JS Fiddle
    We’ll review your work in the session.

Session 6: Making Stuff Happen with Javascript

Objective

Achieve basic working proficiency with Javascript and JQuery.

Case

Making Stuff Happen with Javascript

Assignment

  1. Watch: MVC Tutorial
    What is the Model-View-Controller framework and how does it relate to the material in the case?
    What’s what?
  2. Prepare Case: Making Stuff Happen with Javascript
    A) 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?
    B) Looking at the sample code for Prototype 4, can you toggle (show/hide) the #search-controls div with JQuery?
    C) 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?
    D) What else do you think is worth trying? Try it out!
    Reminder: Be sure to fork the code to save your work on JS Fiddle

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 7: Portfolio Entries, Peer Reviews, and Final Presentations

Objective

Integrate your learnings to date through applied practice and start your personal innovation portfolio.

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.
  2. Complete your peer review with your assigned

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.
  2. Peer Review Template

Session 8: Debugging Javascript

Objective

Achieve basic working fluency with analytical debugging of Javascript.

Case

Debugging Javascript

Assignment

  1. Read: The first programming language you should learn is…
    Obviously, this is in the context of product dev. in general vs. analytics specifically, but why might Javascript be a good choice for the first programming language you learn?
    What’s the relationship between application dev. and analytics from your perspective?
  2. Prepare Case: Debugging Javascript
    A) Work through the objectives with the sample code on JS Fiddle.
    B) 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
    What assumptions are baked into the code? Which ones might be incorrect?
    How might you use logging to Console to help you isolate the issue(s)?
    C) 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/algorithm development.

Case

Automating Your Gruntwork with Javascript

Assignment

  1. Read: The Rise of Automation: Why Coding Is Becoming a Job for Everyone
    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?
  2. Prepare Case: Automating Your Gruntwork with Javascript
    A) There’s some code in the sample code for dealing with the JSON feed- don’t worry about that for now.
    B) Can you follow what the readData and drawDiv functions are doing?
    C) 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?
    D) What else do you think is worth trying? Try it out!
    E) 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: Creating & Managing Users with Google Firebase

Objective

Achieve working fluency in using controllers to interface with a third party API.

Case

Creating & Managing Users with Google Firebase

Assignment

1. Can you follow what the code is doing?
– There are a bunch of Firebase functions being called that aren’t listed in the Javascript. Where are those coming from?
– What’s an observer function and how is ‘firebase.auth().onAuthStateChanged’ an example of one? For background, see Exhibit: Key JS Concepts and Techniques.
– What are the various HTML forms and when, where do they appear?
– How does the data flow from the user login event to the actual log in event on Firebase? What’s happening?
– There are a few instances of .then(…) in the code. What are those doing and why are they necessary? For background, see Exhibit: Key JS Concepts and Techniques.
– Firebase.auth().onAuthStateChanged is what’s called an observer function. What does that mean and why is the observer pattern a good fit for the particular job this code is doing? For background, see Exhibit: Key JS Concepts and Techniques.

2. Let’s suppose Frangelico wants to restrict new users to a specific email domain. How would you modify the code to do that?
Note: You’d probably want them to confirm their identity over email before you sign them in, but you can skip that for now. If you’re particularly interested in trying it out, however, it is a feature of Firebase.

3. For this user story: ‘As Ted the Technician, I want to sign in to the system so I can order a part.’, there are a couple of test cases that add more detail:
a. Make sure that if they submit a username/email with the @hvacnhurry.com domain that doesn’t exist on the new system, they get a descriptive error like: ‘For now, this is a stand-alone system. If you haven’t created an account here, just click create account. Sorry for the extra step!’
b. Make sure that if they get a bad password error, remind them that this is a separate system from ‘HVAC Central’ and their password may be different.
How would you implement those?

What else do you think is worth trying? Try it out!

Supporting Materials

In the case exhibits, you’ll find:

  1. A guide to setting up a project on Google Firebase
  2. Notes on a few new programming concepts

Session 11: 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 12: Your Coding Project

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 (Optional): 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. Project: Implement Your Code on WordPress
    A) Team Leads Only
    Create a WP Engine Account per Guide Below
    Create WordPress Admin’s and SFTP Users for Your Team (per guide)
    B) Select and Implement a WordPress Theme
    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?
    C) 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?
    D) We’ll step through both your design choices and how you moved your work over during our class session.

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 14: Portfolio Entries & Contest

Objective

Achieve working fluency in web application development and portfolio development.

Assignment

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

  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.
  2. Complete your peer review with your assigned

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.
  2. Peer Review Template

Alumni Gallery (Other/Similar Versions of the Class)

This is a partial list of the amazing projects students have done in class.

Brandefy: app for price and quality comparison of private label goods

Cerebro Medical: software-enabled transcription and data entry service for physicians

Dominion Granite: new take on pre-sales web UX for this company

EZ-Rentals: property management application for small-scale landlords

Food for Darden: lunch delivery for Darden MBA students (on campus)

HomeSlice: new financial product (partial shares of residential property) and marketplace for the same

Itinerant: social networked-powered directory of options for a first date

Mentor Group: marketplace/enterprise solution for mentoring

Points from Away: aggregator for tracking and spending award points

RecruitRef 1: marketplace for college-bound athletes and recruiters

RecruitRef 2: alternate take on the above

Registrar: new ideas for the registrar system at UVA Darden

StatXP: aggregation and customization of video game related news and tips

Yeoman: application for managing residential real estate buying

Related Topics and Further Reading

Digital Design

COMING SOON

Version Control

WHAT? There wasn’t a great opportunity to practice this in the course (or space), but this is an important and relatively standard part of development among teams.
WHY? Both sharing code and organizing around small merges is important to collaboration among teams.
INTRO? These are a couple of pretty good starter pieces: Version Control 101 and The Role of Version Control.
LEARN? Codecademy has a free intro course: Learn Git.

Continuous Delivery & DevOps

WHAT? This is a set of practices and an organizational/cultural movement (respectively) to improve software delivery. As agile is to the relationship between product managers (or ‘businesspeople’) and developers, these practices are to testers (QA), ops (sysadmin) and the rest of the team.
WHY? Amazon famously delivers code every 11.6 seconds. Teams that can deliver faster tend to learn faster, hence innovating faster and competing better.
INTRO? Here are some quick thoughts: Why is velocity important?
LEARN? This Coursera course is a good introduction, and the coding examples continue with the HinH sample code you’ve seen in the cases: Continuous Delivery & DevOps.

Classes and Object-Oriented Programming

WHAT? This is a key component of object-oriented programming, which is a feature of several major languages and approaches to programming.
WHY? Long story but some like this for functional decomposition. Is it as great as people thought it would be? Some might say no.
INTRO? Here’s kind of a fun and reasonable intro: How to explain object-oriented programming concepts to a 6-year-old.
LEARN? There’s a Codecademy module that’s based on Javascript: Introduction to Objects.

Single Page Apps via Angular & React

WHAT? Per Wikipedia- ‘A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server’ Angular (maintained in large part by Google) and React (maintained in large part by Facebook) are Javascript-based application frameworks for building such apps.
WHY? These are a particularly good fit for certain experiences (particularly) on mobile, like Facebook or Instagram.
INTRO? The Wikipedia pages are pretty good: Single-Page App, Angular, and React.
LEARN? There are Codecademy courses on both: React and Angular