The Complete Bubble.io Crash Course For Beginners (FREE COURSE)

so if you're going to take anything away from this course today please please please let it be this it's going to save you so much time throughout the process of building your application [Music] hello my name is lachlan kirkwood and today i'll be teaching you everything you need to know about getting started with bubbles noco tool i've personally been using bubble over the past three years and it's completely changed the way in which i can bring application ideas to life as a non-technical person i can't even begin to explain how many times i've tried to learn how to code and to be frank it wasn't until i actually found a bubble that i started making progress in creating my own products if you're getting started with no code a bubble truly is one of the most powerful products available at the moment as it gives you complete control over creating your own custom database designing the visual interface that your users will interact with the ability to make your app completely functional using workflows and finally the ability to integrate with third-party tools and services i've personally used bubble to build a whole suite of products in the past from applications like marketplaces social networks on-demand ride sharing apps and even internal tools for companies the possibilities really are limitless and so today i wanted to share with you everything you need to know so you can start getting the most out of your experience with bubble because it is such a powerful tool what you'll find is that there is a bit of a steeper learning curve with bubble in comparison to other noco tools but once you get past that initial learning phase you'll soon be unstoppable when it comes to bringing your app ideas to life which is the exact experience i had with bubble myself and for those of you who don't know me i previously worked directly with the bubble team to write their how to build blog series this series took a list of the top products out there on the market like airbnb uber and instagram and explained the step-by-step process to rebuilding each of those apps entirely out of no code using bubbles tool now while that written blog series was helpful to bubblers across the world i wanted to create my own unique video series just because i personally find it easier to learn through video based content and it just allows me as a teacher to share more insights with you as i walk you through the process and to my point today i'm going to be teaching you everything you need to know about getting started with bubbles no code tool and throughout this course i'm going to be covering everything you need to know from creating your own custom database building fully responsive pages within bubble leveraging workflows and conditions to make your application functional as well as how to use features like custom states page parameters option sets dynamic pages how you can publish your application and the list honestly just goes on and on unlike some of my tutorials this one is completely free as when i first started using bubble myself i knew how frustrating it was trying to understand and grasp some of the core concepts so i just wanted to share as much as possible to help you get from zero to one within minimal time so that way you can focus on building out features within your application that'll help you get to the next level look there's so much that i want to cover throughout this particular tutorial so let's just open up our bubble editor and we can dive right into it throughout this module i wanted to cover the key core concepts that you'll need to know in order to understand how you can utilize bubbles no code tool to bring your own application to life if you were previously on the market looking for a no code solution i'm sure you probably found yourself inundated with potential solutions and platforms that you could use at this point in time it's almost hard to keep up with how many different noco tools are available but there's a reason why bubble itself has remained one of the most popular solutions and that is because it provides a full stack suite of tools to use in order to bring your whole application to life using a single platform and the best way to showcase this is just by showing you a quick comparison of bubbles features in comparison to other noco tools so when it comes to other no code tools what you'll find is that they tend to handle one element particularly quite well so they'll specialize in one area and if you're a fan of avatar the last airbender this will help illustrate my point even more so essentially all no code tools in my opinion have one type of superpower that they have mastered in some cases they master the element of allowing you to create external databases some noko tools will allow you to master the art of designing beautiful websites and other tools allow you to master the art of integrating all of your noko tools together and so if we were to give our characters names here you could say that the person who has mastered the database could be a tool like airtable the one who has mastered design would be a tool like webflow and then finally the master of integrations would be something like zapier but in my opinion there is one tool to rule them all and that is bubble because like the avatar bubble allows you to master all of these elements within one particular solution so not only does bubble allow you to create a database within their application they give you complete control of designing your interface through the canvas they allow you to stitch your whole application together using workflows which acts as a series of logic and finally it also allows you to natively integrate with third-party tools and services either using the bubble plugins or that api connector and so as i mentioned bubble is a full stack solution that just provides everything you need in one platform for one monthly price so instead of having to pay for three separate noko tools that stitch together bubble allows you to just pay for one solution and not only will it save you on price but it's also much easier to manage all of your data your design and your workflows under one roof and so when it does come to understanding the core concepts within bubble there are four particular elements that i think are essential to master in order to become what i call a bubble bender and these are the elements that are displayed on this illustration here so as i mentioned there is the ability to create a database design your application build the workflows and also master integrations with third-party tools and services and if we were to jump back over into our web browser here and open up a brand new bubble application what you'll find is that all of these elements are clearly displayed on our left hand menu here so at the top here you'll see that by default we have our design element opened and this just allows us to design the visual interface of our application that our users will see and engage with and so within your design canvas here bubble allows you to add in different elements like text images buttons and even input fields and so it gives you the ability to almost bring your application to life by dragging and dropping components onto the page and then once you've finished designing your application you can start stitching everything together with workflows so our next superpower you'll see here is the ability to open what's called your workflow editor and so workflows are essentially a way to create logic within your application and by logic i'm just referring to the process of what is used in traditional coding so in coding you would need to write a series of logic that a computer would behave and respond to so you could say something like if the user is logged out log that user in when they click this button and this is exactly what you can create within your workflow editor here so you can create a workflow that runs every single time something like an element is clicked on your page so you can see here by default bubble has already created a workflow for us so every single time this get started button is clicked here it opens up our workflow editor and within this you can choose an action to occur so you could say when a user clicks this button i would like to let's say display a pop-up or register their account or even create an entry within our database which leads me to the next superpower within bubble and that is the database editor and i apologize if my screen recorder is covering this up but essentially this is the data tab here which just allows you to create a series of what's called data types within your application so this just allows you to identify all of the data that you would like to store within your actual application itself and now of course i'm going to be breaking down each of these individual superpowers into a dedicated module throughout our course today but right now i just wanted to take the time to explain to you the core concepts within bubble but i just wanted to reiterate that we are going to be touching base on these later on in more detail so don't stress if i'm just jumping through this quite quickly but essentially as i mentioned within bubble you can choose to create different data types which just identifies anything a user will be creating within your application so if you were creating an app like instagram a user could not only create their own account but they could create an instagram post and within your database it just allows you to identify what users are capable of creating and then finally if you were to open up your app data tab here you could see a list of all of the data within your application that you have saved because this is a brand new bubble editor that i'm using i currently don't have any data within it but let's say you wanted to view a list of all of your users you could see all of their names their emails and any other information you'd like to store about them so things like their profile photo or even their bio and bubble just allows you to completely manage this natively within their own platform and then from here the final superpower i just wanted to cover was the ability to integrate third-party tools and services and so on the left-hand menu here you're going to see a option to open up what's called the plugin tab here and so one of my favorite features about bubble is that if you're unable to build something natively within the platform thankfully there is a whole library of third-party plugins that allow you to essentially add power ups to your application and the great thing is that a lot of these plugins are actually free so let's say i wanted to add charts or graphs into my application there is a plugin that allows me to do that or let's say i even wanted to process payments using stripe i have the ability to install a stripe plug-in that will allow me to charge users either one-off or recurring subscription fees and when it comes to searching for all of the different types of plugins available you can just open up the bubble plug-in library and as you'll see this library includes a whole suite of additional bubble plug-ins and power-ups that can help you take your application to the next level the other thing i would like to mention is just the ability to integrate a third-party apis directly within bubble and while this is a bit more of an advanced feature it truly just allows you to make sure you can get the most out of your application so what you'll see here is that there is a plug-in called the api connector and this just allows you to integrate with real apis to either retrieve or send data to third-party apps and that truly is just a defining feature within bubble because it gives you the full capabilities of integrating with traditional services that might use code so that way you're not restricted or limited to what you can build within their platform and look to be honest that's all i wanted to cover in this particular module right now as i mentioned the purpose of this section in our tutorial was just to explain the difference between bubble and any other noko tools on the market as well as break down the four main concepts within bubble so that is once again the ability to create your own database design your own front end of the application build workflows to stitch everything together and then also have the ability to integrate with third-party tools and services throughout this section in our course i just wanted to take the time to highlight a list of all of the possible products that you can build using bubbles no code tool when it comes to using bubble there's a question i often get from a lot of new users who have just discovered the application and that is that they want to know what is actually possible when using bubble as a noco tool so what kind of applications can you create and where can you publish those applications so is it only possible to create web applications with bubble or is it also possible to publish them on app stores and thankfully the answer for all of these instances is almost definitely yes and so to be completely honest whatever you can think as an application is almost most definitely possible within bubble and i have a small list of examples here but this just only scratches the surface of what's possible when you're using bubbles tool and i actually have some great resources that i'd like to show you as well if you're new to bubble and you're eager to discover what's possible or perhaps you have an idea for something and you'd just like to see an example of someone else who has created a similar application and thankfully because bubble has been around for so long there are in fact plenty of existing examples out there that you can use and i'm going to be showing you some of my personal favorites in a moment but first i just wanted to cover some examples of things you can build within bubble and some of the most common use cases i personally see are people wanting to build things like marketplaces so regardless of whatever industry or type of marketplace you're building this is certainly possible so if you wanted to build let's say a job marketplace like fiverr or upwork that's possible if you wanted to create a property marketplace like airbnb that is also possible it's also possible to create on-demand services like uber doordash or even postmates and these can all integrate with rich map experiences which allow you to replicate almost like the real world apps that you're already familiar with using from here you can also create social networks or community applications so if you ever want to create an app where users can post content to a feed for other users or if you'd ever like users to create their own profiles and then engage with other users or posts through likes comments and shares all of that is possible using bubble and it's actually a pretty straightforward process to build out all of those features you can also create things like e-commerce stores booking apps so if you're selling things like tickets or experiences you can use bubble to build out internal dashboards or tools so if you're building something like a project management application that is definitely possible and then finally it's also possible to create things like invoicing and finance applications because thankfully within bubble it's possible to easily process payments between users and so this will help you bring any finance application to life and one thing i will just point out is that because bubble has the ability to integrate with third-party tools and services like i'd mentioned in our previous module it really does open up the gate of possibilities within the platform so if you ever find yourself limited to a feature that bubble does not have which to be honest is not very often what you'll find is that you have the ability to easily integrate with a third-party tool or service that can actually take care of that for you so for instance as i mentioned in our previous module if you ever wanted to process payments you could integrate a plug-in like stripe or paypal and that would allow you to easily do that if you ever wanted to integrate a real-time map navigation experience you could use an integration with a tool like mapbox and it would extend the capabilities of your app to do that and so that's why i just say that there are really no hard limits on what you can build within bubble at the end of the day it really just comes down to either one your imagination and two your ability to actually build it out and while i've just rattled off a few ideas from this list here i'm actually going to link you to a blog that bubble has previously published which just covers a list of all of the possibilities when it comes to using their tool to build applications so they give you some great examples of people who have created things like custom marketplaces social networks booking applications and even things like personal finance tools and within this post they provide you with some links to actually check out those applications and so that way you don't have to just take someone's word for it you can actually view those applications and see how they perform and i'll be sure to provide a link to this particular blog post within this module in our series but i also want to link you through to the bubble showcase page on their website so this also provides you with a list of featured applications and websites that have been built using bubbles platform and there's plenty of great examples here and if you were to click on any of these it's just going to redirect you through to that application so that way you can get an idea of what this is actually going to look like and i'd always recommend just playing around with that application so that way you can see if there's any particular features you'd like to replicate within your own bubble build and then that'll just reassure you that it is possible within bubbles no code tool and then finally the other thing i'd like to mention is just a bit of a shameless plug but i have a whole series of courses that i create that just rebuilds pretty much all of your favorite apps on the market that you'd use within your day-to-day life and the reason i created these courses was to just show exactly what is possible within bubble so i've created apps like uber airbnb reddit salesforce the list really does just go on with all of the applications that i was able to build using bubble so i definitely recommend checking that list out if you found yourself eager to know what is possible within bubble but just to reiterate from my first point there really is no hard limit of what's possible when it comes to using bubbles tool so you can rest assure that regardless of what kind of application you're thinking up it's more than likely possible and to be honest someone has probably already built a similar application maybe for another industry or use case it takes advantage of all of the features that you would like to integrate within your own app and so that way you can always check out that existing application to get an idea of how things are built throughout this section of our tutorial we're going to cover arguably one of the most important aspects of creating a bubble application and that is how to set up and configure your own custom database there's plenty i want to cover throughout this particular module so let's just dive right into it so when it comes to creating a database the first thing i'd like to point out is just the difference between data types and data fields and if we were to open up our data tab within a bubble editor the first thing you'll notice is that bubble has actually already added in a data type for us by default and that is a user data type because within most applications it's going to be necessary for users to register accounts and in order to register an account a user would need an email and a password and so a practical example of the difference between data types and fields is within our user data type here so for every user account within our application we're going to need to store some data and information about that user so the data type itself would be a user and then the data fields would be any information we'd like to store about that user so for instance here bubble's already storing an email field and they'll also store a password field by default but you just won't be able to see that in plain text and this just takes me through to my point that i'd like to make about how you can approach creating your database so a really common question that i get is how to approach the whole process of creating a database from scratch and i find that a lot of people tend to get confused when it comes to splitting out the difference between data types and data fields and so for today's tutorial i'd just like to show you a quick example of how we can create a database from scratch and i want to walk you through my thought process throughout that experience and so when it comes to data types these should be the overarching things that will need to be created within your application so anytime a user needs to create something within your app this should be a data type and when i mean create something this could be let's say create an account they could create a post they could create a comment all of those things would be the data types and then the data fields is the information you'll be storing within everything that's been created so every time someone would like to create an account within an app you would be creating a new data type and you'd be storing all of that user's information as the data fields within it so the data fields in that case could be things like the user's name their email their password or even their address and to my other example before if you had let's say a social media platform and you'd like users to be able to create posts the post itself would be the data type and then the content of that post would be the data fields so you could say within the data fields there's the actual content of the post itself which is either written text or an image and then you'd also be storing things like how many users have liked that post and so for our tutorial today what i'd like to do is actually just walk us through the process of creating a database and i personally find that the best way to explain this is just by recreating a database for a popular application that already exists because you're more than likely already familiar with how that app functions and so it'll help us just understand how it is actually built behind the scenes and when it comes to creating a database i personally prefer to use a tool like notion which is just a note-taking tool to just start the whole process of structuring out and mapping my database in a doc before i then add it into my bubble editor and you'll see why i love notion so much in a moment but let's say if i was creating an instagram clone database the first thing i'd like to do is just map out all of the key things that users will be creating within an application because as i mentioned those will become our data types and so within our instagram clone the first thing someone's probably going to create is an account and so every time a new account is created we'll be creating a new user so i'm going to type in the word user that's going to be our first data type i might also just highlight this as a h2 heading just so it stands out because that's one of my overarching data types as i also mentioned before one of the next things that users will be able to create within our application is a post so i'm going to type in the word post and that's going to be an instagram post so this is of course what you'd see in the home page feed and then another item that users could create in an application would be something like a comment so people could leave comments on a post but because they'll be creating a comment we'll need to break this out to be a separate data type and i'll be showing in a moment how we can link these data types together and for the sake of our tutorial today i'm just going to leave it at three different data types of course if you're building out the full instagram application you could have separate data types like stories but i'm just going to focus on these three data types for now so i'm going to highlight the rest of my text and just make these a h2 heading and then once i've identified everything users will need to create what i'm going to need to do is then add in all of the data fields that will sit within each data type so i'm just going to add a bit of space in between my first heading here and just identify that under my user account what particular information and data would i like to store within my app and now this is entirely up to you as the maker of your application so you can store whatever information you'd like or need and so i'm going to just start by adding in a check box here and this is what i love about notion is that i can add in a list and then check them off once i add them into my bubble editor later on but under my user data type i'm just going to identify a few key fields that i'd like to store within my user's account and the first will be a name field so of course when a user registers an account i'd like to store their name and then i'm going to add in another option and i'd like to store a bio for this user so this is just the short text that's displayed on their profile then i'm going to add in another data field and i can store a user's handle so in my case my handle would be at lachlan kirkwood and then after that field i'm going to add in another data field and i'll be calling this the profile photo because of course for every user account i'd like them to be able to save a profile photo that we can display across our platform and then finally just for our tutorial i'm going to add two additional fields the first is a list of all of the followers that this user has and then i'd like to store a list of all of the people that this user is following and so you can now see that this is actually how we would structure our database within the bubble editor itself so we have our data type at the top and all of our data fields within it and i'll be transferring those across in a moment but what i'd now like to do is add in all of the data fields under our post data type so every single time a user creates a post within our application i'd like to store some data and information within each post so i'm going to start by adding in a checklist mark and then the first thing i'd like to store under each post is just the caption of the post so this is the text itself that's displayed when a user creates and publishes a post in our instagram feed and that's pretty straightforward it's just going to be a text field and then the next field i'd like to register is just the likes of this post and one thing you just might be curious to know is why i haven't created likes as a data type so as you've seen here i've added a data type for our comments because of course users will need to be able to create comments in an application and you're probably thinking that within an application users should also be able to create likes likes however in bubble are just created through a list of users and this is something that i should also point out when you're actually structuring your database and i'll be walking you through this in full detail when we add it into our actual database itself but whenever you create a new data field within your data type you'll have an option to choose what the field type is so should the field type be text or should it be a number if for instance we were storing the user's bio that would be a text field because we're just storing text within it but what you'll also see here is the option to store this field as a user so this is where we can reference that initial data type and so for something like the likes data field that i'm just adding within my notion doc here i'd like to actually just store a list of users under this field and you'll see an option within our database to tick this box here which enables this field to be a list with multiple entries meaning that every single time a user likes a post i'm just going to be adding them to this list of users so i can later on not only perform a count on how many people are within that list to get our like count but if i would like i could even reference the names and profile photos of all of the users who have actually been added to that list so that way if a user wants to see who has actually likes their post we can just pull through a list of all of those users again i'm going to be explaining that more detail when i actually add this into our database but what i'm going to do in my notion doc here is just add that this is going to be a list of users and of course our users is a separate data type so that's where you can start to see that we're going to be linking our data types across one thing i should also note is that under our user data type here we had our list of followers and a list of users that the person was following these are also going to be lists of users and again i'll be explaining that when i add that into my database itself but for the time being i'm just going to write that these are lists of users just so we can reference that when we add it into our database and now if i'm building out an instagram clone database the very last field i'd like to store within my post data type is the actual image itself and the reason i've left this to last is because i just like to explain how we can actually split our database to help optimize the performance of our application and so i also get a lot of people asking me how they can structure their database to optimize the performance of their app just to ensure that it doesn't slow down quickly and so while bubbles great for giving you the complete control to create your own custom database it's kind of like a double-edged sword because by all means you can create and add whatever data types and fields you'd like but if you structure your database incorrectly you might find that it can quickly slow down because you're storing a ton of unnecessary data in the wrong places which just means that bubble might have a hard time trying to load all that data later on and so this is where i'd like to split my post data type into two separate data types and the reason i'd be doing this is because every single time you load let's say a post in our instagram application bubble's going to need to load all of the data fields that sit within it and if i'm loading a homepage feed with let's say a hundred posts but we only want to display two posts at a time before a user continually scrolls down to view those i don't want to automatically fetch a hundred posts which include a hundred images because that is a ton of data for bubble to actually have to search and display so what i'd like to do is just split this data type into two and then later on which i'll be showing you how to do in a moment we can reference a separate data type and display the images for this post only when they're needed meaning bubble won't have to load them unless they're completely necessary and so what i'm going to do is just add some space and add in a separate data type here called post content i'm going to make this a h2 heading so we can clearly see that's a separate data type and now every time a user creates a post we're also going to create what's called post content and within this data type i'm essentially just going to have two data fields the first will just be the image of the post so whenever i create a post i'm going to be creating a post content and i'll be storing the image separate from the actual post itself but in order to link these two data types together and display my image whenever a post is also displayed i'm going to add another data field and i'm going to call this original post so this is the original post that this post content should belong to and i apologize for saying post so many times but if you just take the time at this point to structure your database correctly it's just going to ensure the longevity of your bubble application and so in order to link my post content back to a post i'm going to set the type of content for this data field to be a post data type and i'll be storing that information when i create a workflow to create a new post content but before i show you how to do that what i'd like to do is also just add in the data fields for my comment so this is the very last data type and now for every single comment that's created within an application i'd like to store the content of this comment so this is just going to be the text itself that sits within each comment and then of course i'd like to once again just link every single comment back to a post because of course if i'm loading a post in a home page feed and someone clicks on that and they'd like to view all the comments within it i'm just going to need to link all these comments back to an original post so i'm going to just add a new data field here i'm going to paste in the same option from our post content so i'm going to need to link this comment to an original post and the field type there will be a post as well and now that is all of the data fields i just like to add within our notion dock here and as you can see the reason why i like to use notion before i actually work within my bubble editor is that it just allows me to sketch out a rough framework of how i'm going to structure my database accordingly and then once i've added in all those data fields i can just check them off as i go along so let's jump into bubble now and we can start adding in all of the necessary data types and fields and before we add in the data fields for our user data type what we're actually going to need to do is start by adding in all of our data types themselves just because within some of the data fields as you've seen here we're going to need to link these two separate data types and so you'll always need to create your data types first before you actually build out your data fields so if we jump back over into bubble i'm going to create a data type called a post and now one key thing that i really want to point out is that when you're creating a data type you should most likely never use a plural for the actual name of it and what i mean by that is i'll see a lot of people who for instance when they create a post they'll say that they're creating posts with an s at the end and that actually gives a false representation of how bubbles database management works because for every single data type you will only ever create one entry at a time so when a user creates an instagram post they're only creating one post they're not creating multiple posts so and it can just get quite confusing if you've got a data type that's called posts because it gives the representation that a user is creating multiple posts at once and it can quickly become confusing when you're creating workflows or even wanting to retrieve data from that data type so if you were to take away one thing from today's lesson in my opinion it's to make sure that you don't add plurals under your data type names so i've got a user i've got a post i'm then going to add in my post content and now one thing you probably noticed is that i like to add a dash between any two words within my database and the reason i do that is just because later on throughout my tutorial if i'm referencing any data types within my element inspector or my workflow editor it just allows me to recognize this data type quite easily because it's the only text with a dash in between the two words but from here i'm going to add in my very last data type which was my comment i'll choose to create that and now once i've finished adding in all of my data types here i can start adding in all of the data fields that sit within them so i'm going to start with my user data type as i'd mentioned before the first field i'd like to add is the name of the user and this is just going to be a text field type i will not be selecting this box to make this a list with multiple entries because a user can only have one name so i'm going to choose to create that then we had our bio for the user which again was another text field type nice and simple then there was the handle of the user this again will just be a text field type so these are all pretty straightforward and what i love is that by this point now tutorial because we have already taken the time to structure our database the process of actually setting it up in bubble is a breeze because we don't have to do any heavy thinking right now we're simply just copying and pasting it across from our notion doc then the next data field is our profile photo once again i'll just be adding a dash in between those words and this field type will be an image and once again i will not be selecting this checkbox because one user can have one profile photo at a time i will create that and then finally the very last two fields is first of all the list of followers that every user will have so this is going to be a list of users so i'm going to select from our user data type here and i am going to tick that this is a list with multiple entries so every single time someone follows a user i'm going to be adding them to the list of total followers and we can easily reference and display that list at a later time and then the very last field i'd like to add is the total list of following so these are all the users that someone is currently following in an application and this will once again just be a list of users so i'll create that and now i can jump back into notion highlight all of my data fields under our user data type and check those off then i can scroll in down to my post data type and i'm going to open this up and first of all add in my data field for the caption of every single post that of course is just going to be an easy text field and then i'm going to store the likes for this post which as i had previously mentioned is also a list of users so i'm just going to be adding someone to this total list so i'll be selecting this field type to be a user and i'm going to tick that this is a list of multiple entries because more than one person can like a post so i'll be creating that and that's all the data fields under my post data type as i'd mentioned i'm splitting these into two separate fields themselves so under our post content i would like to add in the image itself so this field type will be an image and now depending on how you would actually like to structure application will determine if you want to tick this box or not for my example today i'm just going to make it that one person can only upload one photo for every single post but if you'd like to support something like let's say carousel post where they have multiple images you could of course tick that that is a list with multiple images i'm just going to leave that blank for now and choose to create that and then the very last data field i'll need to add is just a way to link this separate data type back to our original post data type so i'm going to create a new field and i'm going to call this og post so this is the original post that this post content belongs to and this field type if i scroll on down will be our post data type and of course one post content will link to one post at a time so i'm not going to check this box and now one thing i'd like to point out is just a quick note on how i've actually split these data types so if i just jump back into my notion doc you'll see here that i've linked our post content to our separate data type back to the original data type now technically if i was to open up my database and open up my post here i could create a field that links the original data type to our separate data type so i could say that i want this field to link the post content to a post content data type and i could create that but the reason i have not done that in our tutorial today is because if we're linking a separate data type under an original data type and bubble is to load a list of a hundred posts on our home page feed because this data field sits within our original data type it's also going to have to load all of the data fields that sit within our separate data type so not only is it going to load 100 captions and 100 like counts but it's also now going to load all of the images immediately that sit within our separate data type here and that is not the experience i want to create because that would actually slow our application down so i want to make the note that you should split the data types by linking the second data type back to the first and i'll be showing you how we can actually do that search in a repeating group in a moment but if i jump back into my post data type i'm just going to remove that data field that i added and from here the last data fields i'll need to add are under my comment data type so as i mentioned for every comment that's created i'm going to need to store the content of that comment itself which is just the text that someone adds i'll just choose to create that and then finally for every comment i just want to link that back to the original post that it should belong to so i'll be selecting that the original post will be a post data type and now if i jump back into notion i can just highlight all of these data fields here and tick those off and that's actually the process of creating a completely custom database i do just want to take a quick moment just to show you how we can actually link these two separate data types together now in our application just so you have a full understanding of how this now works so if i was to open up my page drop down here i've just created a blank page which i've called my home page and let's say i want to add a repeating group onto my home page and this is going to display a list of posts within my instagram home feed i'm going to set my type of content of this repeating group to of course be a post and now let's just say i want to load all of the posts within my application i can perform a search for all of the posts and that's going to load every single post that's ever been published on our platform and then within my repeating group let's say i'd like to actually display the image of our post content i'm going to just quickly update the number of rows to be 2 and i'll add in an image element here and now because our data type for our image is split from the actual post that it sits within i'm going to need to insert dynamic data and the way i can display this is by performing a search in our database for the post content where the original post equals the same value as the current sales post in our repeating group and then i would like to just display the first item in our database because there will only be one item where the image itself is the same value as the current sales post and from there i just like to display the actual image that has been stored within that field and that is how you can link your data types together and display that information within your repeating group on the home page when it comes to understanding how to design your pages within your application the first thing i wanted to cover is just a general overview in how you can create responsive pages using bubbles flexbox responsive engine and of course there's plenty i want to cover within this so let's grab our bubble editor and we can get started now that we have a bit of an understanding of how we can actually create our database within our application what i want to focus on is now how we can create the design of our interface for our app and this is arguably one of the more fun parts within bubble as you can actually start to see your application come to life as you design it within their visual editor and the very first thing i just wanted to cover within this particular module right now in our tutorial is just a brief overview of bubbles relatively new responsive engine and i say relatively new as i'm recording this at the beginning of 2022 where bubble has recently made a change to the way in which you can build responsive applications within your editor so if i was to jump over in to my bubble editor right here i've just got a blank page that i have created from scratch the only thing i've done on this page is just update the background color here to be a light shade of gray just so i can see where it actually sits within my overall bubble editor and now traditionally as it stands right now if you were to build an application within bubble using what's called the old responsive engine you'd have the ability to just drag any elements on your page and just as a side note i will be covering the difference between all of your elements just within the next module of this course but one thing i want to cover is that when using the old responsive experience in bubble you had the ability to just drag and drop different elements all over the page wherever you would want which was of course a good thing when it came to visually building your app as it was quite easy to just drag stuff wherever you would like without having to worry about how it would be responsive across different devices like desktop and mobile but one major change bubble had recently made is the ability to upgrade to what's called their flexbox responsive engine and so this new responsive engine leverages the css flexbox framework and what this means is that it completely just overhauls the way in which you build your application and in my opinion it creates a much richer experience to design fully responsive applications across all devices and it's definitely something that i want to teach you about within this module right now and so at this point in time this new responsive engine is not the current version which you'll be able to see once i click on my page i have the option here to upgrade to the new version however i'm sure that within the near future this is going to be the default version in which case anything i would have mentioned up to this point in this module would be obsolete so i just want to make sure that i teach you the best practices within the new responsive experience right from the beginning so that way you know exactly how to build your application using the current version and so what i'm going to do is just delete these elements off my page here and because my editor is not using the flexbox responsive engine i'm just going to choose to upgrade this and now over in my editor i am currently viewing my page with the new flexbox responsive engine and the way in which i can tell that is by the fact that i have what's called my layout tab here and i'll be explaining everything you need to know about this tab in a moment but one thing i just want to highlight first is the major differences with the new responsive engine and so the new flexbox responsive engine within bubble uses what's called a modular experience and what i mean by this is that it allows you to stack and move your elements across the page like building blocks so you can almost think of them like lego pieces and if you've ever used a no code tool like elementor within wordpress you'll actually prefer this new responsive engine because the process of designing your page is almost the exact same as using elementor's tool and i'll be showing you a full example of how you can create a page in a moment but there's a few core concepts i just want to cover first so when you create a page from scratch and you open up your layout tab the first thing you'll need to do is identify what's called the container layout of your overall page so this will determine the way in which your page is structured and now if i was to open up this menu here you'll see there's four options there's the option to leave your container layout fixed there's the align to parent option the row option and the column option and now while this might sound confusing thankfully i personally only ever use the row or column option i rarely ever use the first two options so if you're just learning bubble i'd recommend forgetting about those in the meantime and the main difference between the row and the column option is that they will just determine the way in which your page is built and i have a great illustration here that i'd like to show you so if you were to select that you want the overall layout of your page to be set as a column bubble will position any elements you add on it from top to bottom whereas if you set your page layout to be a row bubble will position your elements from side to side and now when it comes to building actual pages within your application i personally prefer to use the column option because when you think about a way that a website is structured everything on it starts from the top and then is displayed down to the bottom which is why i personally prefer using the column option and i'm just going to show you the difference between the two here so if i was to select that my container layout should be a column because i want to stack things on my page from top to bottom what i'm going to do is i'm just going to choose to add two groups onto my page here and i'll be explaining in a separate module what a group is and when it should be used but at this point in time i just want to illustrate the difference between the page layout options one thing i'm going to do is just update the color of my group here i'm just going to set this to be a red color and again you don't need to pay too much attention to what i'm doing right now with the styling of this group i'm going to have a dedicated module that will walk through this in a moment but one thing i just want to do is make a copy of this group and i'm going to update the color of this group to be a purple and what you'll see is that because my overall page layout here is set to be a column it just means that these two elements are going to be stacked vertically on top of each other whereas if i was to set my container layout to be a row it's going to stack these horizontally side by side and now of course there are going to be instances where you will need to stack certain things on your page side by side and i'll show you in a moment how you can actually do that but for the overall page i would personally recommend stacking this as a column layout just so that way you can build things from top to bottom like a real world application but let's say you've got your overall page set to be a column and you'd like to display some elements side by side within your actual page itself thankfully it's also possible to update the layout of group elements here so that way they almost act like mini pages within your overall page so let's say in my overall page here i have the page layout set to be a column because i want everything to be stacked vertically from top to bottom but then within this subsection of my page so this red group here i'd like to stack everything horizontally so let's say i've got some text that i want to display next to a button what i can do is actually click on this red group here and i can select that i'd like the container layout here to be a row because i want any element put within this group to be positioned side by side so i'm just going to add a text element into this and then i'm going to add a button element what you'll see is that these elements are now being stacked side by side and if i ever wanted to update these to be stacked on top of each other i could click on my overall red group i could open up my layout tab and i could update this to be a column style and what you'll now see is that button sits below my actual text not beside it but let's say for the sake of our tutorial i want to set this to be a row because i'd like both of these elements to be positioned beside each other but what happens if you would like to have a little bit more control over where these particular elements are horizontally aligned within our group this is where what's called the container alignment comes in handy so for our group here the overall layout itself is set to be a row but bubble also provides you the option to update where any elements within this group are aligned and so you'll see a series of options here where i can choose to align all of my elements to the left which is the current setting so any element that's added to this group is just going to be pushed over to the left hand side or i could even choose to center these elements and now it will perfectly center both of these elements in the middle of my group but what i also have is the option to add in an even amount of space around each element and i think the best way to illustrate this is just by removing that text element and just adding in a separate button so that way you can see where they both sit so if i was to select on my group again you can see that i have an even amount of spacing between both my buttons and the borders of my overall group or i can just choose the final option which is the space between option so it just ensures that there is an even amount of space between both of these elements but between all of your container alignment options here you'll have the full flexibility to determine where you'd like your elements to sit within your overall group and so if you were to take anything away from what i'd mentioned so far in this tutorial it's that when it comes to your overall page here so i'm going to click on our overall gray page in 99 of use cases i would recommend setting the container layout to be a column because you'll be building your page from top to bottom and then if you ever want to stack elements horizontally across your page you could add in a group element and i have another module in this series which is going to cover how groups are used in a moment but if you were to add a group onto this page you can store elements inside of it so your group almost acts like a container it just houses any elements and then within the group you have the ability to also update its layout style so you can set it to be a row and then you can just position where you would like all of the elements to sit within that group and one thing i will just mention is that the container alignment option is only provided to groups that are listed as a row if i was to update our red group here to be a column what you'll see is that we no longer have the container alignment option and that's just because instead of positioning all our elements horizontally we are stacking them vertically so you won't actually need as much control over where the elements are aligned within this group the only option you will have is the ability to horizontally align the overall group on your actual page so if i wanted to center our red group in the middle of my page i could update its horizontal alignment to be in the center and then let's say i want to center my buttons within my red group here i can click on the button itself and update its horizontal alignment to also be in the center but if i was to click on my red group and update this to be a row you'll see that we now have the ability to use the container alignment option as well and on top of that we can also move the position of the red group in our page using the horizontal alignment option and now when it comes to creating a truly responsive experience within bubble i have one particular insight that i'd like to share right now that will be applicable to anything you build within your application to make it responsive across every single device so at this point in time if i wanted to see how this application looks across different devices what i could do is head to what's called my responsive tab here and it's going to show me a preview of what this page looks like across different device sizes so if i wanted to view what this looks like on a desktop i could click this and it's going to make the page 1200 pixels wide and if i wanted to view what this page looks like on the smallest possible mobile device size i could click on the 320 option and what you'll see is that some of our buttons here are being cut off on the side and that's because we'll need to update some of the responsive settings for our elements here but what i also love is that you can manually just drag this out to see how your application is going to respond across any custom device size but let's say we want our red group here to expand and retract across the full size of our page regardless of what device we're currently using thankfully you have the option to update the responsive settings within your editor here so if you click on the red group you'll see within your element inspector here which is this menu you have the ability to customize the width and the height of this element and by default what you'll see is that this element is set to be 400 pixels in width so that 400 pixels is just the size of our red group across the page and because this element is currently checked to be what's called fixed width it just means that it's always going to remain to be 400 pixels at any given time regardless of what device a user is using so if a user was to view this page on a desktop this group is going to remain at 400 pixels whereas if they were to view this on a mobile it's also going to remain at 400 pixels and so right now this group is not responsive and in order to make it fully responsive what we're going to do is we're going to unselect this option to make it a fixed width and what you'll see is by default it now has a maximum width of infinite which just means it's going to expand across our page regardless of the size of it so you can see that it is now fully responsive the only other thing i will point out though is that the minimum width of this group is still currently set to 400 pixels and so that just means that at the 400 pixel mark on our page it's no longer going to get smaller which is why you'll see our buttons are still being cut off there so if i was to set the minimum width here to be zero and the maximum width to be infinite what you'll find now is that regardless of the overall page size this group is going to be fully responsive so if i was to drag my group down what you'll see is that now it can get as small as it possibly wants and it's going to move the elements inside of it the other thing i'd like to point out is that if i wanted this group to fit the height of my buttons that sit within it by default bubble has selected this option here to fit the height of this element to the content within it which just means that the overall group is going to fit to the height of any elements inside of it so our buttons here but by default it has a minimum height of 250 pixels and now that's just going to be the distance from the top to bottom within our red group and so if i was to set the minimum height here to be zero and if this option is clicked that ensures that the group is only going to be as high as the elements within it it's now going to create a perfect responsive experience for the height of our overall group so now you'll see that not only is the width fully responsive regardless of the user's device size but the group that the element sits within is also going to adapt to the elements inside of it and now one other thing i'd like to show you is how you can leverage margins within your application so margins essentially just allow you to add spacing within your app so at the moment you can see this red group sits at the very top of my page which might work well if we wanted it to be a navigation menu but let's say we want to push that down on our page the way we can do that is by using margins so within our layout tab here if we scroll on down you'll see the option here to add in margin around this particular element that we've selected and what i can do is i can choose to add in how many pixels of margin i'd like at the top the bottom the left or on the right so let's say i wanted to add in 30 pixels of margin at the top what you'll now see is that this group no longer touches the top of my page if i wanted i could also add 30 pixels of margin at the bottom and then 30 pixels on the left and 30 pixels on the right and now what you'll see is that regardless of my page size this group is never going to touch the borders of the page itself just because it has a nice margin positioned around it and as i mentioned if you were to take away anything from the second part of this module it's that when you're building an application and you want to make the elements on it fully responsive i'd recommend putting them within a group element so it acts as almost like a container or a house for all of your elements it'll not only give you full control over where you position those elements within the group using the container alignment option but by setting the minimum width of a group to be zero and the maximum width to be infinite it allows this group to be fully responsive across any device of your choosing and the same applies for the height of this group so if you set the minimum height to be zero and the maximum to be infinite it's just going to fit nicely around any elements that sit within it and then finally if you were to just add in a margin onto your group it just ensures that it will never touch the borders of the page or any other elements below or above it and so at this point what i'd recommend doing is even just jumping into your bubble ui builder here which is the editor i was working in at the beginning and i'd recommend just adding a couple of different group elements onto the page within the next module though i'm going to be explaining the difference between all of your different elements so perhaps once i cover the difference between those i just recommend pausing the tutorial and then experimenting around with what you can build and how you can structure the page as i had mentioned the new bubble responsive engine that uses the flexbox framework is a very modular experience so it's very much like you're using building blocks to put your application together and that's why i actually choose to color my groups when i add them onto the page i always picture them as almost like a lego blocks on my page so that way i can see where they sit and connect within my overall application at this point though i just want to jump back into my notion checklist and just tick off that we've finished walking through an overview of the flexbox responsive engine which just of course allows you to create truly responsive applications across any device and the main thing to take away from this module was understanding the difference between the page layout options so as i mentioned you can choose between the row and the column option in most cases i would set the page to be a column and then of course if you wanted to add any elements horizontally across your page i would add a group and set its layout to be a row and within that group you'll have the ability to update the container layout to just determine where those elements are going to actually horizontally sit within that group and then finally i'd also covered how you could update the responsive settings of your width and height of elements to just make sure it is responsive across any device a user uses within your application and then from there we just wrapped up by covering how you can add margins onto your page to just ensure that no elements overlap or touch each other and they're spaced out quite nicely within your user interface this module in our series is going to explain the difference between all of the different element types you can utilize when creating the visual interface of your own bubble application once we have an understanding of how we can design the actual structure of our page using the flexbox responsive engine the next thing i just wanted to cover in our tutorial today is the ability to actually design the user interface of your product and this can be achieved using what's called elements within bubble and so elements are the things that your users will see and interact with throughout your application so these can be things like text images buttons or even maps the list just goes on and on and now while elements are a pretty straightforward concept to understand i just wanted to make sure that i took the time to explain to you the different types of elements you can use within bubble because this of course will influence the way you actually build out your product and so what i'm going to do is jump over into a bubble editor that i have prepared here and the first thing i'd like to point out is that on the default index page that bubble provides for you within any application you create if you were to hover over any of the items on the page these are all individual elements so if i was to click on this text here what you'll see is that this is a text element then you can see that there is an image element here a button there and then if we were to scroll on down you can see there's other elements like icons or even input fields and now one thing i'd like to point out is that when you're working with elements on your page if you were to double click on the element itself it will open up what's called the element inspector so this is where you can customize the settings of the element itself so in this case if i was to add some text onto my page if i wanted to update the text that's displayed here i could do so within my element inspector so i could say that this is some test text and you'll then see that that will be reflected in my application in real time and the same goes for images and buttons so let's say i wanted to update the text within this button i could update this to say the words click here and that would also be displayed within my application and now within your element inspector you'll also have the ability to update the style of your elements so for things like a button you can update the color the roundness of the edges and this can all be controlled within the styling settings here and now i'm not going to jump into too much detail about this styling right now just because i will have a dedicated module coming up that walks through everything you need to know about customizing styles but for the time being i just wanted to walk you through the different categories of elements you'll have access to when you're creating a bubble app and so if we were to look over to the left hand side of our application you'll see this long menu here that displays a full list of elements i'm just going to move my head to the other side of the page for the time being just so we can focus on the different categories of elements you'll have access to and so what you'll see is that as i just mentioned all of the elements are broken into different categories and these start off with what's called your visual elements and so visual elements are pretty self-explanatory these are the elements on your page that will visually bring it to life so these are things like text buttons icons images or even videos or maps so anytime you'd like to add something visual into your application you'll do so through this particular element category and what i love about visual elements is that you not only have the ability to add what's called a static information into these elements so if i was to click on my text element here i can choose to add in a static value that will remain the same at all given times so regardless of who was to view this application this would always display the word test text but what you'll find is that if you'd like to create what's called a truly dynamic application which just means that this text might change to particular users who are logged in with certain settings you have the ability to set a dynamic value here instead of a static option and i'll be explaining this in more detail throughout a later module in our tutorial but i do just want to give you a quick little insight into how this works and so if i was to click on the value of our text within our element inspector here you'll see that i'll have the ability to insert dynamic data and this just allows me to replace this static text with any values stored within my database so let's say i wanted to display the name of the current person who's logged into our application i could start by typing the word hello and then i would like to insert their name so i could click on this option here to insert dynamic data and then i'll need to choose a data source for this text and in this case i mentioned that i'd like to display the name of the current person who's logged into their account and because my user is a data type in my database and i have a data field stored within that that registers a user's name i can select from the current user here and i can choose to display their name and now whenever someone logs into our application it's going to say the words hello followed by their name if you would like instead of even displaying things like the current user's name you can perform a search through your database for literally anything you have so if i have a myriad of different data types i can reference any data or entries that i have stored in my database for that and so the possibilities truly are endless in terms of the dynamic experiences that you can create within bubble and i'd just like to point out that the same thing will also apply to image elements and so if i was to add an image element onto my page here it's currently just sitting over the top of my text but you'll see i have the option to upload a static image which will permanently remain the same for anyone viewing this particular page or i could insert dynamic data and display a dynamic image and so if i wanted to display something like the current user's profile photo i could once again choose to insert dynamic data and display the current user and then their profile photo data field that i have stored within our database and once again of course if you wanted you could perform a search through a database for literally any other data type you have and pull any existing information stored within your database and now what you'll also find is that when you're working with visual elements bubble provides you with a nice list of elements from the get-go however if you ever find that you need a particular element that bubble does not provide you can always choose to install plugins which will allow you to add additional visual elements to your application and a good example i have here today is that within my plugins library i have a plugin here which allows me to add charts into my visual elements and now i'm going to be covering everything you need to know about working with bubble plugins at a later point in our tutorial but the one thing you should know when you're working in bubble is that there's a very few things it can't do and that's because if you find yourself running into a dead end with bubbles default features and settings you can always extend the capabilities of your editor using plugins and so as i mentioned i've installed a plugin here that allows me to add charts onto my page so if i was to jump into my design tab here i'm just going to delete this image i've just added what you'll see is under my visual elements i now have the ability to add line and bar charts onto my page so i can choose to add a chart element wherever i would like and of course within this chart i can completely customize the visual settings of it within my element inspector here and if i really wanted i could pull data from my database to visualize some calculations so for instance if i wanted to display a count of all the users on whatever day they signed up i could perform a search through my database for all the users and that would dynamically pull all of the data i have stored but i'm not going to go into too much detail about that now because i'm just going to move on to the next category of elements you'll find within bubble and this category is referred to as your container elements and for the sake of this tutorial i might just open up a new page here just so i have a blank canvas to work on and now on this page i just want to quickly run you through a list of all of the elements you'll find within your containers category and so unlike visual elements containers aren't necessarily a visual element that your users will constantly interact with within your application instead they're used to function as exactly what the name suggests so because they're a container they allow you to house a series of elements within them and now within our course today i actually have a dedicated module focused on just container elements just because these are essential when you're creating an application within bubble but right now i just want to skim over the purpose of them so then i can explain the next category of elements but you might remember from our previous module i had added a group element onto my page and within that i had updated the color of it so i removed the style and i added a background color on the group of red and then when i was showing you how you could update the layout settings of your page i had added two buttons into your group element and that was a perfect illustration of how container elements work so container elements are used to store a myriad of elements within them and then it gives you the ability to control their position or their functionality from a higher level so let's say if i was to add two buttons into this red group here and i wanted to control where those buttons lie on my page i could click on my group and head to the layout settings of this and if i was to update the layout to let's say be a column for now because i want to stack these on top of each other i could update the horizontal alignment of this group to sit within the center of the page and what you'll see is that because both of these visual elements sit within our overall container they will move and respond based on its behavior and this is essential particularly when you're working with the new flexbox responsive engine what you'll find is that when you create the structure of your page itself you'll use a myriad of different groups that house different visual elements and that'll just allow you to break your page into different sections but one of the other main purposes to using container elements like a group is that if i have a series of visual elements within them and let's say i would like to hide those elements on the page until a certain requirement is met instead of creating what's called a condition on every single element what i can do is choose to hide this particular group on our page until a certain point in time and any visual elements that sit within that will match its behavior so if we were to get technical and use the right phrasing for it this red group here is referred to as the parent and then these two button elements will be the children that lie within the parent and so if i did want to let's say make this element not visible when our page is loaded i could head to the layout settings of my group and unselect that i don't want this group to be visible when the page is loaded and now if i was to view a preview of this page here not only is that group not visible on our page but because our two button elements sat within that group they have followed the exact behavior of its parent and of course if i was to jump back into my editor and select that i do want this group to be visible on page load i could then jump back into my preview refresh the page and what you'll see is that because our group is now visible both of my buttons that lie within it are also now visible too and that is just a quick sample of what's possible using a group as a container there are a whole series of different container elements that will allow you to expand the functionality of your application and these include elements like repeating groups and pop-ups and now i am going to be explaining these in as much detail as i possibly can with some real world examples in a later module but i do just want to touch base on the repeating group element right now just because this is probably one of the most important elements within bubble itself so if i was to add a repeating group onto our page what you'll see is that it looks just like a list of cells so if you've ever worked with a tool like excel or sheets this might look quite familiar and the purpose of a repeating group is that it just acts like a series of group elements stacked on top of each other the key difference to a repeating group though is that it allows you to pull and display a list of dynamic data that's stored within your database and now while that might sound very confusing it essentially just allows you to display a list of things stored within your database so if i was to give you an example of when repeating groups can be useful let's say we were creating an instagram clone application and on our homepage of our instagram app we wanted to display a list of posts published by all the creators on our app in order to display a feed of posts you would add a repeating group element onto your page and then you would update the data source of your repeating group to pull data from your database that references all of the instagram posts you would like to display and once you've configured a data source you can add a series of visual elements within each cell of the repeating group so if we wanted to display a list of instagram posts published in our application we could display the actual image itself so we could add an image element into our repeating group you could also add the caption of the post so you could add a text element into your repeating group and what i love about repeating groups and i'll be sure to show you a real world example of this in a later module but essentially all you need to do with a repeating group is design the visual elements in the first cell and then bubble will automatically pull the remaining data from your database and display it across the remaining cells and if you'd always like to display more than four entries you have within your database you can update these settings here so you can just give it an infinite number of rows so that way if there's a thousand posts within your instagram application a user could just continually scroll down and view all of those 1000 posts and so that's why you can start to see why repeating groups are such an essential element within bubble because whenever you're building an application in this day and age what you'll find is that most apps do require a list of things to be pulled from the database so if you ever want to display things like a list of posts or even a list of users or a list of things like properties you have stored within your database a repeating group element is exactly what you'll need to bring that functionality to life and as i mentioned i'm not going to dive too deep into this now just because i do have a dedicated module later on that's going to explain everything you need to know about repeating groups but one of the last things i just wanted to cover within our elements section of our tutorial today is just the next category of elements which is referred to as your input forms and again as the name suggests these are relatively straightforward to understand inputs essentially just allow you to give users the ability to input information which you can then store in your database and in another module later on we're going to be building out a user registration page from scratch and on that page i'm obviously going to want to store the information of a user so things like their email their first name their last name and a password and so in order to allow the user to store that information i'm going to need to add a series of input fields on my page which will allow them to type in those fields so if i was to just preview my application here what you'll see is that in the top left hand corner here i have the ability to type in this particular field and of course if we were to build out a workflow later on i would also have the ability to save this information in my database and i'll be explaining how we can do that in a moment but when it comes to working with input fields there's a few things i'd just like to highlight the first is that within your element inspector as always you'll have the ability to customize the settings of this input field and when you're working with an input field you'll see there's a couple of different options in terms of how you can customize it the first is that you'll have the ability to add what's called placeholder text within your input so this is the text that just displays in the input until someone types within it so if i wanted to prompt someone to add in their email address into this field i could update the placeholder text to display the word email and now if i was to preview my page once again you'll see that the word email is displayed until i click within this field and when i start typing it's going to replace that text the next field you'll see though is what's referred to as initial content and so initial content is similar to placeholder text only this value will be permanently stored within this input field so let's say within our application a user has already registered an account and in one instance we might be building out a user settings page where they can review all of the information stored within their account instead of just providing them with a blank input field what i'd like to do is actually fill this input field with their existing email address that they have registered and i want that value to permanently stay within there i don't want this to be like placeholder text where it's only temporarily displaying a value until a user clicks within this field and so if you'd like to display some information under your initial content field very similar to our text elements we'll have the ability to insert dynamic data and so in this case let's say i wanted to display the information of a user's existing email address i could choose to insert dynamic data and i could display the current user their email address and if a user is logged in this will now display their email address but if a user is not logged in it's just going to display our placeholder text here which will prompt them to add in an email address and now the other thing i'd just like to show you is how the initial content field functions so i'm just going to preview my application and i'm going to log in as a user who already has a registered email address and now over on the preview of our page here what you'll see is that the initial content is displaying the value of my email address but unlike placeholder text if i was to click into this field that value is going to be permanently displayed and if i would like i could choose to update this value so let's say my email is test2 gmail.com initial content allows me to actually edit the value that's stored within this field whereas placeholder text as i've shown you only allows you to display a temporary value and the last few things that i just want to point out when it comes to working with input fields is this field that refers to the input content format and this is quite important to understand when you're working with a number of different data field types so let's say because we're storing the value of a user's email address for this particular input field here i'm going to need to update the content format to be structured as an email address so that way bubble knows that this needs to be a valid email address in order for it to process the value stored within it and let's say i would like to store the value of someone's password i'm going to need to update the content format to be a password and if you ever needed to store the value of a number because in some cases a data field within your database might be a number so if you're storing something like a user's age you just need to update the content format here to be an integer which is referred to as a number and you'll also find that there's a number of different content formats for things like addresses percentages currencies and even dates so it's always important to make sure that the value of your input field matches the same value as the data field that you'd like this to link to in your database and the very last thing i just want to cover about working with particular input fields is just the ability to update the name of them so let's say on your page you had a series of different input fields and then you'd like to create a workflow which i'll be explaining to you in another module and within that workflow if you needed to reference a particular input field it's going to be important to know which particular field to point to and so that's where the importance of naming conventions comes into place and so within your element inspector here you'll see that this element has a name associated with it and at this point it's just referred to as input email because it's pulling whatever name i've added into my placeholder text into the name of this element but let's say if i'd like to customize the name of this so that way when i'm building out a workflow i know exactly which element to refer to what you can do is actually just click on this field here you can remove the text and you can choose to update it to whatever you would like so now i'm just going to make sure this is called input email and then when i create a workflow later on if i wanted to store the value of a user's email i just know that i need to refer to the input email field on my page and that's everything you'll need to know about working with inputs within your element inspector the only other things i'd like to point out is that within your input field you'll see there's no shortage of different options that you can work with and i'd recommend just taking the time to experiment with all of the different types of input fields so there's things like check boxes drop down menus search boxes so you can even search through something in your database there's date time pickers there's things like picture uploaders so that way a user can upload a picture into your database there's certainly no shortage of ways users can add data within your application and similar to your visual elements it's also possible to install further plugins which will give you the ability to access different input fields that bubble doesn't provide by default so that way you can store data in a more unique way and so you should never find yourself being restricted or limited to the input fields you can work with when using bubble but that's everything i just wanted to cover when it comes to input fields the only other thing i just wanted to touch base on within this particular module in our tutorial today is the concept of using what's referred to as reusable elements and now in my opinion this isn't completely essential to understand when you're first getting started within bubble it's a slightly more advanced feature but it can definitely be helpful in some instances and the best way to explain the concept of a reusable element is that it is essentially just what the name suggests so let's say within your application you want to display a header menu across every single page what you could do is you could add something like a group to the top of your page and then you could add things like a logo some text or even some buttons but when you're creating that across every single page in your app you'd need to rebuild or copy the exact same header menu and paste it across every single page and if you've got lots of pages within your application that can become quite time consuming and so this is the premise of reusable elements they essentially just allow you to build an element once and then you can reference to display that element wherever you would like across any page and if you need to make changes to that reusable element and you'd like it to reflect across every single page you only need to change the element once and then it will automatically propagate across every other page that uses it within your application and what you'll actually find is that by default bubble actually provides you with a header and footer reusable element so if i was to choose to add the header element onto my page what you'll see is that if i was to just move my element inspector out of the way this element provides me with a series of visual elements and these are housed within a group only i don't have the ability to edit all of the elements on this particular page in order to make changes to this reusable element i need to edit the overall group of elements itself and you can access that through your page drop down menu here so if you would open up your page drop down menu you'll see a list of not only all your pages but below that a list of all your reusable elements and so if i wanted to update the header element i would click on this and this is going to take me through to almost like a separate page within an application and so this is where you can start to see all of the different elements that are linked within this one reusable element so let's say i'd like to update the color of our button for our sign up button here if i was to just update this style here to be the outline button option it has updated the styling within our reusable element here which means if i was to jump back over to the page i was working on what you'll see is that change has automatically been applied to this reusable element that i've added onto my page and that is essentially the power of working with reusable elements they allow you to essentially work on one particular element and then universally control how it's displayed across any pages where you'd like to reference it and as i'd mentioned this can sometimes be a little bit more of an intermediate to advanced feature although the most common use case i find for using reusable elements is the ability to add a header and footer menu that's consistent across all the pages within your app and to be honest that's everything i want to cover when it comes to working with elements within your bubble application as i had previously mentioned i recommend just taking the time to add each of every single element onto your page just to see not only how it looks by default but also what settings you have the ability to configure and customize within the element inspector and of course as i'd also alluded to i'm gonna have a dedicated module that's gonna walk through everything we need to know about working with container elements there's still so much that i need to cover for those so i just wanted to make sure i had a dedicated section of our course today to explain everything you need to know if i jump back over into my notion checklist here i'm just going to tick off that we've finished learning about the different types of elements within bubbles editor and of course throughout that process i covered everything you needed to know about working with visual elements container elements input elements and also reusable elements within this module we're going to learn how we can edit and customize the styling of any elements we add within our bubble application now that we know the difference between all of our different element types what i'd like to do is just explain how you can update the styling of each element and so this will just allow you to visually enhance the way you'd like to display and design your application for end users and thankfully it's a pretty straightforward concept to understand and the best way to explain how styles work is by of course just jumping over into my bubble editor so i can show you a real world example over on my page here let's say i'd like to add in a text element i'm going to head to my visual elements tab here and i will add our very first text element and what you'll see is that by default this text element looks quite bland what i'm going to do is just first of all add some text into this field here and then let's say i'd like to update the style of how this text is going to be displayed what i can do is within my element inspector here for my text element you'll see we have the option to access our styling menu and if i was to open up this drop down menu what you'll see is a series of different styles that we can choose from the bubbles already pre-built for us by default so let's say if i wanted to make this heading a h2 dark style font i could choose to select that and it would automatically updated the styling of this text here and as you can now see it looks more like a heading element and that's because it now is and now as i mentioned bubble provides you with a list of tons of pre-built styles that you can choose from but you'll also have the ability to edit styles or even create your own custom styles if you would like so let's say you wanted to edit the styling of your h2 heading throughout your application what you could do is select to edit the style of this and it will open up a new menu in which you can choose to customize the style heading itself so you could change things like the font size the font itself its alignment within the element or even its color and border and this gives you a whole series of configurations and settings that you can play with and one thing i will point out is that the main benefit to using styles is that styles will consistently update across your whole application so let's say not only on my page here do i have my h2 heading but if i was to have text elements across any other pages in my app that reference the h2 dark style heading and if i was to want to edit this particular style to update let's say something like the font itself because all of the other text elements across the other pages in my app reference this exact same style it's also going to automatically update the way that they're displayed and they will also reference any of the changes that i make here and so that is the main benefit to using styles within your bubble application and one thing i would like to point out is that although there is a whole suite of different styles you can add to things like your text element you also have the ability to create your own custom style so i could give this a name like main heading and then i could choose to create this style here and then if i was to edit this it'll give me the same capabilities as before but in this instance i might want to update the actual font size here i might like it to be 36 instead of 22. if i was to then jump back into my design tab here what you'll see is that the text within this element has been updated because the style it references has been updated and if i was of course to leverage this style across any other page within my app it's going to be the exact same configurations as this particular element but what happens if you'd like to just edit the styling of one particular element and not change the styling of any other elements that are also linked to this style that is possible by choosing this option here to remove the style of this element and what you'll see is that we currently now have no style being referenced for this element and we're now given a menu that allows us to completely customize this unique element on our page and this page only so if i was to update any of the settings here so let's say i want to update my font size to be 24 it will only update the font size for this specific element not any other elements using the previous star that this element had referenced under our style menu because at this point this element is disconnected from any other styling within our app so this is just going to be truly unique to this specific element and so what i might like to do here is just center this text within the actual text box itself and if i would like i could choose to even underline this text and set it in italics and that will just update to reflect across this element only the other thing i'd like to point out which is slightly different from styling is of course our layout settings for this particular element so although the styling menu allows us to customize the way in which our text looks inside this elements box what we also need to do is create a way to make this overall element responsive across our whole page so we want it to look nice within the overall page not just within its own box and so separate from our styling underneath our appearance tab what we could do is open up our layout tab here and this allows us to control almost like the styling of this overall element on our page so just things like where it's going to align and sit on our page as well as its own responsive settings and so let's say i want to center this whole element within the center of my overall page i could update the horizontal alignment to be centered and the reason i can do that is of course because i have our overall container layout set to be a column which because i'm stacking items from top to bottom it just gives us some additional settings to customize where this element is going to sit horizontally and then finally below our alignment setting i'm just going to need to update the width and height which is just going to create our truly responsive experience so as i've mentioned before i'm going to unselect that this element should be fixed with i'll set the minimum width to be 0 the maximum width to be infinite and now what you'll see under my responsive menu is that this element is going to be responsive regardless of my overall page size just because it has no minimum width and no maximum width so it's just going to respond to the user's device regardless of its size and then finally i would also just like to update the height of our element so under our layout tab once again because i have this option selected here to fit the height of this overall element to the content within it the content being our two words here what i can do is set the minimum height to be zero and this overall element is just going to collapse there to just ensure that there's no empty space below the actual text itself and now that's how you can not only update the styling of an element as well as the layout settings but one thing i would just like to point out is that stylings are applicable to every single element not just text elements like i've shown you right now so for instance if you'd like to add something like a button onto your page you can update the different stylings for it which bubble has of course given you some pre-vetted styles here by default and of course that just allows you to then reference this particular style across any other button on your page that uses the same style formatting and stylings are also applicable for things like containers and input fields you'll have the ability to customize different styles within every single different element type and so what i'd recommend doing to understand how styles work is just to add a bunch of different elements onto your page and play around with the different types of styles and it'll just give you a better understanding of how you can design different styles of elements which users will interact with in your application from here though i'm just going to jump back into my notion checklist and it took off that we've finished understanding how we can edit the styles of elements within our application and throughout that i'd also explained how styles actually work across different pages so if you have two different types of the same element across two different pages and they reference the same styling those elements are going to be connected through the one styling format and then if you were to make changes to that one particular styling format those changes are going to be reflected across both of your different elements and that is all i have time for within our youtube tutorial today as you can see there's still so much that will need to cover throughout the rest of this full course and if you'd like to get access to that you can hit the link in the bio and you'll be able to stream the whole thing for free as i mentioned at the start of this tutorial this is a completely free course so that way you can quickly get up to speed with everything you need to know about using bubbles no code platform within the rest of the full course i'll be taking a deep dive into some essential features like using custom states page parameters option sets and even how you can publish your actual application onto your own custom domain so as i mentioned if you want to start streaming the full course for free just hit the link in the description and it'll take you right through to the page but in the meantime i just wanted to say a massive thank you for taking the time to watch this tutorial up to this point if you'd like to keep an eye out for any additional bubble resources that i share i'd recommend hitting the subscribe button below just so that way you're the first to know when i drop any new resources that will help you on your bubble journey [Music]

Channel: Building With Bubble

Views: 118,704

Keywords: Bubble, bubble.io, no-code, no code, no-code development, visual programming, buildcamp, coaching no-code apps, makerpad, adalo, webflow, zapier, no-code tools, app development, minimum viable product, MVP, Bubble no-code, software development, Bubble beginners course, Bubble introduction course, Bubble database, Bubble responsive design, Bubble workflows, Bubble design styles

Id: IWdDr54qE4A

Length: 102min 55sec (6175 seconds)

Published: Wed Apr 20 2022