Section 1 (Lesson 2/10): Bubble's full-stack visual programming platform offers an intuitive, drag-and-drop interface designed to bring your digital ideas to life without the need for traditional coding. In this video, we explore the main features of the Bubble editor, including:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

What makes Bubble so powerful is the fact that we offer a full stack visual programming solution. Bubble's interface does it all. So let's have a look at some of the main features.

Down the left hand side we have the Design tab. That is the current view that I'm in.

And the Design tab is really exciting because it's where we bring our designs to life.

If I click across to the UI Builder which is currently engaged, we have visual elements such as text elements, buttons, icons, links, and images, some of which you can actually see on the page at the moment.

We have Containers, which is a way to organize our data. And we have input forms, which is a way to collect user data.

Let's just jump ahead to the Data tab. In the Data tab, we can see we have some sub-tabs. Now, data types is a collection of data, such as we would have a User data type, a collection of User data, such as their first name, their last name, date of birth, where they work. And in this course we will also have some other data types, some of which will be Job data. Job has a title, a term, such as full-time or part-time, and a salary range. We have Company data, so you can think of data types as just a way to collect data together, much like in a sub-tab in a spreadsheet.

Then we have our app data and this view might look quite familiar to you because it looks a little bit like a spreadsheet where we have some header columns with data. So if I open a row from this table, I'm actually able to edit some data, so I can change the name from Emma to Lucy. Let me change it back to Emma. We'll come back and go through the Data tab in more detail shortly.

Let's jump into the Workflow tab. The workflow tab is the way to connect the frontend to the backend, amongst other things. For instance, if a user clicks a button sign up, we would use a workflow to then collect data from the inputs and put them into the database.

Here is an example. If we start on the design side, if I come across to the sign up button,

double click the sign up button to bring up the Property Editor, and if I click on "Edit workflow", you can see that I've created a sign up workflow. In step one, which I've just clicked, we can see that I'm collecting an email address and a password, and then Bubble is basically doing the rest of the authentication for us. We'll come back to this in more detail, so don't worry about these additional steps.

The Styles tab is also important because we're able to configure global styles for our applications in one location and make those updates in one location, such as our primary button, which could be a sign up button, could be a create data button, could be a make payment button. But we are able to basically attach styles to these buttons so that we don't have to individually look for these buttons across all of our pages at a later date to make visual changes. We can actually just do it from this location.

Then we have the Plugins tab and I've installed four plugins and we'll come back and talk about what these plugins do. But we have a very, very large community of plugin builders at bubble that have built any kind of plugin that you can imagine that do all sorts of things, from animations to connecting various services, to data manipulation.

And on the Settings tab is where we manage things like our plan. We can set a custom domain, we can update languages and use localization, and we can set SEO settings.

And the Logs tab gives us analytics and charts about how our app is actually being used from a resource standpoint.

The last thing we'll talk about is this little dropdown at the top because this is how we navigate between pages. So currently, if I flick across to the Design tab, we can see that I'm on the sign up page and I can just change to the index page by clicking on the page. I can also create a new page. So if I wanted to create a blog page, I would call it "blog" and then press create.

And lastly, before we end this lesson, I just wanted to mention an amazing feature called reusable elements. And reusable elements allow us to build reusable components which combines design and logic to be able to use across our app. Bit like styles, but slightly more involved because we are able to combine all of these elements once and edit them from a single location and then use them on any page in our app, such as a navigation bar or a footer.

So there are many other features available to us, but I think let's talk about those in more detail a little bit later on. We'll also get practice using these features as we're building out the app.

I'll see you in the next lesson.