Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary Card using Flexbox and CSS Grid

@mayralepro

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I used different divs for each section of the card for customization, is there another way to do it?

Community feedback

@maykol-vallejos

Posted

Hello, how are you? Regarding your question it is a very good practice to use a divs structure for a better ordering and understanding of code, maybe suddenly it would be good to understand the difference between section and divs, but both are valid according to the convenience of use. You can see some differences in the following link:

https://www.educba.com/html-section-vs-div/

Now I have two observations to make, the first one is that you try not to use "px" for accessibility issues between different browsers, which causes that in some browsers it does not resize or render or is not responsive for not having accessibility to it. Una buena practica para ello es utilizar la tecnica de tamaño de fuente 62.5%, puedes revisar el siguiente articulo para aprender sobre el y aplicarlo para un trabajo mas eficiente:

https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/

And the second observation is regarding the elements inside the div of type class="section3". It is not a good practice to put a button inside a "p" or "a" tag, if you want to use an "a" tag that redirects you would simply style that tag and not a button as such, for example (following your code in the section3):

in your html you could replace all your elements with these two lines of simple code

<a href="#" class="payment">Proceed to Payment</a> <a href="#" class="order">Cancel Order</a>

and in your stylesheet change the names of the classes ".change:hover button" to .change:hover , and also change the name of your ".payment:hover button" to ".payment:hover".

In the same way in your stylesheet, change the class name ".payment button" to ".payment" ...inside the class ".payment" add the following elements: width: 250px; text-align: center; (I don't usually use pixels but I do it according to the semantic of your code for this case)

and finally in your stylesheet change the class name ".order button" to ".order".

With this you will have a better structure of the html code.

Very good programming logic, keep it up, good luck in your other coding, success!

Marked as helpful

0

@mayralepro

Posted

@maykol-vallejos thanks for your input ! I deleted the buttons and changed it with your recommendations; thanks for the links too, I'll read more about the 62.5% font trick.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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