Product Landing Page - Feedback Requested

Code Feedback
1

https://codepen.io/ccblair/pen/zYZNzae
https://christianblair.com/product.html

I was hoping to receive some feedback on my Product Landing Page project. The colors might be a bit too bright, they’re the colors of the Mongolian flag though so it kind of matches the theme. And I know I don’t need to add the boilerplate for codepen, but I personally like to add it anyway hahaha. I tried to make it more responsive this time, I think it looks ok on smartphone/tablets now.

1 Like
2

As I’m narrowing my browser I’m getting a horizontal scrollbar for a bit just before it hits each break point.

3

i think the colors are nice and are a great way to provide contrast. they also help differentiate different sections of the page itself.

i noticed that when you click the “add to cart” button it doesn’t do anything. forgive me if i’m just being thick-skulled, but is this intentional? i just wanted to let you know in case it isn’t. also, since you have an add to cart option on the products you might want to provide a way to access the cart somewhere in the top right corner or something (whether it’s just for aesthetics or for functionality). also, the privacy, terms, and contact buttons are not functional either. keep in mind, though, that i’m not a web dev so i’m not sure if these recommendations are actually relevant to the project itself; i’m just looking at it as a “customer.”

overall, though, i really like the page- especially the aesthetics of it.

1 Like
4

@ccblair I like the colors a lot. The combination of red, yellow, and blue are great. I suggest:

  • Removing the black outline around the white rectangles. The blue against white is enough contrast.
  • Definitely replace the “Lorem ipsum” with a more fitting text.
  • Add padding to the product tiles to get the text and image away from the edges.
  • Add some padding below “Copyright © Studio Genghis” since it is touching the bottom edge of the browser window.
1 Like
5

Yeah it was intentional, I just wanted to show the buttons but didn’t plan on making a secondary page for the cart. Same for the buttons at the bottom of the page. But you’re right, I wanted to add a cart icon in the top right corner but I was having trouble figuring out how to add Google icons, so I said to hell with it hahaha, I’ll figure it out for a future project. Thanks for the feedback~

1 Like
6

Your page looks good @ccblair. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • For instance, links to fonts go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Check that the user has entered a valid email addr. Throw an HTML5 validation error if not.
    • You learned to do this when coding the survey form
7

I like it! One random thought I had is maybe add is the CSS scroll-behavior attribute so that the anchor tags don’t jump down, though sometimes people want that instead. Either way, much better than my Product Landing Page! :laughing:

8

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