Product Landing Page - Any kind of feedback is appreciated

Code Feedback
1

Hey campers! I’ve just finished my Product Landing Page project (…yesterday :stuck_out_tongue:). I had some fun doing it, and made significantly more effort from my previous projects. Here you have a link to the pen. If anything pops in your minds while having an eye on it, write it down here.

Happy coding, and happy holidays everybody :partying_face:

Edit: Oh and by the way, if anyone knows why are some tests not passing give me a shout.

2

@Wallachian Your pen looks good!

I ran the test, it seems to pass all the requirements. So I don’t know where you’re getting an error from.

If I were to nitpick, maybe Whats up with the home-air-cleaning plants should be in a h1 tag as well.

I can see that the price font size is scaling on hovering over it. Maybe you’d like to try to make it scale when hovering over the green background instead of only scaling when hovering over the text. This gives a slightly bigger “target area” for a user to engage with the content.

The next step would be to maybe take a look into responsive design to make it a little better. The product-items are spilling out of the light green background box at around 965px view port width.

You can take a look into box-sizing css property to help make the widths more predictable. Then again, I might be getting ahead of myself.

Nonetheless, Good job!

1 Like
3

You’ve done an amazing job with this project.

… I’ll have to start with how I replied in the previous post for continuity and my personal experience:
I never polished any of my first 4 projects (I was just going for the FCC objectives & green checks). And it may be an unpopular opinion, but I’m glad I didn’t. They are rough to look at now, but remind how far I’ve come and how much I’ve learned

With that said, all of the tests pass for me (I’m assuming you fixed it before this post). Some minor things I noticed:

  1. Header bar, (personal opinion) Remove the underlines and make all Caps. … replace “top” with “home” & #2…
  2. Nothing in the main page, just a background image. Could use a ‘home’/‘welcome’ area or just a basic “Store name”
  3. @pakatagoh 's point, make the green container trigger the ‘grow’ effect instead of the text. And change the cursor to pointer (even though there really isn’t a link`)
  4. I like the animations over the images, but anytime something moves when I mouse over I personally expect to be able to click it. See my disclaimer above, but I was almost expecting the price to appear over the image, mouse cursor to change to pointer, and ability to ‘click to go to product page’ (again… way more advanced than expected for this point)
  5. minor note on the radius for the video. I love how you have 2 sharp corners and 2 radii (see below) but the radii are not even for me, it’s more of a double/complex curve
  6. the submit button at the end, it stretches the full container. Maybe give it a max size; and same as 3 & 4 above with cursor to pointer to show ‘clickable’
    (I only looked at PC website, didn’t look at mobile)

I love your Products section. I’m no good with design, but this is perfect to me. The sharp corners and radii, borders vs. no borders; colors. Beautiful to me! Love it. great job again and keep it going!

2 Likes
4

Hey @pakatagoh! Tanks a lot for the helpful feedback you’ve provided.

  • I changed the Whats up with.... into a h1 and it looks better, indeed
  • Maaan, the scaling on that font hover really slipped on me… Thanks guys for noticing it. I’ve just fixed that and updated the pen. I really didn’t realize it wasn’t working as I wanted. Thanks again for noticing that. Great attention to details! :+1:
  • I fought with the responsiveness of the page for some time, but I was expecting some flaws when I finished. I just began web development and I feel like the more complex the page is/the better it looks, the harder it is to make it responsible.
    I must admit, the harshest lesson I’ve learned by making this project was that websites must be made responsible from the beginning. I have made this project at first very un-responsive, and then I’ve kinda’ wasted a day trying to tweak it. Don’t do that if you care about your time and nerves.

Thank you again for the feedback. I really appreciate it :wink:

1 Like
5

Hey @pjonp! I am really happy that you appreciate the project :grin: :stuck_out_tongue:
Regarding your suggestions:

  1. I have updated the navbar: Uppercase applied, underline removed, and I replaced “Go Top” with a little logo image
  2. I have the Main Logo, on the main page. It just takes some time to load (I hope we’re talking about the same thing)
  3. Thank you too for noticing that bug. The cursor suggestion is amazing. I will apply it from now on. I know that its something that seems as a common sense rule to have the cursor change to cursor:pointer once you hover over something clickable, but when we create the websites little details like this tend to slip unnoticed for the first iteration.
  4. As that is the only page of the project the animation seems a bit confusing for me too. Normally the project will have a page for the specific project once clicked. I really have no idea how to do that only with html & css. I think some back-end knowledge is needed for creating dynamic pages. I will enhance this functionality at some point (thanks for the idea buddy :wink:)
  5. I made the video corners radii the same, 15% . Seems pretty weird that their not showing in the same way for you. I kinda’ like the effect though :laughing:
  6. Fixed the submit button: both size and cursor

Thank you again for the amazing feedback. I’ve learned some new stuff while modifying the page according to your and @pakatagoh suggestions.

Happy coding fellas :wink: