Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Coffeeroasters-subscription-site with SCSS BOOTSTRAP JAVASCRIPT

#bootstrap#sass/scss#solid-js
Zybartas 480

@ZybartasRingys

Desktop design screenshot for the Coffeeroasters subscription site coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, this was a really interesting and tough challenge to do it took a while to finish, this challenge was my first big project for which i used Bootstrap as a CSS framework and also a first project where i did mobile first development so it was really challenging at the beginning of project. This challenge helped me to learn a lot about bootstrap and responsive development , JS also was a big challenge since i have tried to make it on my own, still need to figure out some functionality.

Any feedback would be appreciated !

Community feedback

@arkharman12

Posted

  • Positioning of the hamburger icon needs an adjustment.
  • Mobile menu should automatically close if the screen width keeps increasing.
  • "Our Collection" section messes up at 1390px width.
  • "Our Commitment" section image keeps moving which makes the person's face hidden.
  • "Free Shipping" truck icon also seems squished.
  • Accordions don't open or close if I click on the icon itself.
  • Create my plan should only work if all of the criteria are selected.

Otherwise, nice work!

Marked as helpful

0
Naveen Gumaste 10,480

@NaveenGumaste

Posted

Hay ! Good Job you made it look nearly perfect to the preview

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body like it should be your container

-> For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc

-> But use header tag only once in main heading element.

-> You have just used same id for multiple elements (class can be used multiple times bt.. id should be unique)

Keep up the good work!

Marked as helpful

0

Zybartas 480

@ZybartasRingys

Posted

@Crazimonk Hey, thanks for comments, already fixed everything!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord