Layout and spacing: Getting started with Bubble (Lesson 1.4)

Section 1 (Lesson 4/10): Designing an intuitive and aesthetically pleasing application involves understanding several core elements, and among the most critical are layout and spacing. This tutorial dives into the principles of organizing elements within your Bubble app to create a user-friendly and visually appealing interface.
In this video, we cover:
• The importance of styling: How to effectively use text, inputs, buttons, and colors to enhance your app's functionality and appearance.
• Layout and spacing fundamentals: Strategies for arranging elements in a logical and aesthetically pleasing manner, ensuring a coherent flow that enhances user experience.
• Practical examples: Demonstrating how these principles are applied in common design scenarios, such as form creation and navigation layout.
Resources folder:
➡ e6387a14ba6d0bf3e823090f8d959...
Bubble editor:
➡ bubble.io/page?type=page&name...
* * * * *
Subscribe to this channel to be the first to hear about new videos!
Bubble is a software development platform that enables anyone to build and launch web applications without writing code. Rather than specializing in one or two aspects of web development (like designing landing pages or building databases), Bubble’s full-stack visual programming interface does it all. That means anyone from first-time entrepreneurs to enterprise-level companies can take an idea from concept to fully functional, scalable reality - faster and cheaper than you could with just code.
Have a question? Please visit bubble.io/support.
Learn more about Bubble:
Homepage ➡ bble.io/XX6u9v
Twitter ➡ / bubble
Blog ➡ bubble.io/blog

[@danielmaina4942]

I've noticed there's an opacity issue, changing the opacity of the group affects all elements inside it but setting the opacity of the color of the group does not...

[@falabondioli]

Amazing!!! Exactly what I was looking for, you saved my life :) Thank you for this wonderful course!

[@niku9596]

👍🏻💫

[@chaoscowrhn]

I don't have the labels showing like he does for the elements on the design page, is this a browser thing or a setting?

[@mejones73]

I'm unable to change the opacity % for the background color at 3:25 in the video. If I change the value of the color, it's editable, but if I use the value indicated in the Style Value, the % is fixed at 100. Does anyone have any suggestions on how to resolve this?

[@mejones73]

Got it. The value is not "selectable," just need to type in "10"