Skip to main content
Key Concepts

Start your Bubble journey here by learning the key concepts of how to use the editor and the platform.

Updated over a year ago

Introduction to Bubble: The No-Code Web App Builder

Bubble is a leading platform for building web applications without the need to write code. This guide will walk you through the use of the Bubble editor and platform to bring your web app ideas to life.

Designing in Bubble with the Design Tab

The design tab is where you begin your Bubble journey, using visual elements, container elements, and input forms to build your app's interface. You’ll also work with reusable elements to maintain consistency across pages.

Using the Property Editor

The property editor is a floating window that appears when an element is added to the page, allowing you to edit its properties across three tabs: appearance, layout, and conditional.

Saving Element Designs Using Styles

Styles help you maintain a consistent look across your app. You can create and apply styles for elements, define global font and color variables, and set conditions and transitions for styles.

Responsive Design

Learn how to make your app adapt to different screen sizes using responsive container layouts. Understand the importance of Min and Max width for elements to ensure they display correctly on all devices.

Your First Workflow

Bubble uses a workflow-based programming system where workflows are a series of actions triggered by an event. This section teaches you how to create workflows and navigate users to different pages within your app.

Your First User

Setting up user registration and authentication is crucial. Bubble provides a built-in user data type and pre-configured fields to help you capture and manage user data efficiently.

Your First Data Type

Data types are the backbone of your data-driven application. This section shows you how to create custom data types and fields, such as a commenting system, and how to use them in your app.

Data (“Things”)

Learn about the concept of "things" in Bubble, which are entries in your app's database. Understand CRUD operations and how they are performed on these "things" through workflows.

Inserting Dynamic Data

Dynamic data is essential in Bubble. This section will teach you how to use the Expression Composer to build expressions that display dynamic content in your app.

Type of Content & Data Sources

Container elements can define a type of content and data source, allowing you to display and interact with the data in your database. This is key to building complex user interfaces.

Your First Repeating Group

Repeating groups are used to display lists of things from your database. Learn how to set them up and design the first cell, which determines the layout for the rest of the cells in the group.

Your First Privacy Rule

Privacy rules ensure that data in your app is only shown to users who should have access to it. This section allows you to create and apply privacy rules to secure your data effectively.

Connecting Data Types

Understand how to structure your database by creating relationships between different data types. This section covers the concept of linking data types and the importance of planning your data structure.

Parent-Child Hierarchies

Get to know the hierarchy of elements and their parents, which is crucial for responsive design and data inheritance in your app's user interface.

Reusable Elements

Reusable elements allow you to design a component once and use it across multiple pages or within other reusable elements, making your app easier to maintain.

The Issue Checker & Debugger

The Issue Checker helps you find and fix issues in your app in real-time, while the Debugger aids in troubleshooting problems when your app is running.

Live vs. Dev

Bubble has two environments: development and live. Understand the differences and the importance of deploying your app to the live environment for users.

Plugins

Bubble's plugin ecosystem extends the functionality of your app with additional elements, events, actions, and data sources. Utilize plugins to integrate external services and enhance your app's capabilities.

Did this answer your question?