The complete Bubble No-code Mastery 2024: From Zero to Hero

Discover how Bubble elements are categorized into visual elements, containers, and input forms, and how the property editor manages appearance, layout, and conditional properties.

Explore how to configure a Bubble page element, including the page title and SEO title, native app and mobile version settings, data type and content type, and styling options.

Master text element basics in Bubble by adding static or dynamic text, inserting dynamic data like current user email, triggering workflows, and styling with rich text and canvas placeholders.

Explore bubble's default input elements, including text and number inputs with placeholders and initial content, auto binding to database fields, and formats like email, currency, date, and address.

Master responsive design in bubble by using container layouts (fixed, align to parent, row, column), responsive min/max width, fit content, margins and paddings, and conditional properties for mobile devices.

Learn how to use align to parent with a nine-cell grid to position elements, explore row, column, and align to parent layouts, and design responsive pages in Bubble.

Learn how column layouts vertically stack elements and apply left, center, or right horizontal alignment to create consistent page structures, ideal for sidebars and navigation.

Learn row container layout: align elements horizontally, wrap to new rows when shrinking, and stretch on wide pages, with left, center, right, space around, space between, and gaps.

Discover how to style elements in bubble with the style tab, set a single global style for consistency and performance, and apply themes like material design or bootstrap.

Use style variables to store colors and fonts via the style variables tab, including predefined colors like primary and text, and apply updates across the app instantly.

Create a mobile responsive sidebar that hides on screens under 768 pixels, replaces it with a logo and hamburger menu, and opens a group focus menu when clicked.

Build a responsive navbar from scratch in Bubble, using pre-built components, groups, and responsive layouts to adapt logo, links, and login buttons to desktop and mobile with a hamburger menu.

Explore how data powers apps and how Bubble's database securely stores, retrieves, and manages dynamic, temporary, and static data with privacy rules and encryption.

Learn how Bubble stores data with data types and fields, using a spreadsheet analogy, and build relational connections to users by defining singular, unique data types and fields.

Master CRUD (create, read, update, delete) data in Bubble using the database editor, workflows, and auto binding, with live and development databases and practical examples.

Learn to find and display data in Bubble by using current user and do a search for orders to fetch the invoice number in a text element, with a container.

Display user details and the latest order with a single data query by using a parent group container and inserting dynamic data from the group, avoiding extra queries.

Learn to use a repeating group to display lists like orders by loading data with do a search for orders, setting content type, and propagating styles across items.

Master uploading, displaying, downloading, and deleting files with Bubble's default file uploader and image uploader, while applying privacy rules to control public and private access.

Learn how option sets create static dropdown options like colors, built in the data tab, and reused across the app without a database. Compare them with data types and deployment.

Learn URL parameters pass data between pages in bubble, including keys and values like name and debug mode, and how to create and access them via direct links or workflows.

Create a workflow with a button click that triggers an alert and updates a text element's custom state count, using the workflow tab and available actions.

Create a workflow that uses input field changes as the event to create a new order with an invoice number, mapping the input value and validating it as a number.

Explore general, element, and custom events in bubble to trigger workflows. Learn how login, logout, pages loaded, do every five seconds, and conditional actions drive user experiences and error handling.

Discover how actions animate workflows in Bubble no-code mastery, including user sign-up, login, logout, password resets, emails, data changes, and plugin integrations.

Explore how to use conditions in bubble workflows to control events and actions, enforce login state, checkbox choices, domain filters, and error-handling across steps.

Create custom events that can be triggered by other workflows to avoid duplicating workflows, and call them from anywhere on the page.

Build a medium-like blogging platform with bubble, enabling writing, sharing, reading, and commenting. Manage profiles, upvotes, and posts from the account area, with guest viewing and sign-up to create posts.

Define user, post, and comment data types in Bubble, add fields like name, profile photo, about, title, body, cover image, and upvotes with zero, and set post-user and comment-post relations.

Build a reusable header and navbar in Bubble, make it responsive for desktop and mobile, convert to a reusable element, and apply login-based visibility rules.

Build login and signup workflows in Bubble with email and password fields and alerts. Enable automatic login after signup and implement logout with mobile-friendly state refresh.

Create a settings page that serves as the account page, with a left navigation, using auto binding for name and about, and a profile picture synced to the current user.

Create a post page for logged-in users with a title input, cover image, rich text body, and a publish button, using a centered, multi-container layout.

Learn to reset input fields on the create post page after publishing a post by adding a workflow that resets fields only when post creation succeeds, improving UX.

Design and implement a home page in Bubble to display all user posts with a repeating group, header, and post cards showing user photos, titles, bodies, and dates.

Create a single post page that renders one post by passing the post ID via the url parameter. Bind the post title, cover image, body, publish date, and upvotes.

Build a post comment feature with a multiline input, submit button, and a repeating group to show comments, linked to the post, with login validation and submission alerts.

Learn to display post comments with a repeating group, show user details and dates, and style layout for a clean feed, preparing for an upvote feature.

Enable post creators to edit their posts via an edit button that opens a dedicated edit post page. It updates title, image, and body with login and ownership checks.

Learn to build an AI content generation website inspired by Jasper AI and Copy AI, using OpenAI, with login, dashboard, templates, image generator, credits, and Stripe payments.

Create a saas landing page in Bubble's no-code environment by assembling header, hero, gradient background, and footer with the component library, and add a typewriter animation via an html/css/js snippet.

Learn how to add a login and signup flow to a SaaS landing page using components, including toggling forms, collecting name and credentials, and validating login with a success alert.

Define a scalable data model for a Bubble app by building user, project, payment, and image generation types, with fields for profile photo, about, credits, and template inputs.

Build a reusable sidebar for the logged-in user, featuring a logo, navigation items, credit balance, user profile with hover effects, and logout, used across dashboard pages.

Create an AI content generation template page that hosts pre-made templates like Amazon product descriptions and blog ideas, with predefined inputs, output fields, and a generate action.

Discover how template cards create a new project from the amazon product descriptions template, assign a default name with the current date, save it, and navigate to the project page.

Explore building a single, scalable project page that houses multiple templates, with show-hide logic for Amazon product descriptions and LinkedIn job descriptions, plus responsive input and output panels.

Design a bubble no-code project page with grouped inputs, responsive widths, and a rich text ai output area, while showing or hiding templates by project type using url-driven type fields.

Learn to connect input fields to outputs with bubble's api connector. Build and test a post request to OpenAI, configure headers and json body, initialize the call, and display results.

Learn how to generate Amazon product descriptions using the OpenAI API within a Bubble app, mapping inputs to database fields, auto binding, and JSON-safe prompts, with project dashboards.

Build a dashboard that shows the current user's projects as cards in a responsive repeating group, with navigation to individual projects and edit or delete actions via a confirmation pop-up.

Create an AI image generation page using a table layout with a header and repeating data, wiring current user data and image sources, and ensure JSON-safe prompts and loading states.

Create and customize a blog post topic ideas template in Bubble, using custom states, auto-binding, and OpenAI API prompts to generate ideas and append outputs.

Design a credit-based system in Bubble: offer free credits on sign-up, prompt purchases via Stripe, track word usage per API call, and display a buy credits popup.

Learn to implement a Stripe powered credits system in Bubble: set up keys, configure Checkout v3, charge the current user, and update the user’s credits in the database.

Create a full-page loading overlay with a centered loader for Stripe payments, using a floating group and backdrop, and update credits.

Build a mobile menu driven by a hamburger and a group focus, using width-based rules (under 768) to show the mobile navbar and hide the sidebar on mobile.

Build a fully fledged Airbnb-like marketplace Sky BNB with property listings, search with filters, map view, bookings, host-guest interactions, and payments with Stripe.

Design a reusable header and footer in a Bubble project, applying global styling, Rubik font, and Airbnb gradient button. Build a responsive three-part header with logo, search, and profile.

Configure bubble styling and fonts, then model a room data type. Include fields for title, photos, guests, beds, baths, price, description, location, amenities, check-in, check-out, cancellation policy, and bookings.

Master listing lifecycle by creating listings, resetting inputs to prevent duplicates, and building a manage listings page that shows rooms with photos and titles and provides view and edit links.

Design and build a single property listing page with dynamic room data, a responsive two-column layout, a centered max width of 1120, and a photos grid with share controls.

Create a responsive image gallery that hides extra images on mobile (width ≤ 768) and shows a single image, then launch a popup slideshow on click.

Design a responsive bubble no-code property details page with host, room description, amenities, and a booking form, using dynamic data and a show more pop-up.

Build a dynamic reservation form in Bubble, pulling price and reviews from the database, with responsive two-column layouts, date pickers, and guest count controls using custom states.

Add interactivity to the booking form by configuring date time pickers with current date as minimum for check-in and check-out, manage guests with custom states, and compute price in USD.

Create an interactive search bar in Bubble: expand on click, manage destination, dates, and guest count with custom states, and wire the search to display results.

Learn to pass search parameters from the results to the single listing page using URL parameters and custom states, then prefill check-in, check-out, and guests on the listing.

Enable header navigation by linking icons to home page, introduce logged-in menu with routes to messages, booking, create listing, manage listing, account, and logout, and open cards in new tabs.

Create a booking data type with user, room, dates, guests, total price, and stripe id; enable a stripe checkout flow and show a booking confirmation with details.

Create a bookings page in a Bubble app, display current user bookings in a repeating group, show room image, check-in and check-out dates, and link to the property page.

Build a Bubble no-code review system for booked properties with a popup star rating input (plugin), a multi-line field, and a workflow that saves reviews to the selected room.

Show property reviews in a Bubble no-code app by displaying the average rating and total reviews, listing each review with user details, and truncating text with a show more popup.

Create a chat messaging page by modeling conversation and message data types, wiring room and user fields, and building a two-pane interface with sending messages and conversation lists.