Project #3-Product Landing page Feedback

[jahson8]

Hello Coders,

I would love some feedback on my product landing page. Here is the link: https://codepen.io/jaymill/full/dyOMgMp .

Thanks in advance

[bbsmooth]

Wow, this is a real nice job. I’m looking hard for things to critique

• The keyboard focus indicator is always something I’m looking for. I can’t see the focus indicator around the Submit button at all. I see the other buttons change from green to white when focus is on them but you can’t do that for Submit since it is on a green background. Personally, I think you should do more than just change the background color. I always put an outline/border around my focus elements because I think most people are used to that and I think it stands out more than a color change. These are just my opinions of course. But definitely you’ll want to do something for the Submit button.
• A lot of people will tell you that links should always be underlined. I don’t know if that is a 100% rule but I do think they should stand out in some way so that people know they are clickable. The links in your footer look like plain text to me. Now maybe because they are in the footer people should know that they are clickable? I’m not sure if I would make that assumption. Besides, I don’t think there would be any harm in underlining them (I don’t think it would take away from the aesthetics on your page). But since you are using underline for hover on the links that won’t work as is. I think the nav links at the top are slightly more obvious and most people would expect those to be links, but you could possibly style them a little to make them look a little more clickable?
• Concerning your nav links, I think you could hold off a little longer before transitioning to the menu button. It seems to me there is still plenty of room left at the top for those three links when it makes the switch. Also, when you mouse hover over them they get a bold font style which causes them to push the other tags, making them move. There are other ways you can achieve this (or very close to it) without affecting the other links. Take a look at the CSS transform property, specifically with the scale() function.
• I also found a bug with the nav menu. If you narrow your browser enough to get the menu button, and then click it once to open the menu and again to close it, and then you widen your browser to remove the menu button, the links do not show up.
• Finally, on very narrow view ports you still have quite a bit of side margin/padding on the page. When you don’t have a lot of horizontal real estate to work with you want to make as much use of it as possible. Otherwise the content feels crowded, especially if I increase the text size a little. So I would recommend for very narrow view ports that you get rid of most of that side space in order to let your content breath a little more.

Great job!

[jahson8]

Hey @bbsmooth,

Thanks for the critique; it’s finding and fixing those small things that will make my projects better and look more “professional”. I’ve addressed most of the points you’ve put forward. In regards to your third point; about the menu button. I completely see where you are coming from. However I’m learning about event listeners at the moment and I wanted to experiment and see if I could implement a menu button on my own. But I’ll keep in mind to watch the spacing in the future before jumping to implement the button.
Thanks so much.