Crowfunding landing page with functional js, scss and BEM!!!!

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Greetings, Karim! 👋

  Good job on this challenge! 👏 Your solution looks good, is responsive, and works rather well! 👍 I like how you styled the scroll bar in the modal that pops up! 😀

  I only suggest allowing users to select a backing option from modal by clicking on the entire option (or at least the heading of the option), not just the radio button itself (that'll make it easier for users to select an item). 🙂

  Oh, yeah, and adding a favicon to your site would be a nice touch! 😉

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  Karim•590

  @yasssuzPosted over 3 years ago

  @ApplePieGiraffe hey!

  thank you for your feedback, I'm gonna fix the backing option.

  Happy coding :)

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great job on this one.

  In terms of layout, the desktop is good and the mobile state as well.

  Suggestion for the UI will be;

  • At mobile state, adding z-index on your menu-bg will be awesome so that it will overlap the bookmark button like it should do. Right now, when you click the menu bar, the bookmark button is still clickable and it should be hidden like that right. So adding that z-index will be awesome. Maybe like 10.

  • Adding a focus state on the different interactive elements will be really beneficial. Adding those supports more accessibility since a user will know where they are currently, especially when they are using keyboards. As of now, the sites lacks some of those, but the weird thing is the "out of stock" button have that focus state, which should not since it is disabled right.

  • I suggest not using height: 100vh on a main component or holder. You container selector is currently using that. So what happens is that it will only take the remaining size based on the viewport's height. So when you inspected it in dev tools at the bottom, it gets pushed on to the top and resizes it, which is not really ideal. Maybe using another units like rem will be awesome, so that it won't scale relative to the viewport.

  For the markup

  • I see that you are using a tags on those supposed buttons. So when everytime user clicks on it, it somehow redirects the user onto the same page since it is a link right. It will be better if you use .preventDefault methods on those element in your js. Or much preferably, use button elements.

  • Your modal as well is using a tags instead of buttons or having .preventDefault. So when a user, I, click on continue, it refreshes the website. Chaning some behaviors will be really awesome

  Overall, great job on this one^^

  1