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

Code Feedback
#1

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

#2

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
#3

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
#4

@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
#5

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
#6

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
#7