Product Landing Page: your feedback

Hello fellow coders!

I have finished my Product Landing Page and am looking forward to your comments and suggestions. Any advice for improvement is greatly appreciated. Here are a few things you ought to know before taking a look:

  1. I am aware it is simple, so if you have any suggestions to add something feel free to let me know.

  2. Please stretch the code viewer in JSFiddle to see the changes in the layout based on the screen width.

  3. The landing video may not autoplay if it takes a little longer to load. I have tried many solutions and this is the best I could get it to work. The intention was to get it to autoplay upon landing, and if the connection is good it does exactly that. If not, then you must press the play button. The video is muted intentionally.

  4. Please let me know if my CSS is messy or if some parts are redundant. Also let me know if my choice of html tags like div instead of section and so on are okay.

All in all I am still a beginner so your help and feedback is greatly appreciated.

The link: https://jsfiddle.net/fq6jx0ow/

Nicolas, 17.

Edit:
The following link will direct you to the latest updated version of my work, with the suggestions suggested by @Joseph1205 and @Teller implemented.
The new link:

1 Like

@hasanzaib1389 , @zuhameer6 , @michaelhenderson and @bbsmooth - your feedback on some of my other projects has helped me a lot so I’m tagging you just to make sure you did not miss my post. Hope I’m not bothering you and thank you in advance for taking a look.
Of course any other feedback is also very much appreciated!

Hi @nickrg

I had a quick look at your Product Landing Page project.

Looks well structured and professional.

Noticed for smaller viewports overlap occurs for the email input.
image

For the top of the page, the "hero" section, consider briefly describing what the page is about.

Happy coding

2 Likes

Hey @nickrg

Good site. Well structured.

However, one thing i notice a lot of people do is put their transition property on their element’s :hover rule. (you’ve done this for your .model-div cards)

Here’s a pen where I’ve laid out examples to better help you visualise the differences. Carefully examine the css.
https://codepen.io/Joseph_1205/pen/QWRGadP

Then again, you might have done it intentionally but im not sure. Having your transition set in your :hover rule makes the transition look ugly and hard. If you have the time, have a good read of this documentation: transition | CSS-Tricks - CSS-Tricks

Cheers

2 Likes

Thank you for your compliment and feedback!
I will add a header for the hero section - sounds like a good idea.
As for the email input overlap, for some reason I could not see it when I squeezed the screen to a small width. However, yes, the whole light-gray div it’s sitting in does spill out when the screen gets really small. I did not think I needed to deal with this though since most mobile devices don’t get smaller than 320px in vp width (Common Viewport Sizes for Mobile). But if you think it is a problem I will fix it, no worries.
Thank you very much for taking the time to see my work and I will come back with an updated version as soon as I can.
Nicolas

1 Like

Thx @Joseph1205 for the compliment!
What you are say is very interesting. I have studied your pen and correct me if I’m wrong but it seems to me that when I put the transition property in the :hover rule it only fades on hover entry, not exit and if I put it on the original element selector it will fade in and out for both, right?
I never noticed that and that means a lot, so thx for telling me. I will study that article too.
An updated version with these things fixed is on the way…
Thx again for all your help.
Nicolas

1 Like

Well done @nickrg

You’ve spotted and understood it on point. The article is just a longer, more written out explanation. Read that and you’ll basically be a semi-pro at the transitions property.

Happy coding

2 Likes

Great. And I just realized you are the 15 year old with the amazing personal portfolio page I was so impressed with. You really are a great developer and have a bright future, my friend!
See you around here,
Nicolas

1 Like

Hello everyone!
I have finished the updates version with you suggestions implemented. Please let me know if they work and if you have any more.
@Teller : I have modified the form element and the email input to squeeze a bit nicer into small screens. Let me know if that works for you now - it did for me but I can tell from your screenshot that you use a different browser than I do so please let me know.
Also, I have added an animated hero text that stays put after the animation is completed. Let me know how that looks on your end as well.
@Joseph1205 : I have tweaked my .modal-div css and put the transition inside the regular one instead of the :hover selector one. Many thx again for this insight!
All of you can take a look and let me know what you think!

Nicolas

1 Like

We’ll done. You still need to do the same for your nav links though. In fact, just go through all your css and fix any :hover rules. (btw, I used to make this transition mistake a lot and would sometimes get frustrated as to why the transitions only transitioned in one direction. that was before i realised that i was doing transitions all wrong :sweat_smile:)
Your email form element responds nicely.
Another thing i would suggest having is your Mercedes logo in your navbar be smaller while also not having a hover effect (the one that changes the background color of it), and your navbar itself have some padding. I love mercedes btw. Great car.

Also, here’s another css transition article to really teach you those extra special tricks.

CSS transitions do a lot for a site and it’s pretty good (IMO) to know it well.

Cheers

1 Like

Alright, will polish that up like you said. I forgot the navbar lol!
Glad to hear the form and email work well.
I will make that logo a bit smaller. I thought something was strange but couldn’t put a finger on it. Thx. And the hover effect is stupid - you’re right. It’s not a link so I don’t know why I did it. I just like hover effects, I suppose!
As for the navbar padding, not sure what you mean. Do you think the list items should be bigger? I did it that way so it’d respond better to narrow screens when the boxes wrap.
I know, g-class is great. Of course my favorite vehicle is just the plain boring Corolla, but g wagons are just pure class, man.
Thx for the article!
N

1 Like

I realise that you didnt use the nav element as the header, and rather the nav nested within a header element

You should add padding to the header:

#header {
  padding: 2rem 1rem;
}

Your #header-img looks good in 60-70px. When you set either the width, or height of an image, you dont need to set the other value, like you’ve done. unless you need the image to squeeze and cover itself into a smaller space.

Instead of this:

#header-img {
  width: 90px;
  height: auto;
  display: block;
  margin: 0 10px;
}

Do something like this:

#header-img {
  width: 60px;
  display: block;
}

As for your nav links, having them wrap causes overflow issues on smaller view-widths:
image

Instead of having them wrap, let them take up 100% of the header’s width and be inline with your logo for smaller view-widths. It’ll all fit and you wont need any wrapper. You also definitely dont need to make them bigger. They’re alright as is.

You nav should look something like this. It might help to reduce the padding of the nav links as well for smaller screen sizes so they fit next to each other.
image

Overall, after looking more deeply into your project, there are a few places that need work css-wise. But since you’re still learning, as we all are, I’ll leave it to you to improve. Of course, if you ever need help, i’ll be sure to respond to your post here on the forum.

Cheers,
Joseph

1 Like

Here is the updated version. Let me know if I missed anything.
Thx bro for all the help. It means a lot and I learn more this way than in any tutorial where I’m basically just copying and pasting code without thinking.
And now I’ll use your ending ‘cause I like it:
Cheers,
Nicolas

1 Like

Alright Nick, you can be done with this site. Congratulations. Everything looks good. It was really my pleasure to help. Helping and teaching others (or at least trying to) is a great way for me to learn as well. I’m glad you’ve found me helpful.

I wish you the best of luck on your web development endeavours dude.

Keep going,
Joseph

1 Like

And you as well, my friend. It was nice talking to you. You’re a great teacher. And feel free to message me too with any cool things you’re up to once in a while. It’s always nice to share your work with a buddy.
Thx again,
Nicolas

1 Like

Hello!
Sorry for replying so late.
One thing I like about your projects is that it is very simple, it’s not overdone and it is well structured.
The topic you have chosen a great topic. The G-class is truly remarkable.
Good job!
May God guide and assist you and make you successful.
Happy coding!

1 Like

Thank you very much, @zuhameer6, for taking the time to take a look at my work. I have always thought my projects are too simple and amateurly structured, so to hear that you like the layout and simplicity of them is very encouraging. And thank you for your approval of my topic.
Allah yahdeek wa yusa’iduk wa yaj’aluk najiha as well!
Many thanks,
Nicolas

2 Likes

Hey @nickrg

Everything looks good. Transitions work properly, css is good. Well done!

One issue though: The padding on the navbar is uneven on both sides:
image

1 Like

Hi again, @Joseph1205!
Thx for making sure everything’s perfect. I see what you mean - it looks a bit unusual. I’ll fix that sometime soon, as I’m a bit busy working on other projects and learning Figma right now. But I’ll be sure to deal with this as soon as I can.
Thx bro as always for your help,
Nicolas

Here it is, @Joseph1205! I think I’ve fixed it. Let me know what you think, brother.

Take care,
Nicolas