What will you learn?

During this course you will have your first approach to learning with Bubble.io. This powerful tool will give you a huge amount of possibilities in the web development universe, going far beyond the old and tired website templates and text boxes you already know. As you progress through the course you will get to know the menus and functions Bubble provides, all while learning about the basic concepts behind what means to build a social network: we are talking about page building —the feed, users and profile pages, for instance—, login and sign up functionality, databases, and so much more.

Requirements

The only thing you need to start learning is a computer and an internet connection. Even though our website is responsive for smartphones and tablets, Bubble is made to work on computers, so we incentivize its use. Also, even if this is not completely necessary, we do recommend having some familiarity with Twitter, so that you understand more efficiently what you are learning. Finally, it will be very useful —but not required— to have any sort of experience with logical systems and drag-and-drop platforms, as Bubble relies a lot on this. If you do know about this, your learning will be even faster.


Description

This course consists of fourteen sections filled with very precise instructions to make a Twitter replica using Bubble. Along with these steps you will find visual aid, as well as tips and tricks that will help you for future endeavors and projects.

Course curriculum

  • 2

    Section 2: Login Functionality

    • Step 1: Introduction to Login

    • Step 2: Creating Your First Input Form

    • Step 3: Background Color

    • Step 4: Bottom Border Color

    • Step 5: Bottom Border Roundness

    • Step 6: Set Input Style

    • Step 7: Create Label Group

    • Step 8: Set Styling of the Label Group

    • Step 9: Add Your Label Text

    • Step 10: Setting the Horizontal Alignment of the Text Element

    • Step 11: Conditional Border Color

    • Step 12: Conditional Label Text Color

    • Step 13: Creating the Password Input

    • Step 14: Creating the Login Button

    • Step 15: Create the Button Style

    • Step 16: Creating the Button Conditionals

    • Step 17: Creating the Transition

    • Step 18: Setting the Distances Between the Groups

    • Step 19: Creating a Fixed Width Parent for the Login Elements

    • Step 20: Intro to Workflows

    • Step 21: First Workflow

    • Step 22: Password Reset

    • Step 23: Password Reset Popup

    • Step 24: Password Reset Workflow

    • Step 25: Hide The Popup After Pressing Send

    • Step 26: Show The Popup

    • Section 2: What do you think about our Bubble Certificate so far?

  • 3

    Section 3: Sign Up Popup Page One

    • Step 1: Introduction to Sign Up

    • Step 2: Adding the Twitter Logo

    • Step 3: Adding the Title and Call to Action Text

    • Step 4: Adding the Sign Up Button

    • Step 5: Grouping the Sign Up Elements Together

    • Step 6: Creating the Sign Up Popup

    • Step 7: Recreate the Popup Style

    • Step 8: Create Action to Show Popup

    • Step 9: Recreate the First Page of the Popup

    • Step 10: Input Character Limit

    • Step 11: Character Counter

    • Step 12: Next Button

    • Step 13: Understanding the Sign Up Pagination

    • Step 14: Group Page Elements Together

    • Step 15: Create Your First State

    • Step 16: Set the Conditional Visibility of Sign Up Page 1

    • Step 17: Hide Page 1 in the Element Tree

  • 4

    Section 4: Sign Up Popup Page Two

    • Step 1: Create the Page 2 Parent Group

    • Step 2: Create Navigation Action on Next

    • Step 3: Creating the Back Button

    • Step 4: Create Workflow For Back Icon

    • Step 5: Add Text to Sign Up Page 2

    • Step 6: Understanding Checkboxes

    • Step 7: Add Your First Plugin

    • Step 8: Create Ionic Toggle

    • Step 9: Understanding Toggle Buttons

    • Step 10: Create The Other Checkbox

  • 5

    Section 5: Sign Up Popup Pages Three and Four

    • Step 1: Creating Your Password Screen

    • Step 2: Next Button Condition

    • Step 3: Creating Your Photo Uploading Screen

    • Step 4: Creating The User Bio Page

  • 6

    Section 6: Create Sign Up Action

    • Step 1: Understanding Data Fields

    • Step 2: Understanding New Fields We Need

    • Step 3: Create Fields

    • Step 4: Create a Sign Up Action

    • Step 5: Set Values for Your Fields

    • Step 6: Set the Value of the Photo

    • Step 7: Set the Value of Email Acceptance

    • Step 8: Create Action Condition

    • Step 9: Placeholder

    • Step 10: Celebrate the Sign Up Page Being Done

  • 7

    Section 7: Create Pages and Page Navigation

    • Step 1: Create The Main Page

    • Step 2: Set the Size of the Page

    • Step 3: Create The Side Bar

    • Step 4: Adding Your First Navigation Element

    • Step 5: Create the Rest of the Navigation Tab Elements

    • Step 6: Create Your First Reusable Group

    • Step 7: Understand Reusable Groups Tab

    • Step 8: Using our Reusable Group

    • Step 9: Create Floating Group

    • Step 10: Add Reusable Element Into Floating Group

    • Step 11: Creating Conditionals for Home Navigation Element

    • Step 12: Check your Conditional

    • Step 13: Create Header

    • Step 14: Create Your Other Pages

    • Step 15: Create All Conditionals

    • Step 16: Create Your Navigation Workflows

    • Step 17: All Pages Created

    • Section 7: What do you think about our Bubble Certificate so far?

  • 8

    Section 8: Create Tweet Composer

    • Step 1: Introduction

    • Step 2: Build Your Tweet Composer Group

    • Step 3: Tweet Composer Introduction

    • Step 4: Create an Image

    • Step 5: Setting the Image Value

    • Step 6: Complete Landing Page Navigation

    • Step 7: Understanding Custom Data Types

    • Step 8: Create Your First Custom Data Type

    • Step 9: Add a ‘Tweets’ Field To User

    • Step 10: Create Your First Data Thing From a Workflow

    • Step 11: Create an Alert

    • Step 12: Create Alert Action

    • Step 13: Test Out Your Tweet Mechanism

    • Step 14: Understanding the App Data Tab

  • 9

    Section 9: Create Your First Repeating Group

    • Step 1: Introduction

    • Step 2: Understanding Vertical Scrolling Layout

    • Step 3: Understanding Ext. Vertical Scrolling Layout

    • Step 4: Understanding Full List Layout

    • Step 5: Understanding Fixed Number of Cells Layout

    • Step 6: Understanding Horizontal Scrolling Layout

    • Step 7: Create Repeating Group For Tweets

    • Step 8: Editing the Type of the Repeating Group

    • Step 9: Editing the Elements Within the Repeating Group

    • Step 10: Set the Data Type of ‘Tweet Cell child’

    • Step 11: Understanding Group Data Access

    • Step 12: Add User Information to Tweet

    • Step 13: Adding the Tweet Text and Icons

    • Step 14: Create Data Fields for ‘Like’ Functionality

    • Step 15: Create First Workflow for ‘Like’ Functionality

    • Step 16: Create The Conditional Styling

    • Step 17: Add the Like Count Number

    • Step 18: Create Your First Workflow Trigger Condition

    • Step 19: Create a Second Workflow Trigger

    • Step 20: Change the Separator Color

    • Step 21: Navigate To the Tweet Page

  • 10

    Section 10: Create Tweet Page

    • Step 1: Set the Data Type of the Tweet Page

    • Step 2: Create Tweet Page Parent Group

    • Step 3: Add Elements to Your Tweet Group

    • Step 4: Create Your First Shape

    • Step 5: Copy and Paste With Workflows

    • Step 6: Create a Comment Data Type

    • Step 7: Create Comment Creation Group

    • Step 8: Display the List of Comments

    • Step 9: Back Navigation

    • Step 10: Tweet Page Testing

    • Section 10: What do you think about our Bubble Certificate so far?

  • 11

    Section 11: Create Users Page

    • Step 1: Introduction

    • Step 2: Create A List of Users

    • Step 3: Create the Data Fields for Followers

    • Step 4: Create Workflows on the Follow Button

    • Step 5: Create Workflow Conditionality

    • Step 6: Create Conditional Text for the Follow Button

    • Step 7: Create Navigation Workflow

  • 12

    Section 12: Create Single User Page

    • Step 1: Introduction

    • Step 2: Create The Profile Information Page

    • Step 3: Set Parameters of Shape Image

    • Step 4: Create Rest of Profile Elements

    • Step 5: Create the Tweets and Followers Tabs

    • Step 6: Create Tab State and Conditions

    • Step 7: Create Second Tab

    • Step 8: Create Tab State Workflow

    • Step 9: Create Group for All Tweets

    • Step 10: Create Group for All Followers

    • Step 11: Set Conditional Visibility

    • Step 12: Understanding Collapsing Height

    • Step 13: Create Collapsing Height

  • 13

    Section 13: Create Profile Page

    • Step 1: Creating the Profile Page

    • Step 2: Add Data to Send to Page

    • Step 3: Creating the Edit Button and Popup

    • Step 4: Add All Elements to Popup

    • Step 5: Use Autobinding

    • Step 6: Create First Privacy Role

    • Step 7: Finish Edit Popup

    • Step 8: Edit the Logout Button

  • 14

    Section 14: Create Explore Page

    • Step 1: Introduction

    • Step 2: Change the Source of Tweets in Home Page

    • Step 3: Order the List of Tweet

    • Step 4: Add the Header and The Tweets

  • 15

    Final Assignment

    • Final Assignment

    • What were your thoughts on our Bubble Certificate?