Skip to content
Submitted 10 months ago

Responsive Order Summary Card

Hassan Moataz•1,860
@hassanmoaa
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Do you have any questions about best practices?

Yes, Please!

Community feedback

  • Petrit Nuredini•2,860
    @petritnurediniPosted 10 months ago

    Congratulations on completing your Order Summary Card project! 🎉 It's a fantastic accomplishment to bring a design to life with your coding skills. Here are some best practices and suggestions to take your project even further:

    • HTML Structure:

      • Great use of semantic elements like <main> and <section>. Consider using <article> for the card as it represents a self-contained composition.
      • Place the <footer> element inside the <body> tag. The <footer> is part of the body content.

    • CSS Best Practices:

      • Consistent use of CSS variables for colors is excellent. This makes it easier to maintain and modify your styles.
      • In your CSS, consider organizing properties in a consistent order, such as positioning, box model, typography, and visual styling. This makes your code more readable.
      • Be cautious with CSS comments. The comment ---dark-blue: hsl(223, 47%, 23%); seems to have an extra - which might cause a parsing error.

    • Responsiveness:

      • Good use of media queries for mobile responsiveness. Test your layout across different devices to ensure it adapts well to various screen sizes.
      • Ensure text sizes and button dimensions are touch-friendly and easily readable on mobile devices.

    • Accessibility:

      • Make sure all interactive elements (like buttons) are accessible. Adding :focus states alongside :hover for interactive elements improves keyboard accessibility.
      • Use meaningful alt text for images for better screen reader accessibility.

    • Performance Optimization:

      • Optimize images to reduce file size for faster page loading, especially important for users on slower connections. Tools like TinyPNG can compress images without losing quality.

    • Code Cleanliness:

      • Remove unused or commented-out code before finalizing your project. This includes CSS comments and any unused HTML elements.
      • Maintain consistent indentation and spacing in your HTML and CSS for better readability.

    References for Further Learning:

    Keep exploring and challenging yourself with new projects. Your journey in web development is off to a great start, and I'm excited to see what you'll create next! 💻🚀

    Marked as helpful
    1
  • Daniel 🛸•44,310
    @danielmrz-devPosted 10 months ago

    Hello @hassanmoaa!

    Your solution looks awesome!

    I have just one suggestion:

    • Use background-size: contain; instead of background-size: cover;. It'll look exactly as the original design.

    Other than that, excellent job!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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