Responsive preview card using HTML and CSS

Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
Hello
In html
- use the picture element not two img tags like this. That lets the browser select the images correctly for you
- img alt text should describe what the image actually looks like (briefly)
- you have opened a paragraph tag for perfume but closed a h6. It should be a paragraph
- that paragraph should not be capitalised in the html. Let the css capitalise it
- you shouldn’t ever have text in a div or span alone. Wrap those prices in a paragraph tag
- the old price needs to be wrapped in a
del
element. - I recommend also adding some additional informative text to the del element via before and after pseudo elements, a technique demonstrated on Adrian Rosellis site. So you would have
del:before { content: “[deletion start]”
. This greatly benefits screenreaders because they are not reliably told when deletions start or end, and are not told when text is styled with a line through, so there would be no way for them to know which is the old price without this extra effort - the icon in the button is decorative so alt should be empty
- I recommend making attribution a footer. It’s not really relevant to the main content
Marked as helpful - P@astaba
Hola señora. Muy bien hecho, para una principiente ya nos depara muchas promesas sus futuro en el IT.
- Le aconsejo añadir un "media query" para cumplir con los requisitos del "Responsive Web Design".
- Antes de usar
position: absolute
es mejor dominar el uso dedisplay: flex
del que se puede sacar mucho provecho. Le propongo disfrutar de este Flexbox tutorial.
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