Product Landing Page - feedback please (and 1 question)

Code Feedback
1

Hello,

I’ve created a Product Landing Page and I’d love to get some feedback. Honestly, it took me a lot of time, but now I think it looks decent and resembles the example given for the task.

I do have one issue with the background color for the h3 elements (3 boxes below the video, grey). By setting h3 padding, I managed to make the color expand the way I wanted except for the top - as you can see, there is an empty space between grey color and the upper border of a box. If you have any tips on how to remove this, I’d really appreciate it.

Link to the page: https://codepen.io/sad_caterpillar/pen/vPjLzp

2

Hello! So I viewed this on my phone and immediately found the site to not be very well payed out for the smaller screen. Maybe consider working on that for good practice! I’ll take a close look later.

image
image1242×2688 280 KB
image
image1242×2688 414 KB

3

Thanks for your feedback, you’re right, I haven’t taken this into account. I’ll try to make it more mobile screen-friendly in my next coding session.

4

Well done on this task and sticking with it. Don’t worry about it taking a lot of time. This stuff is hard.

The markup looks pretty clean overall, I have only a couple of suggestions on that:

  • maybe mark up the features as an unordered list with each of the features as a list item. I think that works better semantically.
  • I would try to avoid using the element type in class names unless it adds clarity, so use e.g. pricing instead of pricing-div

For the styling, perhaps work a bit more on centering / aligning things properly, e.g:

  • vertically center the text inside the header
  • vertically align the feature icons with the feature description
  • horizontally align the video with the knife in the center (making the boxes for the knifes have the same width will help)

I know this is tough, but it will help you a lot with getting better flexbox into your muscle memory.

One other thing on the design - I noticed the header does not cover the full width of the page on larger screens. That can look a bit odd if you scroll down.

To answer your question: h3 has a vertical margin by default. If you set margin-top to 0, it will align with the top of the surrounding box.

Good luck and happy coding!

5

Wow, thanks for such a detailed answer! I appreciate all your suggestions and will work on implementing them (and I’ll also check my Tribute Page and Survey Form in case I missed these details there).