Design comparison
SolutionDesign
Community feedback
- @grace-snowPosted 8 months ago
Hi
I'm afraid this has some very serious accessibility issues in it due to the html. The good news is they'll be easy to fix.
Before anything else, I recommend you read my post about planning html using this challenge as a case study
You must change these things
- all content should be contained within landmarks. The attribution should be in a footer outside of main.
- remove all the non breaking spaces you've added to perfume. That's not how you increase letter spacing.
- perfume is not a heading its a paragraph. It's extremely important to use headings appropriately and in the correct order.
- the heading on this card must not be a h1. Think about the context of where this component would be used on a real Web page. It would never act as a page title so cannot be a h1.
- the price is not a heading. It's a paragraph (or span inside a paragraph containing both prices)
 
is not valid. But spacing should be done with margin or gap in css not by changing the html anyway.- the card must not have a height or width. Instead give it a max width in rem only. Let the browser do it's job and decide what height is needed based on the content.
- similar with the button. Never limit the height of elements that contain text. Use padding not height on that button.
More general guidance you'll need for every project
- get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
- style mobile first. That means the mobile styles should be the default. Then override specific properties that need to change inside a min width media query.
- media queries must be defined in rem or em not px.
- the border radius on components like this can be set on the component along with overflow hidden to crop out the overflowing child corners.
- use the object fit property on the image so it doesn't get distorted.
- the line breaks in this look odd and I think it's because you've changed the whitespace property to pre-line. It's rare you'll ever need that. Let lines break naturally unless there is a good reason to change the behaviour.
- don't style on IDs. That's not what they are for, is unexpected and drastically increases css specificity.
- set font size in rem. Don't rely on key words which can differ between browsers.
Marked as helpful2
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