Canvas Documentation
Bubble Best Practices
v3.7
v3.7
  • Introduction
  • Key Features
  • What's New
  • For Designers
  • CANVAS FUNCTIONALITY
    • Getting Started
    • Branding & Design
    • Marketing Pages
    • Bubble Pages & Blocks
    • Roles & Permissions
    • Menus & Navigation
    • Data & Workflows
    • Emails & Alerts
    • Miscellaneous
      • Setting up two factor authentication
      • Cookie and consent banner
      • Setting your password policy
      • Set up Payment info on Account page
      • Loading screen
      • Configuring multiple languages
      • Customizing your app's portal page colors
    • Reference
      • Pages
        • Index
        • Admin Portal
        • Account
        • Login
        • Legal
        • Reset Password
        • 404
      • Reusable elements
        • Header
        • Footer
        • Signup & Login
        • Cookies Permission
        • Widgets
          • App security
          • Header Widgets
          • Workflow Widgets
        • Admin Portal
          • Admin analytics
          • Admin email & templates
          • Admin header & footer
          • Admin legal popups
          • Admin branding, launch, and settings
          • Admin marketing pages
          • Admin portal canvas logic
          • Admin options settings
        • Menu Focus Elements
      • Data types
      • Option Sets
      • Backend Workflows
      • Design standards
        • Manually Building UI
  • Bubble Best Practices
    • Learning Bubble Basics
    • Principles
    • Database
    • Design
    • Security
    • SEO
    • Speed
    • Modularity
      • Data triggers
  • Canvas library
    • Page templates
      • Free Bubble Marketing Page
      • Premium Bubble Marketing Page
      • Centered Profile Page
      • Left-Justified Profile Page
      • Standard page
      • Toggle Tabs Page
      • Menu Page
      • Mobile Menu Page
      • Video List Page
      • Standard Portal / Dashboard Page
      • Simple Portal / Dashboard Page with Icons
      • Double Sidebar Portal Page Template
      • Search Page
      • Map Search Page with Toggle and Filters
      • Floating Map Search Page
      • Search Bar Page
      • Multi-Step Page With Progress Bar
      • Standard Multi-Step Process Page
      • Multi-Step Process Page with Sidebar
      • Gallery Profile or Product Page
      • Sidebar Profile Page
      • 2-Column Menu Tabs Page
      • 2-Column Checkout Page
      • 2-Column Video Chat Page
      • Vertical Multi-Step Page Template
    • Blocks
      • Monthly Calendar Scheduling Widget
      • No Reply Comments Thread
      • Nested Comments Thread (with Like and Reply)
      • Placeholder Group
      • List with Circular Progress Bar Repeating Group
      • Top Input Chat Widget
      • Bottom Input Chat Widget
      • Toggle Tabs Group
      • Single-Select or Multi-Select Pill Tabs Group
      • Settings group
      • To-Do List Repeating Group
      • Title Group with Button and Filters
      • Product Details Group With Progress Bar
      • Listing details with Icons and Menu Focus Group
      • Week Daily Availability Group
      • Frequently Asked Questions (FAQ) Repeating Group
      • Dismissible Module
      • Video Group
      • About Group
      • Add to Cart Group
      • Full Width Map with Directions Link
      • Location Module (Map and Directions)
      • Drag and Drop Repeating Group
    • Popups
      • Confirmation Popup
      • Message Popup
      • Image Popup
      • Video Popup
      • Vertical Scroll Popup
      • Edit Popup
      • Standard Form Popup
      • Subscribe Popup
      • Feedback / Contact Popup
      • Details Popup
      • Add List Popup
      • Advanced Form Popup
      • Rating Popup
      • Toggle Tabs Popup
      • Share Popup
      • Multi-Step Popup
      • Invoice Popup
      • Stripe Credit Card Purchase Popup
      • View Profile Popup
      • Send Message Popup
      • Multi-Select Pill Tabs Popup
      • Pricing Plans Popup
Powered by GitBook
On this page
  • How to use this guide
  • What to learn
  • Learning resources
  • Core resources
  • Additional resources

Was this helpful?

  1. Bubble Best Practices

Learning Bubble Basics

Links to resources to get started learning Bubble development

Learning how to use Bubble takes work. While not as complicated as learning how to build web apps with code, there are still a lot of different things that go into Bubble. You'll need to learn things like:

  • What a database is and how Bubble's database works

  • How web pages are created in Bubble

  • How to make pages that work on laptops, tablets and mobile phones (this is called responsiveness)

  • Rules for setting up logic in Bubble (e.g. what to do when a user clicks on a button)

How to use this guide

This Best Practices guide is a tool that is intended to be accessible to Bubble beginners (who have spent a few hours using the Bubble editor), intermediate users, and Bubble experts. Depending on your level, it should be useful for the following:

  • Beginners: learn best practices and build good habits early on

  • Intermediate: use this as a reference on how to approach many technical choices in Bubble

  • Experts: learn how AirDev builds and compare our design choices to your own experience

For more experienced users of Bubble, this guide will be a window into the way AirDev chooses to build their apps. The motivation for most design choices AirDev makes in client apps, AirDev products, and templates is also explained here.

What to learn

If you're not sure where to start learning, you can follow this path of resources. These tasks are intended to be completed by beginners.

Topic

Goal

Content

What is Bubble?

What is Bubble and when/why to use it

Why Bubble?

Is Bubble the right tool for you? (This is for entreprenuers)

Basics

Overview of how Bubble works

Bubble editor

Get familiar with the Bubble editor

Design basics

Create and edit elements

  1. Read these two sections of the Bubble manual (10 minutes):

Workflow basics

Visual workflows, data workflows, plugins' workflows

Database basics

Quick intro to the Bubble Database and Workflows

Using plugins

How to install and set up a new plugin

Bubble dev tools

How to use some tools in the Bubble editor and run mode

    1. Topics covered: Element dropdown, Element tree, App search tool, Run mode inspector, Run mode debugger, Edit mode element inspector

Basics recap

Practice the skills from the above areas

Learning resources

This section contains links to general Bubble resources. These are useful for your learning at different stages - some of them are for beginners, while others are useful for Bubble users of all skill levels.

Core resources

Additional resources

Additionally, you can use the Bubble Reference as a first resource when you run into some feature that you're not familiar with in the Bubble editor. Users with experience in web development outside of Bubble will be likely to learn quickly by using the reference and practicing in the editor.

PreviousManually Building UINextPrinciples

Last updated 4 years ago

Was this helpful?

from the Bubble manual (5 minutes)

Check out to see what is possible with Bubble (5-30 minutes)

Watch (20 minutes)

(10 minutes)

Read on Bubble Basics. (5 minutes)

Complete the (5-15 minutes)

Play with Bubble's home page (5-15 minutes)

(Optional):

Complete (10 minutes)

Complete the (5 minutes)

(5-10 minutes)

(10 minutes)

(5-10 minutes)

(5 minutes)

(5-10 minutes)

(5-10 minutes) (also very design-focused, no workflows/db objects)

(5-10 minutes)

(5 minutes)

. (25 minutes - if the pace is too slow, run on 2x speed or skip around.)

Redo all of the on "Hard Mode", which appears after completing a lesson on normal mode (1-2 hours)

: These lessons are Bubble's training program, a set of 12 short lessons walking users through the basics of building apps on Bubble. If you're a complete beginner, start here - in the next page we direct you through the lessons in a more organized fashion. Complete these lessons and try to understand each action you take before moving on to the next action. Estimated time to complete: 2-3 hours (or longer if you read through related resources while completing these lessons).

: This official Bubble manual can be used for an in-depth understanding of how Bubble works. You should spend a few hours going through this resource. We recommend you use it as a guide to different parts of the Bubble editor as you learn, instead of trying to read it straight through.

: A Bubble education startup, Coaching No Code Apps has developed a YouTube series available free of charge. They have published about 100 videos, each covering one topic in Bubble development. Follow along by building while Gaby explains the what, how, and why of what you build. There is a from this channel that will guide you through some basics of how to build on Bubble. If you just want to watch one video that is a more complete walkthrough, check out .

: If you run into a brick wall while building on Bubble, someone else has probably run into the same issue before. This is a great place to check for previous users' questions and to ask your own questions, too.

: The official reference from Bubble is a useful tool to look up detailed information about how certain features are supposed to work. This document is helpful to read if you want an in-depth understanding of how each part of Bubble functions.

Bubble Lessons
Bubble Manual
Coaching No Code Apps
series of videos
this 2 hour tutorial
Bubble Forum
Bubble Reference
Read Bubble's own intro
Bubble's Showcase
Coaching No Code's video on Bubble pros/cons
Coaching No Code Intro to Bubble
this manual page
first interactive Bubble lesson
in the Bubble editor
Read the manual pages about the Editor
the Image Uploader lesson
Image Slideshow lesson
General design info
Handling conditionality
City Upvoting Lesson
User Signup/Login/Logout Lesson
Using conditions on design elements and workflows
Bubble lesson on making a shopping list
Bubble lesson with Giphy plugin
Bubble lesson with iTunes plugin
Chart lesson
Facebook auth lesson
Watch this video on how to use some tools from the Bubble editor
Bubble lessons