Hi there,
I finally finished the Product Landing Page Project. It would be great if someone could give me a review and tell me what you think. 
I’d be happy to do the same for you. 
2 Likes
Wow, really nice website,only problem that I see is when you visit it on mobile, the “dropdown” for menu or whatever it is should have the same height as a navigation bar, right now it is about half of its height. (y)
1 Like
Thanks! I didn’t notice that. It’s fixed now. 
2 Likes
Very nice. Clean look, solid color scheme, good use of SVG, solid professional build.
Later on, when and if you revisit and rebuild (it’s common, as your skills progress, to revisit earlier projects and re-create them with updated tools), I might suggest you take a look at Semantic HTML. It isn’t something that is necessary for these lessons in FCC, but it is a toolkit that you will find is very common in the modern web dev workshop.
Highly recommend, when you have the time, that you read up on semantic tags. MDN has some great info on HTML5 elements, and the intended use.
Again, really solid design, and I can’t find a thing about it I’d see changed. 
2 Likes
This looks amazing! There’re a couple of things I noticed in no particular order:
Scrolling:
When navigating, the sudden jolt from one id to another can be disorienting. I’d recommend incorporating a smooth scrolling feature, either in CSS or JS. If you go the CSS route, I’ll point you here. Keep in mind, though, that Safari and The-Big-Two-That-Shall-Not-Be-Named still lack support for this feature after many years. But if you prefer JS, there’s a simple (almost plugin-like) library that I love to use: ZenScrollJS. All you have to do is include the package and it takes care of everything for you.
Another thing is that the navbar covers a portion of the headers it scrolls to. A quick fix for this might be a bit of can’t believe it’s not butter margin? 
Video:
On desktop, I’d recommend setting a max-width for the video (probably around half the size it is now). The initial quality of the preloaded cover image gets pixel-y when that large and be overwhelming to those with giant monitors.
It snaps well with mobile, however, it isn’t centered, which could detract.
Footer:
Not sure if it was a design choice, but there are a few pixels under the footer - figured I’d mention it in case.
Navbar:
I think adding some JS logic to toggle the navbar open and closed after each link click would go a ways with the UX. Since I noticed you’re using Bulma, you could do this by duplicating the code you have for the navburger and pointing towards each link as well (or just add some logic for each link in the existing code too)
Overall I’d say you did a really good job! 
The things I mentioned above are mostly for UX than anything and can be subjective at that, so take with a grain of salt 
3 Likes
Thanks, I’ll definitely take a look at that! 
1 Like
Hi,
Thanks for the compliment. 
I’ll definitely take a look at your suggestions when I revisit this, some things I didn’t notice when I was making the page, like the footer having a gap. The gap isn’t intentional, so I’ll definitely go and fix it later.
I did also notice that the video is a little pixely, which was super annoying, since I wanted to go for a nice big video, but the only relevant one I found isn’t the best quality. I think I’ll hunt around for a better one, and also probably make the iframe a bit smaller.
2 Likes
Wow! You are really amazing at coding!
Your layout is awesome and your colors are really cool.
Please try to speed up the animation a bit.
The text on the top says Say Hello The Best Coffee In The World.
It’s supposed to say Say Hello To The Best Coffee In The World
1 Like
Looks awesome! 
- Let’s have some fun and add some smooth scrolling: Add
scroll-behavior: smoothtohtml, bodyin the CSS
- I would recommend adding more space around the social media buttons at the bottom
2 Likes
Cool! I didn’t know you could control the scroll texture with css.
1 Like