Beginner HTML & CSS Order Summary Component

Community feedback

• 

  Rien Coertjens•80

  @riencoertjensPosted about 1 year ago

  overall the code looks clean and readable, naming of classes is clear. Some feedback points I had

  • think about the box model: consider each element as a rectangular box, padding is used to create space inside the box, margin is used to create space between sibling elements. in this case I would apply a padding to the white box that contains all the information. then use margins on the elements inside this box to create space between the siblings.
  • re-usability: consider this task part of a big application, are there elements you would want to reuse (for example the buttons): try to create class names that you can reuse and combine (for example btn that create's the shape and general style of the button, then you can have btn-primary where you apply the blue background color, btn-secondary would apply a transparent background that way you can do class="btn btn-primary" to create a button and reuse it somewhere else
  • overall structure: I don't have access to the design file, but generally designs like this have a "rythm", for example all elements within the white box will be spaced the same (about 24px in this one, you could create a ordersummary-child class to take care of that spacing)
  • units: I see you're using px, rem and em, it's best to stick to either rem or px (preferebly rem) be careful with em as it can have unexpected results
  • class vs id: you're using class most of the time, but then for the ordersummary child elements you switched to id, best to stick to class for styling (either one works, but as a rule of thumb)

  Marked as helpful

  0

  ---

  

  Cherie Giffard•30

  @CherieRosePosted about 1 year ago

  @riencoertjens Hey Rien, thank you so much for your detailed feedback! Based on your comment, I altered a few things and added some padding to the container class which meant I could remove it from a lot of the elements contained within.

  0
• 

  Thodoris-Diamantidis•140

  @Thodoris-DiamantidisPosted about 1 year ago

  Congratulations on finishing this challenge!

  Your code is well-structured and easy to follow. However, for improved maintainability and efficiency in your styling, consider incorporating a custom CSS reset and custom variables.

  • Custom CSS Reset: It might be beneficial to include a custom CSS reset at the beginning of your stylesheet. A CSS reset helps establish consistent default styles across different browsers, providing a clean slate for your styles. This practice can save you time and effort when styling elements.

  • Custom Variables (CSS Custom Properties): Custom variables (CSS custom properties) are a powerful tool for making your code more reusable and maintainable. By defining variables for commonly used values, such as colors, fonts, or spacing, you can easily update styles across your entire project by modifying just a few variable values. This not only simplifies maintenance but also ensures a consistent look and feel throughout your application.

  Incorporating these practices can enhance the efficiency and maintainability of your CSS code, making it easier to work on both small and large projects.

  If you found this comment helpful please feal free to upvote! :)

  Marked as helpful

  0

  ---

  

  Cherie Giffard•30

  @CherieRosePosted about 1 year ago

  @Thodoris-Diamantidis thank you so much! I actually don’t really know anything about CSS variables so I’ll look into that and update my project :)

  0

  

  Thodoris-Diamantidis•140

  @Thodoris-DiamantidisPosted about 1 year ago

  @CherieRose You're very welcome! I'm glad I could be of help. Learning about CSS variables can be a valuable addition to your toolkit, and it can make your projects more efficient and maintainable. If you found the tip helpful, I would greatly appreciate an upvote. Good luck with your project, and happy coding!

  0