Practical lessons

Practical lessons

Welcome to Unicorn Ventures! We’re so pleased to have you on board! We’ve assigned you a mentor, who can help you set your environment up, but we’ve got a huge problem: we can’t keep track of who’s doing what work! That’s where you come in …

Introduction to HTML and Javascript

Ironically, the product we’re planning to sell to the world should help us with this - we need to build a way of keeping the work we need to do in a central place, and letting people track what they’re doing.

User stories

  • As a «Customer», I want a «Feature» beacuse «Reason»
  • As a product owner I want to see all the features I want implemented for ThingList in one page so I can prioritise them


  • Dev environment - how to make change
  • Mental model of “compiling”: build, run, stop container
  • Mental model of change: edit, save, compile, refresh
  • Introduction to Javascript (mental model: client vs server side)
  • Demonstration of documentation sources
  • Acknowledge jQuery
  • Introduce retrospective, what did we learn, what would we change?

Done via screen sharing. Start with longish feedback loops, increase speed over time. Eg. task 1 was to bundle stop-build-run into one “refresh” command for the container.

Interface design

  • As a developer I want to see all the tasks that are assigned to me so I can plan my work


  • Recap / review previous notes
  • Planning session for ~2 hours of work
    • Review current user stories, add tasks
    • Mental model: 2 weeks of work will save 2 hours of planning
    • Design sketches for UI
  • Building interfaces with HTML and CSS
  • Retrospective
    • Agenda
    • Note taking
    • Timing

Interface functionality

  • Planning
    • Design for UX
  • Naming of things is important
    • Renaming variables would be good time to introduce version control
    • Talk about concepts, borrowing from the real world is good
    • Write concepts on your design, to remember the concepts

VSCode, git, testing

Back end functionality

  • Planning
    • Mental model: always working, MVP - alternative RAT
  • CRUD operations


Web server (nginx) Docker containers Live web hosting

Data models and integrity

Backup & restore Migration

Multi-user system

Implementing login

Multi-tenant system

Implementing permissions


Enhancing functionality

  • Labels
  • Colours
  • Backgrounds
  • Covers