Hey campers! I’ve just finished my Product Landing Page project (…yesterday ). 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
Edit: Oh and by the way, if anyone knows why are some tests not passing give me a shout.
@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!
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:
- Header bar, (personal opinion) Remove the underlines and make all Caps. … replace “top” with “home” & #2…
- Nothing in the main page, just a background image. Could use a ‘home’/‘welcome’ area or just a basic “Store name”
@pakatagoh 's point, make the green container trigger the ‘grow’ effect instead of the text. And change the
pointer (even though there really isn’t a link`)
- 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)
- 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
- 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!
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!
- 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