Product preview card using flexbox and Sass

Community feedback

• 

  P

  Kumani Kidd•150

  @amancalledkiddPosted 20 days ago

  Good work!

  • The solution includes great use of semantic HTML!

  • Accessiblity is good, using alt and aria labels

  • Solution looks good on desktop, mobile is okay but needsa a few adjustments. You have used display: flex on the button element, which is causing it to change shape. Try taking it out and seeing how the button looks.

  • Code is well structured, good use of comments for readability and good use of variables for colors and fonts making reusable.

  • Solution is very similar to design, a few adjustments and it will match completely.

  Overall great job! Try using sass nesting as it makes the code more readable for other users see example below:

  CSS
  nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  nav li {
    display: inline-block;
  }
  nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
  

  SCSS
  nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  
    li { display: inline-block; }
  
    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
  }
  

  Hope that helps!

  Marked as helpful

  0

  ---

  

  NeonCodes•60

  @NeonCodesPosted 17 days ago

  @amancalledkidd Thank you for the feedback!

  -I'll try doing that to fix the button in mobile.

  -Nesting could help organizing the code for the elements in the card definetely!

  1