UI design | Planet No Code

How to add Group Focus to Repeating Group cells

Bubble doesn't make it easy to add a Group Focus into a Repeating Group cell. Here's our workaround using a Reusable Element and icon.

Build your own nocode CRM with Bubble.io – Part 2

In this no-code development video we begin tutorial series demonstrating how you can build your own custom CRM with Bubble.io - all without writing a single line of code. Bubble.io is a powerful nocode web app creation platform. Watch to discover how to create a dashboard layout with a floating/sticky sidebar.

OpenAI Loading Animation - Using CSS

In this Bubble tutorial we demonstrate how to improve your Bubble app's UX (user experience) by showing a loading animation while you wait for a response from the OpenAI API (ChatGPT). This tutorial uses a CSS animation from loading.io.

OpenAI Loading Animation - Using Lottiefiles

Text Background Gradient in Bubble - FREE, no plugin needed

In this Bubble tutorial video we demonstrate how to add a gradient background to text in your Bubble app using CSS and element IDs. No plugin needed.

Adding Beautiful Alerts & Notifications to Your Bubble App

In this Bubble tutorial we share a Bubble web app development UI tip. Here's how to add amazing in app notifications to your Bubble app using the Toast Notifications plugin by Minimum Studio.

Bubble Table Element - Row Hover Effect

In this Bubble tutorial we demonstrate the new Bubble Table Element and show how you can easily add a hover effect to the Table Element in your Bubble app.

Bubble Table Element - Alternating Row Background Color

In this Bubble tutorial we demonstrate the new Bubble Table Element and show how you can easily add alternating row background colors to the Table Element in your Bubble app.

How to customize the 'Updated' page banner

In this Bubble tutorial discover the latest techniques on how to revamp your "We Just Updated This Page" banner in your No-Code Bubble app. This video highlights an amazing, user-friendly plugin that offers customization of the updated banner, contributing to a unique and pleasant user experience. Learn how to master the details of your app, right down to the color and layout of your app notification.

Should I use margins or padding?

Should I use margins or should I use padding? In this Bubble tutorial, I'm going to give a few examples because this is a common theme that I see in the Bubble coaching that we run at Planet No Code, where we do one to one sessions helping Bubble creators just like yourself, develop and overcome issues that they've got with their Bubble apps. And we experience this quite a lot with, I say, clunky layouts.

How to create a responsive header and mobile menu in Bubble

In this Bubble tutorial video we demonstrate how to create a responsive header and mobile menu with the Bubble new responsive engine.

Using Custom States to Store the Last Viewed Page When Refresh

In this Bubble.io tutorial video we demonstrate how to convert a menu that uses Custom States to hide and show parts of your page to a menu that uses a User database field. We explain the advantages of saving the current view to the User to maintain a consistent user experience.

Responsive Engine: adding overlay icon in text Input

In this Bubble.io tutorial video we explore one way to add icons to your text Input fields in your Bubble.io app.

Introduction to using columns & rows in Bubble.io

In this Bubble.io tutorial we demonstrate the importance of using columns and rows (instead of Fixed layout) in the new Bubble Responsive engine. If you're a Bubble beginner this is a great video to start with as understanding these key concepts will save you lots of time as you build more pages into your no-code web app.

Figma Themes & UI Kits - Where To Find Design Inspiration

In this Bubble.io tutorial video we share some of the top places to look for design inspiration, UI kits and themes for your Bubble app. Recommended sites for inspiration and to purchase Bubble themes and UI Kits: