Origami  Course

Build a Shopping List Prototype

In this course you will create a shopping list that actually works and is responsive on all devices! Episodes include advanced tips around scrolling, loops, text entry and components.

There are 8 episodes.

  • Starting with a scrollable list

    Starting with the basics, in the first episode we will make a scrolling list of items.

    • 4:13
    • Free to Watch
    • Watched
  • Responsive app layout

    Our prototype is going to be a huge success, so lets make sure it looks good on every device! Special tips for iPhone X as well.

    • 4:06
    • Free to Watch
    • Watched
  • Build a Text Entry Component

    Components are a great way to stay organized and modular in Origami. In this episode you'll build a fully functional text entry component.

    • 7:55
    • Free to Watch
    • Watched
  • Adding Items to a List

    A prototype really shines when it handles real user input. By the end of this extended episode we will be able to type and add items onto our shopping list! We will also ...

    • 4:42
    • Pros Only
    • Watched
  • Checking Off Items

    Now that we have items on our list, it's time to check them off! In this episode, we will make a reusable list item component and make our item count text smarter.

    • 7:28
    • Pros Only
    • Watched
  • Swipe to Delete - Part One

    Learn how to create one of the most commonly used interactions - a swipe gesture to delete items.

    • 5:29
    • Pros Only
    • Watched
  • Swipe to Delete - Part Two

    Now that we have our swipe to delete interaction, let's hook it up to our shopping list so we can remove items from it.

    • 7:11
    • Pros Only
    • Watched
  • Finishing Touches

    To finish off our app prototype, we'll add functionality to the Clear and Share links in the navigation bar.

    • 5:57
    • Pros Only
    • Watched