The Complete Guide To Bubble Responsive Design (Flexbox)

The Complete Guide To Bubble Responsive Design (Flexbox)

Master the Flexbox responsive design engine

Learn how to master Bubble’s new flexbox responsive design engine.

This course covers everything you need to know about building fully-responsive applications across any user device.

Whether you’re building an app for mobile or desktop, you’ll learn the core concepts and best practices to bring your vision to life.

Buy this course $59 Get membership $99
What's included into the course?

What's included into the course?

By the end of this course, you’ll have a complete understanding of Bubble’s new flexbox responsive engine. This will allow you to quickly design beautiful apps for your own startup, or even create fluid products for freelance clients. Here's the full list of the modules included into the course:

1. An overview of the new flexbox responsive engine

2. Understanding best practices for page dimensions

3. Understanding page layouts and container alignments

4. How to position elements on a page in a responsive way

5. When and how to use margins

6. Using collapsible groups to create responsive page menus

What's included into the course?

7. Building fully-responsive repeating groups

8. Walkthrough: How to build a user login page from scratch

9. Walkthrough: How to build an Instagram home page from scratch

10. Walkthrough: How to build an Airbnb search results page from scratch

11. Additional tips & insights to help on your Bubble journey

FAQ

This course is built for:

  • Anyone interested in creating fully-responsive applications with Bubble
  • Anyone looking to extend their skills as a freelance Bubble developer
  • Makers who want to extend their knowledge of Bubble’s no-code toolset

  • A free Bubble account
  • A basic understanding of Bubble, although I’ll walk you through everything is thorough detail.

Section 1 – Upgrading to the flexbox engine

  • Getting started with Bubble’s new flexbox design engine

Section 2 – Understanding page dimensions

  • Learning best practices for setting page dimensions

Section 3 – Page layout & alignments

  • Understanding the new page layout & container alignment settings

Section 4 – Adding elements to the page

  • How to make new page elements responsive

Section 5 – Using margins

  • Understanding when and how to use margins on elements

Section 6 – Collapsing groups for responsive menus

  • Using collapsible groups to create responsive page menus

Section 7 – Repeating groups

  • Building fully-responsive repeating groups for any device size

Section 8 – Walkthrough: Building a user login page

  • How to build a user login page from scratch

Section 9 – Walkthrough: Building an Instagram home page

  • How to build an Instagram home page feed from scratch

Section 10 – Walkthrough: Building an Airbnb search results page

  • How to build an Airbnb search results page from scratch

Section 11 – Wrapping up

  • Additional tips & insights to help on your Bubble journey

6000+ students can’t be wrong

Michael Lee, Senior Product Designer

If you wanted to learn more about Bubble, you should take these courses. Lachlan is a very effective instructor that clearly communicates each step of the way. Each video is focused on specific topics and the course is easy to follow.

- Michael Lee, Senior Product Designer

Harry Brown, Founder of Dream Day

Great overview that takes you from a blank page to complete MVP. Perfect length and amount of detail to set you up well and put you on the right path. Highly recommended!

- Harry Brown, Founder of Dream Day

Marcus Byrd, Pega Developer

Really great courses to actually get up and building with Bubble. Lachlan doesn’t waste a lot of time with “fluff” information, just the stuff you need to know and why you need to know it. If you’re wanting to get up and building something then these are the courses you need to take.

- Marcus Byrd, Pega Developer

Kody Sjöbergen, Lead Consultant

Clear, concise and to the point. As a noob to Bubble I was able to follow along quite easily with the course content and had my cloned app within a day. Lots of concepts learnt here I can already carry over into other projects. If you want to jump into the no-code space, this is a great place to start”

- Kody Sjöbergen, Lead Consultant

Single course

 

On-demand access to clone course

On-demand access to clone course

Have a working product by the end of the course

Have a working product by the end of the course

Step by step instructions

Step by step instructions

This website uses cookies. Cookies are used to collect information about site visits, improve website performance, and offer relevant content and ads to users. For more information, please see our Cookie Terms of Use. Read more.