Submitted almost 2 years ago

Continuing daily challenges... Order summary card

Iva Beriashvili• 140

@ivaberiashvili

Preview site View code

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Feel free to give feedback. I welcome the harshest ones :)

Community feedback

Fatlind Shehu• 2,230

@fatlindshehu

Posted almost 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

Iva Beriashvili• 140

@ivaberiashvili

Posted almost 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!

Fatlind Shehu• 2,230

@fatlindshehu

Posted almost 2 years ago

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

Gautam Juyal• 330

@gautamjuyal

Posted almost 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.

Illyaas• 680

@Illyaas4Show

Posted almost 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!

Iva Beriashvili• 140

@ivaberiashvili

Posted almost 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?

Illyaas• 680

@Illyaas4Show

Posted almost 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 :)

Please log in to post a comment

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