CREATING A GOOD HERO FOR YOUR WEBSITE: Free Web Design Course 2020 | Episode 10

How to design a good hero section.

In this video, I teach you what a hero section is and how it can make your website’s audience intrigued or not interested.

What do you think it is that makes us want to stay on a website for longer? Let me know in the comments馃憞

路 Intro 0:29
路 Answer these 3 questions 0:56
路 Demo 3:04
路 Choosing an image 3:42
路 Trick to make an image bigger 4:47
路 Bringing in the logo 6:20
路 Adding text and buttons 7:39

Watch every video of the Free Web Design course here:

Learn how to build custom websites with Webflow FAST:

Find me on other social media platforms:

Gear & Book Recommendations:

#FreeWebDesignCourse #webdesign #freelancer

Thanks for watching the video CREATING A GOOD HERO FOR YOUR WEBSITE: Free Web Design Course 2020 | Episode 10


  1. This was really great! Thank you for this video!

    I would love to see how you would make this mobile-optimized!

  2. thank you for this valuable information, I have been studying it for some time now. I enjoy that you go into detail about how to do a website

  3. I don't understand why people diss photoshop. It is so advanced. It keeps improving. But i would do Content Aware Fill for the sky.

  4. Someone said to me one day: at google images you can see if has no background image when: on grid, image has white background, and when you click to that image, appears de checkered background

  5. That looks really amazing! The problem for me is how to make something like this responsive though. What if it's on a screen half as wide? Or on a phone? That's something I always struggle with.

  6. When re-cropping the image to add more sky, simple select the empty area, right click->fill, then do content aware fill. It should do the hard work for you and fill in the sky without having rough pixelation like what happened in your method.

  7. Hi Ran, thanks for the videos. You are a really good teacher and very good at communicating and bringing the important ideas across. Blessings from South Africa.

  8. The issue I have with hero sections is nobody seems to consider if they are responsive. Your example for instance would look great on desktop but simply wouldn't work on mobile. So many themes also have this issue.

  9. 'because it's a free example I'll limit myself to using unsplash'. Now, what is the option here, that's my only source of free copyright images lol
    You don't use that in production as it requires credits, or why else is it?

  10. Thanks for all your valuable information and lessons 馃槆 today I completed 10 of your videos and gained more information form that videos soon I completed all your remaining videos.. But the bad thing is I having only one mobile phone 馃槄 can you explain what are apps can be used for ui ux in mobile phone

  11. Thanks for giving me the basic tools to sort my own very poor websites. Light at the end of the tunnel 馃檪 Thanks so Much!

  12. Congrats for your good job and thank you! I want to ask you something I am looking for long time! I am creating a website running an affiliate travel program, do I have the right to add hotels there for free but without asking them? The only problem is that if I ask all of them, for take their permission I need very long time to add just some of them.

  13. Really beautiful work. (Though I kind of liked that original red logo.) Thank you so much for sharing this!

Leave a comment

Your email address will not be published.