Product Landing Page feedback

Code Feedback
1

Hi all,

can you please give me some feedback on my product landing page?

I’m not a designer of any kind so the overall thing looks a bit like the example given.

Thanks

2

Hey, this is really nice. We don’t see a lot of really finished projects like this anymore since we moved to the new RWD courses, so it’s nice to see you take the time to make it look nice. Also, love the Simpons video.

I have a few accessibility issues I’d like to point out since that’s my specialty.

  • You should have one h1 heading near the top of the page. My guess that would be “Loud and Proud”. You would probably want to have some content below that heading that explains real quick what the product is and such, but since this is just a practice project I won’t dock you for that.
  • The three h2 headings immediately below “Loud and Proud” are good, but the three h2 price headings are not actually headings. The headings in those cards are at the top of the card (“Basic”, “Pro”, and “Ultimate”) since they describe the content below them. The price can just be a simple p element.
  • Best practices say that all of your primary content should be wrapped in a main element. So wrap everything other than the header and footer in a main. This will mean you need to move your footer out of the “container” div it is currently nested in.
  • The responsiveness is pretty good but as I narrow my browser window there is time just before the nav menu converts to a narrow view that the menu list items are bunched up together and hard to read. I think you might want to switch the nav menu to narrow view sooner.
  • The email input needs a label. Placeholder text is not a substitute for a label. I would recommend you just put the text that is currently in the placeholder attribute above the input and of course in a label element. And then make sure to add a for attribute to the label. If the tests require placeholder text, then just add an example email address, since placeholder text should really only be an example of what you want and not actual instructions.

Again, overall very nice. Thanks for sharing.

3

Wow that’s great to hear! Love the feedback.

I’ll go over all the suggestions you pointed out, and then submit the project.

This was really helpful, I tend to lose some attention to details by doing these projects after work, but I want to get the best from this course and your feedback was great.

I’ll definitely post my other projects as soon as I manage to go over them again.

Cheers!

4

Hello everyone! I am learning programming from Congo Brazzaville. I am very happy to be among you. I would like you to give me feedback about my landing page project. Here is the github page link => Landing Page
I also hosted it for free on => https://ricksaint.netlify.app

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.