Product-Page__Feedback

[Erudite885]

Hey everyone,

I have finally completed the product page challenge, it was tasking, educative, and I must say I enjoyed every bit of the process.

It took awhile to complete on my own, but am glad it did.

Landing Page

I would like you to give feedback on how it can be improved.

Thank you.

[kevinSmith]

Cool, good job. If I put on my nitpick hat…

The design:

All in all it looks pretty good.

I think the hero image sticks out a bit. It would be nice to have a gentler transition to the background, or something. I probably would have at least rounded the corners a bit.

The text below the image looks a little crowded to me, vertically.

The “Purchase” cards… The way the middle one is highlighted and raised made me feel like that was some kind of carousel, or at least selecting one of the others would cause that one to “highlight”. But that would be nearly impossible to implement without JS. I’m not saying it needs fixing, just that it was odd to me. I can understand using a different color and highlighting one of them if it is more important, but the shadow makes it seem “selected” to me.

But I’m a terrible designer, so take all of that with a grain of salt.

---

The code:

If I go to an HTML validator, like this, and put in your html, we can look for mistakes. We can ignore the first 3 because they are just because you are doing this in codepen. It complains a lot about your headers, the hx elements. You want to set up a hierarchy of headings. This will enable search engines and page readers to better understand your page.

There is also a duplicate ID warning - IDs must be unique.

You could work on your formatting. It is a good habit to get into to organize your code as you go. It will save you sooooo much time in the long run. When you start coding in the real world, there will be linters and prettier to guide you, but build the habit early.

<h1> Whiter and Brighter.</h1>

It’s a bad habit to get into to add spaces into your text like this. This will lead to alignment bugs that will drive you crazy.

<!--main section-->
<main>

This is one of my pet peeves - over-commenting. I know that that is the main section, I can see the HTML. I think it is a mistake to tell learners that good coders use a lot of comments. I would say that good coders write code in ways that almost never need comments - and just add them when they are needed.

---

But still, it looks good. Have fun on the Technical Documentation Page.

[Erudite885]

Thank you so much @kevin. Thanks for putting on your nitpick hat and helping me improve

[JerryTheQuad]

Hi there, Erudite!)

Thanks for sharing the project. Mine looks way worse. It’s great that you’ve optimized your page for mobiles!) I always get problems with that.

If I may, I can put in my two cents:

1. If you use semantic tags, don’t use comments) Only programmers will read your HTML and if they can’t understand “main” or “section”, is it really your problem?
2. The text and submit fields are a bit misleading. What purpose do they serve? Okay, I can send my email address and “Get Started”? Will your customer support use my email to send me a message or add me to the mailing list?
3. Try to use a simpler color palette. Just Google it and you’ll see there are different styles. Also, the gray prices are hard to read and the difference between text size is a bit confusing.

Other than that, just keep reading FreeCodeCamp writers and draw inspiration from their works) Cheers!)