Product preview card component solution, using SCSS and Flexbox

Community feedback

• 

  Cats-n-coffee•670

  @Cats-n-coffeePosted almost 2 years ago

  Hi Fanni!

  Nice job, it's responsive and your HTML and Scss are nicely organized! Because the project is pretty small, in my opinion you did a good job with Scss. Some other nice features are breaking up your styles to multiple files (and import into other files, called partials, or also modules - slightly different), using mixins can be helpful also. I'm sure you've already been on the website.

  I won't be of much help with accessibility - so hopefully someone else can help with that - I only checked the HTML which looks good for basic accessibility principles, and tried to tab through the page. When I tab the only element I can focus is the "Add to cart" button which I guess it fine since they are no other controls on the page (again, I might be wrong).

  Regarding libraries, you will find various opinions on this, so I'll just share mine and try to justify my thoughts. Bootstrap will probably make this project more complex and the bundle size bigger (unless you use the cdn - but that's making another network request). Considering how much CSS you have, it's probably not worth saving a few lines - if you save any. Since this project has a specific (and simple) design, the only thing I could imagine being helpful is the layout. Which in my opinion still doesn't justify the use for such a small amount of elements. And lastly about Bootstrap and learning (not sure where you are in your journey), most people should probably learn CSS (and Scss and others) and be very comfortable with it before starting to use libraries. In my opinion, what Bootstrap is helpful for, is to make websites that don't already have a design. That way you can have a decent looking page without having to worry about the styling part (once you start using styling libraries you might notice how painful it can be to overwrite their styles - in my opinion they're made to be used as is). About React, just like Bootstrap for this project, it would be unnecessary and wouldn't bring anything else to your project. React is a pretty heavy framework and a great tool, but I believe the use should be justified by this sort of problems: the project needs to make a lot of DOM updates, the project has a lot of pages with a lot of changing parts, ... . Of course you can use any of those frameworks on any project to learn, but maybe aim for one that has multiple pages with repeating components, or one with changing data or lots of user interactions? These might be more suited to learn and understand how helpful these framework can be (once you're there ask yourself "how much work would that be with vanilla Js?", that's what I usually ask myself before using a tool).

  Hope this helps, let me know if you have more questions!

  Marked as helpful

  0

  ---

  

  Fanni K•80

  @fananibananiPosted almost 2 years ago

  @Cats-n-coffee Thanks for the feedback and clarifications! This will definitely help me make smarter choices going forward.

  0