Bubble.io Responsive Design Crash Course in 10 Min - Tutorial

🏆📚 FREE 7 DAY LEARN BUBBLE CHALLENGE 📚🏆 https://www.nocodeacademy.co/offers/r...

In this video, learn how to design a page in Bubble's new responsive engine using YouTube's layout as our example.

===========================
Limited Time Free -on-1 Consulting -
https://calendly.com/nocodeacademy/so...
===========================

This a special guest video from Paul Beresuita. Do you want someone to help you design an amazing UI for your app? Paul has 10+ years working as a front-end developer and creates amazing layouts and designs for Bubble apps. Reach out to him at   / paulberesuita  .

Keep an eye out for our later series where we'll use the new Bubble.io responsive engine build an Instagram clone!

0:00 - Intro
0:20 - Why the Old Responsive was Inferior
1:40 - Breaking Down YouTube’s User Interface Layout
3:10 - Container Layout 1: Row [*all sub-containers, sub-groups, sub-elements etc will fall in line left-to-right]
4:05 - Container Layout 2: Column [*all sub-containers, sub-groups, sub-elements etc will fall in line top-to-bottom]
4:20 - Container Layout 3: Align to Parent [*all sub-containers, sub-groups, sub-elements etc will display a new options to align in one of nine positions on a 3x3 grid]
4:55 - Container Layout 4: Fixed
5:05 - Begin YouTube Video Grid Layout
6:55 - How to Use Apply Gap Spacing Between Elements
8:00 - Padding in Bubble
8:15 - Margin in Bubble
8:50 - Difference Between Margin and Padding
9:10 - Preview in Responsive Tab
9:45 - Outro

✅ Subscribe to be notified when the more Bubble tutorial videos come out.

⏩ Follow along in a free Bubble.io account by signing up at https://bubble.io/?ref=io01awzc.

❓ Have questions? Want a consultation? Reach out at https://nocodeacademy.co.

➡️ Disclaimer - this page contains an affiliate link that gives a credit valid towards our monthly Bubble account fee but has no cash value beyond this. Should you decide a paid Bubble account is right for you, thank you in advance for your support.