Design comparison
Solution retrospective
I am proud of finishing this project. I would like to have been able to finish the project in less time and with more ease, I had struggled on many areas of the project including getting the format correct and the responsiveness.
What challenges did you encounter, and how did you overcome them?I struggled with using different css logic, not understanding all the formats and the differences such as padding vs margin, as well as which div I should add the css styling too to get the correct format. In the end I overcame the issues by bashing my head on the keyboard and eventually getting the correct format.
What specific areas of your project would you like help with?I would like to find ways that I can more efficiently style the html and css. What ways in this challenge could you quickly format the Html and css and how each works in conjuction with each other.
Community feedback
- @MohammedOnGitPosted 2 months ago
Hello Erics!
Congratulations on completing this challenge. You did awesome! Your HTML code for the product preview card component looks solid! Here are some comments and recommendations to enhance it further:
Semantic HTML:
Use more semantic tags for better structure and accessibility. For example, consider using <article> for the card content and <header> for the title and description. Image Alt Text:
The alt attribute for the image is empty. Providing descriptive alt text (e.g., alt="Gabrielle Essence Eau De Parfum product image") improves accessibility for screen readers and SEO. Accessibility:
Ensure your button is keyboard accessible. Adding aria-label to the button could provide additional context, especially if the icon alone isn’t clear. Headings Hierarchy:
Ensure that your headings follow a logical order. If <h3> is used before <h1>, it may confuse screen readers. Consider using <h1> for the main title and <h2> for subheadings. Ensure that your images are optimized for web use (e.g., using formats like WebP) to improve loading speed. Consistent Use of Class Names:
Ensure that class names are consistent in styling. For example, if you have a class like main-text, consider whether you need additional specificity or if it could be generalized. HTML Validation:
Validate your HTML through a tool like the W3C Validator to catch any potential issues or best practices you might have missed. Overall, your code is well-structured and functional. Incorporating these suggestions can improve accessibility, performance, and maintainability!
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