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	Read Bubble's own intro from the Bubble manual (5 minutes) Check out Bubble's Showcase to see what is possible with Bubble (5-30 minutes)
Why Bubble?	Is Bubble the right tool for you? (This is for entreprenuers)	Watch Coaching No Code's video on Bubble pros/cons (20 minutes)
Basics	Overview of how Bubble works	Coaching No Code Intro to Bubble (10 minutes) Read this manual page on Bubble Basics. (5 minutes)
Bubble editor	Get familiar with the Bubble editor	Complete the first interactive Bubble lesson (5-15 minutes) Play with Bubble's home page in the Bubble editor (5-15 minutes) (Optional): Read the manual pages about the Editor
Design basics	Create and edit elements	Complete the Image Uploader lesson (10 minutes) Complete the Image Slideshow lesson (5 minutes) Read these two sections of the Bubble manual (10 minutes): General design info Handling conditionality
Workflow basics	Visual workflows, data workflows, plugins' workflows	City Upvoting Lesson (5-10 minutes) User Signup/Login/Logout Lesson (10 minutes) Using conditions on design elements and workflows (5-10 minutes)
Database basics	Quick intro to the Bubble Database and Workflows	Bubble lesson on making a shopping list (5 minutes)
Using plugins	How to install and set up a new plugin	Bubble lesson with Giphy plugin (5-10 minutes) Bubble lesson with iTunes plugin (5-10 minutes) (also very design-focused, no workflows/db objects) Chart lesson (5-10 minutes) Facebook auth lesson (5 minutes)
Bubble dev tools	How to use some tools in the Bubble editor and run mode	Watch this video on how to use some tools from the Bubble editor. (25 minutes - if the pace is too slow, run on 2x speed or skip around.) 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	Redo all of the Bubble lessons on "Hard Mode", which appears after completing a lesson on normal mode (1-2 hours)

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

Bubble Lessons: 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).

Bubble Manual: 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.

Coaching No Code Apps: 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 series of videos 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 this 2 hour tutorial.

Additional resources

Bubble Forum: 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.

Bubble Reference: 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.

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.