Could someone give me a little feedback on my product page?

Hi guys! I’ve just wrapped up the product page project and was wondering if someone could be me some constructive criticism? Thanks for your time!

Here is the link to the Codepen page: https://codepen.io/braxmassengale/full/KKpMqLK

Had a look with Chrome on my laptop. I like it. I would say that the icon gets in the way of the menu and clashes a bit. This is the icon I mean: (https://img.icons8.com/cotton/64/000000/toolbox.png)

You could also make it based on a real site for a portfolio by adding your own images and that would bring in design skills too.

Otherwise it’s nice.

1 Like

It looks good.

My only complaint is that when I hit one of the links, it scrolls just a bit too far, causing the top of the “thing” to be cut off.

1 Like

@Braxtonzmassengale, your page looks good. Just a few things to revisit;

  • Run your code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • Ignore the first three errors since codepen only expects what’s between the <body> </body> tags but the other errors you should look into correcting.
  • As mentioned, when clicking on a link in the navbar the top part of the section is being cut off. Maybe consider adding some padding to the top.
  • You should add a generic backup font (like sans-serif in this case) in the event that the font you link to (or import) does not load.
  • You have a typo in the footer declaration block;
    padding: bottom: 10px; is not valid
1 Like

Looks pretty good.

  1. I would add some more vertical space between the sections, everything is a little bunched up.

  2. Maybe make the header stand out from the background a bit. For example, adding border-bottom or a box-shadow to it.

  3. You can add a positive padding-top and negative margin-top to the linked sections to correct for links not landing correctly (other techniques).

.section {
  padding-top: 120px;
  margin-top: -120px;
}
  1. Not sure why video-content and pricing are section elements but hero and information are div elements. I would just use section elements for all of them.

  2. Add cursor: pointer to the submit button.

Nice job, keep it up!

1 Like

I like it. The font size on the e-mail form button is a bit small. And on my screen the icons look a bit blurry. I suggest using the the 128x128px version (https://img.icons8.com/cotton/128/000000/lock--v1.png) and scaling it down to 64px.

1 Like