Learn Bubble.io in 30 Minutes

have you ever thought about building your own web application but you thought to yourself I don't have hundreds of thousands of dollars I'm not an engineer I have no development or code experience I can't do it let me tell you something none of those are reasons for you not to build an application or a project or idea that you have swirling around in that beautiful brain of yours so this video I'm going to teach you how to build any web application you want by showing you the basics of bubble in under 30 minutes all right what is bubble what can you do with it and why should you care bubble is the world's only full stack no code platform that means you can build full stack web applications without writing a single line of code if you just want to build a static marketing landing page or website this is probably not the tool for you this is really good for those of you that want to build out full-fledged applications what do I mean you want to build an Instagram clone you can do it in bubble you want to build your own version of Twitter you can do it in bubble Do you want to build Snapchat Trello sales force or any other application that you need to log into have authentication users databases then bubble is probably the thing for you now I know this Probably sounds scary so you don't actually have to get started from scratch you can see I'm logged into my bubble account I got a couple of projects that I've been playing with you can actually click right here to jump over to the marketplace and in the marketplace you can actually start off with some sort of template right a task management template some sort of dashboard template Maybe you know just a social media template and these will allow you to Kickstart the process now us we like to design inside of something like figma so that's what I do I do all my layout in a tool like figma because at heart I am a designer but this goes to tell you it's just a good reminder bubble is not a design tool it's a development tool a no code development tool but do your designing somewhere else bring it into bubble and then let's get started speaking of let's getting started let's Dive Right In you can see we have a project right here called designer dashboard you can create a new project by hitting create an app go through that whole process and we are now here we've opened up our project and this is the interface let's do a really quick 30- second walk around of the interface you're going to see so much of it as we go through this tutorial I don't need to do an in-depth dive in right now but let me just give you the quick show you around kind of feeling so in the center you have your actual project these are your pages across the top you have a bunch of stuff like errors issues arranging things and previewing your application as well as deploying it or publishing it you also have things like Pages you down the very left hand side you have a bunch of the main tools inside of bubble this is your design Persona where we're going to find all the elements tree like your layers panel as well as all the things we can actually put into our application you have the workflow panel this is where we're going to make things happen using logic you have the data panel if you want to build reusable Styles there's a style panel for that there are gazillions of plugins that you can help add on to your application I have a couple installed right now for notifications and icons and you also have settings and a bunch of other stuff but with that being said let's Dive Right In and start working on one of the most important things you need to understand inside of bubble before you go anywhere else and that is how to lay things out doing layout inside of bubble is actually very very easy because it uses something called CSS Flex boox that's very very similar to figma's Auto layout featur so stacking things in columns and rows is going to be the way to go can you drag and drop and move things around you can but you're not going to want to do that I promise you you're going to want to do things using the CSS flexbox feature once you understand this it's going to go really really quickly I'm going to show you the basics we're going to build a login screen right now so you can understand and learn some of the layout tools inside of bubble and then we're going to fast forward through everything and get to some more of the good stuff jumping right into the dashboard you can see we have a page here the size has been set we know that cuz we can double click on any element in inside of bubble and it's going to bring up this contextual panel this is our page called signup this page is literally just a container it's a group and that's all things are on the web anyways just a big container so this container we've called sign up it is a page it's a standard page but it also has some layout functions here and you can see this little tab experience is going to be very very important here inside of bubble this layout tab tells us we're currently on a fixed layout now that's not going to work for us and you'll see why we're going to grab a group or what you might call a div of some kind just a containing group we're going to drag that in and you can see I'm able to drag and drop that wherever I want and maybe that's what you want to do but that's not what I want to do I want to lean on that CSS flexbox technology to do the work for me so to do that I'm actually going to come in and I'm going to establish a parent child relationship parent is my page and the child is the group and you can have lots of parent child relationships parent and child that child can later on have its own child and on and on you go but here's what you need to know parents get to tell the children what to do and the children have a little bit of freedom to do some things if as long as you keep that metaphor in mind layout and bubble is going to be a cinch for you okay so we're going to grab the parent here this container we're going to move it away from this fixed layout and we're going to go to use CSS flexbox either row or column I'm going to go with column that means we're going to stack things from top to bottom as soon as I click that you can see we get some options here do I want to stack things on the top do I want to stack things on the bottom now this doesn't really make a lot of sense because you're going where is my div there it is because we're stacking it to the bottom I stack it to the top there it is and in the middle there it is again quite often when you're building websites and apps you just need things Centered for God's sakes and this is what it's doing for us it's centering it for us on this axis now it's exactly what we need we're all done right we have our signup page let's close that and let's actually grab our group we can't really see our group so why don't we fix that really quickly I'm going to double click on that group and I'm going to rename it you can either click here or on the layer itself I'm just going to name this signin box or let's call it sign up box we're going to need our users to sign up first and then we're going to want to give it a style so why don't we jump over to this appearance Tab and we can come down to Styles remember I told you over in the side panel we have this little style panel that's going to come into play right now because I've actually gone in and created a couple of reusable Styles already we're just going to start implementing those Styles and so I can come over to my style Tab and because this is a group it has a couple of styles I've created or we can create our own we can style this thing right now however we want color drop shadow border all that stuff and create a new style but I have a standard group style that I like it's this white background with this nice subtle border boom we've styled it and this is going to keep things really consistent through our application you want that I promise you you want that remember I told you that our child has a little bit of Freedom well the parent is telling it to stay in the center this way the child gets to actually when we click over to layout decide where it wants to be on the left on who watch out now on the left on the right or in the middle we want it directly in the middle this is going to be great for responsive design now that we have our element in the middle we can actually come over and start to style it a little bit more between our appearance and our layout okay so our layout here says it's fixed again we don't like that we're going to want to put things inside and so everything inside is going to dictate the space so why don't we set this one to column as well and when we do that you can see that it's jumped back over to the left hand side let's put it in the middle again there it is and look you can see it has some padding inside that's what those little lines are representing around the outside there the padding when we click on it we get a bunch of really great options here we want to start putting the content inside what do I mean by content I mean form Fields buttons logos all that stuff it's all going to filter to the top which is what we want and we can apply some even Gap spacing why don't we do something like 16 pixels to start and I know this doesn't make a lot of sense so why don't we start putting some elements inside of this shall we we are going to actually go over to our visual elements and I'm going to grab something like an image and I'm going to drag that inside and I'm going to go looking for an image right I'm going to search for images uh we actually have an image panel so why don't we go over really quickly to our data and you can see we have data types here we also have a file manager and we haven't uploaded anything to our file manager but we have a lot of good stuff that we could upload so why don't we just grab our assets for our project I got some avatars uh for it's going to be our characters I got some logos and I got some projects we're going to post so why don't I grab all of these I'm just going to say upload and go into assets and upload all of well we'll start with I guess just the logo one at a time and let's see what happens there we should be able to again upload logo boom like that we're uploading the file perfect let's try again and see if we can get a couple of avatars in there we'll just do one avatar for now okay so we got some elements that are actually inside of our database or our file manager we can actually click on this and we can get the URL or the address or location of it go back over to design we have that image let's double click on it again and why don't we paste the URL inside there okay perfect layout what do we want this to do right we want this element to stay in the middle and why don't we start to dictate the size a little bit we don't want it to be fixed width and uh what we want it to do is we can set minimum and maximum widths and that's the case for everything uh so we can actually just take the minimum width off let's do the minimum height off and let's do something for instance likeo boop boop yep I'm going to grab this element and why don't we say a Max height of or Max width excuse me of like 60 pixels something like that I think that works and our Max height is we're going to keep elements aspect fixed ratio that's going to push it to the top let's make this a little bit smaller even it doesn't have to be so big something like 24 or 32 I think that's going to work out well for us fantastic now we're going to do the same thing with our box here because our box right now is set at a generic size we're fixing the size we don't want to fix the size what we want to do is not make it fix width we want to give it a Max width right so our Max width could be for instance 600 pixels let's take off this min minimum width zero there zero on the minimum height uh and we could put a minimum height on it actually so minimums are not so bad let's bring this down to something more like 480 that's starting to look good and you can see that we're going to fit the height to the content so as the content starts to fill this box it's going to actually expand vertically our box so this is very very similar to Auto layout you put things in an auto layout you tell the scale that's what it's going to do next thing we need is some text why don't we drag that that inside and you're going to see a really similar process happening here over and over which is we're going to continue to tell these elements to fill the space that we're giving it and just count on the Gap and the margins and the paddings of the Box itself so again we've put some text inside of there and we are going to say this is probably going to be something like a headline three why don't we put something like uh over in our layout we'll edit the text right in here we'll put something like uh design Champs that's the name of my community it's right there you can see it's kind of wrapping we don't want that so we're going to not make it fixed with it's going to fill all the way our appearance we're going to make it Center align text and that's looking pretty good fit height to the content minimum height we could take this minimum width and this minimum height off you're going to see me take this minimum width and height off a lot because that's going to make everything just Flex to the actual object in this case the text so now we can go back and play with what we want here maybe we want more of a heading to okay we can play with that Center align the whole thing and Center align it one more time that looks pretty good we're going to need some text underneath it I'm going to copy and paste I'm going to shoot this down to be something like Body Center align that as well and I'm going to say uh we'll change the text here ready to become a champ uh sign up today something like that that okay boom We press Tab and you can see our box is not expanding yet but we're going to get there I'm going to grab this again really quickly this text I'm just command C command V just grabbing it like that I'm going to left align these ones and now I'm going to start thinking about creating some input forms and some labels to go with them so first we have you know when you do a sign up we probably have something like name and uh we're going to just copy these a couple of times right because this this one is name this one's probably going to be email and this one's going to be password now we need the input fields to go with it and eventually we're probably going to need a button why don't we just slap a button in right now and we'll do those same layout elements we don't want it to be fixed with let's take minimum width off and this one off now minimum height we can actually work on or we could use padding you can see we have really similar to figma Auto layout let's do like 16 pixels of padding on the top and bottom bottom that looks pretty good and it's bringing in the style for us so over to appearance and we will say sign up just like that and now we have our button now all we need is some form Fields inside and we're going to do a little bit of spacing using the actual like parent container to help us out we'll create some nested containers here so I'm going to close up visual elements I'm going to close up containers I'm going to go into input forms and I'm going to drag an input out there for me and we're going to do the same thing again we don't want to be fixed with do zero and zero here it's telling it says the words type here so if we come over to appearance we have some placeholder text let's put uh you know your full name or you could put like you know Tom Sawyer or whatever it is you want in there um so we'll put something like that but you'll notice that these things these elements our label and our form field are like a little bit too spaced apart um so first thing I'm going to do is I'm going to just copy and paste and let's zoom out I'm going to bring this up under here I'm going to copy and paste again I'm going to bring this up under here now you can see our form's kind of coming together but it's just it looks a little bit funky the spacing right so what we're going to do is grab both of these elements and I'm going to rightclick and then I'm going to group elements in a column container this is just like Auto layout it's going to slam it together for us and now each one of these groups if you'll see we'll do it again column container put these together again and group them in a column container we now have all of our elements they're in one group so the space in there's a little bit tighter and we could probably change that spacing if we want to but I'm just going to leave it for now because now you can see everything is being controlled by this Gap spacing so this row Gap so we can if we go up and down we're spacing things apart a little bit more it was at 16 I kind of like it at 24 notice how our our entire form is spacing out and it's spacing everything nice and evenly right so we can go down to something like back down to 16 I think that works and if we wanted to for instance put these two things together because they belong together we can do that now they live together a little bit more right and we like that uh this one's fine because it's going to grab like some text there why don't we click on this one it's supposed to be an email so why don't we come up to appearance and say your email and then we'll change the content format from text over to email and there's lots of different ones we can use this is actually going to do validation work for us which is really great then we'll do password and what do we want it to be we want it to be a password now this thing is almost done actually uh so why don't we go ahead and preview our project you'll see it opens up and it has this bottom panel that's for debugging if you want to get rid of it just go after this question mark delete everything and reload the page and you'll get it as it should be we have a fully functional form here here that could take our name take our email it validates it so we're supposed to have something. com uh maybe like email email. com there's the validation and then you have the secret password that's going to get put in and we could click sign up now when we click sign up right now nothing is happening and that's because we haven't given our web application any logic and that's actually the power of bubble right instead of using any other website builder because this isn't a website it's a web application so we're going to come in here and we are going to click on this button and now we're going to discuss data and we're going to discuss workflows I'm going to jump over to the data tab here really quickly you can see we have different data types currently we have a project data type and we have a user data type you can think of these like bags you know the user bag and everything that we put into that bag is a separate user each of those users that go into the bag might have slew of information like name email password Avatar right and so we can create these data types these types of data so for every type of data that we have you're going to have app data that goes along with it you can see I've already created just to speed this along a little bit our users we already have a couple of users I created those manually you could do that in a database an an SQL database we're just doing it here inside of bubble we also have some projects that are already built that we're going to be pulling in later on but we have some of our users and those users have an email an avatar we know what date they were created all that kind of good stuff and they will have a secret password associated with them as well so now that you know that we have data now we have to talk about workflows kind of a boring looking tab but when we click on workflows we can do all sorts of stuff but let's start over in the design tab to set off our workflow I'm going to grab my button here I'm going to double click on it and you can see that we have this button this element is currently clickable because we haven't checked that let's add a workflow to this button there you go our button has showed up we can hover over it and there's a button now we can do something there's lots of options for a button we can do things that have to do with plugins analytics payment you can integrate stripe into this and actually start taking payments but for us we're going to do the simplest thing we can which is do something that has to do with the account we're going to sign the user up okay now it's going to give us a couple of options here it's going to say hey we need at least these things to sign the user up where do we get their email you know where you're going to get their email we click here let's put in some Dynamic data right we're going to put input your email that's the one right input your emails value so when we say input your email that's what we named that layer right input your email and then we're just going to grab the value of that and we're going to go ahead and click off and look now it's saying we're going to input your email that's that form field your email right and then we're going to find it evaluates as text that's that's the value of whatever is in there whatever our user dropped in there let's do the same thing let's go your input passwords value it's kind of a weird name for it we probably shouldn't have named it that uh we can do requires password confirmation e send the email confirmation to them all that is good now here's what we're going to do we are going to go back to our preview here and you'll notice it tells us we did some stuff in the background we got to update this page so let's refresh it really quickly and now we can create a user so why don't we do something like uh uh John Wick and we'll say Wick at um assassin.

comom because that's who he is and then we'll do a password okay something like that we will sign up and success but nothing happens right well something actually did happen go back into our project into our data and let's just refresh this data let's refresh here here like this we should see the John Wick data enter into our database here we go we're loading it up and there he is Wick assassin. he doesn't have an avatar yet because we haven't given him that capability uh but he's in the system but nothing happened after we signed up and that's because we didn't tell bubble what to do yet we didn't tell our application what to do we just said hey when he signs up when he fills that stuff in there sign them up put them in the database why don't we give it the next step and that's going to be navigation once he signs up let's navigate to a page which page we want to navigate to Well we bring this over and say send me to the index page send me to the homepage we want to send any data along we can do that do we want to open in a new tab we're good we'll do it just like that let's come back let's try that one more time okay uh we're going to put this time my name is Taylor we're going to put Swift at swift.