Continuing daily challenges... Order summary card

Community feedback

• 

  Fatlind Shehu•2,230

  @fatlindshehuPosted over 2 years ago

  Hi @ivaberiashvili

  First compliments on the good work you've done, you used the flex-box very nice and the component is looking great, but I would suggest something:

  • Avoid using px units, try instead rem or em;
  • Also try using a pre-processor to structure your code better.
  • Combine sass and BEM to make the code more readable and understandable for other developers.

  Keep up the good work & happy coding!!!

  Marked as helpful

  0

  ---

  

  Iva Beriashvili•140

  @ivaberiashviliPosted over 2 years ago

  Thank you @fatlindshehu for your feedback!

  I'm aware of sass and definitely going to include it in my future project as I become more familiar generally with CSS.

  I'm glad you took the time to answer!

  1

  

  Fatlind Shehu•2,230

  @fatlindshehuPosted over 2 years ago

  @ivaberiashvili Sure no problem, keep it going and make sure to have fun :)

  0
• 

  Gautam Juyal•330

  @gautamjuyalPosted over 2 years ago

  Great solution! You have achieved almost the same look for the component. As I went through your code, I saw you have enclosed an anchor tag inside a button. Instead you can enclose it inside a div. That might be more correct.

  0
• 

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  Wow this is a really good solution! Well done!

  I don't think it is a good idea to put a link in a button though. Things don't usually end up well.

  Happy coding!

  0

  ---

  

  Iva Beriashvili•140

  @ivaberiashviliPosted over 2 years ago

  Hi @Illyaas4Show, thanks for feedback!

  What would be your preferred way of creating button that includes link? using just <a> element and style it?

  0

  

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  @ivaberiashvili u should do what @gautamjuyal said, wrap the anchor tag in a div and style the div you could add the following styling to make it look like a button

  div {
    padding: 3rem 1rem;
    background-color: cyan;
  }
  
  a {
    display: block; /* to make all parts of it clickable */
    text-decoration: none; /* to remove the line under it */
    color: white;
  }
  

  I think that should work. I haven't tried it on an actual editor so there might be some small errors so please check for that.

  I really hope that helped! Keep coding :)

  0