Mockupless

About the course

Welcome to Interaction basics! In this course you will start learning how to create truly interactive and testable prototypes with the power of JavaScript and Vue.js. You will start small and finish the course by creating your own multi-page prototype with dynamic collections and components that respond to user actions.

What you’ll learn

This course teaches you the basic concepts of creating prototypes with JavaScript and Vue:

  • Storing and changing data. A shift from static layouts to interactive prototypes starts with saving all the content that you want to be dynamic in special containers called variables.

  • Saving users’ input. Learn to store data from all kinds of form controls and use it in your prototypes.

  • Reacting to clicks and other user actions. Learn to create instructions for what should happen in response to user actions.

  • Showing and hiding UI elements. Display elements, components, and pages on demand with the help of conditions.

  • Displaying dynamic lists and grids. Learn how to create a collection of components from a single container and a special variable called an array.

Prerequisites

This course doesn't require prior knowledge of JavaScript or other programming languages. If you have experience with coding, some concepts will be familiar to you, and you may learn at a faster pace. Nevertheless, going through all the articles of the course is recommended for understanding the Mockupless approach, which sometimes differs from the way programming is usually taught.

Knowledge of the Layout basics is required to understand the HTML and CSS code used in the examples. With this knowledge, you will be able to focus solely on interactivity.

CodePen is used in this course for creating and previewing prototypes. Create an account if you haven’t already—it’s free.

Community

Together with creating a knowledge base, the aim of Mockupless is to build an open community of designers who share ideas, struggles, and the desire to create better digital products. Visit the General Spectrum channel to discuss core prototyping concepts. Go to the Interaction basics channel to ask questions about this particular course, help others, and share your progress.

Please be kind and patient.

Prototyping template →