Canvas Documentation
Bubble Best Practices
v2
v2
  • Welcome
  • Introduction
  • Contents
  • Using Bubble
    • Bubble basics
    • Bubble best practices
      • Principles
      • Database
      • Design
      • Security
      • SEO
      • Speed
      • Modularity
        • Data triggers
  • Using the template
    • Getting the template
    • Setup
      • Quickstart
      • Features and configuration
        • Customizable landing page
        • Header menu
        • Menu focus group
        • Styles and colors
        • Extending the admin portal
        • Set a password policy
        • Enable cookies
        • Alerts
        • Emails
        • Hidden variables popup
        • Set up index page redirects
        • Set up payments on account page
        • Set up social media links
        • Search engine optimization (SEO)
        • Setting up domains
        • Legal docs
    • Extending the template using Canvas Pages
      • How it works
      • Get started
      • Setting up added modules
      • Updating Canvas styles
    • Extending the template manually
      • Padding
      • Pages, groups, and popups
      • Hiding groups
      • Styles
    • Reference
      • Pages
        • index
        • admin
        • home
        • account
        • verify
        • login and loginsimple
        • termsofservice
        • privacypolicy
        • reset_pw
        • standardpage
        • 404
      • Reusable elements
        • header
        • footer
        • signup/login
        • popupsreusable
        • menufocusgroup_template (︙)
        • menufocusgroup_user
        • menufocusgroupfeature_b
        • menufocusgroup_email
        • menufocusgroup_notifications
        • menufocusgroup_shoppingcart
        • menufocusgroup_search
        • cookiespermission
        • homepageblocks
        • admin portal reusables
          • admindashboard
          • admingeneralsettings
          • adminemail
          • adminseosettings
          • adminsocialmediasettings
          • adminsocialmediainfo
          • adminlegalpages
          • adminhomepagesetup
          • adminstyles
          • adminfeaturebacklog
      • Data and workflows
        • Data structure
        • Option sets
        • API workflows
      • Canvas Pages: lists of modules & page templates
  • Demos
    • Yelp for Books
  • Other Canvas templates
Powered by GitBook
On this page
  • What to learn
  • Learning resources
  • Core resources
  • Additional resources

Was this helpful?

  1. Using Bubble

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)

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.

PreviousContentsNextBubble best practices

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 10 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. This guide is fairly readable for a beginner. 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