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
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
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
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.
Last updated