Frontend Mentor | HTML + CSS coding challenge solution

Solution retrospective

What are you most proud of, and what would you do differently next time?

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

Ibrahim Mohammed• 110

@Aggressive-Mohammed

Posted about 13 hours 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!

HTML + CSS

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community