Learning Bubble

Learn how to design and deliver interactive web applications with Bubble, a leading no-code flexible web platform.

Introduction

• Create custom web applications without code

1. Getting Set Up

• Register and create a new app
• Tour the Bubble interface

2. Creating a Basic Grocery List App

• Plan your grocery list app
• Configure the index page
• Add a header
• Configure the list creation interface
• Add a workflow to your "add to list" button
• Create a repeating group to display the list
• Configure the display of grocery items
• Add a checkbox when an item is purchased
• Challenge: Display purchased items
• Solution: Display purchased items

3. Personalizing the Grocery App

• Examine login button and enable checkbox
• Show and hide the user's grocery list
• Make the app accessible only to users who are signed in
• Make the login box display by default
• Adjust data privacy settings
• Edit the grocery items
• Challenge: Delete grocery items
• Solution: Delete grocery items

4. Working with APIs

• Understanding APIs
• Connect the H+ Sport ecommerce API
• Configure the repeating group for displaying the API
• Display the API text on the page
• Display the API image on the page

5. Styling in Bubble

• Style in Bubble: Themes vs. templates
• Set colors and fonts in Bubble
• Make layout "responsive"

Conclusion

• Launch your Bubble app
• Where to go next