Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

The Complete Guide to Bubble Visual Programming

Name: The Complete Guide to Bubble Visual Programming
Rating: 4.3 (1099 reviews)

Learn how to build sophisticated web applications like AirBnB Yelp Twitter with no code using Bubble Visual Programming

Created byHenry Habib

Last updated 4/2025

English

English [Auto],

What you'll learn

Bubble Visual Programming ecosystem to create websites and web applications using a No-Code platform
Build functional and professional grade web applications, websites, and apps
All elements of Bubble, including responsive design, databases, workflows, users, and much more
Build a fully functional project and task management web application with a complete walkthrough
Build a thin version of AirBnB, complete with Google Maps integration and user-to-user messaging
Responsive web design that adapts to the user's screen and looks beautiful
Database management system that easily stores, organizes, and shows all your data
Workflow management system that allows complex interaction between the front-end and back-end, similar to what many other web applications like Twitter and Yelp do
How to go from having an idea to building a fully functional MVP, with many examples in between
Interacting with the Bubble community to continue learning and building your skillset

Course content

15 sections • 165 lectures • 15h 52m total length

Introduction to Bubble and its features3:55
Explore Bubble as a no-code platform for building sophisticated web applications, offering freedom with data, workflows, responsive design, and built-in user management, plus plugins, APIs, and a thriving community.
Course tips0:44
Successful Bubble applications2:52
Explore real world Bubble apps like dividend finance and Comet to see how no-code, fast iteration enables scalable ventures and growth.
Bubble vs. other platforms3:04
What Bubble can and cannot do3:12
Course overview2:09
Learn the building blocks of Bubble, apply them to professional web apps using data, workflows, and responsive design, and join a supportive community to keep building with plugins.
A few notes before we begin1:42
Keys to Success2:17
Ways to reach out1:48
Watch in 1080p0:50
Choose 1080p to optimize your viewing experience for bubble visual programming lectures, using the gear icon to set the resolution and avoid auto or 720p.

Text element and the appearance property tab11:47
Conditional properties5:03
Transition properties2:51
Explore how transitions control the timing of property changes, adjust background color and border width with ease, and preview slow burn effects in Bubble visual programming.
Properties extras2:37
All visual elements (buttons, icons, etc.)11:51
Input form elements8:56
Dynamic data introduction3:39
Dynamic data example 13:43
Dynamic data example 22:37
Groups introduction6:38
Grouping elements together6:01
Create and manage groups by adding pages and placing elements inside. Use the element tree and red boundaries to confirm grouping and nest groups, then adjust background and borders.
Floating groups3:22
Styles7:05
Create and edit a main page button style in the styles tab, customize appearance and typography, and propagate changes across all buttons from a single style, with theme options.
Page design6:32
Design and manage Bubble pages by editing properties, setting seo-friendly titles, and choosing fixed width or full width layouts; navigate between pages via buttons or workflows.

Responsive design introduction1:37
Responsive design - a bad example6:39
Explore a full-width, image-first page that mirrors an Airbnb-like design, showing elements overlapping on smaller screens and how to fix it with responsive design methods.
Alignment and distribution4:50
Dynamic vs. fixed width6:49
Responsive design - a good example10:30
Use the responsive tab to preview layouts across laptop, iPad, and phones, adjusting margins, min-width, and group spacing. Center elements and apply responsive rules to ensure consistent looks on devices.
Groups within a group and verticality9:36
Alignment extras2:25
Responsive design with text4:30
Explore responsive design with text overflow in bubble. Learn when text wraps or shows dot dot dot and how to align and distribute elements for consistent layouts.
Resources for responsive design3:44
Explore Bubble's responsive design resources, including a 20-minute founder tutorial and the official manual, with guidance on fixed elements, min and max widths, margins, and groups.

Data introduction4:25
Creating a data type3:44
Create a new data type called projects in Bubble, add fields such as project name, start date, end date, number of members, and project priority, and explore field types.
Adding new thing rows2:50
Viewing the data5:12
Show your projects data on a web page with a repeating group linked to the projects data type, using dynamic fields and live preview as entries are added.
Lists of data and linking data together10:43
Benefits of data linkage2:43
Linking data together enables dynamic display of task names, project names, and project member counts, illustrating how data linkage powers cross-record insights in Bubble.

Workflow introduction1:52
Explore how workflows in Bubble connect design and data by guiding actions, from button clicks altering text to saving forms, navigating pages, and debugging timed and scheduled workflows.
Simple workflow examples4:09
Learn to build a simple workflow in bubble by triggering an event with a button click, optionally using a condition, and performing actions such as hiding a text element.
Creating conditions on workflows6:55
Learn how to create conditions on workflows, use a single event with multiple actions, and control visibility of text boxes with input-based conditions.
Different events in workflows7:33
Other workflow events (page is loaded)4:44
Explore the page is loaded event, which hides the submit button, and see how every five seconds with a condition and a toggle show or hide creates a strobe button.
Animate actions4:33
Workflows to set states8:48
Explore using custom states to drive text box values with workflows, linking a page variable to the text box and updating it via element actions.
Workflows to create things10:21
Use Bubble workflows to create and save new records in the projects table by mapping inputs to fields such as project name, start and end dates, and members.
Workflows for custom events11:19
Define and reuse custom events in Bubble to encapsulate common actions, call them from multiple workflows, and update one definition to affect all related buttons.
Debugging workflows3:28
Workflows for navigation3:10
Use workflows to navigate between pages in a bubble app, linking index and sandbox pages with go to page, go back, refresh, and open an external website.

Design with data introduction0:32
Build on prior modules by applying data design techniques, using repeating groups, custom states, and more complex pop outs and pop ups.
Repeating groups introduction5:20
Populating data in a repeating group5:12
Viewing data 15:34
Design and view data in Bubble by building a full-width project list, a project detail panel with inputs and date time pickers, and workflows to view, edit, and delete records.
Viewing data 27:25
Learn to build the back end in bubble using custom states to populate a project's details when clicking an info icon.
Modifying data4:59
Deleting records2:15
Filtering data7:25
Learn to filter repeating group data in bubble by applying end date constraints with a date picker, and use initial content and sorting to preview results.
Sorting data3:37
Sort data in a bubble app by project name or due date using a dropdown, then configure a dynamic field name that matches the chosen field and preview the results.
Better way to delete records5:36
Learn to manage records in Bubble by using a delete flag instead of hard deleting, updating workflows to set the flag and filtering data sources to hide deleted items.
Adding data search1:51
Using data selectors like count and first4:45
Learn how bubble selectors condense data into a single value, using count and first to show the number of projects from a repeating group and the project list.
Using the append selector3:05
Using popups8:17
Click the new project button to open a popup form, enter the project name, members, priority, and start and end dates, then submit to add the project to the list.

User introduction1:56
Creating an account6:35
Logging in and logging out5:37
Learn how Bubble displays the signed in user with their email and implements login and logout workflows, including popups, input fields, and remembering the email.
Making user profile changes7:48
Current user is logged in expression7:15
Logging in with Facebook OAuth 14:49
Explore how to enable login with Facebook using Bubble's login service plugin and OAuth, linking a Facebook app ID and app secret to your user system.
Logging in with Facebook OAuth 22:16

Requirements

No Bubble or web development experienced is required

Description

Build amazing professional web applications like Twitter, Asana, Todoist, AirBnB, Trip Advisor, Yelp and launch your startup, SaaS, or any web product in days instead of months with no code using the Bubble ecosystem

Learn from over 16 hours worth of relevant instructional video content on Bubble to become an expert and start building today! No coding required!

Are you an entrepreneur who wants to build the next big thing without a full-time developer? Do you want to quickly create an MVP for your startup idea, or quickly build your side hustle? Then harness the power of No-Code web application development using Bubble.

Bubble is rated as the #1 No-Code Tool of 2020. Apps built on Bubble have raised more than $1B dollars (see: Plato, Dividend Finance, Plato, all of which were made using Bubble). With Bubble, you can create everything from sophisticated marketplaces like AirBnb, to SaaS like Trello, to simple landing pages. This is No-Code development at its finest!

People use Bubble to quickly create professional web applications. In fact, one student used Bubble to launched their application in only 3 days, and then subsequently sold it to USA Today (see: GiveLocal).

This course is the only comprehensive guide you'll ever need to Bubble. It covers everything from Beginner topics like pages, inputs, and elements to more advanced topics like plugin implementation, messaging, and data manipulation. The course also takes you step-by-step and assumes you have no experience at all with building web applications or with Bubble.

The course is designed so you become an expert at Bubble. We first learn all the building blocks required, and then create our own functional Bubble applications from complete scratch. We also continuously update the course!

If you're looking for something that will teach you how to create professional grade web applications using no-code from beginner to advanced, then this is the course for you!

What is Bubble?

Bubble is a no-code platform that allows you to build sophisticated and professional-grade web applications. It's the best way to develop your application in days, not months. It contains responsive web design, element manipulation, database functionality, workflow management, and a whole host of community-built plugins and third-party APIs that can enhance your application like Stripe, Plaid, and more! Bubble has been rated as the #1 No-Code platform of 2020.

What are the main features of Bubble? / Why should I learn Bubble?

No-Code platform: Bubble uses a drag-and-drop and logic gates system instead of complicated code, but is still powerful and comprehensive to run AirBnB or even Facebook; it's the next evolution of web development.
Build it quickly: Since Bubble is a No-Code platform, you can make your application in days and not months
Total freedom: Bubble allows you total 100% freedom with your website - modify, add, delete, and change anything and everything about your web application
Sophisticated / comprehensive: Bubble comes with a robust scalable database management system, and workflow integration that allows you to create virtually any application - it also contains Responsive Design and so is lightning fast!
Collaboration: Bubble comes with its own version control system, that lets you manage changes and lets you collaborate with up to 40 other individuals
Community of plugins: Plugins that are developed by the Bubble community extend your application by allowing third-party elements, like payment, SEO, analytics, and more! You can even integrate with your own REST API.

Why take this course?

Comprehensive guide: This is the only 100% start to finish, zero to hero, basic to advanced guide on Bubble. This course assumes you have zero experience with Bubble and develops you to a Bubble power user!
Instructional with examples: The course is structured in a way to maximize your learning. We first go through learning "Building Blocks" where we develop our Bubble toolkit. We then apply the toolkit to future modules through app development from complete scratch.
Great resources: There are hours of content and resources in this course. There is more than 16 hours of video content available. You also have lifetime access to not only the videos, but to me as well through the Q&A feature

Course and Module Overview

Introduction to Bubble: In this section, you will learn everything about Bubble! What it is, when to use it, what it can and cannot do, and we will go through the course overview
BB - Environment Setup: In this section, you will set up your Bubble environment, which means creating a free Bubble account and entering the Bubble environment
BB - Editor: In this section, you will learn about the Bubble editor
BB - Pages and Elements: In this section, you will learn how to set up your Bubble pages and how to add Bubble elements to your pages
BB - Responsive Design: In this section, you will learn about the responsive design features that are available with Bubble
BB - Data: In this section, you will learn how Bubble manages its data environment
BB - Workflows: In this section, you will learn about Bubble workflows and how they can be used to enhance your Bubble application
BB - Design with Data: In this section, you will learn how to make web pages by mixing design principles with data and workflows, including repeating groups
BB - Users: In this section, you will learn about Bubble's default and powerful user management system
BB - Settings and Publishing: In this section, you will change your Bubble settings, and how to publish your web application
BB - Advanced Features and Plugins: In this section, you will learn about some of the advanced features with Bubble like plugins
App - ProjectIO: In this section, we will build a project and task management application from scratch
App - BubbleBnB: In this section, we will build a very thin version of AirBnB, complete with Google Maps integration, messaging, and more, and all from scratch
Conclusion: In this section, we'll wrap everything up and talk about next steps

We're looking forward to having you in the course and hope you earn the certificate. Please let me to know if you have any questions!

Music: bensound

Who this course is for:

Entrepreneurs who want to build sophisticated web applications and websites quickly and without code
Students who want to learn a revolutionary new way to create web applications
Individuals who want to create and launch an MVP
Individuals who do not know how to code and want to focus on function over form
People who want to create any SaaS product
Entrepreneurs who want to create an online MVP to secure funding
Anybody who wants to turn a startup idea into reality
Beginner, intermediate, and advanced users of Bubble

The Complete Guide to Bubble Visual Programming

What you'll learn

Explore related topics

Course content

Introduction to Bubble10 lectures • 23min

BB - Environment Setup2 lectures • 6min

BB - Editor3 lectures • 21min

BB - Pages and Elements14 lectures • 1hr 23min

BB - Responsive Design9 lectures • 51min

BB - Data6 lectures • 30min

BB - Workflows11 lectures • 1hr 7min

BB - Design with Data14 lectures • 1hr 6min

BB - Users7 lectures • 36min

BB - Settings and Publishing3 lectures • 20min

Requirements

Description

Who this course is for: