#1 Bubble Makers: The Beginning

This article includes:

  1. One section for Bubble beginners
  2. One section for more experienced Bubble makers
  3. One cool app built with Bubble
  4. One tweet related to Bubble that I found inspiring and helpful.

Feel free to skip to the section you think you’ll enjoy the most!

The Beginners Bubble

Bubble has 3 main tabs inside the app builder:

  • the Design tab: where you define how your app will look like.
  • the Workflows tab: where you build your app logic. You’ll be telling Bubble “When this happens, then do that”.
  • the Database tab: where you store all the data that users’ input or you create.

The first tab that you should become familiar with is the Design tab.

Inside it, you can create visual elements and input elements and combine them in every way you can think of.

  • Visual elements are things like text, images, videos, links, etc.
  • Input elements are things like input fields, checkboxes, dropdowns, etc.

I’ve prepared two pages for you to see all these elements in action:

Visual elements

Input elements

The elements that you will find in those pages are the basic elements that are pre-built in Bubble. I’ve only shown you 10% of what there is. By clicking on the Install more button in the Visual Elements section (or the Input Elements section), you’ll be able to find hundreds of cool elements to play with.

I like to filter only the elements and then sort by rating.

Install New Elements in Bubble

The Makers Bubble

Since we’re talking about design elements, today I’m going to show you how to make a typewriter effect in Bubble. It’s actually really easy but I hadn’t discovered it until recently when browsing through the forum, so you might not have discovered it (yet).

This webpage I made shows a few examples of typewriter UI elements and my favourite settings to make sure they are readable.

Bubble webpage showing a few typewriter UI elements

How to create typewriter UI elements?

  1. Download the Typewriter Text plugin in Bubble.
  2. Select the Typewriter Text visual element and draw it in the page.
  3. Choose which text is going to be deleted and rewritten. You might want to rewrite a complete sentence or just a single word.
  4. Choose your pauses, typing speed & deleting speed. I recommend you playing with these values to see what works best for you. I like to have a fast deleting speed and a slower typing speed to increase readability.

Bubble App of the Week

App of the week is Hacker House, a French company that has colivings and shared apartments for entrepreneurs, freelancers and start-ups.

I love the way they have designed their website. Making an outstanding design can be tricky with Bubble and they have really nailed it. Also, it’s the first website I see built with Bubble that succesfully allows Dark mode.

I recommend you visiting the website and exploring the different sections, as it can give you a lot of new ideas. You can start with Stephane’s profile (founder) and then go down the rabbit hole.

Bubble Tweet of the Week

This week we’re going with a one of my favourite threads. Kieran uses 14 GIFs to illustrate how you can create a responsive page using Bubble.

A guide to responsive design by @nocodelife

I hope you enjoyed reading this article as much as I enjoyed sharing what I’m learning. If you have ideas for things you would like to see covered in the next articles, don’t hesitate to hit me up on Twitter!

Leave a Reply