Nocodable

Design Studio

NEW

Components

Pricing

Tutorials

Start building

Nocodable

Nocodable

Design Studio

NEW

Pricing

Tutorials

Start building

Trusted by 3000+ Bubble devs

Trusted by 3000+ Bubble devs

The best Free Course to master Bubble.io responsive design.

The best Free Course to master Bubble.io responsive design.

Feeling stuck with Bubble.io responsive engine ? Our course will show you step by step how to build truly responsive applications in Bubble, 100% for free.

Get this course for Free

Get this course for Free

Get this course for Free

And take your Bubble skills to the next level

And take your Bubble skills to the next level

And take your Bubble skills to the next level

4h50

Hours of content

4

Chapters

30

Video lessons

2

Practice projects

Practice makes perfect

Just a sprinkle of theory

Before diving into the practice, we’ll cover the theory you should know. How Flexbox works, the different settings in Bubble etc...

Practice for real

Work on applied projects that will give you real experience you can use.

Real-Life Designs

Practice with designs you would really encounter when working on Bubble.

Applied projects to really learn.

2 practice projects

In this course, we’ll work on two complete projects : building a complete Landing Page, and a fully functional Dashboard using Figma and Bubble.

Landing Page

A nice, clean and professional Landing Page to showcase your project.

Dashboard

A fully responsive, modern and clean Dashboard you can easily re-use in your project.

Files needed included

Figma file and Bubble app included

This course includes the complete Figma file as well as the Bubble app used in the course to see the corrected version of the exercise.

Figma File

Download the Figma file used in the course to follow along and not miss anything.

Bubble app

Access the Bubble app used during the course to follow along and see working app.

Ready to finally master Bubble’s responsive?

Finally give your app the design it deserves.

Get your Free access to the course and finally take your Bubble's responsive skills to the next level.

Get your Free access to the course and finally take your Bubble's responsive skills to the next level.

Curriculum

Curriculum

What's on the menu?

What's on the menu?

Curious about the course’s curriculum? Come take a look !

Curious about the course’s curriculum? Come take a look !

Introduction

3 lessons - 02:58

What to expect from this course?

01:53

What to expect from this course?

01:53

What to expect from this course?

01:53

How to get help if needed?

00:33

How to get help if needed?

00:33

How to get help if needed?

00:33

Who's your instructor?

00:32

Who's your instructor?

00:32

Who's your instructor?

00:32

Understanding the theory

3 Lessons - 09:34

Introduction to CSS Flexbox

00:34

Introduction to CSS Flexbox

00:34

Introduction to CSS Flexbox

00:34

Container Layouts & Alignements

04:16

Container Layouts & Alignements

04:16

Container Layouts & Alignements

04:16

Width & Height constraints (and how to use them)

04:44

Width & Height constraints (and how to use them)

04:44

Width & Height constraints (and how to use them)

04:44

1st Project - Let's build a Landing Page

14 Lessons - 2:33:24

Introduction

00:56

Introduction

00:56

Introduction

00:56

Analysis of the Figma design

07:44

Analysis of the Figma design

07:44

Analysis of the Figma design

07:44

Importing the design system from Figma to Bubble

02:21

Importing the design system from Figma to Bubble

02:21

Importing the design system from Figma to Bubble

02:21

Hero section

16:53

Hero section

16:53

Hero section

16:53

Production Benefits section #1

14:49

Production Benefits section #1

14:49

Production Benefits section #1

14:49

Production Benefits section #2

09:54

Production Benefits section #2

09:54

Production Benefits section #2

09:54

How it works section #1

08:36

How it works section #1

08:36

How it works section #1

08:36

How it works section #2

08:37

How it works section #2

08:37

How it works section #2

08:37

Success Stories section

16:44

Success Stories section

16:44

Success Stories section

16:44

Testimonials

08:43

Testimonials

08:43

Testimonials

08:43

Pricing

16:48

Pricing

16:48

Pricing

16:48

Call to Action (CTA)

06:26

Call to Action (CTA)

06:26

Call to Action (CTA)

06:26

Footer

16:36

Footer

16:36

Footer

16:36

Mobile Navigation Menu

18:17

Mobile Navigation Menu

18:17

Mobile Navigation Menu

18:17

2nd Project - Let's build a Dashboard

9 Lessons - 2:01:38

Introduction

02:43

Introduction

02:43

Introduction

02:43

Analysis of the Figma design

03:48

Analysis of the Figma design

03:48

Analysis of the Figma design

03:48

Sidebar

16:41

Sidebar

16:41

Sidebar

16:41

Header

12:07

Header

12:07

Header

12:07

Mobile Nav Menu

07:51

Mobile Nav Menu

07:51

Mobile Nav Menu

07:51

TAB 1 - Dashboard

44:19

TAB 1 - Dashboard

44:19

TAB 1 - Dashboard

44:19

Building the Navigation Logic

03:32

Building the Navigation Logic

03:32

Building the Navigation Logic

03:32

TAB 2 - Transactions History

19:13

TAB 2 - Transactions History

19:13

TAB 2 - Transactions History

19:13

TAB 3 - Team members

11:24

TAB 3 - Team members

11:24

TAB 3 - Team members

11:24

Conclusion

1 Lessons - 00:35

Conclusion

00:35

Conclusion

00:35

Conclusion

00:35

Ready to finally master Bubble’s responsive?

Finally give your app the design it deserves.

Get your Free access to the course and finally take your Bubble's responsive skills to the next level.

Get your Free access to the course and finally take your Bubble's responsive skills to the next level.

Support

Frequently asked questions

Having some questions? Take a look at our frequently asked questions, and if you do not find the answer, feel free to contact us!

Do I need prior Bubble.io experience to take this course?

While basic familiarity with Bubble.io is helpful, this course is designed for both beginners and experienced users. We focus specifically on the responsive engine, so you'll be able to follow along even if you're relatively new to Bubble

Do I need prior Bubble.io experience to take this course?

While basic familiarity with Bubble.io is helpful, this course is designed for both beginners and experienced users. We focus specifically on the responsive engine, so you'll be able to follow along even if you're relatively new to Bubble

Do I need prior Bubble.io experience to take this course?

While basic familiarity with Bubble.io is helpful, this course is designed for both beginners and experienced users. We focus specifically on the responsive engine, so you'll be able to follow along even if you're relatively new to Bubble

Will I be able to make my existing Bubble app responsive after taking this course?

Absolutely! The course teaches you both the fundamentals of responsive design in Bubble and practical implementation techniques. You'll learn how to apply these principles to new projects as well as how to retrofit existing applications.

Will I be able to make my existing Bubble app responsive after taking this course?

Absolutely! The course teaches you both the fundamentals of responsive design in Bubble and practical implementation techniques. You'll learn how to apply these principles to new projects as well as how to retrofit existing applications.

Will I be able to make my existing Bubble app responsive after taking this course?

Absolutely! The course teaches you both the fundamentals of responsive design in Bubble and practical implementation techniques. You'll learn how to apply these principles to new projects as well as how to retrofit existing applications.

Do I need to understand CSS to follow this course?

No prior CSS knowledge is required. We explain the relevant CSS Flexbox concepts as they apply to Bubble's responsive engine in a way that's accessible to non-developers. You'll learn exactly what you need to know without having to become a CSS expert.

Do I need to understand CSS to follow this course?

No prior CSS knowledge is required. We explain the relevant CSS Flexbox concepts as they apply to Bubble's responsive engine in a way that's accessible to non-developers. You'll learn exactly what you need to know without having to become a CSS expert.

Do I need to understand CSS to follow this course?

No prior CSS knowledge is required. We explain the relevant CSS Flexbox concepts as they apply to Bubble's responsive engine in a way that's accessible to non-developers. You'll learn exactly what you need to know without having to become a CSS expert.

Why are we using Figma?

We use Figma in this course because it's the industry-standard design tool that allows us to create precise visual references for our Bubble.io projects. Figma designs serve as our blueprint, showing exactly how elements should be positioned, sized, and styled across different screen sizes. We only use its free version, so you don't need to pay anything else.

Why are we using Figma?

We use Figma in this course because it's the industry-standard design tool that allows us to create precise visual references for our Bubble.io projects. Figma designs serve as our blueprint, showing exactly how elements should be positioned, sized, and styled across different screen sizes. We only use its free version, so you don't need to pay anything else.

Why are we using Figma?

We use Figma in this course because it's the industry-standard design tool that allows us to create precise visual references for our Bubble.io projects. Figma designs serve as our blueprint, showing exactly how elements should be positioned, sized, and styled across different screen sizes. We only use its free version, so you don't need to pay anything else.

Is there a project I can download to practice what I've learned?

Yes, the course includes downloadable Bubble templates for both the landing page and dashboard projects. You can use these to follow along with the lessons and as a foundation for your own responsive designs.

Is there a project I can download to practice what I've learned?

Yes, the course includes downloadable Bubble templates for both the landing page and dashboard projects. You can use these to follow along with the lessons and as a foundation for your own responsive designs.

Is there a project I can download to practice what I've learned?

Yes, the course includes downloadable Bubble templates for both the landing page and dashboard projects. You can use these to follow along with the lessons and as a foundation for your own responsive designs.

How long will I have access to the course materials?

You'll have lifetime access to all course materials, including any future updates or improvements we make to the curriculum.

How long will I have access to the course materials?

You'll have lifetime access to all course materials, including any future updates or improvements we make to the curriculum.

How long will I have access to the course materials?

You'll have lifetime access to all course materials, including any future updates or improvements we make to the curriculum.

Seeking answers? your solution awaits!

Is there something you're uncertain about? Feel free to contact us!

Contact us

Contact us

Contact us

Nocodable

#1 Components library for Bubble. 350+ fully responsive components to build you app 10x faster.

Navigation

Home

Components

Categories

Pricing

Contact us

Ressources

Blog

Tutorials

Library

Templates

Free Bubble.io responsive course

Components

Dashboards

Chat

Landing Pages

Tables

Copyright ©2025 Nocodable

Terms and conditions

Confidentiality

Nocodable

#1 Components library for Bubble. 350+ fully responsive components to build you app 10x faster.

Navigation

Home

Components

Categories

Pricing

Contact us

Ressources

Blog

Tutorials

Library

Templates

Free Bubble.io responsive course

Components

Dashboards

Chat

Landing Pages

Tables

Copyright ©2025 Nocodable

Terms and conditions

Confidentiality

Nocodable

#1 Components library for Bubble. 350+ fully responsive components to build you app 10x faster.

Navigation

Home

Components

Categories

Pricing

Contact us

Ressources

Blog

Tutorials

Library

Templates

Free Bubble.io responsive course

Components

Dashboards

Chat

Landing Pages

Tables

Copyright ©2025 Nocodable

Terms and conditions

Confidentiality