Hello! Can you give me a Feedback on my product landing project? I struggled so much with the header, I would appreciate any advice, recommendation and correction! Thank you !
Here is the link : https://codepen.io/jefferson-tobon/pen/MWamwEO
The responsiveness to changes in view port width is good, but there is a short period of time when after changing from a single column to four boxes in one row, each box is really skinny and can only fit a few words on a line. I think you need to hold off longer before making that change. Or maybe first change to two rows of two boxes each for medium width view port and then go to one row of four for really wide view ports.
Unfortunately, the responsiveness to increases in text size is not quite as good. Eventually the four boxes break out of the pink container and cause a horizontal scroll bar. Basing your media query break points on ‘em’ instead of ‘px’ will fix this. Also, as the text size increases the “PURCHASE” text breaks out of the button. Set the height on those in ‘em’ so they can grow taller as the text grows bigger. Same thing for the email input/get started button.
Speaking of the email input. you are missing a
<label> for it. If you don’t want to use a label then you can use the aria-label attribute. But really you need a label. Placeholder text is not an acceptable replacement for a label.
The header semantics need to be cleaned up a bit. You should have an
<h1> at the top of page. The headings in the boxes at the bottom are not quite correct. The heading at the top of each box should have the higher heading level. Right now they are
<h3>s and then the next heading under that is an
<h2>. This should be reversed. Also, I’m not sure that the price and hours should even be headings. This sort of feels like you are using headings just for the sake of visual styling. Regardless, I do think that adding a header before the classes is a good idea (something like “Classes we offer”). Headings are very important for people who can’t see your page (i.e. they are listening to it through a screen reader), so your headings should clearly outline the structure of the page.
And let me just say, that $350 for 300 hours of master level dance lessons is a steal. Heck, even for beginner level that is an amazing price. I think you are going to go broke at these prices.
Thank you so much for all those advices! That’s amazing, I will update everything. And regarding the price classes you are right! They are pretty cheap. I was struggling so much with the code that I was not really paying attention to this fact.
I appreciate so much all the corrections and advices, thanks for the help!!