My Product Landing Page

Code Feedback
1

Site

Code
Is there anything I should change or do before I move on the next project?

1 Like
2

Nice work. Good structuring, font choice and palette. There are no typo errors in your HTML either, which is excellent. Well done!

Here are a few suggestions to make your page even better.

  • The color contrast on your nav menu items aren’t quite within the web accessibility guidelines. The background is #6F563E and the letters are #ADA2DB. They need to contrast more. Here’s a good tool to check for web accessibility: WebAIM: Contrast Checker It’s straightforward to use - just put in the background and foreground colors (aka background and letter colors) and it will tell you if it passes the guidelines.This also applies to your header h1. The white and the light purple are not contrasted enough.
  • Consider adding some more content to the page. One idea is to add a cool hover effect to your product images. Upon hover, the images could flip around and display a short description of each product.
  • “Balnance between power and speed” - you have a small typo error here - balance, not balnance, as well as here: “Overwhemling power at long range” - overwhelming, not overwhelmling.
  • Seeing how you asymmetrically placed the sections, I think this would be a good opportunity for some Animation On Scroll effects. This can be rather complicated to do by yourself, but, thankfully, there are libraries for it. One of them is AOS - Animate on scroll library. Implementing is very easy. As explained on the website:

Add styles in the <head>:

  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

Add script right before closing </body> tag, and initialize AOS:

  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

Set animation using data-aos attribute: (example, a div with a “fade-in” scroll effect) - scroll through the website I gave you above to see all the scroll effects.

<div data-aos="fade-in"></div>

I would add these on scroll animations to your main product sections.

I hope I didn’t confuse with my suggestions - let me know if you have any questions.

My compliments!

Nicolas

1 Like
3

For now, I will fix the text-background contrast and spelling, but will leave the JavaScript animation after I finish the javascript certification. I will bookmark the link that you gave me and try to figure out how they work later. Thank you for the feedback.

1 Like
4

Sure, your choice. I just want to add that I have implemented the AOS myself on a few of my projects, even though I am a complete beginner in JS. It does not require any knowledge of JS, really - just some copying and pasting. But if you do not feel comfortable, that’s fine, of course!
Let me know if you would like me to explain it in more detail too - I would be glad to help.

Happy coding.

5

Personally, I think the asymmetry looks too unintentional.

  1. The elements should follow the reading direction. So the first element should be on the left, not the right. Or if you support other reading directions, it would follow the user’s reading direction.

  2. The elements should have consistent horizontal spacing from their container. And may need more vertical space between the elements.

  3. If you can only see the first element, it looks more unintended. If you make them smaller so you can see the top of the next element, it helps the brain make sense of the pattern.

  4. The elements may need a better defined outer container that isn’t just the page background color, or some type of “perimeter” like a border (could be an ornament type border), box shadow, etc.

  5. The centered element may look better if it is wider than the two horizontally offset elements.

1 Like
6

Thank you for our feedback. 1 and 3 could probably be fixed if I added the animation as nickgr suggested.

7

I just finished the freeCodeCamp CSS course on YouTube. Do you have any recommendations on how I can improve my design skills? Maybe a book recommendation?

8

I don’t have any book recommendations, “Don’t Make Me Think” is a pretty popular book. It is more focused on UX.

1 Like