CSS, HTML5, JavaScript, flexbox, CSS-animations.

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @barimess, Congratulations on completing this challenge!

  Two tips about responsiveness:

  Fix the component responsiveness, its not working yet and this is due the fixed width you've applied to the container. The difference between width and max-width is that the first(width) is fixed and the second(max-width) is flexible and make the element shrink when the screen starts to scale down. So if you want a responsive block element, never use width choose or min-width or max-width.

  To improve the card overall responsibility, you can start to add flex-wrap inside the class that manages the section for the rating numbers button and makes the adjust to fit in different rows while the container scales down, not that without this property the container doesn't shrink. Here's the code applying these changes:

  .numbers-container {
      display: flex;
      justify-content: space-around;
      margin: 32px 0;
      padding: 0;
      flex-wrap: wrap;
  }
  

  ✌️ I hope this helps you and happy coding!

  1
• 

  Nneoma Njoku•1,210

  @SatellitePeacePosted about 2 years ago

  hey @barimess -Congrats on completing this project i especially like the animations you added to it

  -I think your GitHub repo URL is wrong because when I tried accessing your code, i received an error 404 message

  --To answer your question properly naming CSS classes can be a headache sometimes, especially if your project involves a lot of styles

  --However in my opinion the best way to name your CSS classes is by using BEM naming styles

  -B = block -E = element -M = modifier

  -using BEM for naming your classes in CSS is like using CSS for coding your CSS because it makes things a lot cleaner and easier to understand

  -Example

  <a class="btn btn--big btn--orange" href="https://css-tricks.com">
    <span class="btn__price">$9.99</span>
    <span class="btn__text">Subscribe</span>
  </a>
  

  -Here is a link for more info (https://css-tricks.com/bem-101/)

  • i hope this helps

  1

  ---

  

  Bari mess•70

  @barimessPosted about 2 years ago

  @SatellitePeace thank you for taking the time to reply! the repo is correct it's just set to private. I will switch it to public asap, might as well get direct critique! will definitely check BEM naming styles

  cheers and happy coding

  1