Order Summary Component Solution [Plain HTML + CSS]
Design comparison
Solution retrospective
Feel free to give any feedback or suggestions! 😉
Community feedback
- @petritnurediniPosted 10 months ago
Congratulations on completing the "Order Summary Card" project! Your hard work and dedication are evident in your project. Here are some best practices and recommendations to further enhance your skills:
-
HTML Best Practices:
- Semantic HTML: Excellent use of semantic elements like
<main>
. Consider using<figure>
for the image container and<section>
for the card content area for better semantics. - Alt Text: Good job using alt text for images. Ensure it's descriptive of the image's content or role.
- Semantic HTML: Excellent use of semantic elements like
-
CSS Styling:
- CSS Variables: Great use of CSS variables for colors, enhancing maintainability and consistency.
- Responsive Design: Good implementation of responsive design with media queries. Test on various devices to ensure a consistent experience.
- Pseudo-elements: Nice use of
::before
for background images. Ensure that it enhances the user experience across all devices.
-
Accessibility Considerations:
- Keyboard Navigation: Ensure that all interactive elements are easily navigable using a keyboard.
- Color Contrast: Check the contrast between text and background colors to ensure readability, especially for visually impaired users.
-
Performance Optimization:
- Image Optimization: Optimize images for faster loading, especially for mobile devices.
- Code Minification: Minify CSS and HTML in the production version for improved loading times.
-
Code Organization:
- Comments: Adding comments in both HTML and CSS can help others understand your code structure and styling choices.
- Consistent Formatting: Ensure consistent indentation and spacing in your HTML and CSS for better readability.
-
Cross-Browser Testing:
- Compatibility: Test your page across different browsers to ensure consistent behavior and appearance.
-
Further Learning Resources:
- Learn more about HTML & CSS: MDN Web Docs
- Explore Responsive Web Design: CSS Tricks Guide
- Understand Web Accessibility: Web Accessibility Initiative (WAI)
Keep up the great work and continue to challenge yourself with new projects! Every project is a stepping stone to becoming a more proficient developer. Your enthusiasm and willingness to learn are key to your continued success. Looking forward to seeing more of your work in the future!
Marked as helpful1 -
Please log in to post a comment
Log in with GitHubJoin 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