First Landing page freeLelerainbow

Code Feedback
1

Hello everyone,

I just conclude my first Landing page.

Do you have any suggestion?

Please give some feedback, thank you and

Happy coding!!!

https://codepen.io/LeleGanza/full/MWjgwJj

2

A few things:

  • Most of the content is hard to read because of the black text on that background. You are going to need to turn the opacity up quite a bit to make it readable.
  • I think your row of three boxes gets way too skinny before the switch one column. Maybe consider switching from one row of three to two rows of two and then three rows of one.
  • You don’t have a <label> on your email input box.
  • Technically, the nav links at the top do have enough contrast with the background color for a AA rating but not AAA. I’d suggest making the background a little lighter to make the links easier to read.
  • Also, the keyboard focus indicator on the nav links is so light as to be non-existent. Use the CSS outline property when the links are focused to make the indicator more prominent. I’d suggest doing the same for any other element that can be focused (e.g. buttons, input text box).
  • Semantically, your headings need a little work. You jump from h1 to h3 (you should only jump one heading level at a time). The prices shouldn’t be headings but rather the titles of the boxes (e.g. “Special Hug”).
  • When in narrow view and the nav links are aligned in one column, clicking on a link takes me to the appropriate section but the very top of the section is hidden underneath the nav menu. You can use CSS to take into account the height of the nav menu so that the scroll works properly. I’ll let you try to figure this out on your own, but if you get stuck let me know.
1 Like
3

Thank you very much for your feedback.

I hope you can have a look now, after I tried to fix the page as you suggest me.

Landing Page (codepen.io)

Thanks