Commonly when designing a website or application, we are recommended to visualize it first.
Wireframing is the easiest design method to create just the essentials. Plan out the content, positioning, and more.
Mockup is the bare minimum of the design. We can see better layout, colors, typography, images, and more.
Prototype is often the advanced one where we can make the mockup interactively used. Without having to code it.
Now here's an example of an interactive prototype of the app we're building. You can play around by clicking the highlighted areas: input box, add button, and delete button.
Nowadays, we can just use online design tool to create a mockup or graphic design. Let's use Figma for a start, and follow along with the predefined design wireframe/mockup for our app.