You’re off to a good start. I have some thoughts.
First of all, I want to begin by saying that it’s really hard to give any feedback without first knowing what you are trying to accomplish with the hero section. What is the first thing you want the users to see when they arrive to your page? What is your Unique Value Proposition and Call To Action? Do you have brand guidelines that can inform the direction for the design?
Here are some of my recommendations, in no particular order.
Start with creating an architecture for your information. Create a semantic HTML structure for your elements - navigation, headings, paragraphs, images, buttons, form fields, etc. This will help you wrap each element in appropriate HTML tags. For example right now your “Find Teachers” button is wrapped in a generic div block, when it should be a button.
Doing step 1 first will also allow you to name your classes properly as you move forward with creating the design. Currently your classes are what Webflow assigns by default when you make tweaks to the elements. This can cause some inconveniences down the road if you decide to reuse certain classes across multiple elements.
You do not necessarily need to wrap your text elements in additional div blocks unless you are doing that for specific layout purposes. The text element is simply a generic div block already. You can just add padding to it if you wish to create some breathing room for the text.
Try to maintain consistency throughout the design. For example currently you are using both light and dark shadows on elements. This creates some visual dissonance. Perhaps there are more effective ways to create separation between “We are secondary geeks” and the background.
I wouldn’t bother with animation so early in the process. I think creating a robust and responsive layout first is more important. Working with an animated element at this stage could make things harder to manage.
Pay attention to the vertical alignment of your elements. Your left and right margins vary between sections so the page doesn’t feel balanced.
I see that you are using fixed pixel values for all your paddings and margins. This is why things are not responding. Try using percentage %, viewport width vw, and viewport height vh units. They will respond to the resizing of the elements/browser window.
You are using Flexbox correctly. You are changing its direction to vertical at narrower breakpoints which is a good way to quickly rearrange the presentation of elements.
It is normal to have to reduce the font size as you reach smaller breakpoints. A headline on a desktop monitor will always be bigger than on a mobile screen. You wouldn’t necessarily want the text to wrap in this case, because if it did you’d have one word per line which creates a jittery reading experience.
Lastly, it is important to consider the context of the hero section. Will it contain any additional elements? What will be coming after it? This will influence the design decisions that you make. Which brings me back to my first point: trust the process. Start with information architecture, then turn that into sketches, then experiment using a quick design tool to iterate quickly between various options, and only then go into development. The reason that I stress this so much is because in the past I had lost many many hours by getting too excited and jumping head first into development before having flushed out the page structure and the design of tricky parts. Going directly to the last stage is how you end up with “technical debt” where making changes become a pain and the entire project suffers.
I hope that this was helpful in some way. I am not sure if I answered your questions. Feel free to message me if anything is unclear of if you have other things that you need help with.
)