Introducing Bubble: A Beginners Tutorial 2024

hey guys I'm Greg founder of Bill camp where we teach aspiring Founders how to build and launch their startups with bubble back in 2017 I was super curious about building a startup I didn't really know how to code I could string together a few things but I discovered bubble back in the very very early days when no code wasn't really a term and I actually went on to build a successful two-sided Marketplace built entirely on bubble and strip for payments and I managed to raise venture capital i went on to build a successful company now that was a long time ago look at where we are today um and basically through this course I really want to dig under the hood answer your potential questions show you around the editor and show you just what is possible with the power of bubble so let's jump into the first module and let's talk about what is bubble and what can I actually [Music] build [Music] so the first thing to understand is that bubble is producing code so when you hear the term no code I don't feel like it's a very uh suitable label for what this is when you hear the term you might think there's no code involved what it actually means is you don't have to write the syntax in a code editor bubble does that for us what are the benefits of this well the benefits of this is that it is code that is shared amongst a user base of millions of users and their companies that they have built so that code is clean that code Works already well okay so when you hear the term no code it is we it's the process of creating our uh software where we don't actually have to write syntax it's done for us can we inject code into bubble yes we can bubble is basically a blank canvas super powerful it's a one-of a kind there's no no other code there's no other no code startup Qui like bubble that combines everything from the visual design to the data to the logic to the apis Allin one okay so it's a super interesting and Powerful product and it allows startups and their Founders to build their startups basically within a matter of weeks or two months depending on how technical you need it to be okay and it's comprised of three some people would say four core areas and we're going to dive into all these core areas in detail and have a look at how we would build something like a SAS product a two-sided Marketplace a financial app productivity app uh and so forth and guys you can do all of these things as I said Bubble spitting out code you can build any kind of startup you want all right um but we will talk about the limitations because the limitations are more on the infrastructure side like Airbnb wouldn't run on Bubble because bubble is an their own infrastructure layer in a box all right ABNB would need something uh would need their own infrastructure team so that's the kind of difference between no code and if you were a coder working at a company if you plan on scaling to Millions across multiple regions you can't stay within that box however you can easily run a company up to 100,000 users um you know Bill Camp has almost 20,000 users now no they're not always concurrent users um um but you know I manage those users absolutely fine would I ever see a need to move off a bubble for what I do um education in this space courses absolutely not you know I've got I've built like a mini version of udem me um but I can scale to hundreds of thousands of people if I wanted to okay so the four core parts are basically the design side so you're you're able to drag elements onto a page such as an input box um a container buttons that kind of thing you can style them to your heart's content you can work within your own design system um and you can string these together to build your interfaces right the things that people interact with the dashboards the the web pages um authentication that kind of thing then you have the data so bubble has um a SQL database built in there's nothing you need to do this is what I love there are a few noode startups coming through now who want to separate the database from the interface uh from the workflows I actually don't like that I prefer everything to be kind of um in a box per say you create your app you name it and your environment is up and running now if you're a coder that wouldn't be the case if you're a coder there are dependencies to install it might take you a full day to get up and running uh it's it's far more difficult and far more technical to understand how everything pieces together but with bubble one click you're ready to build right so you can build little MVPs ideas within a day basically uh and we'll go through how to get started shortly so you have your yeah so you have your visual application designer or editor um and you can piece together all the elements you need to make an interactive user interface the database side of things that might be slightly more challenging to understand because there are relationships but the way to think of a database within bubble is much like an Excel spreadsheet with different tabs acoss the bottom so your first spreadsheet tab might be users with user data names addresses dat of birth creation date in terms of the user account um and then there might be another tab that has products you know and then there's a key that uh that creates a relationship between a user and a number of products and products would have an image that price that kind of thing um or instead of products it could be projects instead of of projects it could be listings and we're going to dive in soon and have a look at that in more detail and bubble gives us a visual representation of the database next we have the logic layer okay so that's the workflow so H when I use interacts with a button or anything on the page um how do we make it talk to the database how do we make it do things how do we make it change States how do we make it change visually navigate to different pages do calculations and that's that's a logic layer and this is one of the most powerful features of bubble this is what bubble solved very early on and this is why bubble is a unicorn in the no code space it is mega mega powerful and yes if you are a coder and you know JavaScript you can inject your own JavaScript functions to run whatever you like within bubble as well and the last thing is apis so apis are a way for different um software companies to talk to each other so a payment provider I'll always use is stripe the biggest payment provider for startups in the world I'd argue probably the biggest startup uh for payments across all sectors okay and they allow basically me to take payments subscriptions uh to the nth degree the nth detail from customers and they deal with all of the the banking side of stuff the infrastructure so stripe solves the infrastructure and I just use their tools and services to build the kind of payment services I want within my site okay so that's one example of an API another example of an API is for instance chat GPT you can use the backend services to build your own version of chat GPT all right so it's a way for your bubble app to talk to external service providers and what can I build in bubble what can I build well I mentioned early on that you can basically build anything that's not to say you would build build anything and that's a distinction okay I would always start if I think about the early days of Airbnb they would have Maybe started with a WordPress Air B and breakfast think about the early days of notion or the early days of uh Uber Eats it would have started a lot more um simpler and basically they would have had a head start of the competition if they started with bubble because it allows you to build versions of Airbnb Uber uh you know on demand services allows you to build social networks or social network functionality to incorporate into your app it allows you to build marketplaces CRM sasps finance apps AI apps anything there's an API that exists as well the chances are that you can use it in bubble so you can tap into for instance I'm in England and I can tap into Transport service apis and build my own mapping application for people to get from A to B such a city mapper if you in the UK um around the city so in terms of what are the restrictions it's more on the infrastructure side as I mentioned earlier bubble is an infrastructure layer it takes all the complexity out and it uses natural language for you to be able to build your app which is a far more easy to understand all right but it's very powerful as well we're going to have a look at that so if I wanted to build something like sales Force well I can do that I can do that if I just understand what kind of data Salesforce or the data structure Salesforce uses and the interactive element I can build a version of Salesforce but Salesforce is a massive company probably with thousands of developers um so it wouldn't scale to the sale for size um and that's the difference same with notion you know I can build productivity apps I can build crms um I can build two side of marketplaces is a is a great um example of what people have been able to build successfully in bubble myself included um and we're also going to look at you know what what do all applications have in common because most applications are actually very similar very very similar it's a way for users to sign up to something there's authentication there's the database side the data structure resetting password privacy uh conditional statements they're actually all very similar and they differ in certain ways but the marketplace you know is kind of similar to Uber Eats on demand Services very very similar the data structure will you'll be surprised how similar data structure is Uber Eats will have a um they will have users they'll have customers they'll have drivers they'll have restaurants within the restaurants they'll have a menu within the menu they'll have items um so not not that difficult and then as I mentioned earlier with AI can we build a version of chat GPT which is a prompt and an output we I've got another video on YouTube where I demonstrate how to build um like a recipe app in half an hour that's the power of no code we don't have to mess around with code syntax and and that kind of thing we can just get going just wanted to reiterate the app composition side and this this isn't just no code but this is all apps so what do all apps if we zoom out from a bird's IV what are the what are the silos involved uh within building so we have the front end that the user interacts with in the browser okay that's the app design that's where the the designs are and and the information changes um because we have static and we have Dynamic elements and we'll look at how you know users can upload their image uh how they can see and not see certain things based on their role or their POS uh permissions within a particular company uh all apps have workflows you've heard of crud create read update delete that's what we can do in bubble right create data uh display that data in in a myriad of different ways we can edit that data and we can delete that data so when people talk about the distinction between a website and an application websites don't really have crud applications do this is kind of the difference where a website is more um showing static information an application shows Dynamic information information that can change based on user behavior and of course we need somewhere to store that data which is in a database in terms of what what is the framework to an application and earlier on I mentioned all apps have very similar things okay so when you loar bubble it gives you the power and opportunity to build kind of any kind of app most people then they learn bubble and they choose to build a Marketplace or a SAS app or a fintech kind of service or an AI app uh or a web 3 kind of app and basically if you have a core understanding you know you can go off and build any kind of app just like that so all apps need authentication they need users people to interact with they need create read update delete this is what an app is searches becoming far far more important these days so users need search you need email for a way to interact with people they sign up you send them a welcome email and we'll talk about what are the various API services available and API services like email services are becoming very straightforward these days all of them or most of them now have no code editors themselves payment providers such as stripe you've obviously used PayPal in the past as well you can integrate PayPal so a person doesn't need to know their card details they can just uh it's called oor you can just authenticate them through a button click and PayPal does the rest okay uh you need admin dashboard so you know what's going on within your app uh and within the admin dashboard you need account management so you can manage your data and view your analytics so we're going to jump into the bubble editor very shortly and look at the following we're going to look at you know how to set up a canvas containers visual elements we going to look at how we organize our visual elements and basically an element tree going to have a look at Styles super super important this is a sort of a specialty area um I work with Design Systems a lot within bubble I'm actually shortly presenting in New York at bubble con 2023 we'll be looking at reusable elements how to reuse code with basically an industry term called dry do not repeat yourself this also applies to no code uh build once and use everywhere and then you can edit from one area responsive design also big area uh that I focus on as well as SEO so if we jump just into the editor all right let's just have a quick look around so up in the left hand side if I click on this dropdown um we can see that we have pages and we have folders so we can create as many pages as we like and Link off to those pages we can also send data between Pages down here we have things like reusable elements okay so if I just show you changing a page I've got a page here just to demonstrate input forms which we'll get to I've just changed my page and I can also go to my reusable elements now the beautiful thing about reusable elements this is just a pretend company called collab reusable elements means that they are kind of like their own Pages where you can build function we can build design and functionality conditional statements custom States and then you can just take that module and drop it into any page and have that run as it would the good thing about a reusable element is that again you build in one area uh and you just maintain it in one place but you can display it and drop it on any page so those are the pages up on the left just going to go back to index down the left hand side when I talked about those big silos or core components of what an app is well this is where they live so we have the design side we have the workflow side which is blank um but if we did have workflows these would be little blocks where we basically through a step-by-step process instruct for instance how a person should sign up and that would be very easy actually um let me show you an example so this is just a Pages loaded event and let's just pretend it was a button click but if it was a button click to sign up we would just bubble gives us all of these options down here in terms of actions when a button is clicked click what should happen so we can say sign a user up and bubble have done the code for us so all we need to do is connect the inputs where do they type their email input and the option would show appear under an input where would they type a password the option would be down here and then bubble gives us various options such as remember their email address maybe we have an input field where we ask them what their first name is or what their company name is or we can also attach the data here and what happens when a user clicks the button is that bubble saves this data to the database and you will be able to actually see it visually in your database let's have a look at the database so here is a user table basically um Bubble calls them data types and here is what looks like an Excel spreadsheet and this is where our users and data would live now we going to go ahead and actually sign some people up to the app and then look at how we can visualize this data and even manipulate it as we would in an Excel spreadsheet we can open a row of data and we can update data as a developer uh which is super interesting now the thing to remember or the thing to understand about the databases that bubble provides we actually have two if you come from a code background you obviously know what staging means bubble calls it version test so when we building our app we have a test database and we have a live database and they are separate so when we're building out new modules when we're testing stuff we not creating live data we're creating test data so we' have two versions of the site then we would have for instance build Camp my domain is build.io you can go there now look at all the courses and that is the live database okay but I also have Bill camp. verion test where I'm testing new stuff and it might look slightly different to uh bill camp. now my bill Camp version test is protected part of protected so you won't actually be able to run anything or see anything but it allows me as the developer uh and founder of the company to be able to work on product development and get through my product road map uh without messing up my live database right so that's very very useful then continuing down here we're not going to go into this too much detail but we do have an area called Styles and within Styles is where we would set things like our colors all right we set our primary colors contrast color of the text we would set our border colors and we can create what's called variables here where I would assign it a label neutral 100 background then I would give it a color which which means that now on the design side um I can change the color of this text I'd bring up the property editor here and I would then choose from a Swatch all of my saved colors or I can just move this along and change whatever color I like here as well so bubble is you starting to see that it's it's a professional system what Native developers would do in terms of creating Styles and variables you can do that in bubble as well it's just VIs visualized in a way that's much more user friendly we have plugins which enables the extensibility of bubble a lot so if I open up plugins um you know there are thousands of plugins so here is an API connector that involves you to connect to all sorts of products and services this is the my number one plugin that I use um got Google material icons we've got plugins to run JavaScript we've got multi select drop-down elements we've got progress bar elements bubble created this themselves we can see it used on 327,000 apps we've got chart elements got alerts calendars you name it guys if you can think of a API service there's probably a plugin for this if I to search um uh let's search uh maybe open AI here we go so in terms of AI apps do you need to understand how the actual API Works to pull this data well no you don't you can just use a plugin that another developer uh has created some are paid some are free uh but look at all of these open AI chat GPT so you can pull these in to your own apps in a few button clicks you don't really have to understand how the API works because it's done for you another developer has gone and built it and has made it available to you all right how powerful is that click to install the app click to install the plugin now I've got a pipeline to open Ai and chat GPT to start building out the UI for my app and chat GPT is basically the brain and I can extract data from it save it to my database or just link directly to chat GPT and use that as a database ready so that's a plugin section then we have the settings section which we won't go through but there basic things like setting up uh your domain um setting up some sort of global SEO stuff collaboration with other developers so I've run a very busy um agency in the past I don't do it anymore focus on education now but when I ran an agency there are seven of us all working on the same app so a bit like GitHub with traditional developers uh where you can basically pull down changes from a branch bubble has the same it allows professional developers to work together all Under One Roof um you know and now now we're talking about seven times the power as bubble was initially built for single Founders now it's built for teams all right and it has a log section so you know exactly what is happening in terms of server usage people always say to me Greg what um can double scale now this is kind of an odd question it's very general it's like saying um Can Elon Musk uh RS trucks fast was in context to what RS trucks fast in in context T to other trucks or are they fast in terms of if we compared to a car or what about a cheeter or a jumbo jet sorry like an F-16 fighter jet so you always need context when when when asking does bubble scale does no code scale um but I've already talked about this it depends on what you're building if it is you're trying to build Google Earth um with bubble it's not a great fit okay it's really not a great fit I at Bill Camp have built sort of course related stuff course modules it's a perfect use case for bubble doesn't have a ton of concurrent users I mean it is popular um but it's you're looking at sort of concurrent users and you're looking at infrastructure does it need are you servicing people around the world in the tens of millions well then maybe you can move off Bubble at some stage but it's not something I would ever advise a person to think about too early unless you've built if you are successful entrepreneur who have built coded startups in the past you're allowed to ask this question if you are new to development work you're not allowed to ask this question because you need to prove that your company works first okay when I built my first two-sided Marketplace and raised bench capital I didn't say not sure if I should be using bubble because does its scale I went and proed the business case I took money from customers and I built something that was growing I proved the use case all right um it was going to take me many many years to get to a stage where I'm like s's blowing up doesn't really work too many concurrent users the chances of you getting there are slim uh but it is possible um and I still to this day have not heard of a single company and I know thousands and thousands of pass through Bill camp that has actually come off bubble and some of these companies uh are in the tens of millions of Revenue per year okay so it just depends on the type of company that you're building is it Mega resource infrastructure intensive from day one then bubble's not for you are you connecting people through a two-sided Marketplace or financial app or uh you know something like that or CRM um where it doesn't have this sort of infrastructure intensity if so start and bubble you'd be stupid not to don't hire money and blow it on developers build your MVP uh and I can guarantee you that you'll probably end up just staying on Bubble for the foreseeable future and bubble is chipping away at the technology all the time it's getting faster one of his drawbacks has been page load speed but they are fixing that serice side rendering will soon be a thing okay so there not something you should worry about too much and then so we have the UI Builder here guys we have the UI Builder on this tab on the left and then we have the responsive design tab over here where it has various break points where we can look at to see what our design looks like at mobile wids now I haven't done any responsive work here which why it looks funky um but if I wanted to to then I can just very quickly add some left right padding of 16 16 I'm just jumping in and showing you what's possible what I could also do don't pay too much attention I'm just giving you a quick example of how it feels to build and bubble I can say when page width is less than 576 then I'm going to instruct the text size uh size the font size sorry I'm going to change that to uh 24 no let's change this to 48 there we go there okay so very quickly added some padding and I'm just instructing the text size to change when we get down to mobile sizes and there we go mobile responsive guys it's that quick this is again one of the things I teach I have a course called Flex camp that dives into into this to professional standard how to take apps that look great on desktop all the way down uh to mobile sizes based on bootstrap which is industry standard um an industry standard framework for design spacing sizing break points that kind of thing so that's a UI Builder and a responsive tab um and then you have your visual elements you know have text buttons if I wanted a button on this page I would simply pick it up drag it and you can see the little line there Drop it where it needs to be the next thing I'd do is style that button so I'd say give me a primary large I've done this in advance so I know what they are or maybe give me a um secondary large something that stands out and then I could say something like sign up after that I could add my workflow and I could say uh sign the user up and if I did have inputs this is what I mentioned earlier this this is where we would string it together so those are your visual elements and if we just scan through we have icons links images shapes alerts where videos guys you can drop in YouTube videos you can also um connect to a third party uh video service provider there's one called MX mu UD me uses MX many companies use MX you can use MX as well you can have users upload 4K videos 8K videos straight into the service MX and then you can pull the data and you can track where they are watching their videos you have HTML if you know HTML and you know a bit of CSS well you can write your own HTML drag this element drop it on the page and create a HTML module that does something that maybe bubble doesn't do but you'll be hard press to to find something that bubble uh hasn't created we have mapping absolutely love mapping I teach a course called Marketplace camp where is it's basically a version of Airbnb and it shows you how to build Airbnb the endtoend process from searching for properties around the world to visually representing it on a map to clicking on a map to filtering between dates all of that good stuff we'll have a look at that and then we have beneath that if I install a plugin that'll show just beneath these ones here as well then we have containers group so this is a group here grouping is a way to um keep elements in place and to order and position them so bubble uses bootstrap themselves uh sorry not bootstrap bubble uses Flex Flex box uh just call it Flex for short and it's very very powerful and it allows you to basically change the order of things so if I head over to the layout tab I can um change this from a column to a row obviously it doesn't look good column was top to bottom I can change it to a fixed layout drag things around to position them where I want I can say put this icon to the bottom or put it to the previous or send it to the right hand side and so forth so we' need a group we'd apply that to a group and then the child elements within the group would be repositioned along the page we have popups we have repeating groups love repeating groups why because they allow us to display data from the database in a list and that's all a database is it's a list of rows and in a repeating group uh we can set up basically how to pull all this data in and visualize the data and create functionality around it okay I'm not going to go through all of them guys we have table elements input forms there's the input there if I drop it in and I say uh well I've styled that already this is where I could say email address and I can change the content format to email address which creates form validation which make sure that a user is typing in an email address and not some nonsense so it can set up these parameters to make sure that we're collecting clean data and I can just delete that when I'm done with it but yeah date and time Pickers so we can create really um interesting if we have a listing an Airbnb listing date and time Pickers allow us to select an start date and end date uh and then we can say well that's 5 days and seven hours and then we can create a calculation for price for listing for that particular time period I mean it's endless what you can do okay okay but let's now let's dive in and actually have a look uh at these visual elements and at these containers to see what they look like and how it feels to put them onto the canvas okay then we'll get into the database and then we'll get into the workflow side so if we go to visual elements first all right and I'm going to preview this page and when I preview the page it's a preview of what it looks like when the site's deployed basically the only difference being I have version test here which means that only I have access to it okay so we have our text and with text we have text Styles we can drag and drop any text we like okay so if I grab some text drop it in there hey nice to see you um I then have set up some Styles and this also ties into SEO basically okay here's my here I have an H2 tag for this H3 all the way down to body large Etc I can also just detach the style and I can find a font that I really like such as aeriel I don't use aeriel I use inter for most things intoo but I can change this to anything I like s Sands and so forth but aside from one of the things I teach basically is well there's two major parts of this yes it's how to use double but moreover how do you build apps end to end what are the important components of app building what does security look like what is styling look like how do we build a coherent looking application using consistent styles using a particular design system this is what I teach across my apps okay so it's not the case of oh I've learned bubble now I can build awardwinning apps that scale to millions of users there are many other things to learn all right many other things to learn um but obviously understanding bubble from the design workflow and database side would at least get you to create functional stuff and then as functional well then you move on to things like performance SEO uh Etc and guys don't don't let this put you off because you can be you can learn through one of my courses such as beginners Camp takes some people two to three days to get through and they are learning or getting an introduction to all of these concepts with within two to 3 days they have uh built a productivity app dashboard with a lots of users uh working together within teams that's how fast it is so don't need to put you up I'm talking about a real sort of professional standard does take a bit of time is not just about bubble but it's about understanding Design Systems understanding security and all the rest but no code will get you there a lot faster than traditional coding so these are your visual elements all right I'm just going to show you here so here your buttons look when hover over a button we have primary medium primary large iconography we have links so I can click on this link and it'll open up a new tab or it will link within the same tab here I have my particular Styles um won't talk about that just yet here's an external link so Google fonts okay just going to close these guys up here we have images so uh and we have image rendering so we can allow users to upload um any kind of image here is one called betterfly company I made up and here is a user image down here notice the shapes we can for shapes to be cut in the various aspect ratios that we want um 32 square you know 1: one we can cut circles we can have sort of rounded edges on a square regardless of what a user uploads we can force all of these particular shapes uh so so it looks really nice we can have alerts look what happens when I click on test alert this is an alert so feedback to a user that an action has run successfully here is a video all I did was copy from um this Channel all I did was copy one of my video IDs dropped it into the visual elements the the video visual element and now we have a video HTML element uh here is a little piece of code a copied from stripe to enable payment services here's sort of subscriptions $20 $32 if I hit subscribe that's actually take me off to stripe to ask you for your card details amazing here is mapping guys look at this look at this mapping and we can and I'm guessing you're asking can we show uh positions on the map properties that kind of thing can we customize it yes we can and this Google Maps bubble has a great integration with Google Maps you can do anything with Google Maps Google uses Google Maps so does most of your car navigation use Google Maps but you can bring in other API services such as mapbox and build your own sort of custom mapping solution we can do anything around mapping love mapping and I think mapping goes hand in hand or works really well with bubble so that's the visual elements okay next down the list we have your containers so it's going to to bring up a little containers page to show you what containers are and if a preview containers bubble has a little debugger bar down at the bottom uh which uh you use to help you diagnose issues but I usually just remove it um and here are containers so container is a group within that container have some text and I'm just styling these containers they can have background colors that can have shadows here is a repeating group of users all right so these guys um they're in not they can come from the database or they can come from what's called an option set we'll look at that later but basically I've designed once let me actually show you here here is a repeating group repeating group has a data source I've just set up a temporary data source for this but I've only designed it in one area this is what I designed this first card I design the stuff and then I link through the data parent groups test data is display the roll email the image so I designed the first and I pulled in all the data uh for the rest now you probably your mind is exploding here and you're thinking wow okay I get it now when I first learned about repeating groups I then understood I see so Tik Tok is uh Facebook Instagram all of these feeds they're not individually designed they're designed once small piece of code probably a few hundred lines of code and that's it that's all you do you design the first one and it repeats million users you can search that data filter it set two different dates whatever you like okay that's the power of rep repeating groups bubble also has tables so if you want to display your data like you would in Excel spreadsheet bubble enables that for us as well here's a popup I'm going to show a popup cool great you can run workflows in this popup you can show data you can push data into it and edit data or delete data build alerts do anything you like here's a floating group on the left hand side let me just refresh this page uh because bubble thinks I made some changes so I had to refresh the page floating group left hand side we recognize this it's just like a dashboard we are going to be building a dashboard in a bit okay A group Focus so this is if I click on uh this is like a drop down so if I click on this image here we have a menu and we can run a button from within this so these are containers containers are a way and all of these containers they differ slightly in terms of how they display data but a container basically is a way to um uh group visual elements together all right and containers can be within containers can be within containers nested containers and they can each have their own display uh flexbox controls as well and here is a table so this this is a repeating group great for like car design uh here is a table well great for kind of a table view whatever you like and yes guys this is all responsive down to phone sizes and I have a course called Flex Camp which is the leading course in the bubble ecosystem uh for adapting your designs for mobile so that's containers what's next in the list if we scroll down we have input forms one of my favorite so let's go to input forms notice I'm changing the page and I'm going to preview the page I'm just going to remove the debugger bar again all right yeah so I'm interacting with this input okay email address so developer at build.io and then I can use this however I like you know um and I can collect text integers you can drop in addresses here all types of data that you can with code you can do with bubble no difference multi-line input for paragraph text all right for paragraph text and it will grow as I type or I can choose it not to grow we just scroll bar on the right hand side radio buttons checkboxes drop downs all right search boxes so if I type A search I don't have data to search at the moment but if I did I could type Greg and it could I could say show me all user accounts where the first name is Greg or I could search for listings I could say show me all listings in San Francisco within a 2 mile radius of where I am right now slider inputs you know what's the age range what's the shoe size what's the pay grade show me products within uh a particular price range or listings within a particular price range with this particular slider input which is two bars minmax values and we can take these mmax values from the from a workflow and we can save them to the database or we can in real time filter what's on the page date and time Pickers you can style this stuff guys this is just default out the box picture uploaders file uploaders you can upload PDFs have user saved PDFs and by the way this data is saved you might have a question like which service does bubble use for the database they use Amazon web services Ironclad banking services use Amazon uh super super secure within with their encryption all right so when you save a PDF uh that is um you know has uh needs good security it will have good security you are the one in charge of setting up that security bubble provides the means and controls for us to do that to a granular degree where maybe you are a company owner um and you have all of these documents but you can Mark Which documents you want to be visible to which user based on permissions you build all the stuff out okay you build all this out so we've talked about our visual elements we've talked about containers and we've talked about our input forms or our inputs now when you combine all of these things together we get components which forms the basis of our UI our user interaction our interfaces so let's have a look at building a signup form which is a collection of all of these three things so here we have a signup form for a pretend company called collab this is straight out of beginners Camp okay and we have a group grouping these elements together that group has a layout of column and guys we are going to be building this from scratch in a second but I'm just running you through uh what this how the various elements are coupled together BAS basically we have a title which is collab text element a subtitle text element and then we have our little input labels email and password as well as our inputs then we have a button at the bottom and we're going to use this button to sign someone up okay so I'm going to go ahead guys and create a new page I'm going to call this signup and I'm not going to clone it but we could in fact have a page that we clone if we wanted to inherit some settings from that page but it makes a direct clone okay in this instance I just want a clean white page and I'm going to run you through how to create this sign up form from a blank slate I'm going to go ahead and create that and I'm going to bring up my property editor all right property editor and at the top we can see is called sign up um and I'm going to call this sign up and maybe we can say it's by build Camp okay so on the layout tab I'm going to choose column you usually always choose column unless you're on a like a split screen kind of layout with two columns usually a page layout runs top to bottom from the navbar at the top to the footer at the bottom and it's a single column with lots of sections um in this instance we're just building it's going to be a sign up group just in the center of the page the default Builder width not the page width but the Builder width is 1440 actually I'm going to choose 1400 this is just a bootstrap size from a design system that that I've created and I think 1400 Works quite well this doesn't mean that it's a static design it's fluid it will be responsive down to a mobile phone and it will be as wide as you need but it would always have a Max width because you know big big screens you don't want your content spread all the way across cross okay good stuff so let's have a look I'm going to just put this container alignment in the center all right this means whatever object I drop inside here will be dead center first of all I'm going to grab a group and I'm just going to sort of draw in a shape like this okay let's put it on the left hand side so I'm going to move it to the center of the page there it is there I'm going to call this group container this is the outermost group I'm going to um I've set up some styles here so I'm going to give this a style card medium and if we look at what this means on the group it means that I have a background color of flat color 16 on the roundness 200 neutral for the Border color and on the layout I have padding of 32 pixels all the way around okay so if I click away you can actually see the border now I have got some settings um I have some view settings which says show element borders so if I turn that off you basically see what we've dropped in the page this group here now now we have to jump into the group and decide what is a layout and what is the distribution of content within the group if I start dropping in the logo some text some inputs is it going to be with ways or top to bottom and we want top to bottom so I'm going to set that as a column top to bottom okay put that back in the center now it's not going to be fixed width of course because web pages aren't fixed width they're always fluid so we would set a Max width because I don't want this group to grow too wide it will look silly if our inputs are super long so I'm going to set um a Max withth of 480 but no minwidth which means it can just squeeze down to fit into a phone as well so I'm going to uncheck the box for fixed width I'm going to set a Max withth of 480 remove the minwidth and the Min height doesn't really matter for now I'm just going to make this a square and the Min what happens is I will Design what I need within this group and then the height will adjust if it needs more space um and if if there is some vertical height left over well then I can make the Box hug the elements and I'll show you what that means after finished building this okay so we need we need that logo all right so I'm just going to jump into my data I'm going to go across to file manager because I have this logo here it's called origin and I'm going to copy it and I'm going to go back into the design tab I'm going to grab an image and I'm going to drop it in now of course I could just upload an image but I'm not too sure where it is so I'm just going to paste this in and there it is there now it's too tall guys so on the low tab I'm going to choose a width of 48 pixels part of my design system part of bootstrap standards for element sizes keep aspect ratio fixed I wanted 1 to one it's a perfect circle basically and I'm going to align it horizontal in the center okay so that's the first thing I'm going to do and then I'm just going to call this image load logo next I want the name of basically my company um so we can pretend like the name is collab so I'm me to type in collab collab stands for collaboration it's part of a course I teach now I'm going to give this a heading style of four just personal preference I'm going to put that in the center as well in terms of the image element now if I let this image element span all the way to the Edge by removing any kind of Max or fixed widths then this naturally the text naturally would be in the center so I'm going to head over to the layout tab I'm going to uncheck fix width and boom in the center obviously we have a vertical spacing issue this is touching this so back on the group container the first element we put on the page I'm going to choose a gap spacing of 24 and GAP spacing basically means um that anytime we put an element in this group container it will always have 24 pixels of spacing and if we want to change that well then the elements that we want to reduce spacing between which we'll get on to uh we then have to group those in a new container and then apply Gap spacing within those so it's a bit like padding or margin but Gap applies to the entire container not just one instance so it saves us a lot of time I'm going to grab some more text because I want to subtitle I'm going to say ready to jump in question question mark sign up below and this is subtitle text so I'm going to choose a body dark medium I'm going to choose alignment in the center and I'm going to choose a slightly lighter color cuz color and hierarchy uh play together and again the text element is too short so I'm going to let it span edge to edge but unchecking on the layout tab fix width and removing the Min width and removing the height as well so you can see that the text element is taller than it needs to be because the text is not as tall so if I remove the Min height and have fit High to content checked then basically it fits to the content within all right and let me just show you what happens so if I take it onto a new line you can see the text element will grow as it needs to all right that's flexbox kicking in now when I talked about your Gap spacing being 24 um I'm going to show you how to then reduce it between the two text elements because like elements are together okay text needs to be closer together but further away from the logo when it gets down to the inputs they need to be closer together but further away from the header text so I'm going to just simply highlight this text here collab I'm going to highlight beneath that ready to jump in and I'm going to group that in a new container so now we're talking about nested containers and this is how you build it's just nesting containers and adapting the layouts of those containers that's it so now I can head over to the layout tab check apply Gap spacing and then choose 12 which is half 24 okay this is going to be called group header and as I'm building on the left hand side I can uncheck only show hideable and I can see the hierarchy of the group container image logo and then we got the group header and if I expand group header now we've got text collab and the subtitle text perfect let's continue now we need um we need the inputs with the labels so let me create the label first I'm going to drop in some more text and I'm going to say email actually the casing let me say this email like this and then I'm just going to change the style to body small and obviously you can see the text element again too large so we need to adapt it so that it just sits nicely uh next to the text so I'm just going to quickly just get through that like so okay time for our input first because we need to capture an email address so when you sign up to Bubble by minimum you need two things you need an email email address and a password yes there are other authentication options such as magic link when you put in your email address and click a button beneath it that says send verification link you go to your Gmail or your email provider you click a link and that actually logs you in so some people are moving to that because it means you don't have to remember your password your customers to your to your site and also you can log in with social Gmail Twitter that kind of thing social logins also fairly popular but anyway let's type at the placeholder here uh into your email and I'm going to change the content format to email just in case someone doesn't type in an email there this doesn't verify whether the email exists and there are ways and means that we can do that it just make sure that someone does type in an email and not their first name by mistake this stuff happens this is called form validation and because we are we learn it to be professional developers we need to take note of all of these things we always need to help the user as much as possible okay on the low tab I'm going to let the span edge to edge and I'm going to set 48 pixels to which it already is okay these need to be closer together the label email and the input so I'm going to right click group elements in a column container and then for this I'm going to choose eight row Gap bit smaller now we have a new group so we need to label this properly that's group email and then guys what I love about bubble and to save time and actually it's a good method is just copy and paste components that you've created already so you could call this a component because there two elements together I'm just going to go copy paste and now we have our group email copy which I'm going to change to group password email I'm going to change to password and then enter your email I'm going to say enter your password okay we could also do something like this I could also just add some Dots here or maybe maybe just keep it as dots all right but then I will just change the title here password because we're going to need that soon and then the content format is password so this is a great uh use case for Content format is when they type the password in you know it'll be the dots they won't be able to see what they're typing okay and but I do want at the moment the Gap spacing is separating all of these groups down the page I do want group password and group email together closer so I'm going to say group in a column we're continuing to Nest here guys and this time it will be 12 perfect then this new group will be group inputs so if we have a look on the left hand side we can see that we've got our group container group header and then our group inputs and within group inputs group email and group password and now all we need is a button folks I'm going to drop in a button first of all I'm going to say sign up and I'm going to change the style which I've set up already to primary large and quite simply span it edge to edge by removing the fixed width removing the Min width and also making sure that the Min height is consistent between my inputs uh and my buttons so 48 pixels bootstrap standard I teach bootstrap across all my courses fantastic now guys how do we make this bad boy work all right so let's look at that so let's edit the workflow so what we'll do very simply bubble gives us all of these options navigation payments analytics plugins we're just going to choose account and the first one sign someone up you need users in your application for it to be an application and now this is just a matchmaking process okay so bubble's asking for an email address so we feed it the email address from the input value so if I just type an email because I named my inputs so input enter your emails value okay it's always going to be the value now I can type password and then point to the input password value we're going to feed that stuff through the workflow and then into the database and they're going to be signed up and logged in on that button click and then we have some other options here such as require password confirmation which would be a second password input box don't feel like we need that in this day and age uh we want to keep it as small as possible and then we can also send an email to confirm an email bubble that's just a built-in workflow of our bubble you can choose to do that if you like to confirm that the email address is ready uh real sorry but I actually build my own pen related one which I feel is more familiar ux right to send them a pin randomly generated then they have to put the pin in If it's incorrect I don't then I disable their account on three tries and then we can add more Fields here so maybe you wanted to collect their first name or their logo or their store name you can do that as well within the same form I prefer to break forms down all the sign up process into multip mle Parts multi form multi-step form if I'm asking for a lot of information at the very beginning which is you can put some people off so we'll keep this simple so we're just going to go with that and then we have to think logically well what comes after clicking that button because they don't know that they've been signed up well something needs to change so why don't we just point them to the test page and let's have a look at that so navigate goto page uh test and we can pretend that that's our dashboard that they'll be uh signed up and logged in to then start using okay so let's just put in some dummy details here we're on version test so it doesn't matter email email.com form validation kicking in here perfect and let's sign them up okay so here we are guys let's jump into the data and let's have a look here is a row in the database here is a user they have an email address and this is their created date and time and they have a unique ID as well which we will always use the unique ID is basically make sure that every single Row in your database is unique okay because sometimes if it's like product data it might not be unique the mul might be multiple stores with the same name or multiple products called sneakers Nike sneakers so unique ID is very important all right guys so that is the signup process and the build process for something like a signup form I mean that was super super quick less than 10 minutes that's how fast you can get started as well okay and now we're going to go to the dashboard page so if I grab text guys and drop it in here and look at it's going to be at the bottom here check this out I can add Dynamic data I can say current user which is me I'm holding the mouse I'm the current user just delete this quickly I can say current users email check this out if I refresh the page look at this I'm logged in and I'm looking at my data email email.com so it's through this property editor that we Define what data to pull out and show from the database okay so database data comes through this add Dynamic data in terms of displaying Dynamic data within elements but there are many other ways to display Dynamic data such as repeating groups tables even through just an image element should that image be static which we did this is a static element here the bill Camp logo or should it be dynamic should it be dynamic I'm going to quickly cheat in the data I'm going to open up this pencil Tab and I'm just going to upload a users avatar from a developer standpoint your users will never see this part of the app okay this is just this is obviously the bubble editor so I'm uploading an image here's an image here I'm also going to cheat here because I'm testing uh I'm going to say Daniel Williams now I'm going to save this and bubble Now updates the database with what you've just put into these inputs and now we can display more stuff so now I can grab an image drop it in it's obviously massive so the first thing we need to do is set an aspect ratio and just 32x 32 I'm going to group these two guys together this image uh and the reason why it's in the middle is because I've set a a column layout here in a particular style space between but I'm going to get this image to sit next to this email down at the bottom highlighting both of them group elements in a row container and now they're down here while I'm up there sorry while I'm down here I'm just going to create some space between this text and this image element which is 12 pixel pixels on the column and on this I'm just going to responsively fix this uh text input sorry this text element there we go put that in the center all right so now I'm going to show you that we can pull this data by Daniel Daniel is logged in here's his email address and by the way yes we can actually change Daniel's email so I can say that daniel. Williams I'm just going to say manual for now obviously we want to be building the tools to be able to do this uh within like an admin dashboard or for users to do this themselves okay but now I can um click forward slash and I can say current users Avatar and run mode rendering I'm going to change to zoom so it cuts the shape that I want down here because I'm going to scroll down I'm going to set the roundness to 32 as well for a perfect circle so if I refresh here's Daniel's image here's Daniel's email address okay so you can see that we built some UI that UI comprised of containers to hold everything together and allows us to set the the layout it had an image it had text and it had input and it had a button we collected data through the inputs and the workflow that workflow saved the data and created the user account in the database and now we have created um a dashboard we've dropped some elements on the page and we've instructed bubbles to go fetch the current users data such as the image and the email address okay so that is the create and read part of crud create read update delete that's what an application is so we can we can create data save it to to the database we can pull it out of the database as well and we can display it for Daniel to see now can Daniel edit this data yes he can can he delete himself and delete his online store or whatever it is that we're going to be building yes he can do that as well uh the bubble creates a delete function as well and we can create multiple things at once we can delete multiple things at once we can edit multiple things at once and we can run things such as backend workflows to do the server side and not in the browser it's getting a bit more technical far too technical for this particular course but uh we can do all sorts of stuff here we can save data from external Services find an API service that shows the weather well we can download the weather for the upcoming 10 days put it into our database and display it to a user through a repeating group and build your own weather app or you canot even touch the database and just pull it in from the API and just display it directly create like a direct link to this external service amazing stuff let's actually go back into to the design um because you've seen me sort of lay things out a little bit there was a row there was a column let's take this a bit further so if I go to I've got layout here layout and I'm just going to change this to layout now I've created a container this gray box and I've created a container on the left container on the right now in real life these containers would be transparent or white or gray or black okay I'm just giving them colors so you can see individual containers let's have a look at over here just to prove that it's a container this is group a that's Group B and I can put text inside group a there it is there and I can change the text to White uh and so forth so just so you know that these are containers I just want to show you how layout works so I can say um on the parent group container because these are now nested I can go to the layout tab currently it is a row a row means distribute data on the X AIS column means distribute data on the Y AIS top to bottom so if you think of in the context of a page a page would always be top to bottom Navar hero section and then you have your content sections and your footer at the bottom that is top to bottom but Within These sections such as this gray piece is a section a lot of your data is distributed left to right and then it grows on a desktop left to right you have sort of columns then within the columns you can distribute data again do you want to distribute it top to bottom or left to right and this is how we build layouts Just You by using columns and rows there are other times where where we would use fixed and aligned parent under container layout yeah they are here but it's pretty rare okay rows and columns form 99% of how websites are built but I can just instruct a different layout here so it's a row distributed left to right I can go top to bottom if I change this simply uh sorry if I change this from a row to column column to row and guys this is essentially how you build interfaces you set the layout first with your containers and then you put your elements inside these containers okay so now if I started with this design a row left and right then I would change it to a transparent background here's group a again okay there's Group B and now in group a I can now set where we had a row with group a and Group B now in group a I've set a column here it is a column I can change it to a row if I wanted it wouldn't look very good and there's some constraints screwing up the design there but just to show you that that's what we are doing just distribut beting left to right or top to bottom and just nesting containers all right and they're basically that's an image a group with an image as a background if we think of it in context of a nav bar well nav bars usually have a logo on the left usually links in the middle okay home about pricing FAQ buttons on the right three column layout that's the common thing with a Navar here we are here here's the nav bar and if we scroll down we can see image on the left uh pricing sorry links in the middle buttons on the right hand side so the layout would be a row okay the layout would be a row and then within rows and with in columns we have container alignments for how we want to distribute the content within the row do we want all the content in the row align to the left align to the center align to the right do we want it push to the edge edges in the center do you want the space between the elements the same this is how granular we can get with rows and columns can really really and then we also have padding and margin to push things further apart and create space around things super cool stuff so that's the layout if I go to the spacing side um now this is kind of a concept that falls outside of bubble you don't need to know it but understanding Design Systems will get you very very far as a developer and that's how you create um beautiful interfaces now systems exist everywhere guys Design Systems or just systems uh what if a car manufacturer didn't have a system what if um uh Tesla just said to his workers uh yep you you guys decide in the wheel size let's start with a wheel size of withth um 750 cm and then the first guy thinks great so the wheel size is 750 and then it gets to the next part of the factory where the guy said where the guy couldn't remember what the wheel size was and he said was it 750 or was it 850 all right I'm going to make this component and it's going to be 850 then he tells the next guy that is 850 and then that guy starts working with 850 you can see where the disparity and the chaos starts to ensue Design Systems ensure consistency uh with your procedures okay and that means that you need a design system later on after you've learned bubble to be able to create consistent designs through your app button sizes for is is a classic or button colors is a classic someone finds a color with a Color Picker and that's the button on this page they don't create a style because they're eager to build they go to the next page dropp in a button and they think what was the color oh I think it was this but then the it's slightly off and they still in Creative style and then they go to the next page drop them in a button what is the size was it 44 48 I'm too busy I'm going to keep it 44 once you've deployed the app your user is looking around and they can pick up these subtle differences and these subtle these subtle differences become huge differences uh as you begin building out your app and this is why I designed Flex Camp to say guys you need a system this is why when I teach SAS Camp uh we create Design Systems from the very beginning okay so what I tend to do is just create my own spacing system sizing system and this is what it is this is called the fourpoint system that pretty much all developers use moreover it's more of the eighto system these days but you can see these numbers these are the numbers you use in terms of layout spacing padding margin button sizes even text sizes and in terms of radius which is the cor the um curved sides I tend to use 8 12 16 24 and that's basically it and then working Within These constraints is far more simpler easier numbers to remember but hopefully you have a um styling system where you don't even have to remember these numbers but you wouldn't have radius eight on this box and then you continue designing a bigger box or container and then you use say 14 or 13 or kind of an odd number you'd always Define a particular system and it's much easier to work and more consistent looking uh and more coherent all right the next concept I want to do before we get back to building in our dashboard is temperary data okay it's two more Concepts and then we're just going to build for the rest of this course and temporary data is a way to to interact with data on the page with data that doesn't exist in the database earlier on I talked about we're creating an ABNB experience with someone searches for listings in London available listings between two dates then they click on a search but button and then they get to taken to a next page where there is a map and listings we don't only save that to the database that's called temporary data in fact that's called a parameter which we're going to look at and temper data is a way to enable that functionality they have started a search we're taking them to the next page to show them the results that's temper data there are two types of temper data one is called States one is called parameters let me show you the difference so the way State works and this is something you create yourself okay you can create a state for functionality such as toggles I've clicked on yes it's turned blue I've clicked on no it's turned black I created a workflow for that to run so if I click on yes I'm setting a state and then I'm saying to this yes button or no button that if the state exists conditionally change the color okay don't worry if you don't get it straight away we're going to be actually building this in the dashboard or I'm going to show you practical examples of this another good use case for states is a state list here where I can click checkboxes now when you click click checkboxes on other sites there's no data being saved that's just feedback the data is saved on a button click somewhere else so you might have a form that form might have toggles yes NOS checkboxes radio buttons inputs um dropdowns multi-line inputs a form might have all of this data together in one container with a button that says save at the bottom that's where you can collect data from a state from a parameter from an input from any kind of uh data source you like you collect it later on but you have to enable this feedback for the user if they click on a yes toggle something has to change to show that they've clicked on it that's a good use case for a state okay now in terms of a parameter what I've done is I have get location from page URL okay so I have instructed the map to look for the location for to look for a location in the URL in a parameter parameter is a key value pair you set the key I've called it location I could call it cupcakes if I like it doesn't matter the main thing is linking a data source which is a parameter with an element on the page that's the main thing here so I've already gone and set the data source marker address to a parameter that parameter is called location so if I do this if I anytime you see a question mark okay anytime time you say question mark that means a parameter and if you do a search if you search for flight on whatever sort of page you want any kind of flight service you'll see a bunch of question mark something equals something something equals something you search on Airbnb listing equals start date equals price range equals those are parameters that's temporary data that's a way to not have to save stuff to the database just give the user some results on the page I'm going to do this right now I'm going to cheat I'm going to say location all right equals and this is pick um let's click pick Sydney just randomly now watch the map boom now we're in Sydney that's how parameter works now parameters I could also I could have location equals Sydney and start date equals July 17th 2024 and end date equals July 24th 2024 and then I could Point um my calendars to that parameter 10 temporary data and I could save that search with the save button at the bottom so I can come back and search for that again later I could save that search to the user record so I'm at the moment looking for um a new house uh with a company called right move in the UK and I have saved my particular um the attributes I'm looking for in the next house which is it's got to be certain number of rooms it needs to be slightly rural I want a bit of land potentially out buildings I want off street parking so I have all of these saved to my user account but when it came time when I when I was trying to figure out the search I had a location I had a search box um and then had a price range with slider inputs and then had number of rooms of the drop down and then had checked a box that says allow pets because my two dogs Frank and jery um you know that that's something that that I need to be able to take them to for the next property um I selected a checkbox that said off street parking I selected a particular distance from where I live right now and that's all saved and I saved that with a single button click okay so um so the temporary data gave me the feedback that I was clicking on stuff writing in input boxes and then the button click saved that to the database so the next time I can come and that's Sav to my user record and can just show me the results straight away so that's temporary data now you don't have to use temporary data uh for this map of course I could be pulling this map from something saved in the database bubble's fairly agnostic with where it gets it data from it could get data from an external SCE uh Source such as an API it could get data from your own API connector could get data from your uh internal database on uh Amazon web services the built-in database could get data from a state it could get data from a parameter I can save a state location um and we're going to be doing we're I'm going to show you how to create States and parameters very shortly when we move on the dashboard which is the building part so that's temporary data guys you see temporary data anytime you interact with something on a web page and it gives you feedback such as changes shape color something changes that's a parameter okay or a state sorry that's that's a state um but is obviously the temporary data which you can then use difference between par when would you use parameters and when would you use States um when you refresh the page states are reset let me just demonstrate so I'm going to click on yes and check these three boxes notice Sydney down here if I refresh the page the states have been reset now it's no without checkboxes but we're still at Sydney so parameters persist meaning that they don't care about page refreshes because um the data exists in the URL unless I change the url the data will continue to exist on on a page refresh so that's one of the main differences but there are sort of use cases you can't pass States between Pages you can pass parameters between pages so I'd use parameters to collect data and then send it to um another page uh other than that I'd probably use states to be honest uh and states you can hold temporary data as States you can create create rows of data and not save them to the database but save them to a list uh an invisible list in the page and then on a single button click save all the data you need to save to the database including that list that you created okay so that's temperary data now guys the last thing I want to cover um in terms of Concepts is breakpoints okay and breakpoints uh we can see in the responsive design tab 1200 is a breakpoint 992 768 320 uh but you create your own break points and bubble is building out a way to handle break points a bit better but just for your information um this is the breakpoint system I use and this what do breakpoints do at a certain page width you can instruct text to change sizes inputs to change sizes padding to change to more minimal or larger padding change the direction from a row to a column breakpoints simply are a way to consistently change the design and adapt it to various screen sizes that all that's all that break points too but we won't cover it too much again I have a course called Flex camp that covers us to a professional standard and before we get into um building out this dashboard I wanted to show you one other thing in the data tab or two other things we have our data types these are basically our tables so would have like a user table if we have products it would have a product table whenever you have um so a product obviously needs a title price it needs all sorts of fields whenever you have a collection of fields you would create a data type for it so user data type product data type listing data type your two side Marketplace you create transactions between users you would save that to a transaction data type and decide what kind of fields make up of this transaction you would have your uh homeowner uh you would have your visitor you'd have your dates for this transaction maybe it's called a booking doesn't matter point being you'll have all of these various tables that collect uh data that belongs to the user or the product or the store or the listing or the booking um and that bill Camp I have lots of different data types I have user data type I have courses data types I have data types for lessons that are attached to sections that are attached to courses because what is a course a course is a a list of sections section one what is a um what is in a section A list of lessons so I have a list of lessons in a section and I have a list of sections attached to a course and then courses have you course has a title as a price number of students uh number of sections so you kind of you'll you'll become comfortable with having all these separate data types that all sort of work together and cross reference each other and it's actually quite basic once you um understand uh how the sort of structure works we have a privacy tab um and bubble creates a first privacy for you and privacy is a way to secure data on the server so you'll never have if you don't set a Privacy Rule on a user data type that means all data on your server will be accessible by someone that understands developer tools in the browser uh anyone with sort of basic development experience will be able to to access your data any data that's downloaded to the browser that is okay so privacy rules are very very important it's something I cover in the beginners Camp course uh I'll cover it in all of the courses but that's the beginnner camp course gives a good overview of how to secure your data and how to set up your rules so that if you're working together so that you can see your own data and your colleagues data if you're working in a team but other teams don't know that your teams exist because maybe we're building sales for or or pipe drive or you know some kind of productivity app or notion right so I use notion I don't know who else uses notion they've got privacy rules in place so that I only I can see my data and my team can see my data so you can get really granular with data access through privacy rules okay so privacy rules is server side uh security for your app and there something that you'll have to understand and set up uh before you deploy your app then you've got your app data and this is basically our view into the database with our various Fields then you have option sets option sets are great um option sets don't exist in the database they exist in a users's browser is for publicly accessible information I use a good example of an option set is they are static lists you can update them edit them but think of option set as static such as a list of countries that isn't going to change so if you want to ask someone which country from You' set up an option set it would be called country I would create that and then I would start uh America I know this would be USA I'm just sort of jumping ahead I'd create that I'd create England and then this list I can then populate any element or input form that takes a list of data such as a drop down takes a list of data um repeating groups takes a list uh tables take a list and we can also filter those lists so that's what an option set is um and then you have your file manager and this is anything you've uploaded or a user has uploaded this is where you'll find them so I uploaded this Daniel Buckley image I can click on this PNG and there's Daniel's image I can right click save that if I want to and then you can yeah you can delete them if you want or you can search for them or you can upload more data here if you want to be uploading um in the back end okay so guys now we're going to get to this um dashboard and the purpose of building what I'm going to be building uh is to show you how the build process basically so I've already set out like a scaffold for this I'm going to actually call it dashboard I'm going to change the name of this page here so I'm going to bring up my Spectre this is the property editor and I'm going to call this dashboard this is how I change uh the name of pages just going to refresh this again okay so I've already done some of the design here so on the left we have a floating group what a floating group does is enables you to change the Z AIS uh the Z AIS of a container so something floats above the page so when you scroll down many websites and the navigation bar remains stuck to the top like sticky at the top and all the content Scrolls beneath that's a floating group and in this instance I've set up a floating group on the left because this is going to be where we set set up our menu okay so what we're going to do is this so I'm going to be able to demonstrate many things uh and in the beginners Camp course this is what the course is about is about building out a productivity app where users can create projects where they can create tasks at attached to projects where users can work together as a team where a team admin owner can manage their data users Etc and through the creation of a productivity app is I get to demonstrate basically almost absolutely everything that you can do in bubble okay um but the most important thing that we're going to demonstrate today is create read update delete as well as temporary data design and layout and the various elements around repeating groups okay and text elements and buttons and popups so let's get started so I'm going to just show you a basic version um I'm going to show you what we're going to be building something similar to this this is actually The Beginner's camp but obviously that's uh you know you can do their course at build Camp we're just going to create a part of this so with the beginner's Camp uh you know you would build your marketing page you would build authentication sign up Etc but this is the one I actually want to build um so this dashboard layout is similar down the left hand side we have image we have these buttons here so if I click on this button it shows what's on the right hand side okay and there's one called projects and that's what we're going to focus on but in the begin boot camp you would be able to learn how to build all of this stuff here is a table with data progress bars but this is what we're going to be building okay a way for a user to create a project and then display the project as a card and through that process we will be creating a project with this popup um and then in this popup we would also would be able to save it we'll be able to edit the data and delete the data so that would be enough for you to get kind of an end to an experience of create read update delete and working within this kind of U dashboard layout okay won't cover the marketing Pages the landing pages far more simpler there's no real interaction it's just showing data Okay so so I'm going to um I am going to First grab some text going me drop it in here I'm going to say projects okay layout tab I'm going to remove the fixed width and I'm just going to style this slightly um actually that's okay then I am going to right click and say group elements in a row container okay because if I just reference this figma file what we're trying to build is this and this has three elements so the container is the gray part the part we click so it's similar to a button but with buttons you can't put iconography into buttons with bubble just yet you can through a plugin uh but I just want to demonstrate sort of the Native abilities here so I want an icon I want text and I want this little chip icon here this little right arrow carrot icon so that's why I put it in a container and I'm going to call this container group project and then when we click on group projects that's when we get uh to change the view with a parameter I'm going to set the height of this to 44 okay and then I'm going to take projects I'm going to put that in the center next I'm going to grab a material icon and I'm just going to sort of draw it in guys so you can drop it in but often it's too big but I'm going to draw in a shape it's all I'm going to do and then I'm going to give it an icon now I think it's called layers ah there's actually an issue with material icon at the moment with um with this version of bubble I'm using so I'm just going to delete that and I'm going to rather use an outline icon which is which is hero icons so here's an example of a plugin I'm using called hero icons someone has gone ahead and created a little package for bubble uh and I'm going to use it now I'm just looking for something that represents a project okay and this could be anything sometimes those four squares look quite good let's just see what we have to work with here could be like a folder but I want to follow convention to degree if I can what I'm trying to figure out is the naming convention that there would use table cells no let's just choose ah here we go squares 2 * 2 so I've just copied that wording and I'm just going to paste it in here and there we go I'm going to give this color I'm going through this quickly guys and I'm going to choose 24 pixels um all the way around bootstrap standard and then I'm also going to look for the the arrow the right arrow put that sort of carrot icon here Chevron so some people call it carrots c a r e t some people call it Chevrons I prefer Chevron so I'm going to copy and paste this icon here let put it to the right hand side and I'm going to paste this in say Chevron thank you very much now I'm going to take this group project and this guy at the top this group B I'm going to right click group elements in a column container uh why didn't that work group content so what I'm doing is I'm just looking at the position R Group G so this is the element Tre and I'm going to rename Group G to uh just group content and I'm going to go down and say reveal an elements tree and bubble then opens this up to show you the hierarchy and structure of elements within this floating group so I've got a group b over here that's in group content and then I've got a group E over here so group E will be called group project and I'm going to take group project and we drop it in group content and then I'm just going to reorder uh Group B at the top yeah down there perfect so group content at the top row gap of 48 that's perfect all right so let's just get back to this clickable uh element here so group project that needs some Gap spacing I'm going to choose um choose 12 and because we are on a row layout we have have you know our icon on the left project in the middle and button on the right hand side and you can see how this project uh text element which is different to the text inside the element is here is the container put the text inside and then decide on the behavior or the the display so if I say fit withth to content the text element is fitting with to the content within and if I add letters here you can see how it grows but I'm just going to let it grow all the way across to fill up all of the space and this is flex box kicking in here so with flex box I've said look I've got a container I've got three elements these left and right elements are fixed basically 24x 24 but this text I have no Max width no fixed withth no fitwith content therefore it's allowed to grow within that container that's what I want now I also want um a border here basically uh so I'm going to choose some padding Left Right padding of just 12 12 because I wanted to change color using a parameter uh once it's been clicked user feedback okay now that we have that guys now that we have that I going to run a workflow on this bad boy here and add workflow and I'm going to say navigate go to page this is just how we change parameters I want a parameter that says V or view equals projects because we're going to stack all different views on the right hand side if I go back to this figma file when I'm building in bubble this would be the page and I would have the projects group over here then maybe underneath it I have the task group but it's all collapsed it's all hidden and collapsed and that vertical height is removed and I can we're going to be showing and hiding either the projects tasks here's another one home view on the right hand side here's another one members view all of those are stacked when we build but hidden and collapsed and we use parameters to change the view so if I click on members I want to see the members view if I click on home I want to see the home view so the destination basically is the same page right we're not actually going away from the pages but it's within this action that I can say send more parameters to a page this is where I give it a key I'm going to say V for view it's just for my doing no one cares what it's called it could be called cupcake doesn't matter um and then I'm going to say projects okay so let's just test this I'm going to refresh the page here's projects if I click on it V equals projects but no feedback to the user so let's work on this parameter on the design tab let's do this let's go to the conditional tab guys this is something new now so we've talked about temporary data we've talked about the appearance styling color form shape layout layout tab is over here this third tab conditional statement and this allows us to make a change to something visually or to show and hide elements conditional this is a good conditional if current users admin is yes allow them to see this admin related data if current users uh role is uh viewer but not editor don't don't show this button hide the button hide the button that says create data this is something I teach at beginners camp we use conditionals on condition of me having a role viewer and not editor you know either show and hide this button in this instance we're going to say on condition of the parameter V equals projects then show the project view okay the way we do this is we say when and I'm going to say get for get data from page URL and then I'm going to say the parameter name is V I decide what this should be and then I'm going to say is under operators I'm going to type with my keypad projects enter then let's change the color let's say just going to go to the parents tab very quickly and I'm going to set a background color that matches um what is the color here neutral 100 okay so I set up a style of color neutral 100 I'm going to say now change the color background color from neutral 100 to neutral 200 which is slightly darker the other thing I'm going to do is I'm just going to give some border roundness here of um eight so if I refresh the page because this conditional statement is true V equals projects here it is again on conditional statement get V is projects if I refresh what would happens here boom now if I change projects and I say home what what happens to projects not highlighted so this is a basic understanding of parameters okay basic understanding of parameters I'm going to click on projects again now the right hand side the right hand side I've set up a group here already now I'm going to say that um I'm going to sh say only show this group when get data from page URL get V again is projects if that's the case don't change the color or anything just this element is visible yes and don't show it by default this element is visible in page load no and collapse when hidden and what I'm teaching you here is something you'll be using all the time okay I'm not covering edge cases in this course I'm covering a a repeatable process that you'll be building with over and over and over this is how you build a dashboard parameter for views parameter to change the condition of something to give feedback to a user that something's been clicked okay so I'm just going to Dro in some text here this text is going to say [Music] projects and I'm going to change this to maybe a heading five perfect okay so if I refresh the page now I'm going to remove question mark V equals projects let's refresh the page do you see how we can't see anything here nothing here but here's this group group let called this group projects well now we can't see it because on the layout tab remember I said that on page load this element is visible on page load no it's not and collapse had been hidden if we didn't check collapse when hidden it would create this vertical space uh that would be problematic so it always want to uh collapse space but I've said on condition that get V is projects then show it so let's refresh the page click on the projects button and here's the group so that is basic well that is how you build dashboard navigation guys you've learned it already what is stopping you from starting a bubble journey and if you want to get started beginners Camp is where you start okay that is the leading uh beginner course for getting into bubble okay let's let's create some data here now before we create data um we actually need to create a form don't we we need to create a form so I'm going to get a button I'm going to put this button over here here and this button will say um create okay and I'm going to set up a style attribute of primary large I went ahead and did this before I started this course and I want the button on the right hand side okay so I'm going to click on the create button I'm going to click on projects right click group elements in a row container I'm going to call this group header now on the layout tab I want the button on the right hand side we're currently within a row and the container alignment is left so on this group header the container that contains the Creator in the projects and by the way the projects I'm going to make this a bit tighter the project um text elements I'm going to remove fixed width it's a way to push the button to the right I'm going to show you another way removement width removement height and check fit width to content okay so if I go back to the group header I can change the alignment here guys look at that but the one on the right hand side called space between this is where I can uh push the elements apart space between lovely stuff on this create button um on the layout tab I'm going to remove the fixed width because I want the button width to adapt to the text within so I'm going to remove the fix width I'm going to remove minwidth and I'm going to set fit width to content so the button must fit width to the content within which is create and the button will grow if I add more text perfect now we need a popup so let's do this let's hit the create button show a popup and then drop in the various elements we need to save data to the database and then we'll talk about how do we display this project data how do we edit it how do we delete it all right so let's do this let's grab a popup and I'm just going to click and I'm going to just drop it on the page like that okay I have a default style for this popup popup a I'm going to call this popup project okay and then I'm going to grab some text I'm going to drop it in um actually the first thing I need to do is I'm going to go to the layout tab and yep it's set to column wait what am I on here sorry in the popup let's set it to column going to add Gap spacing of 24 and with popups you do want to Max width you'll never want to fix width because you want a mobile responsive so I'm going to set it to 480 so bootstrap standard I'm going to remove the Min width and the Min height 320 I need something for now so I'm just going to do that okay this text is going to say uh project and I'm going to give it a heading six I'm then going to remove fixed width Min width Min height all right let's get into the nigr of a project now so a project probably needs an image just the way we're designing it let's have a look at beginners camp and just see how I designed INF figma first this card let's do this let's do this card here this is figma by the way it's um it's a probably the leading design tool I tend to use figma for uh designing the UI the single source of truth I don't just design in bubble this is because it come from an agency background where multiple people had to look at designs and then build stuff on different pages simultaneously you don't have to use figma but it is something that I integrate into my courses because it's a professional tool and the figma community is probably 100 times the size of bubble so there's are many career choices in there anyway we're going to do this we're going to ask for um an image just so we can render this card View Title and description that's all we're going to do guys we're not going to add users and all the rest because then this YouTube course will turn into a 10-hour course and I've already created that at Bill camp. okay so we're going to we want to display images right so I'm going to we need an picture up loader to drop in that picture up loader I'm going to remove the fixed width and I'm going to set it to about 200 and I've already set a style here click to upload an image then I'm going to grab an input me drop it beneath this will be called um add a title that will be text and I'm going to check this box that says this in input should not be empty so I'm not going to allow user I'm not going to allow workflow to run unless I put in a title form validation all right form validation very important on the layout tab I'm going to let the stretch edge to edge and then description I'm going to add a multi-line input so it's paragraph text okay yes you can constrain the amount of text somethingone can put in here or you can just let it flow and then you can truncate the text for the card view source all the cars are similar height and then show the full description in another way that you decide okay the height I'll usually make double uh the height of a standard input which would be um what is this so it'll be 96 Min height 96 the minimum height should be 96 then we need a way to save this so I'm going to click button I'm going to drop it in the input I'm simply just going to say save and this is going to be a button large okay I'm going to let the spand just for my creative Choice edge to edge you can make it smaller if you like I like a nice big save button all right guys so if I click on Save now if I click on save so add a workflow uh what am I saving here I'm saving project data do we have a project data type no we don't so at the moment if I choose dat dat things create a new thing and a new thing if I could rephrase this is a new row in the database a new object a new thing a new row in the database always say that to yourself otherwise you get confused create a new thing now it says which data type are you creating a row in which data type at the moment we only have users and you cannot create users this way users have to sign up to the app so we have to go ahead into the data data types and create a new data type called project not projects just project because let's think of this as a box okay data types of boxes or tables let's just say they're boxes if we open the box that says user we look inside what do we see what belongs to a user so back on the screen we have Avatar first name last name so I'm looking in the box and I have a user that uses us has an image they have a name they have an address they have food preferences they have teammates they have products they've created that that's all fine like that's hanging off users but in terms of the attributes of a user that is email address and personal information that's a user what about project create got a box it's got project on the side let's look inside the Box let open the box what's inside project has an image title and it has a descript destion just as the start now the beautiful thing about Bubble is that you can continue to build out functionality you can build the basic version first and then you can add more Fields later or you can delete Fields so you don't need your complete database schema set up 100% don't worry about that start building start stringing things together and then come back and add more Fields that's what we're doing here so I'm going to say image creating a new field field name is image again I can call this anything I like but I want to keep it sort of logical so I know what it is image and then bubble is saying okay Greg what type of uh data is this and this is consistent with all developers all developers have to create these uh Fields key value Pairs and have to match them up so the developer in me says well an image is kind you know it's it's an image so I'm just going to scroll down I'm going to go to basic types and I'm going to find image boom create look at this this field is a list multiple entries I'm not going to click that I'm just going to click create image is an image yes we can create a list of images attached to a data type listing is a good example a a home listing car listing uh product listing will come with multiple images e-commerce good example multiple images of a dress or a jacket you can save multiple images here you can build out the UI where person clicks a button and then can upload or drag and drop images onto the page and that just uploads to their particular product title what is a title well a title's text isn't it it's text what about description description is text that's all it is but you know we could have dates here date ranges we can have booleans yes no fields we can have files these are all the things I can add to this project form I can add dates start date what is the end date what is the project value range sliders anything under the visual elements I can put into form I can capture that data and save it to AOW in the database but this is text that's what it is okay this is text so now we can save this so now I'm back uh in the editor I'm going to edit that workflow now I'm going to choose project and bubble has this neat little button down here that says add all fields and this is what I've already set up so let's start top to bottom we going to click forward slash and where is the description so now we have a matchmaking process we have a database field called description that's expecting text where am I getting that text from and now have to match find an element that accepts text we know what that element in is it's a multi-line input because we created it in the form so I'm Type in mole for multi line and put A's value image the database wants an image uh so we need an image element to be able to input we can't take we can't match this up let's just say with a random input what's going to happen bubble's going to turn red here and it's going to say look that's not an image uh we need an image element here matchmaking process so I'm going to um go and find find I'm just going to delete this out here I'm going to say for Slash and uh picture uploader picture upload is value lastly title is a very simple input add a title value okay guys so we create the project and when it comes to workflows we need to logically think about what happens next because we have to design this bubble's not going to just magically do everything for us I think we're getting there though they are working on AI module and I'll have to do another course when they when they create that but um soon we'll be able to instruct bubble to build a a lot of stuff for us but we need to be able to walk before we can run okay we need to understand how this stuff works logically together so Step One is create the project what happens next when I click the save button think about when you've created data in notion or somewhere else with a save button what happens well if if it's a popup the pop-up is going to close so I'm going to uh click next action I'm going to go to element actions because this the element is a popup I'm going to say hide hide what bubble's asking I'm going to say please hide the popup project boom let's get uh professional here so I've gone ahead and installed a plugin called um have I let's type in uh toast notifications all right so let's do this so I've just very quickly installed a plugin that allows for toast notifications uh and I am going to just drop this in here one second guys you don't really need to know what I'm doing here it's for another course uh next so let's just go back to the save workflow so we're going to save data to the database by creating the project we're going to hide the popup and check this out after we've hidden the the popup I want to give feedback to a user that something's been created they might see it directly in a card what's being created but it's also good uh to you know give more feedback so I'm going to say um success okay and this is a little plugin that my friends have created that will show a toast icon so you'll see what a toast icon is in a second let me just and you've seen these before uh let me just quickly find it and just change one thing so I'm going to uh top Center okay but let's just go back to this create button because we need to show the popup on a button click all right so we've created the popup and now I'm going to add a workflow on the button to first element actions show this popup so you can see that this is all logic based and the beautiful thing or the democratizing feature of bubble is that you guys understand workflows and logic already because you use computers every day you know what happens when you click on popup save buttons you know that by clicking a create button in the dashboard is going to probably show you a model or popup to create data you know this stuff so you can go ahead and you can create these workflows knowing very well how things should function what the logic is what the workflow is right so beautiful we click the create button we want Bubble to show the popup well there we go there's an action to show the popup let's do it create I'm going to click on this guy there's the popup I'm going to go ahead and find an image so the image I'm after is betterfly okay I'm uploading that image don't worry about sort of the layout within this uh that's for another course so this is going to be called brand refresh so we could pretend like we're an agency that does design work the client is called betterfly and we're creating a project and then within this project we're going to have Associated tasks that people work on and update statuses and we have end dates calendar Pickers collaborators all the stuff we build in beginners C and then I'm just going to go to lauram lauram ipim going to grab some Lauren I'm going to say that this is the description going to grab all of this stuff right maybe it's a big description I'm going to paste this in here and we're going to click save success all right so if we go to the database guys I'm going to go to my app data here it is here projects let's click on this pencil icon let's look at the data here's the description I can edit this if I want to here's the image I can see a bigger version of it if I want to here's the title who created it Daniel created it he created it at this date and time okay so we have some data to play with now how do we view the data now let's move on to the next section which is displaying data dynamically I'm going to use a repeating group for this remember because we're going to have multiple projects I'm not going to create I don't know how many going to created 1 million maybe I don't know you know so I'm going to grab a repeating group drop it in and let's just just do some basic design works I'm going to let it stretch edge to edge I'm going to remove the Min width the Min height will remain for a second uh within it it's going to be a column and I want this layout here where it is three rows across or maybe four rows because I think this design is slightly uh narrower but we decide on house displayed so let's work at that let's say uh number of rows I'm just going to I'm going to remove the number of rows because I don't know how many rows of data we have so I'm going to let it go infinite the database decides how many rows should appear but columns I want a particular design so I'm going to say columns four columns four okay um all right so don't worry about the detail guys we're looking at the overview here so I'm just clicked on repeating group and uh sorry I'm going to click on group projects I'm just going to add some Gap spacing here of 48 let's push this down okay so in terms of a repeating group a repeating group needs needs data so all we're doing now is we linking to the database the first thing bubble needs to know is what type of data or what type of table is it it's the project so I'm going to say type of content and I've got some options here I've got these are the ones I'd be using usually in a repeating group data types user or project I'm going to say project very well which projects now if we're building out uh beginners Camp the big course we would have we would want to see projects belong to a team that Daniel Works within okay that's too complicated for this not too complicated you can learn it very quickly but just for the sake of this course I'm just going to say go find uh do a search for projects without any constraints what we could say as a constraint is where the um created by equals current user so this would basically be a server side constraint or filter which is instructing bubble to just go fetch the project that the person holding the mouse created which is Daniel so you can see how powerful this can become because it doesn't have to be current user it could be current users team okay in this instance uh yeah I can leave it at that because Daniel is creating the projects that's fine then we can sort the way that the projects are viewed on the page is it the most recent maybe we have a dropdown which is sort a toz sort um most recent oldest we can choose a drop down to then link the dropdown can link to the sort but I'm just going to say created a date uh descending no and then close so I'm just searching for all projects right let's create this design for the card so when it comes to repeating groups we just design design in the first cell so I'm going to get this card in the first cell and then the next thing I'm going to do is say card medium uh so some of the design work has been done for me and then on the layout tab I'm going to say it's going to be a column within it and just fill up all the available space okay now on the repeating group um actually it'll be easier just to show you so if I grab some text I draw some text inside and I want this to be the title okay I would add Dynamic data uh and it's asking for paent groups thing and that's because repeating groups have a data source but get this groups have a data source popups can have a data source a parameter is a data source a state is a data source an API is a data source so we get very granular with where we get our data from now this is an easy one because a group is nested within a repeating group so we need to feed project data into that group so I'm going to click back on this group I'm going to call this group card and this is going to be project data that I'm trying to display and I'm saying to the data source now instead of grabbing data from the database grab it from the cell because the cell's been populated with the data source with the constraints have set up already so I can just say current sales project all right so I could have a th000 projects or push into a thousand different cells push that particular cell data into the group good to go so now I can say parent groups projects and then I can pull anything I want here title there we go now I'm going to set up a body large for the title and I'm just going to do some quick design work here edge to edge blah blah blah and there we go so if I now refresh check this out guys brand refresh boom that's coming from the database how cool is that let's continue with this design I'm just going to some of the stuff I'll just glaze over it's not important uh just do some basic design work here um do I want separator yes white and 24 okay now I want an image in here as well guys so I'm going to draw draw in an image I'm going to grab some Dynamic data from this image so last time I loaded an image right because was static now I'm pulling it from the database so it's a parent groups projects image and I'm going to cut the shape by saying zoom into that shape please I'm going to go to the layout tab I'm going to select edge to edge and I'm going to choose a fixed ratio of 32 common photography signs uh actually maybe a 43 would be better here 43 and then I'm going to make first within this group I want this image to be first so I'm going to make first and then I'm going to add some Gap spacing of 24 and then I'm going to take group project title copy paste and then this will be group project I'm going to change this to the description and the description text needs to be different smaller so I'm going to say body small okay now I want these text to be Clos together like elements remember described how like elements need to be closer together inputs and then the button would be further away or the image would be further away so I'll put that in the column and I'll have the space to 12 it's part of my design system process fit height content okay all right guys let's now have a look all right so there is our Dynamic data too much text here so check this out what I'm going to do is I want two rows of data so I'm going to set a Max height of 40 so now for refresh just showing me two rows of data here all right so this card I'm going to change the design quickly choose card small rather and the next thing I'm going to do guys is that is one project let's see what the next one is this holiday campaign in here so let's create another project I'm going to say create there it is uploading this is a holiday campaign and I'm going to grab some Lauren ipom uh just some random Lauren Ipson here just for developer processes save boom there we go there we go now we're cooking on gas now we're creating data okay guys now you're probably wondering Okay so we've done create just did it right now uh we've done read we've displaying it in a repeating group how do we edit okay we're going to cover this next so editing how do we edit so first we need a way for a user to know that it's editable okay because maybe if I click on one of these then it changes the view and then it shows me tasks belonging to better fly and if I show you my figma file that's what we do build in the beginners Camp is you click on betterfly and then that shows you a different view with the tasks Associated those tasks have checkboxes where we can we can search the tasks within the betterfly project we can change the status show me the complete statuses or the planning stage of the task we can see there signes the progress through here everything is editable here as well so a user would change change the pro the progress from planning to in progress from in progress to complete fully functional productivity app that we end up building we're not going to go that far though what we want to do is just change some of this data here okay so let's um let's grab what I'm looking for is um vert right so we need a way for someone to edit data so I'm just going to change this to project title this is a placeholder that just allows you to visualize data better then go to an outline icon drop that in there and I'm just changing I'm creating an an icon a clickable icon here um just so user knows that they can edit this group in a row speeding through this make last and this is called called edit all right all right so anyway so now we we need a way and I've started the workflow here just from just from this section here just to save some time but we need a way that when this icon is clicked this icon here you can see the it changes from a arrow to a hand so we know it's clickable nowhere else is clickable just here we know it's clickable we need a way to First display uh to show that same popup that we created a project we need a way to now push this project into that popup and then a way to edit the data as opposed to uh create the data all right so you don't you don't need to create three different pop-ups one for creating one for editing one for deleting no no we use the dry method do not repeat yourself we've already created the popup I'm not going to recreate it instead I'm going to adapt the design adapt the functionality to be able to just edit stuff straight off the bat into that work I've already done that popup okay so let's do that so that means we've got a bit more work to do here so in group project what we need to do is make sure that the popup has a data source so I'm going to say type of content is a project but I'm going to leave the data Source empty because I'm pushing data into that through a workflow all right so that has a data source and now we can add um initial data we can add initial data to our input so we can prepopulate any uh element that takes uh input data so inputs multiline inputs picture uploaders file uploaders Maps we can have pre- dat from the database so let's do that so I'm going to say that you're going to get the data from the parent groups project uh its image okay it's image I'm just going to try something here as well I'm going to process with image ex don't worry about this this is just an API I'm using here okay okay so I'm going to pre-populate with initial content now the popup was set to a project data type therefore or in relation to the popup the input is a child element and the input can now reference the parent groups projects title initial data and initial data is overlooked if there is no initial data so if we click on create project for the first time there's no initial data but if now we click the that little icon to edit a project well we pushing project data from the database into the popup and we're displaying it as initial data uh in those inputs going to do the same here so paent groups projects description all right check this out so if I just want to create data create a project or I click on create empty nothing here okay uh sorry we just we have to run that workflow so what I'm going to do is that when these three buttons are clicked I'm just going to change this to a green color so can see what I'm doing then I'm going to choose something called element actions display data you could also say push data same thing where do we want to display the data in the popup project where is the data coming from well it's just coming from the parent where I'm clicking in that card in the cell of the repeating group that's the data so it's a parent groups project so can you see how we like we matching data the repeating group has a data type called project the popup has a data type called project therefore we can push data between these two containers because they share a similar data source now my logical brain says okay if I click on those icons the three dots I'm displaying data into the popup is there something else I need to do yes this is logic well you also have to show the popup cuz I can display it into popup but we don't have to see the popup so I'm going to say element actions show popup project boom let's try it brand refresh let's do this one first boom betterfly brand refresh data it's going to refresh the page holiday campaign boom holiday campaign how cool is that refresh the page or I can just create don't worry that I'm refreshing the page is because I haven't set the workflow to basically refresh the data for me but we can push take the data out of that as well with a particular step okay so this is where let's step up a level now let's go to level two we've done level one got a good overview we've building out stuff I'm going to take you to level two now okay level two is this the save button I don't want an edit button here I just want save can have an edit button that we can show conditionally when data exists in said I'm going to do this I'm going to say um change this to Green as well I'm going to add conditionality to a workflow remember the condition I set here for this element the condition was change the background color to neutral 200 when this is clicked that's the condition we can add conditions for workflows and these conditions can be Daisy chained Mega powerful let's keep it simple when do I want to create project data well I want to create project data when there is nothing in this popup when I haven't pushed data into this popup that's when I want to create data so I'm going to say only when point to the popup popup project I'm going to say it's project and then I'm going to say is empty so if I've clicked on the create button and I haven't displayed data into the popup I've just clicked on create I'm not pushing any data around it's just a blank canvas that's when I want to create data how cool is this so now I'm going to copy and paste this block copy paste going to change it to orange green for create orange for edit that's the way I do it and now on the orange block I'm going to say when it is not empty so the opposite of is empty when I have displayed data into that popup well that means I'm probably want wanting to edit data wouldn't want to create it I when to edit it because data exists so therefore I'm editing data that I've pushed into the popup so then I'll would say data things and I would say make changes to thing the next one down bubble says thing to change what is it well in relation to the button the button is in a popup that popup has data so it's parent groups project here we go parent groups project and I want to change everything so the description is in the multi-line input because I've made changes to it the value and by the way if you leave one of these blank is absolutely fine bubble won't change it it's a differential update bubble just looks for where there are changes and goes ahead where is the image well it's a picture uploader where is the title title value okay and I can just pick this up take it to step one so when there is no project data we create create a project when there is data we made changes let's try it so let's go on to um let's do logo designed for outward so let's change the holiday campaign so I'm going to click on this going to choose outward instead logo campaign and I'm going to change the wording just to start with Greg here just so we can see the change and by the way yes I can design this so outward is EDG to Edge I just don't really have time right now so if I click save it's not creating a project it's editing an existing project so we'll still have two so if I click save there we go guys outward logo campaign there's Greg there all right so we've edited create read update I guess cred cred same thing editing and updating let's finish this off now let's finish this off because once you understand create read update delete that is the Crux that is the overall um point of an application Airbnb people create listings people can customers then can read the listings listing creators can edit listings and then delete the listings and leave the platform now they've come full circle okay so how do we delete so it would be a similar thing so we would start with pushing data into the popup and I'm going to do this I'm going to take some text I'm going to drop it beneath the save button I'm going to say delete okay I'm going to detach the style put that in the center I'm going to change it to red red for danger okay red for destructive it's got to be red and I'm just going to design it uh so nice and tight and I'm going to put it in the center okay I'm going to hide it by default why because of this if I refresh the page and I click create you can't have a delete option when there is no data there's nothing to delete so we only want to show the delete when we have data in there so when we editing a project that's when we show delete because maybe that's part of what they want to do they don't want to edit it they want to deleted so we'll conditionally show it guys so on the text delete I'm going to say not visible in page load collapse when hidden to remove the that space and then I'm going to say on condition that the parent groups project is not empty so if there is a project that's when it's visible okay that's when it's visible and let's run the workflow while we're here very simply we're going to go to data things delete thing delete Row in the database delete object depending on whether or not you have developer experience what do I delete will I delete the parent groups project and then I um then I hide the popup because there's nothing else in there and then I'm going to notify the user that has been successfully deleted successfully deleted even though it does disappear from the repeat group that repeating group could have lot of listings okay so you always want to give users some feedback that would be a an error let's try it let's delete logo campaign okay here it is here delete if I hit that boom successfully deleted and gone yes guys if you're still with me congrats thank you for hanging in there to end up to end this course we're now going to be be doing something a lot more fun um I want to build for you a hero section and a Navar done to the professional standard that I would do it when I'm building my applications okay so this will be quite a big section um I'm going to have to go through fairly fast but again giving you a flavor of what it feels like to build in bubble and bubble is fantastic at design ignore the web flow and frame of people saying bubble's not great for design it totally is you just got to understand how to use it so let's jump in and look at what we're building so we're going to build out this hero section part from beginners Camp all right we've got a three column nav bar when we get down to mobile sizes now we've got a two column nav bar much smaller this hamburger icon or menu icon shows up and these buttons are hidden all right text gets smaller buttons stack in a column instead of a row that they are here and then the image gets a little bit smaller and got some beautiful 16 pixels of padding all the way around all right so let's get going so I've created a new page and let's start from the very beginning here is the page I've and I'm going to call it Lando naturally this would be on the index page all right index page is the default naked domain so for me build.io that goes to my marketing page of which you know we're building a marketing page right now straight away set up my page I'd set it to column top to bottom and I'll change my default width for the UI Builder to 1400 and you know the height we'll decide a bit later okay so we need some text here all right so this is um unlock your teams potential and we're going to look at these various containers so there's a container there's a container containing all of this stuff and then there's another container here so the first thing guys I'm going to do is I'm going to pick up my group and I'm just going to drop it on the page this is going to be called group hero section okay the first thing we do is we lay just a group just so we can Mark out this is a hero section and then when I get to designing the next part of my marketing site I would have content section or Community section or feature section all the way down to the footer section so we divided vertically into sections and we let them span edge to edge all right so this is going to be a column and I'm going to just remove the fixed width so it's edge to edge nen width and the height I don't really know at the moment it depends on the content the content will set the height uh and we will come back and adjust it if we need to all right what I'm going to do is just push it down 80 pixels from the top because we're going to use an 80 pixel nav bar at the top I'm going to add 32 pixels of Left Right padding Okay the reason why I'm doing that is because when we get to the mobile section we're going to need padding all the way around let's keep referencing this there in the end okay so I'm going to just grab this text first that's where we're going to start and here are some text I'm going to draw it in and I'm going to paste unlock your team's potential and then I'm going to set this to a H2 okay I'm going to remove the fixed width and I'm going to remove the mwidth and I'm going to remove them in height and the last thing I'm going to do is on the appearance tab I'm going to set that to the center all right so after that we have this like a little um beta text piece here so I'm going to grab some text they drop that in just above this will say beta and I'm going to put that in the center and to remove the fix width remove the Min width but I am going to check fit width to content okay I'm going to remove them in height the next thing I'm going to do is I'm going to change the color so I'm going to choose my brand color here and then I'm going to set a background style of flat color which will also be the brand color but I am going to change the opacity to be 20% all right now we need some padding around this bad boy and let's just have a look at some of the design here so semi bold 14 and eight and three okay so semi bold 14 first of all I'm just going to actually detach the style here because it's a oneoff so this is going to be 14 me change it to semi bold and I'm going to on the loudout tab choose three top and bottom on the padding and then eight left and right and we going to make it round as well all right so I'm just going to say 100 and now I'm going to take these two pieces of text right click group elements in a column container what's happened there just going to undo that ah it's outside of this ah I see okay so I'm going to pick this up and I'm drag it into this container right this section group here section and then I'm going to make first now I'm going to grab both of these together because I want to create another nested group okay I've got the section which is edge to edge but I actually want to constrain it uh so it's more centered and let's just have a look at the settings here so this group this is what we're creating here this is a fix width of 576 or a Max width of 576 so I'm going to pick these two pieces up by highlighting them and I'm going to say give me a column container please surrounding those two things this will be called group title and then I'm going to apply maxwidth of 576 and then I'm going to recenter it in the center and I'm going to apply 24 pixels of row Gap there we go all right making good progress next thing we need is this text over here so I'm just going to save myself some time by copying this text I'm going to grab some text and I'm going to put it inside this new container I've just created draw it in and naturally it will drop it to the bottom because of our Flex settings all right um and I want that in the center and on the layout tab I'm going to remove the fix withth and men with because it's now nested and now the parent group uh dictates what that should be okay now I did say we're doing this to Professional Standards we're going to be jumping back and forth and making sure that all of our spacing is how it should be so the spacing between these two elements that's 12 and 24 okay so I'm going to take this text here I'm going to take beta right click group in another column container and set this to 12 and in fact this is the one called title and this is the one which I'm just going to say is called text let's see what's next so now we have the learn more button and the get started button and the space between these elements the Gap space is I get this container 48 okay perfect so I'm going to grab a button here I'm just going to drop it in this will say learn more I'm going to change my style to secondary large and on the layout tab I'm going to make sure that the button hugs the content the content is learn more I'm going to remove them in width and I'm going to say fit width to content and I'm going to use a bootstrap 48 pixels to perfect let's do another button copy paste now this is a different color this will say get started all right the more important button that's why we're going to use a primary large and now we're going to take these two guys and put them in a row container because they on the same xaxis so row container this will be called group buttons and on the layout tab I'm going to choose some Gap spacing of 24 with both ways because what's going to happen is when it gets down to mobile sizes the buttons instead of being next to each other they're going to be stacked and then edge to edge across a mobile phone side across a mobile phone screen so we need to put our row Gap and our column Gap within this container all right and now we can fit with to contents and that we'll put it in the center after we set the horizontal alignment and I'm going to go back to the group here section and set a gap spacing of 48 because that is a container and then inside is a container which has Rog gap of 24 then we have another container with these two guys in which is 12 so 12 24 48 all right guys we're cooking on gas I'm going to highlight group hereo section and I'm going to remove fit height to content because I want to sort of push down a bit now we're going to grab this image here okay this image so I'm going to grab an image element draw it in and then I'm just going to quickly put it in the center I'm going to set up some parameters before I upload the image so I don't want it to be fixed width this is fluid but I do want a Max width of 992 now where do I get this number 992 from again bootstrap standard and let me show you another place so if I head over to the responsive tab we've got 992 all right so bubble has adopted some of the bootstrap standards here now I've already uploaded this image um I could upload it again or I could just go to the file manager and I could just grab it from here so I'm going to copy that link so I'm not uploading it twice and I can just paste it in boom done now obviously when it comes to images we need to set the aspect ratio what do we want this image to fit and I'm going to head over to the L Tab and previously we'll remove the Min width first and the Min height previously I mentioned that aspect ratio we have options here now we have to you can set any aspect ratio you want and the aspect ratio of this image that I created in figma it's a screenshot from beginners Camp is actually a 107 aspect ratio so it's arbitrary you can set any aspect ratio you want so I'm going to say if I say 107 now I can see that now that it's rendered it looks a lot lot better okay back on this group I'm going to set a fit height I'm going to remove the Min height on the group hero section and set fit height content just so that it encompasses this image as well all right what about a bit of uh Shadows let's just first see how we're getting on here so if I say Lander okay so we can't really see the border of this I didn't put a border on so we're going to use a shadow here so I'm going to head over to uh down to Shadow style I'm going to choose outset okay um let's try a spread radius of 20 blur radius of 40 I'm going to change the color of that and I'm going to set it to about 5% get me there guys all right so have a look at that yep that looks quite nice let lifted off the page and let's choose some roundness of let's choose uh let's try 16 no let's try 12 yeah that looks really nice let's refresh the page and look at that guys that looks pretty professional uh if you're aware flow person here your proof I've done this very very quickly okay it's more about your understanding of design rather than the tools bubble gives you the tools to do everything you need on the design side okay well what about responsive design what about responsive design because if I go down here um let's have a look at 768 looks good this image is sort of rendering and then down to 320 it doesn't look that good so let's fix this but 375 is kind of the adopted responsive size these days so the first thing I'm going to do is when you're on a mobile phone so on a desktop you want more padding okay you've got a lot more horizontal space on a phone you don't have a lot of space so someone like apple if you go to any Apple website they use 16 pixels Left Right padding because they only maximize screen space on a phone that's always what you want to do let me show you how I'll do this so I'm going to add a conditional on group hero section the main group that's hold in all of these other groups plus the image I'm going to do this I'm going to say on the condition I'm going to say page for page width and by the way this is a condition that you learn at Flex camp and this is a method this is the the method at the moment bubble is working on a new way for breakpoints but I devis this system and it's consistent so if you're looking at this going wow that looks complicated the thing is you'll be doing it over and over and over again just this method no other method so I'm going to say page width and I'm going to choose a smaller then sign when you say 576 that's one of the bootstrap break points bubble doesn't include it here for some reason but when say 576 that means now we're down to mobile sizes and I'm going to say when that happens set the left padding and the right padding now watch what happens in the design here set it to 16 16 and 16 can you see how we've maximized the screen size there's some still some more work to be done because our title text is too large so I'm going to right click I'm going to copy this guys copy save myself some time I'm going to click on the text element toine another condition on the conditional tab paste in the expression and then I'm simply going to say font size I want the font size to be smaller so instead of so let's try 36 maybe we can choose 48 no I actually like let's do 40 two lines of text how nice is that how nice is that so we're at desktop sizes squeeze down desktop sizes see we got the maxwidth kicking in here squeeze down boom mobile sizes kicks in okay let's deal with this button now so I'm just going to double click the group buttons and the first thing I'm actually going to do is I'm just going to adapt the column here to 12 so these buttons are closer together and now check this out now I'm going to go to the condition here I'm going to paste in the all the same conditions that we used for the other one so past condition current page width is smaller than 576 and I'm actually only bring it down so you can see it happening in real time bring it down here when that happens guys I'm going to say um minwidth of this group I'm going to change the pixels to percentage and I'm going to say 100% that's the first thing can you see how it spans edge to edge but we're not quite done I want these buttons to stack this is the design I'm after here okay okay that's a design I'm after so on each button I'm going to Define conditions I'm going to paste and I'm going to say exactly the same thing I want you to be minwidth 100% And then I'm just going to actually right click on this button itself and I'm going to say copy special copy conditional expressions and this saves us a bit of time click on this button right click paste conditional Expressions boom and our mobile responsive work is done check this out desktop tablet phone all right the Gap spacing is a bit big as well so layout tab 12 one last look boom absolutely love it okay so that's part one uh hero section and you know you can do all sorts of things um like overflows and put things on different axises so they float there aren't that many limitations you can do animations with bubble um a lot of things okay but I prefer to keep things fairly simple and just welld designed that people can digest if you look at Airbnb Uber atlason notion all of their designs are actually quite simple they got no crazy sort of animations because in real life uh people just want to see a few things they want to make sure that they trust you and good design is actually part of that they want to get to the information they need as soon as possible and they don't often want animations to sort of get in the way they don't want too flashy so bubble can do all of that stuff but I prefer to keep things simple welld designed to the point fast loading all right guys in this next section we're going to build out this Navar and this is slightly more technical because we're going to be collapsing groups and actually changing the design quite in quite a considerable manner but we're not going to be be creating two separate nav bars we're just creating the same one and we're using conditionals to show and hide different elements change the behavior and this is where we're going to use a reusable element all right let's get started so over on the UI Builder I'm going to add a new reusable element going to call this Navar I noticed I did have another one but I'm going to create a new one now I left myself 80 pixels of space so I'm going to go to the lay and uh this is going to be a row and I'm going to set the width to the same width of the page and the height to 80 okay so now we need to divide it into three parts so let's just work on the left hand side first now the first thing is I don't want the content to stretch to Infinity across a big screen so I don't want like logo on the far left uh and then buttons on the far right if you want to massive screen it's actually a long way to move your mouse and if you look at designs like Twitter they they centered so it's just easier and faster to navigating so we need a Max width is what I'm trying to say so we're going to set a Max width of 1 12200 in this nav bar and when I build up my marketing Pages all of them have Max width in terms of the content of 1200 the screen can be as big as possible but the content will still be constrained a bit so what I'm going to do is I'm going to grab another group and I'm going to draw a group inside okay this will be called group content and this is going to be a row distributed left to right um and we're going to remove the fixed width we're going to add our width of 1200 remove our minwidth and remember the Height's going to be 80 okay so back on the nav bar itself let me just bring up the property editor I'm going to put that in the center okay so here's the group here now this content is going to have 32 pixels left right and you guessed it when we get below 576 we Chang that to 16 left right okay let's get it going so image let's draw an image in here inside this new container I'm going to go find that image that's just a logo of course uh let's use origin for this case copy and I'm just going to paste that in and there it is there now on the layout tab I'm going to put this vertically aligned in the center and I'm going to choose an aspect ratio 1: one and I'm going to choose 32 pixels for this bad boy and that can be fixed as well this you don't want this to change responsively now I'm going to pick up some text I'm going to draw it in let's call this origin of course we can drop in a full logo here if you design your own logo and uh let's try heading six on this guy and let's drop it in center and have a look see remove the fixed width remove the Min widths fit width to content and then let's group these two together because we need we don't want just elements scattered across the row we want the in terms of parent elements as less as possible so even though we have the logo and the logo name and then we have all the text links in the center and then we have two buttons on the right I only actually want three groups grouping all of these parts of the nav bar so I'm going to right click group elements in a row container because it's on the same axis again so row again okay we're going to call this uh group brand and I'm going to add I'm going to push these two elements uh apart by adding some column gap of eight okay so that's group brand and now guys check out check what I'm going to do now I'm going to go copy paste and this next group is going to be called group links and then I'm going to Simply say copy paste and the next group is going to be called group buttons okay and then I'm just going to actually delete what's inside here so uh hang on before I do that I just need to set a height I need to set a height here so let's do let's do 48 on the height so Min height is 48 and Min height here is 48 okay because we've set that now I can delete what's in here and let's grab some text and let's create these links so the first link is home then we've got Blog then we've got pricing uh so grab a link first one is home styling looks fine so far remove the fixed width remove M width fit width content then move got blog and with these text links you actually set the page whether it's internal external and you just link up the pages that way so um if I wanted to set this to a page I could just choose a page here I could say send me to the sign up page from this link or if I choose external bubble then says we'll just put in the URL here okay I'm not going to put anything in here for now actually I might have to put things in here just because otherwise bubble will throw an error and this is purely a design tutorial but let's just say um blog and let's say pricing here okay now I want to distribute the content in the center so head over to the layout tab first of all the container alignment needs to be Center and then we can vertically align each one in the center now I want more spacing between these elements So currently we have eight I'm going to try 12 I'm need try 16 and I'm pretty happy with that okay now the buttons I'm going to grab a button I'm going to go to the final group here here and this is going to say um let's have a look at the design actually login and sign up so this one says log in and the style with the secondary large on the layout tab let's remove the fix width remove the inwidth fit width to content and the height is going to be 48 pixels tall and lastly if I copy and paste that button I can just then adapt the login button to a sign up button with the primary Lodge and buttons you can also style links to be buttons as well but obviously you can't run a workflow for link you can only run a workflow of a button so it's up to you how how you'd want to do this okay and then on the container um alignment for this row group buttons I'm going to push it to the right hand side okay let's just have a look at this responsively to see what's happen happening here so if I go down to 992 still looking good 768 still looking good but starting to get a little bit tight I could have more links in here remember go down and then we'll go down a bit further stuff starts to look terrible so what we going to do is this I'm going to go to the group links because at mobile sizes we shouldn't see we should see the brand group with a menu Mobile menu icon on the right hand side so we need to hide the links group and hide the buttons group with conditions now you know what these conditions are instead of 5 S6 break points for these conditions I'm going to use 768 just because of the design it needs a bit more space okay so let's bring this below 768 so we can see this happening in real real terms so group buttons what we're going to do is we're going to say page width smaller than 768 then this element is visible uncheck okay the last thing we need to do see that this group buttons is still left here we won't be able to see it but it's left in the background I'm going to say collapse when hidden there you go so then this takes its space it's place sorry it's going to um bring it back a second because I'm going to take what's on this group right click copy special copy conditional Expressions then on this blog set the links section right click paste special paste conditional Expressions so now I can see it here but I also need to collapse when hidden now what do we have boom okay almost done the last thing we need to do is this mobile menu so I'm just going to go to Hero icons quickly and remind myself what is called uh let's do this one let's do bars three bars three okay on the UI Builder I am uh I'm going to grab outline icon I'm just going to sort of draw it in anywhere this is going to be bars three and let me just do some styling very quickly 24 pixels in the center okay and I'm just going to push this to the right of uh this here okay so it's sitting here or we could actually just make last okay the main thing to remember that we have these three groups and then this bars is sitting outside of these three groups because we're going to hide this group and hide this group so this needs to be independent but we're not going to see this on page load all right so look at this we say this element is visible in page load no and collapse and hidden okay now it's gone all right and I can see it if I only show hideable I can see it over here now I'm going to apply it's the opposite uh condition so so if I take this condition here current page width is smaller than 768 and I paste it in on this mobile menu now I'm going to say the opposite now show to me below 768 show me that icon because it's not visible in page load okay so if I go to the responsive tab I come down here now you can see it this is it an action guys how cool is that and then off of that you would decide well how do we show these navigation links home blog pricing login sign up what we would do is we' build a popup here we're not going to do it now don't have time but we would build a popup to then show uh for when a users on their phone to then show them the mobile menu with home blog pricing login sign up all right guys let's have a look on the on the actual design on the site as if a user would see it we've got a bit more work to be done here sorry got a bit more work to be done so this is a reusable element so it's in the reusable Element Section on the dropdown where we change Pages let's have a look so it's down here this new one that I've just created down here let's go to the Lander and this is how it works uh sorry that's a layout let's go to the Lander so quite simply I would just scroll down the left hand side find the nav bar just created this is it here bubble gives a preview click it once click it again beautiful there we have it there it is and then I could go anywhere I could go to the test page pick up the Navar drop it in there it is there and the beautiful thing about these reasonable elements is they would also include all of the workflows so the login workflow signup workflow all of the link clicks so wherever we drop it on the page that's all included so it's almost like his own page and we can repurpose that little component or reusable element anywhere in our app but we only edit it from one place that's part of the dry do not repeat yourself method okay let's go back to the Lander and now let's refresh and have a look boom how cool is that what I want to do is just add a little bit of a line underneath this guy so I'm going to edit this reusable element I'm going to head over to the actual Navar itself and I'm going to go Define each border independently go to the bottom choose solid and then then choose just a light gray and I've set up my styling already let's choose yeah neutral 200 one nice look guys look at that pretty amazing now we can also get this to float all right we would change this to an element type floating group if we wanted this to stay uh you know visible at all times and that's sort of a creative Choice whether you want to do that but at the moment it's a group it could have been a floating group and you can put like a little Shadow beneath it you can even conditionally add shadows and underlines or remove them or change color and scroll anything you want to do one last check guys let's bring up Chrome developer tools of which I teach as well and flex camp and we can just look at some of this stuff how cool is that all right guys we're going to stop there I hope uh you able to get really good Insight from this course overall hope you had a good time hope you learned a lot I actually love teaching this stuff so make sure to check out all of my other courses and hopefully I'll see you at Bill Camp very soon so if you want to take your bubbling to the next level potentially work you know look to work for an agency you'll need to step things up now I've talked about beginners camp a lot probably the best selling course in bubble of all time um I've fed over 30,000 students through it and I've been bubbling for 7 years okay building ups for seven years so it's a pretty good place to start after that you can look at something Flex Camp which is a masterclass in responsive design this is all bubble by the way taking you to some responsive settings here and look how beautiful all of this layout is and I teach you a lot more than just using bubble here this is about industry Standard Building for responsive design using bootstrap and building using uh Design Systems okay you can even build responsive dashboards who would have thought that this is all bubble all right coming down to mobile sizes here we are here here's our transactions so that's Flex Camp that's available right now then there's things like Marketplace Camp I just take you through this very quickly here is a listing you know with a sticky uh with a little sticky section over here where you can book set the number of guess use the date picker here to decide and then you can book by the way this is fully functional so this connects to stripe it takes real card details we use test details but you could launch this as a two-sided Marketplace all right um You would start at the home you do a search down here that would connect to the Google Maps API then you can go search that API key removed right now so you can't see the map now but you could search like listing types you want a room you want a number of rooms four you want particular listings you want checkin dates check out dates and then you can click through and see the results on the map and also in a repeating group this it covers everything guys this covers like account creation signing up creating new listings if I create a new listing over here this is pretty vast all right pretty vast so that's Marketplace Camp SAS Camp I think is my second best seller in terms of courses and with SAS camp that that's a real deep dive into like payments transactional email analytics how to build a fully fledged SAS application that you can monetize see external analytics building dashboards building storefronts signing up customers of stripe connect connecting other people's stripe account to yours it is a you can start it as a beginner but you need to do beginners Camp first but it is pretty incredible what you can do here you can see all the transactions here um and you know you can add more products here the products over here you can edit the products you know these could be courses they could be PDFs anything you like so it's bit like building a Shopify experience like you build Shopify all right uh so you've got Flex Camp SAS Camp Marketplace Camp covering all these big sectors and then beginnner Camp is where you would start and this is just everything everything is built in bubble here guys everything that you can see uh is built in bubble weight list Pages before we get started how to deal with email automation segmentation marketing campaigns transactional emails uh all of the kind of payment services that you need looks incredible and if you are serious about becoming a bubble developer your next step is beginners camp and then you move on to one of these and you will be a professional developer within 6 months guys I hope you enjoyed it again I'm Greg check out Bill camp. check out the courses that are often on sale and hopefully I'll see you in the first course take [Music] care [Music] he [Music] pap [Music] oh [Music] I [Music] oh

Channel: Buildcamp

Views: 82,411

Keywords: bubble, bubble.io, nocode, gregory john, bootcamp, nocode development, app development, buildcamp, no-code

Id: a01LP-zsrJA

Length: 180min 0sec (10800 seconds)

Published: Tue Oct 17 2023