Master No-Code Startup Building with Bubble: Complete Beginner's Guide

hey guys I'm Greg founder of Bill camp where we teach aspiring Founders how to build and launch their startups with

bubble back in 2017 I was super curious about building a startup I didn't really know how to code I could string together

a few things but I discovered bubble back in the very very early days when no code wasn't really a term and I actually

went on to build a successful two-sided Marketplace built entirely on bubble and strip for payments and I managed to

raise venture capital i went on to build a successful company now that was a long time ago look at where we are today um

and basically through this course I really want to dig under the hood answer your potential questions show you around

the editor and show you just what is possible with the power of bubble so let's jump into the first module and

let's talk about what is bubble and what can I actually build [Music]

so the first thing to understand is that bubble is producing code so when you hear the term no code I don't feel like

it's a very uh suitable label for what this is when you hear the term you might think there's no code involved what it

actually means is you don't have to write the syntax in a code editor bubble does that for us what are the benefits

of this well the benefits of this is that it is code that is shared amongst a user base of millions of users and their

companies that they have built so that code is clean that code Works already well okay so when you hear the term no

code it is we it's the process of creating our uh software where we don't actually

have to write syntax it's done for us can we inject code into bubble yes we can bubble is basically a blank canvas

super powerful it's a oneof a kind there's no other code there's no other no code startup quiet like bubble that

combines everything from the visual design to the data to the logic to the apis all in one okay so it's a super

interesting and Powerful product and it allows startups and their Founders to build their startups basically within a

matter of weeks or two months depending on how technical you need it to be okay and it's comprised of three some

people would say four core areas and we're going to dive into all these core areas in detail and have a look at how

we would build something like a SAS product a two-sided Marketplace a financial app productivity app uh and so

forth and guys you can do all of these things as I said Bubble spitting out code you can build any kind of startup

you want all right um but we will talk about the limitations because the limitations are more on the

infrastructure side like Airbnb wooden run on Bubble because bubble is an their own infrastructure layer in a box all

right ABNB would need something uh would need their own infrastructure team so that's the kind of difference between no

code and if you were a coder working at a company if you plan on scaling to Millions across multiple regions you

can't stay within that box however you can easily run a company up to 100,000 users um you know Bill Camp has almost

20,000 users now no they're not always concurrent users um um but you know I manage those users absolutely fine would

I ever see a need to move off a bubble for what I do um education in this space courses absolutely not you know I've got

I've built like a mini version of udem me um but I can scale to hundreds of thousands of people if I wanted to okay

so the four core parts are basically the design side so you're you're able to drag elements onto a page such as an

input box um a container buttons that kind of thing you can style them to your heart's content you can

work within your own design system um and you can string these together to build your interfaces right the things

that people interact with the dashboards the the web pages um authentication that kind of thing then you have the data so

bubble has um a SQL database built in there's nothing you need to do this is what I love there are a few noode

startups coming through now who want to separate the database from the inter interface uh from the workflows I

actually don't like that I prefer everything to be kind of um in a box per say you create your app you name it and

your environment is up and running now if you're a coder that wouldn't be the case if you're a coder there are

dependencies to install it might take you a full day to get up and running uh it's it's far more difficult and far

more technical to understand how everything pieces together but with bubble one click you're ready to build

right so you can build little MVPs ideas within a day basically uh and we'll go through how to get started

shortly so you have your yeah so you have your visual application designer or editor um and you can piece together all

the elements you need to make an interactive user interface the database side of things that might be slightly

more challenging to understand because there are relationships but the way to think of a database within bubble is

much like an Excel spreadsheet with different tabs across the bottom so your first spreadsheet tab might be users

with user data names addresses date of birth creation date in terms of the user account um and then there might be

another tab that has products you know and then there's a key that uh that creates a relationship between a

user and a number of products and products would have an image that price that kind of thing um or instead of

products it could be projects instead of projects it could be listings and we're going to dive in soon

and have a look at that in more detail and bubble gives us a visual representation of the database next we

have the logic layer okay so that's the workflow so H when I use interacts with a button or anything on the page um how

do we make it talk to the database how do we make it do things how do we make it change States how do we make it

change visually navigate to different pages do calculations and that's that's the logic layer and this is one of the

most powerful features bubble this is what bubble solved very early on and this is why bubble is a unicorn in the

no code space it is mega mega powerful and yes if you are a coder and you know JavaScript you can inject your own

JavaScript functions to run whatever you like within bubble as well and the last thing is apis so apis are a way for

different um software companies to talk to each other so a payment provider I'll always use is stripe the biggest payment

provider for startups in the world I'd argue probably the biggest startup uh for payments across all

sectors okay and they allow basically me to take payments subscriptions uh to the nth degree the

nth detail from customers and they deal with all of the the banking side of stuff the infrastructure so stripe

solves the infrastructure and I just use their tools and services to build the kind of payment services I want within

my site okay so that's one example of an API another example example of an API is for instance chat GPT you can use the

backend services to build your own version of chat gbt all right so it's a way for your bubble app to talk to

external service providers and what can I build in bubble what can I build well I mentioned early

on that you can basically build anything that's not to say you would build build anything and that's a distinction okay I

would always start if I think about the early days of Airbnb they would have Maybe started with a WordPress airbed

and breakfast think about the early days of notion or the early days of uh Uber Eats it would have started a lot more um

simpler and basically they would have had a head start of the competition if they started with bubble because it

allows you to build versions of Airbnb Uber uh you know on demand services you to build social networks or social

network functionality to incorporate into your app it allows you to build marketplaces CRM sasps finance apps AI

apps anything there's an API that exists as well the chances are that you can use it in bubble so you can tap into for

instance I'm in England and I can tap into Transport service apis and build my own mapping application for people to

get from A to B such as City mapper if you're in the UK um around the city so in terms of what are the restrictions

it's more on the infrastructure side as I mentioned earlier bubble is an infrastructure

layer it takes all the complexity out and it uses natural language for you to be able to build your app which is a far

more easy to understand all right but it's very powerful as well we're going to have a look at

that so if I wanted to build something like Salesforce well I can do that I can do that if I

just understand what kind of data Salesforce or the data structure Salesforce uses and the interactive

element I can build a version of Salesforce but Salesforce is a massive company probably with thousands of

developers um so it wouldn't scale to the sale for size um and that's the difference same with notion you know I

can build productivity apps I can build crms um I can build two-sided marketplaces is a is a great um example

of what people have been able to build successfully in bubble myself included um and we're also going to look

at you know what what do all applications have in common because most applications are actually very similar

very very similar it's a way for users to sign up to something there's authentication there's the database side

the data structure resetting passwords privacy uh conditional statements they're actually all very similar they

differ in certain ways but the marketplace you know is kind of similar to Uber Eats on demand Services very

very similar the data structure will you'll be surprised how similar data structure is Uber Eats will have a um

they will have users they will have customers they'll have drivers they'll have restaurants within the restaurants

they'll have a menu then the menu they'll have items um so not not that

difficult and then as I mentioned earlier with AI can we build a version of chat GPT which is a prompt and an

output we I've got another video on YouTube where I demonstrate how to build um like a recipe app in half an hour

it's a power of no code we don't have to mess around with code syntax and and that kind of thing we can just get

going just wanted to reiterate the app composition side and this this isn't just no code but this is

all apps so what do all apps if we zoom out from a bird's IV what are the what are the silos involved uh within

building so we have the front end that the user interacts with in the browser okay that's the app design that's where

the the designs are and and the information changes um because we have static and we

have Dynamic elements and we'll look at how you know users can upload their image uh how they can see and not see so

Things based on their role or their POS uh permissions within a particular company uh all apps have workflows

you've heard of crud create read update delete that's what we can do in bubble right create data uh display that

data in in a myriad of different ways we can edit that data and we can delete that data so when people talk about the

distinction between a website and an application websites don't really have crud applications do this is kind of the

difference where a website is more um showing static information an application shows Dynamic information

information that can change based on user behavior and of course we need somewhere

to store that data which is in a database in terms of what what is the framework to an application and earlier

on I mentioned all apps have very similar things okay so when you loan bubble it gives you the power and

opportunity to build kind of any kind of app most people then they learn bubble and they choose to build a Marketplace

or a SAS app or a fintech kind of service or an AI app uh or a web 3 kind of app and basically if you have a core

understanding you know you can go off and build any kind of app just like that so all apps need authentication they

need users people to interact with they need create read update delete this is what an app is search is becoming far

far more important these days so users need search you need email for a way to interact with people they sign up you

send them a welcome email and we'll talk about what are the various API services available and API services like email

services are becoming very straightforward these days all of them or most of them now have no code editors

themselves payment providers such as stripe you've obviously used PayPal in the past as well you can integrate

PayPal so a person doesn't need to know their card details they can just it's called oor you can just authenticate

them through a button click and PayPal does the rest okay uh you need admin dashboard so you know what's going on

within your app uh and within the admin dashboard you need account management so you can manage your data and view your

analytics so we're going to jump into the bubble editor very shortly and look at the following we're going to look at

you know how to set up a canvas containers visual elements we're going to look at how we organize our visual

elements and basically an element tree going to have a look at Styles super super important this is a sort of a

specialty area um I work with Design Systems a lot within bubble I'm actually shortly presenting in New York at bubble

con 2023 we'll be looking at reusable elements how to reuse code with

basically an industry term called dry do not repeat yourself this also applies to no code uh build once and use everywhere

and then you can edit from one area responsive design also big area uh that I focus on uh as well as SEO so if we

jump just into the editor all right let's just have a quick look around so up in the left hand side if I

click on this dropdown um we can see that we have pages and we have folders so we can

create as many pages as we like and Link off to those pages we can also send data between Pages down here we have things

like reusable elements okay so if I just show you changing a page I've got a page just to demonstrate

input forms which we'll get to I've just changed my page and I can also go to my reusable elements now the beautiful

thing about reusable elements this is just a pretend company called collab reusable elements means that they are

kind of like their own Pages where you can build function we can build design and functionality conditional statements

custom States and then you can just take that module and drop it into any page and have that run as it would the good

thing about a reusable element is that again you build in one area uh and you just maintain it in one place but you

can display it and drop it on any page so those are the pages up on the left just going to go back to index down the

left hand side when I talked about those big silos or core components of what an app is well this is where they live so

we have the design side we have the workflow side which is blank um but if we did have workflows these would be

little blocks where we basically through a step-by-step process instruct for instance how a person

should sign up and that would be very easy actually um let me show you an example so this is

just a Pages loaded event and let's just pretend it was a button click but if it was a button click to sign up we just

bubble gives us all of these options down here in terms of actions when a button is Click clicked what should

happen so we can say sign a user up and bubble have done the code for us so we need to do is connect the inputs where

do they type their email input and the option would show appear under an input where would they type a password the

option would be down here and then bubble gives us various options such as remember the email address maybe we have

an input field where we ask them what their first name is or what their company name is or we can also attach

the data here and what happens when a user clicks the button is that bubble saves this data to the database and you

will be able to actually see it visually in your database let have a look at the database

so here is a user table basically um Bubble calls them data types and here is what looks like an Excel spreadsheet and

this is where our users and data would live now we going to go ahead and actually sign some people up to the app

and then look at how we can visualize this data and even manipulate it as we would in an Excel spreadsheet we can

open a row of data and we can update data as a developer uh which is super interesting now the thing to remember

for the thing to understand about the databases that bubble provides we actually have two if you come from a

code background you obviously know what staging means bubble calls it version test so when we building our app we have

a test database and we have a live database and they are separate so when we building out new modules when we're

testing stuff we not creating live data we're creating test data so we' have two versions of the site then we would have

for instance build Camp my domain is build.io you can go now look at all the courses and that is the live database

okay but I also have Bill camp. iversion test where I'm testing new stuff and it might look slightly

different to uh bill camp. now my bill Camp version test is protected part of protected so you won't actually be able

to run anything or see anything but it allows me as the developer uh and founder of the company to be able to

work on product development and get through my product road map uh without messing up my live database right so

that's very very useful then continuing down here we're not going to go into this too much

detail but we do have an area called Styles and within Styles is where we would set things like our colors all

right we set our primary colors contrast color of the text we would set our border colors and we can create what's

called variables here where I would assign it a label neutral 100 background then I would give it a color which means

that now on the design side um I can change the color of this text I'd bring up the property editor here and I would

then choose from a Swatch all of my saved colors or I can just move this along and change whatever color I like

here as well so bubble is you starting to see that it's it's a professional system

what Nat developers would do in terms of creating Styles and variables you can do that in bubble as well it's just

visualize in a way that's much more user friendly we have plugins which enables

the extensibility of bubble a lot so if I open up plugins um you know there are thousands

of plugins so here is an API connector that involves you to connect to all sorts of products and services this is

the my number one plugin that I use um got Google material icons we've got plugins to run JavaScript we've got

multi select drop-down elements we've got progress bar elements bubble created this themselves we can see it used on

327,000 apps we' got chart elements got alerts calendars you name it guys if you can think of a API

service there's probably a plugin for this if I to search um uh let's search uh maybe open

AI here we go so and in terms of AI apps do you need to understand how the actual API Works

to pull this data well no you don't you can just use a plugin that another developer uh has created some are paid

some are free uh but look at all these open AI chat GPT so you can pull these in to your own apps in a few button

clicks you don't really have to understand how the API works because it's done for you another developer has

gone and built it and has made it available to you all right how powerful is that click to install the app click

to install the plugin now I've got a pipe line to open Ai and chat GPT to start building out the UI for my app and

chat GPT is basically the brain and I can extract data from it save it to my database or just link directly to chat

GPT and use that as a database really so that's a plug-in section then we have the settings section which we

won't go through but there basic things like setting up uh your domain um setting up some sort of global

SEO stuff collaboration with other developers so I've run a very busy um agency in the past I don't do it anymore

focus on education now but when I ran an agency there are seven of us all working on the same app so a bit like GitHub

with traditional developers uh where you can basically pull down changes from a branch bubble has the same it allows

professional developers to work together all Under One Roof um you know now now we're talking about

seven times the power as a bubble was initially built for single Founders now it's built for

teams all right and it has a log section so you know exactly what is happening in terms of server usage people always say

to me Greg what um can double scale now this is kind of an odd question it's very general it's like saying

um Can Elon Musk uh RS trucks fast was in context to what RS trucks fast in in context to to other trucks or are they

fast in terms of if we compared to a car or what about a cheeter or jumbo jet sorry like an F-16 fighter jet so you

always need context when when when asking does bubble scale there's no code scale um but I've already talked about

this it depends on what you're building if it is you're trying to build Google Earth um with bubble it's not a great

fit okay it's really not a great fit I at Bill Camp have built sort of course related stuff course modules it's a

perfect use case for bubble doesn't have a ton of concurrent users I mean it is popular um but it's you're looking at

sort of concurrent uses and you're looking at infrastructure doesn't need are you servicing people around the

world in the tens of millions well then maybe you can move off Bubble at some stage but it's not something I would

ever advise a person to think about too early unless you've built if you are a successful entrepreneur who have built

coded startups in the past you're allowed to ask this question if you are new to development work you're not

allowed to ask this question because you need to prove that your company works first okay when I built my first two

cider Marketplace and raised venture capital I didn't say not sure if I should be using bubble because does it

scale I went and proed the business case I took money from customers and I built something that was

growing ioved the use case all right um it was going to take me many many years to get to a stage where I'm like s's

blowing up doesn't really work too many concurrent users the chances of you getting there are slim uh but it is

possible um and I still to this day have not heard of a single company and I know thousands and thousands of pass through

Bill camp that has actually come off bubble and some of these companies uh are in the tens of millions of Revenue

per year okay so it just depends on the type of company that you're building is it Mega resource infrastructure

intensive from day one then bubble is not for for you are you connecting people through a two-sided Marketplace

or financial app or uh you know something like that or CRM um where it doesn't have this sort

of infrastructure intensity if so start and bubble you'd be stupid not to don't hire money and

blow it on developers build your MVP uh and I can guarantee that you'll probably end up just staying on Bubble for the

foreseeable future and bubble is chipping away at the technology all the time it's getting faster one of his

drawbacks has been page load speed but they are fixing that service side rendering will soon be a thing okay so

there's not something you should worry about too much and then so we have the UI Builder

here guys we have the UI Builder on this tab on the left and then we have the responsive design tab over here where it

has various break points where we can look at to see what our design looks like at mobile wids now I haven't done

any responsive work here which why it looks funky um but if I wanted to then I can just very quickly add some left

right padding of 16 16 I'm just jumping in and showing you what's possible what I could also do don't pay too much

attention I'm just giving you a quick example of how it feels to build and bubble I can say when page width is less

than 576 then I'm going to instruct the text size uh size

the font size sorry I'm going to change that to uh 24 no let's change this to 48 there we go there okay so very quickly

added some padding and I'm just instructing the text size to change when we get down to mobile sizes and there we

go mobile responsive guys it's that quick this is again one of the things I teach I have a course called Flex camp

that dives into this to professional standard how to take apps that look great on desktop all the way down uh to

mobile sizes based on bootstrap which is industry standard um an industry standard framework for

design spacing sizing break points that kind of thing so that's a UI Builder and a

responsive tab um and then you have your visual elements you know have text buttons if I wanted a button on this

page I would simply pick it up drag it and you can see the little line there Drop it where it needs to be the next

thing I'd do is style that button so I'd say give me a primary large I've done this in advance so I know what they are

or maybe give me a um secondary large something that stands out and then I could say something

like sign up after that I could add my workflow and I could say uh sign the

user up and if I did have inputs this is what I mentioned earlier this is where we would string it

together so those are your visual elements and if we just scan through we have icons links images shapes alerts

where videos guys you can drop in YouTube videos you can also um connect to a

third-party uh video service provider there's one called MX mu UD me uses MX many companies use MX you can use MX as

well you can have users upload 4K videos 8K videos straight into the service MX and then you can pull the data and you

can track where they are watching their videos you have HTML if you know HTML and you know a bit of CSS well you can

write your own HTML drag this element drop it on the page and create a HTML module that does something that maybe

bubble doesn't do but you'll be hard press to to find something that bubble uh hasn't created we have mapping

absolutely love mapping I teach a course called Marketplace camp where it's basically a version of Airbnb and it

shows you how to build Airbnb the endtoend process from searching for properties around the world to visually

representing it on a map to clicking on a map to filtering between dates all of that good stuff we'll have a look at

that and then we have beneath that if I install a plugin that'll show just beneath these ones here as well then we

have containers groups so this is a group here grouping is a way to um keep elements in place and to order and

position them so bubble uses bootstrap themselves uh sorry not bootstrap bubble uses Flex Flex box uh I just call it

Flex for short and it's very very powerful and it allows you to basically change the order of things so if I had

over to the layout tab I can um change this from a column to a row obviously it doesn't look good column

was top to bottom I can change it to a fixed layout drag things around to position them where I want I can say put

this icon to the bottom or put it to the previous or send it to the right hand side and so forth so we' need a group

we' apply that to a group and then the child elements within the group would be repositioned along the

page we have popups we have repeating groups love repeating groups why because they allow us to display data from the

database in a list and that's all a database is it's a list of rows and in a repeating group uh we can set up

basically how to pull all this data and visualize the data and create functionality around it okay I'm not

going to go through all of them guys we have table elements input forms there is the input there if I drop it in and I

say uh well I've styled that already this is where I could say email

address and I can change the content format to email address which creates form validation which makes sure that a

user is typing in an email address and not some nonsense so we can set up these parameters to make sure that we collect

clean data and I can just delete that when I'm done with it but yeah date and time

Pickers so we can create really um interesting if we have a listing an Airbnb listing date and time Pickers

allow us to select an start date and end date uh and then we can say well that's 5 Days and 7 hours and then we can

create a calculation for price for a listing for that particular time period I mean it's endless what you can

do okay but let's now let's dive in and actually have a look at these visual elements and at these containers to see

what they look like and how it feels to put them onto the canvas okay then we'll get into the database and then we'll get

into the workflow side so if we go to visual elements first all right and I'm going to preview

this page and when I preview the page it's a preview of what it looks

like when the site's deployed basically the only difference being I have version test here uh which means that only I

have access to it okay so we have our text and with text we have text Styles we can drag and drop any text we like

okay so if I grab some text drop it in there hey nice to see you um I then have set up some

Styles and this also ties into SEO basically okay here's my SEO here I have an H2 tag for

this H3 all the way down to body large Etc I can also just detach the style and I can find a font that I really like

such as aeriel I don't use aeriel I use inter for most things inter but I can change this to anything I like s Sands

and so forth but aside from one of the things I teach basically is well there's two major parts of this yes it's how to

use bubble but moreover how do you build apps end to end what are the important components of app building what does

security look like what does styling look like how do build a coherent looking application using consistent

styles using a particular design system this is what I teach across my apps okay so it's not the case of oh I've learned

bubble now I can build awardwinning apps that scale to millions of users there are many other things to learn all right

many other things to learn um but obviously understanding bubble from the design workflow and database

side would at least get you to create functional stuff and then as functional well then you move on to things like

performance SEO uh Etc and guys don't don't let this put you off because you can be you can learn through one of my

courses such as beginners Camp takes some people two to three days to get through and they are learning or getting

an introduction to all of these Concepts within two to three days they have uh built a productivity app

dashboard with a lot of users uh working together within teams that's how fast it is so don't let

to put you up I'm talking about a real sort of professional standard does take a bit of time it's not just about bubble

but it's about understanding Design Systems understanding security and all the rest but no code will get you there

a lot faster than traditional coding so these are your visual elements all right I'm just going to show you

here so here your buttons look when I'm hover over a button we have primary medium primary large iconography we have

links so I can click on this link and it'll open up a new tab or it will link within the same tab here I have my

particular Styles um won't talk about that just yet here's an external link so Google

fonts okay just going to close these guys up here we have images

so uh and we have image rendering so we can allow users to upload um any kind of image here is one called betterfly

company I made up and here is a user image down here notice the shapes we can force shapes to be cut in the various

aspect ratios that we want um 32 square you know one: one we can cut circles we can have sort of rounded edges on a

square regardless of what a user uploads we can force all of these particular shapes uh so so it looks really nice we

can have alerts look what happens when I click on test alert this is an alert so feedback to a user that an action has

run successfully here is a video all I did was copy from um this Channel all I did

was copy one of my video IDs dropped it into the visual elements the the video visual element and now we have a video

HTML element uh here is a little piece of code a copied from stripe to enable payment services here's sort of

subscriptions $20 $32 if I hit subscribe that's actually take me off to stripe to ask you for your card

details amazing here is mapping guys look at this look at this mapping and we can and

I'm guessing you're asking can we show uh positions on the map properties that kind of thing can we customize it yes we

can and this is Google Maps bubble has a great integration with Google Maps you can do anything with Google Maps Google

uses Google Maps so it does most of your car navigation use Google Maps but you can bring in other API services such as

mapbox and build your own sort of custom mapping solution we can do anything around mapping love mapping and I think

mapping goes hand in hand or works really well with bubble so that's the visual elements

okay next down the list we have your containers so I'm it's going to bring up a little container containers page to

show you what containers are and if a preview containers bubble has a little debugger

bar down at the bottom uh which uh you use to help you diagnose issues but I usually just remove it um and here are

containers so container is a group within that container have some text and I'm just styling these containers they

can have background colors they can have shadows here is a repeating group of users all right so these guys um they're

in not they can come from the database or they can come from what's called an option set we'll look at that later but

basically I've designed once let me actually show you here here is a repeating group repeating group has a

data source I've just set up a temporary data source for this but I've only designed it in one area this is what I

designed this first card I designed this stuff and then I link through the data parent groups test data's display the

role email the image so I designed the first and I pulled in all the

data uh for the rest now you probably your mind is exploding here and you're thinking wow okay I get it

now when I first learned about repeating groups I then understood I see so Tik Tok is uh Facebook Instagram all of

these feeds they're not individually designed they're designed once small piece of code probably a few 100 lines

of code and that's it that's all you do you design the first one and it repeats million users you can search that data

filter it set two different dates whatever you like okay that's the power of rep

repeating groups bubble also has tables so if you want to display your data like you would in Excel spreadsheet bubble

enables that for us as well here's a popup I'm going to show a popup cool great you can run workflows in this

popup you can show data you can push data into it and edit data or delete data build alerts do anything you

like here's a floating group on the left hand side let me just refresh this page uh because bubble thinks I made

some changes so I had to refresh the page floating group left hand side we recognize this it's just like a

dashboard we are going to be building a dashboard in a bit okay A group Focus so this is if I click

on uh this is like a drop down so if I click on this image here we have a menu and we can run a button from within this

so these are containers containers are a way and all of these containers they differ slightly in terms of how they

display data but a container basically is a way to um uh group visual elements together all right and containers can be

within containers can be within containers nested containers and they can each have their own display uh

flexbox controls as well and here is a table so this is a repeating group great for like car

design uh here is a table well great for kind of a table view whatever you like and yes guys this is all responsive down

to phone sizes and I have a course called Flex Camp which is the leading course in the bubble ecosystem uh for

adapting your designs for mobile so that's containers what's next in the list if we scroll down we have

input forms one of my favorite so let's go to input forms notice some change in the page and I'm going to pre me the

page I'm just going to remove the debugger bar again all right yeah so I'm interacting

with this input okay email address so developer at build.io and then I can use this however

I like you know um and I can collect text integers you can drop in addresses here all types

of data that you can with code you can do with bubble no difference multi-line input for paragraph text all right for

paragraph text and it will grow as I type or I can choose it not to grow we will just scroll by on the right hand

side radio buttons checkboxes drop downs all right search boxes so if I

type A search I don't have data to search at the moment but if I did I could type Greg and could I could say

show me all user accounts where the first name is Greg or I could search for listings I

could say show me all listings in San Francisco within a 2 mile radius of where I am right

now slider inputs you know what's the age range what's the shoe size what's the pay

grade show me products within uh a particular price range or listings within a particular price range

with this particular slider input which has two bars min max Max values and we can take these mmax values

from the from a workflow and we can save them to the database or we can in real time filter what's on the page date and

time Pickers you can style this stuff guys this is just default out the box picture

uploaders file uploaders you can upload PDFs have user save PDFs and by the way this data is saved you might have a

question like which service does bubble use for the database they use Amazon web services

Ironclad banking services use Amazon uh super super secure within with their encryption all right so when you save a

PDF uh that is um you know has uh needs good security it will have good security you are the one in charge of setting up

that security bubble provides the means and controls for us to do that to granular ree where maybe you are a

company owner um and you have all of these documents but you can Mark Which documents you want to be visible to

which user based on permissions you build all the stuff out okay you build all this

out so we've talked about our visual elements we've talked about containers and we've talked about our input forms

or our inputs now when we combine all of these things together we get components which forms the basis of our UI our user

interaction our interfaces so let's have a look at building a signup form which is a collection of all of these three

things so here we have a signup form for a pretend company called collab this is straight out of beginners

Camp okay and we have a group grouping these elements together that group has a layout of column and guys we are going

to be building this from scratch in a second but I'm just running you through uh what this how the various elements

are coupled together basically we have a title which is collab text element a subtitle text element and then

we have our little input labels email and password as well as our inputs then we have a button at the bottom and we're

going to use this button to sign someone up okay so I'm going to go ahead guys and create a new page I'm going to call

this signup and I'm not going to clone it but we could in fact have a page that we

clone if we wanted to inherit some settings from that page but it makes a direct clone okay in this instance I

just want a clean white page and I'm going to run you through how to create this sign up form from a blank slate so

I'm going to go ahead and create that and I'm going to bring up my property editor all right property

editor and at the top we can see it's called sign up um and I'm going to call this

sign up and maybe we can say it's by Bill Camp okay so on the layout tab I'm going

to choose column you usually always choose column unless you're on a like a split screen

kind of layout with two columns usually a page layout runs top to bottom from the Navar at the top to the footer at

the bottom and it's a single column with lots of sections um in this instance we're just building it's going to be a

sign up group just in the center of the page the default Builder width not the page

width but the Builder width is 1440 actually I'm going to choose, 1400 this is just a bootstrap size from a

design system that that I've created and I think 1400 Works quite well this doesn't mean that it's a static design

it's fluid it will be responsive down to a mobile phone and it will be as wide as you need but it would always have a Max

width because you know big big screens you don't want your content spread all the way across

okay good stuff so let's have a look I'm going to just put this container alignment in the center all right this

means whatever object I drop inside here will be dead center first of all I'm going to grab a

group and I'm just going to sort of draw in a shape like this okay let's put it on the left hand side so I'm going to

move it to the center of the page there it is there I'm going to call this group

container this is the outermost group I'm going to um I've set up some Styles here so I'm going to give this a

style card medium and if we look at what this means on the group it means that I have a background color of flat color 16

on the roundness 200 neutral for the Border color and on the layout I have padding of 32 pixels all the way around

okay so if I click away you can actually see the border now I have got some settings um I have some view settings

which say show element borders so if I turn that off you basically see what we've dropped in the page this group

here now now we have to jump into the group and decide what is a layout and what is

the distribution of content within the group if I up dropping in the logo some text some inputs is it going to be with

ways or top to bottom and we want top to bottom so I'm going to set that as a column top to bottom okay put that back

in the center now it's not going to be fixed width of course because web pages aren't fixed width they're always fluid

so we would set a Max width because I didn't want this group to grow too wide it will look silly if our inputs are

super long so I'm going to set um a Max with the 480 but no minwidth which means it can just squeeze down to fit into a

phone as well so I'm going to uncheck the box for fixed width I'm going to set a Max withth of 480 remove them in width

and the Min height doesn't really matter for now I'm just going to make this a square and the Min what happens is I

will Design what I need within this group and then the height will adjust if it needs more space um and if there is

some vertical height left over or then I can make the Box hug the elements and I'll show you what that means after

finished building this okay so we need we need that logo all right so I'm just going to jump into

my data I'm going to go across to file manager because I have this logo here it's called

origin and I'm going to copy it and I'm going to go back into the design tab I'm going to grab an image

and I'm going to drop it in now of course I could just upload an image but I'm not too sure where it is so I'm just

going to paste this in and there it is there now it's too tall guys so on the L tab I'm going to choose a width of 48

pixels part of my design system part of bootstrap standards for uh element sizes keep aspect ratio fixed I want it one to

one it's a perfect circle basically and I'm going to align it horizontal in the center okay so that's the first thing

I'm going to do and then I'm just going to call this image logo next I want the name of basically my

company um so we can pretend like the name is collab so I'm going to type in collab collab stands for collaboration

it's part of a course I teach now I'm going to give this a heading style of four just personal preference I'm going

to put that in the center as well in terms of the image element now if I let this image element span all the way to

the Edge by removing any kind of Max or fixed widths then this naturally the text naturally would be in the center so

I'm going to head over to the lout tab I'm going to uncheck fix width and boom in the center obviously we have a

vertical spacing issue this is touching this so back on the group container the first element we put on the page I'm

going to choose a gap spacing of 24 and GAP spacing basically means um that anytime we put an element in this group

container it will always have 24 pixels of spacing and if we want to change that well

then the elements that we want to reduce the spacing between which we'll get on to uh we then have to

group those in a new container and then apply Gap spacing within those so it's a bit like padding a margin but Gap

applies to the entire container not just one instance so it saves us a lot of time I'm going to grab some more text

because I want to subtitle I'm going to say ready to jump in question question mark

sign up below and this is subtitle text so I'm going to choose a body dark medium I'm going to choose

alignment in the center and I'm going to choose a slightly lighter color CU color and hierarchy uh play together and again

the text element is too short so I'm going to let it span edge to edge but unchecking on the layout tab fix width

and removing the Min width and removing the height as well so you can see that the text element is taller than it needs

to be because the text is not as tall so if I remove the Min height and have fit height the content checked then

basically it fits to the content within all right and let me just show you what happens so if I take it onto a new line

you can see the text element will grow as it needs to all right that's flexbox kicking in now when I talked about your

Gap spacing being 24 um I'm going to show you how to then reduce it between the two text elements

because like elements are together okay text needs to be closer together but further away from the logo when it gets

down to the inputs they need to be closer together but further away from the header text so I'm going to just

simply highlight this text here collab I'm going to highlight beneath that ready to jump in and I'm going to group

that in a new container so now we're talking about nested containers and this is how you build it's just nesting

containers and adapting the layouts of those containers that's it so now I can head over to the layout tab check apply

Gap spacing and then choose 12 which is half of 24 okay this is going to be called group header and as I'm building

on the left hand side I can uncheck only show hideable and I can see the hierarchy of the group container image

logo and then we got the group header and if I expand group header now we've got text collab and the subtitle text

perfect let's continue now we need um we need the inputs with the labels so let me create the label first I'm going to

drop in some more text and I'm going to say email actually the casing let me say

this email like this and then I'm just going to change the style to body small and obviously you can see the text

element again too large so we need to adapt it so that it just sits nicely uh next to the text so I'm just going to

quickly just get through that like so okay time for our input folks because we need to capture an email address so when

you sign up to Bubble by minimum you need two things you need an email address and a password

yes there are other authentication options such as magic link when you put it in your email address and click a

button beneath it that says send verification link you go to your Gmail or your email provider you click a link

and that actually logs you in so some people are moving to that because it means you don't have to remember your

password your customers to your to your site and also you can log in with social Gmail Twitter that kind of thing social

logins also fairly popular but anyway let's type at the placeholder here uh into your

email and I'm going to change the content format to email just in case someone doesn't type in an email there

this doesn't verify whether the email exists and there are ways and means that we can do that it just makes sure that

someone does type in email and not their first name by mistake this stuff happens this is called form validation and

because we are we learn to be professional developers we need to take note of all of these things we always

need to help the user as much as possible okay okay on the lout tab I'm going to let the span edge to edge and

I'm going to set 48 pixels to which it already is okay these need to be closer together the label email and the input

so I'm going to right click group elements in a column container and then for this I'm going to choose eight row

Gap bit smaller now we have a new group so we need to label this properly that's group email and then guys what I love

about bubble and to save time and actually it's a good method is just copy and paste components that you've created

already so you could call this a component cuz there two elements together I'm just going to go copy paste

and now we have our group email copy which I'm going to change to group password email I'm going to change to

password and then enter your email I'm going to say enter your

password okay we could also do something like this I could also just add some Dots

here or maybe just keep it as dots all right but then I will just change the title here password

because we're going to need that soon and then the content format is password so this is a

great uh use case for Content format is when they type the password in you know it'll be the dots they won't be able to

see what they're typing okay and but I do want at the moment the Gap spacing is separating all

of these groups down the page I do want group password and group email together together closer so I'm going to say

group in a column we're continuing to Nest here guys and this time it will be 12 perfect then this new group will be

group inputs so if we have a look on the left hand side we can see that we've got our group container group header and

then our group inputs and within group inputs group email and group password and now all we need is a button folks

I'm going to drop in a button first of all I'm going to say sign up and I'm going to change the style

which I've set up already to primary large and quite simply span it edge to edge by removing the fixed width

removing the Min width and also making sure that the Min height is consistent between my inputs uh and my buttons so

48 pixels bootstrap standard I teach bootstrap across all my courses fantastic now guys how do we

make this bad boy work all right so let's look at that so let's edit the workflow so what we'll do very simply

bubble gives us all of these options navigation payments analytics plugins we're just going to choose account and

the first one sign someone up you need users in your application for it to be an application and now this is just a

matchmaking process okay so bubble's asking for an email address so we feed it the email address from the input

value so if I just type in email because I named my inputs so input enter your emails value okay it's always going to

be the value now I can type password and then point to the input password value we're going to feed that stuff through

the workflow and then into the database and they're going to be signed up and logged in on that button click and then

we have some other options here such as require password confirmation which would be a second password input box

don't feel like we need that in this day and age uh we want to keep it as small as possible and then we can also send an

email to confirm an email bubble that's just a built-in workflow by Bubble you can choose to do that if you like to

confirm that the email address is ready uh real sorry but I actually build my own pin related one which I feel is more

familiar ux all right send them a pin randomly generated then they have to put the pin in If it's incorrect I don't

then I disable their account on three tries and then we can add more Fields here so maybe you wanted to collect

their first name or their logo or their store name you can do that as well within the same form I prefer to break

forms down all the sign up process into multiple parts mult mul form multi-step form if I'm asking for a lot of

information at the very beginning which is you can put some people off so we'll keep this simple so we're just going to

go with that and then we have to think logically well what comes after clicking that button because they don't know that

they've been signed up well something needs to change so why don't we just point them to the test page and let's

have a look at that so navigate goto page uh test and we can pretend that that's our dashboard that they'll be uh

signed up and logged in to then start using okay so let's just put in some dummy details

here we're on version test so it doesn't matter email email.com form validation kicking in

here perfect and let's sign them up okay so here we are guys let's jump into the

data and let's have a look here is a row in the database here is a user they have an email address and this is their

created date and time and they have a unique ID as well which we will always use the unique ID is basically make sure

that every single Row in your database is unique okay because sometimes if it's like product data it might not be unique

there mult might be multiple stores with the same name and multiple products called sneakers Nike sneakers so unique

ID is very important all right guys so that is the sign up process and the build process

for something like a signup form I mean that was super super quick less than 10 minutes that's how fast you can get

started as well okay and now we're going to go to the dashboard page so if I grab text guys and drop it in here and look

at it's going to be at the bottom here check this out I can add Dynamic data I can say current user which is me

I'm holding the mouse I'm the current user just delete this quickly I can say current users

email check this out if I refresh the page look at this I'm logged in and I'm looking at my data email at

email.com so it's through this property editor that we Define what data to pull out and show

from the database okay so database data comes through this ad Dynamic data in terms of displaying Dynamic data within

elements but there are many other ways to display Dynamic data such as repeating groups tables even through

just an image element should that image be static which we did this is the static element here the bill Camp logo

or should it be dynamic should it be dynamic I'm going to quickly cheat in the data I'm going to open up this

pencil Tab and I'm just going to upload a users avatar from a developer standpoint your users will never see

this part of the app okay this is just this is obviously the bubble editor so I'm uploading an image

here's an image here I'm also going to cheat here because I'm testing uh I'm going to say Daniel

Williams now I'm going to save this and bubble no updates the database with what you've just put into these inputs and

now we can display more stuff so now I can grab an image drop it in it's obviously massive so the first thing we

need to do is set an aspect ratio and just 32x 32 I'm going to group these two guys

together this image uh and the reason why it's in the middle is because I've set a a column layout here in a

particular style space between but I'm going to get this image to sit next to this email down at the bottom

highlighting both of them group elements in a row container and now they're down here while I'm up there sorry while I'm

down here I'm just going to create some space between this text and this image element which is 12 pixel pixels on the

column and on this I'm just going to responsively fix this uh text input sorry this text

element there we go put that in the center all right so now I'm going to show you that we can pull this

data by Daniel Daniel is logged in here's his email address and by the way yes we can actually change Daniel's

email I can say that daniel. Williams I'm just going to say Daniel for now obviously we want to be building the

tools to be able to do this uh within like an admin dashboard or for users to do this themselves

okay but now I can um click forward slash and I can say current users

Avatar and run mode rendering I'm going to change to zoom so it cuts the shape that I want down here because I'm going

to scroll down and I'm going to set the roundness to 32 as well for a perfect circle so if I

refresh here's Daniel's image here's Daniel's email address okay so you can see that we built some UI that UI

comprised of containers to hold everything together and allows us to set the the layout it had an image it had

text and it had input and it had a button we collected data through the inputs and

the workflow that workflow saved the data and created the user account in the database and now we have created um a

dashboard we've dropped some elements on the page and we've instructed bubble to go fetch the current users data such as

the image and the email address okay so that is the create and read part of crud create read update delete that's what an

application is so we can we can create data save it to the database and we can pull it of the database as well and we

can display it for Daniel to see now can Daniel edit this data yes he can can he delete himself and delete his online

store or whatever it is that we're going to be building yes he can do that as well uh there bubble creates a delete

function as well and we can create multiple things at once we can delete multiple things at once we can edit

multiple things at once and we can run things such as backhand workflows to do the server side and not in the browser

it's getting a bit more technical far too technical for this particular course but uh we can do all sorts of stuff here

we can save data from external Services find an API service that shows the weather where we can download the

weather for the upcoming 10 days put it into our database and display it to a user through a repeating group build

your own weather app or you canot even touch the database and just pull it in from the API and just display it

directly create like a direct link to this external service amazing stuff let's actually go back into the design

um because you've seen me sort of lay things out a little bit there was a row there was a colum let's take this a bit

further so if I go to I've got layout here layout and I'm just going to change this to

layout now I've created a container this gray box and I've created a container on the left container on the right now in

real life these containers would be transparent or white or gray or black okay I'm just giving them colors so you

can see individual containers let's have a look at over here just to prove that it's a

container this is group a that's Group B and I can put text inside group a there it is there and I can change the text to

White uh and so forth so just so you know that these are containers I just want to show you how layout

works so I can say um on the parent group container because these are now nested I can go to the layout tab

currently it is a row a row means distribute data on the xais column means distribute data on the Y AIS top to

bottom so if you think of in the context of a page a page would always be top to bottom Navar hero section and then you

have your content sections and your footer at the bottom that is top to bottom but Within These sections such as

this gray piece is a section A lot of your data is distrib left to right and then it grows on a desktop left to right

you have sort of columns then within the columns you can distribute data again do you want to distribute it top to bottom

or left to right and this is how we build layouts just by using columns and rows there are other times where where

we would use fixed and aligned parent under container layout here they are here but it's pretty rare okay rows and

columns form 99% of how websites are built but I can just instruct a different layout here so it's a row

distributed left to right I can go top to bottom if I change this simply uh sorry if I change this from a row to