Product Landing Page Review pls

Code Feedback
1

I’d appreciate any suggestions on my product landing page, please.

Product Landing

1 Like
2

Cute, Friendly Styling.

I see you mastered the Nav. Everything looks pretty good:

Perhaps, Consider Flipping the Position of the Video and the Text and Email Entry, for a Better flow.

And consider making the video a little bigger to balance out the page.

Screenshot 2022-03-28 2.55.57 PM

1 Like
3

Yes, me and flexbox are reaching an understanding lol. Honestly, I’d like to decrease the space between the flex items when they’re in a column. I tried column gap and that didn’t work.

And, yes that’s a good idea about moving the video around and enlarging it.

Anything else you or anyone else sees?

4

It’s too early in the morning for me to laugh out loud, but this almost did it.

Yes, one more thing you can do… Send me that glorious green dress from the Video…

5

I would if I could!!

6

@Nreynolds1202 Great work so far. Some helpful additions:

  • Consider having a linear-gradient (using rgba values) on your hero-image so your text would look better and be more visible.
  • For your hero text, if your aim is to have the text at the center always on every screen then you need to go with a left: 50% and yes this might look awkward and that is because the position starts from the top-left corner of the element so to adjust this you’d need to add transform: translateX(-50%) (since you’re only adjusting on the X axis) and also align the text in the center. You can learn more about the CSS position property and CSS transform property here.

Alternatively, you do not need to have the position property on the text.

  • Set a display property on your hero section (e.g. CSS grid or flexbox).
  • Place every item inside the hero in the center.
  • You can also use the transform property if the need be to have your items sitting nicely wherever you want it.

Your “Shop” section seems to overflow from “601px - 1031px” which doesn’t look good. the entire page should be responsive on all screens. Here’s a fix:

  • Instead of hot-coding 1fr three times try using the Grid auto-fit w/ Grid minmax like this: grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));. Learn more about CSS Grid auto-fit and auto-fill here Auto-Sizing Columns in CSS Grid: CSS-Tricks.

I hope I was able to assist you in your coding journey in any way. Keep pushing and Happy coding👍!

2 Likes
7

Thank you for all of this @teamie, the tips and the references! All very constructive! I can’t wait to play around with it some more.

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.