Design comparison
Solution retrospective
I have struggled adding the cart icon inside the Button 'Add to cart'.
Community feedback
- @pRicard0Posted over 1 year ago
Algumas dicas HTML
- Você precisa melhorar sua acessibilidade, estudar sobre ARIA para entender melhor quando se deve utilizar div e quando não deve.
- Você deveria usar header no lugar da div que é pai da header.
- Você deveria ter adicionado uma lista não ordenada para as âncoras do header. Como a seguir
<div role="navigation"> <ul> <li><a href="#">Collections</a></li> <li><a href="#">Men</a></li> <li><a href="#">Women</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div>
O role="navigation" é para deixar claro para quem é deficiente visual o que seria essa lista. Mas há um jeito mais fácil que você não precisa usar esse atributo que é usar a tag nav ao invés de div pois essa tag já vem com essas configurações para melhor acessibilidade. HTML semântico não se trata apenas de ter um código mais fácil de ler e se encontrar não. E é exatamente por esses fatores que não deveria colocar a logo e a lista juntas na mesma div ( ao menos que queira que a logo também tenha proposito de navegação )
1 - @lwrncgmbnPosted over 1 year ago
To add the cart icon inside the button in "Add to Cart",
You can put the <img> and <p> inside the <button>
It will look like this:
<button> <img src=(icon path) alt=(alt text)> <p>Add to Cart</p> </button>
Happy Coding 😁
1
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