Feedback on my first Product Landing Page?

Feedback on my first Product Landing Page?
0.0 0

#1

Here’s my first attempt at the product landing page, I did not look at the code from the FCC example, except to grab the trombone logo in the top left. All of the work you see here was done by myself, would love to hear your feedback. I also don’t follow the guidelines to these projects, simply just trying to get accustomed to how everything works (flexbox, properties, selectors, etc.)

Cheers!
-JW


#2

Hi!

Looks great to me. Well done.


#3

Looks good, neat and simple.

Looks good for desktop, but not very great on mobile.

But for the alayout I realized you used some non-common way to control the advances of the elements. This is bad!

I just realized you override the font-size for h1 tag, please don’t! really, don’t do this.

H1-H6 elements are take their size relatively based on their parent. for example H1 is 2em (assume 200%), browser automatically calculate and set the font size of the Hn element.

If you think h1 is so large, so use something else like em, rather than override the tag.

The top form container (class container2), you specified the height value to control the advance, this is not required! remove it.

You set placeholder for the text field take email address, good. but it has no enough margin to top H1 element. I also suggest you make it a little bigger! same for box size and font-size.

The video you added, you used absolute values to control the width, it could break the mobile layout. one good practice would be using the screen width in mobile layout especially. example:
@media only screen and (max-width: 800px)

iframe {
    /* width: 373.333px; */
    /* height: 210px; */
    width: 90vw;
    height: 60vw;
}

The top navigation/menu bar, would be a little mess for small screens, check:
image

One good practice is using the hamburger menu solution for mobile view which works always, check smaple here (try resize the preview panel to see what happens for small screens).

I also suggest you add one bottom solid border on top menu could make it better, also a very small shadow!

Keep going on great work, happy programming