How to create a simple, responsive hero section | HTML & CSS

In this tutorial, we'll walk you through step-by-step on how to create a stunning, responsive hero section using only HTML and CSS. You'll learn how to implement responsive design principles, use CSS Flexbox to create a flexible layout, and create a beautiful design that looks great on any device.
#herosection #responsive #simple #csstricks #tutorial #frontenddeveloper #landingpage #mbedev
Subscribe: / @mbedev
Image by Macrovector: www.freepik.com/author/macrov...
Source Code Here: github.com/Mbedobe/web-dev/
Thank you for watching! 🙂!

[@mbedev]

what are your thoughts on this?

[@omphilejdev]

This is impressive and helpful. 👍👍

[@mbedev]

Glad you like it

[@business_agent1]

great sir ! keep doing

[@YamiKeizerLeon]

Appreciate this~

[@kaushalkishore5076]

it was superb, thanks for giving info about the extension you use it, really appreciate it....

[@mbedev]

thanks for the kind words. glad i could help

[@spinneyavant]

Thank you sir

[@godwinsmart6863]

Very impressive tutorials. ❤

[@mbedev]

Glad you like them!

[@Mendells]

Thank you sm, it helped a lot❤

[@mbedev]

glad to hear that.

[@jacobswiney9977]

subbed great vid bro

[@mbedev]

Thanks for the sub!
Glad you liked it.

[@ivanzq21]

which extension do you use to watch the opening/closing brackets? it shows the line where it starts and where it ends, thanks

[@mbedev]

i am not using an extension. probably came with the version i’m using (v1.7.7.3). But if you’re looking for an extension, you can use Bracket Peek by marketplace.visualstudio.com/publishers/jomeinaster. cheers!

[@ogpipsforex]

Baba nice u killed it❤❤

[@mbedev]

glad you liked it :)

[@ogpipsforex]

@@mbedev how long have you been doing this?

[@mbedev]

@ogestanley8420 over 6 years

[@ogpipsforex]

@@mbedev jeeezz,i just started but d journey is so hard swrs🤣🦹

[@mbedev]

@ogestanley8420 practice step by step. you’ll get there

[@user-jr9tk3ph5m]

thanks for the video. btw is that an extension that shows different devices?

[@mbedev]

pleasure, yes it is
chrome.google.com/webstore/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk

[@fvgoya]

@@mbedev thanks!

[@mbedev]

@@fvgoya my pleasure

[@cbbenz_]

To add another section after that one would you create another div with container class?

[@mbedev]

it depends on how you intend to style the new section.
you can create another div and give it a custom class name and style it to your liking, but if you want to apply the css rules of the container class to the next section you can do that.
cheers

[@cbbenz_]

@@mbedev thanks so much dude great video!

[@GraniteExpoOutlet]

What's the name of the extension or tool on the right hand side to switch between different screen sizes?

[@mbedev]

this is the link: chrome.google.com/webstore/detail/mobile-simulator-responsi/ckejmhbmlajgokhgbapkiccekfoccmk
cheers :)

[@shaveendesilva6738]

activate the mobile view on this page what is the extension

[@mbedev]

hello Shaveen
i am using Mobile Simulator-Responsive Testing Tool.
You can find it here:chrome.google.com/webstore/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk

[@shaveendesilva6738]

@@mbedev thanks for quick reply🥰

[@mbedev]

@@shaveendesilva6738 my pleasure. Thank you for the interest and remember to subscribe if you haven’t and share the channel with those who’ll be interested. Cheers!

[@ashishkumar-jo7cj]

​@@mbedevthanks sir for telling me about this extension i was also looking for it.

[@mbedev]

glad i could help@@ashishkumar-jo7cj

[@val_en_tine]

Pls what is the name of the image you used

[@mbedev]

the link is in the description. it’s an image from www.freepik.com.

[@mandeepsinghwazir9366]

Its good , but what about the navigation panel or navbar elements , when it fits into smaller devices

[@mbedev]

Thank you! The focus for that tutorial was to create a responsive hero section. You can watch this : ruclips.net/video/vlkrUC-xJak/видео.htmlfeature=shared to make the navbar responsive. cheers