Hero section - Part 2: Getting started with Bubble (Lesson 1.7)
Ғылым және технология
Section 1 (Lesson 7/10): Continuing where we left off in Part 1, this lesson dives deeper into finalizing the hero section of your Bubble app. We focus on enhancing the visual appeal of your hero section by adding a background image and ensuring that the design remains responsive and looks great across all devices, including desktop, tablet, and mobile.
In this lesson, we cover:
• Adding and optimizing a background image for your hero section to create visual interest and attract user attention.
• Techniques for ensuring your hero section's design is responsive, providing a seamless user experience on any device.
• A walk-through of applying finishing touches to ensure your hero section stands out and effectively communicates your app's value proposition.
Resources folder:
➡ e6387a14ba6d0b...
Bubble editor:
➡ bubble.io/page...
* * * * *
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/rFCE6h
Twitter ➡ / bubble
Blog ➡ bubble.io/blog
Пікірлер: 33
Loving your calm and simple teaching, and the platform, thank you, this could be the key I have been looking for.
@gregory-john
4 ай бұрын
Thank you for the feedback Mike 😃
Top notch communication style and excellent training material.
@gregory-john
Ай бұрын
Thank you!
Bienvenue. Merci beaucoup pour les lecons. J'apprends tout les soires apres de travail. A bientôt !
fantastic tutorial! really help!
Good tip on putting the break condition on the Style rather than on the text itself - which I've been doing, doh... 👍
Great tutorial, wish I found this sooner!
@gregory-john
2 ай бұрын
I'm glad you're finding it useful!
At the very end of this video you change the mobile page width from 320 to 375. When I try to do that, it let's me input 375 and hit enter but it stays at 320.
@jangeer418
5 күн бұрын
Same problem here
@jangeer418
5 күн бұрын
Instead of enter click the the check button next to it.
This is Fantastic Training but I'm having an issue in the responsive design section, I have followed along and I set 32px left right padding on the group section, however when I go back to the responsive tab I can see the padding there but when I move down to 768 the group content does not react to the padding and behaves like its not there. What could be a possible reason or solution for this? Regards Sii
@siibrittan1238
3 ай бұрын
Panic is off peeps... So after some extra deep searching I realized that I had the group content element accidently set to a fixed width of 768.. My mistake!
Hello, I am having trouble while uploading background image?
When I try to define the "Min width", I am not offered an option for %. I only see an empty box without any options. Further testing shows that it is only pixels. I suspect that there was something I did (or didn't) do in the creation of the link elements that is preventing me from being able to see a percentage option. Any thoughts on how to solve this?
@davidelawrence
4 ай бұрын
False alarm! I just had to click around a bit to discover the px/% toggle. It is there, just tricky to make it visible (at least for me). Thanks for the wonderful training videos!
@yonabs
Ай бұрын
@@davidelawrence Hi, I have the same problem, but still unable to find the %/px toggle. Can you please explain what to do? May thanks
@davidelawrence
Ай бұрын
@@yonabs Just click on the "px" and it should show you the toggle.
@victorkiarie2444
Ай бұрын
@@yonabs I had the same problem too, but just clicking next to that 100 reveals the options
@jangeer418
5 күн бұрын
@@davidelawrence Thanks it worked
Hi when I scale down from 320 to smaller the text doesnt autoajust and get smaller
@justjeremiah
13 күн бұрын
Nevermind, i needed to untick 'fix width to content" for the group a
One thing that he mentions here and in the last video that I'm confused about is when he says that Google will "mark you down" for certain elements. In the last video he used a link element instead of a button for that reason, and here it was when he was talking about contrast. Does Google have an algorithm that scans your site looking for these design features and gives you a rating that changes your precedence in their search algorithm?
@gregory-john
4 ай бұрын
There are the 4 categories that Google uses to rank your site from a technical standpoint. 1. Performance, 2. Accessibility (This is where contrast is checked by Google), 3. Best practises (This is mostly responsive design and layout) and 4. SEO (This is about H tags and page linking). Google can only scan your public pages, they can't log into your app.
so thank you!
Very nice course, I thought you could put
@bigcretin
4 ай бұрын
How is that simpler? He didn't want it smaller for 768px width.
@gregory-john
4 ай бұрын
Breakpoints are between two numbers. So between 767 - 576 or if we go up, it would be 768 - 991. A little confusing I agree but if we are moving down to mobile, we always use a < operator.
Sorry for being such a noob... but how can I make the changes you say we should do if the app project is read-only?
@bigcretin
4 ай бұрын
Are you trying to edit the demo app? You should be editing the app you created. Make sure you're in the right tab :)
@AdrianoMassi
4 ай бұрын
@@bigcretin Thanks! I realized I skipped from lesson 1 to this one
@gregory-john
4 ай бұрын
@@bigcretin Thanks for chiming in.