Design comparison
Solution retrospective
I did it! Never been so proud with my own work.
Community feedback
- @VCaramesPosted about 2 years ago
Hey @KelvinMvungi, some suggestions to improve you code:
-
It is best practice to have separate files for your HTML and CSS code. It helps in keeping your code organized and easier to maintain.
-
The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.
-
The only heading in this challenge is the name of the perfume, “Gabrielle Essence Eau De Parfum”. The rest of the text should be wrapped in a Paragraph Element.
-
For the perfume description, you want to add a
line-height
to better match the FEM example. -
Wrap the prices in a container and use
display: flex
along withalign-items: center
to have them perfectly aligned like the FEM example. -
Your button has the incorrect hover color applied. You want to look at the “style-guide” to see what the correct color is.
-
Implement a Mobile First approach 📱 > 🖥
With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.
Happy Coding! 👻🎃
0@KelvinMvungiPosted about 2 years ago@vcarames Thanks for the feedback. The alt tags I accidentally deleted them and I said it was okay haha! (but I knew it was a bad practice). I added the line height for the top "perfume" text but it wouldn't work, I don't know why? About prices may be I saw them with a incorrectly, I thought they were not aligned, the original price was somehow upper than the discount price. I will check the style guide for the button. Thanks for the important tip to implement mobile first as it is the common these days and I also think it is easier to do that first.
0 -
- @JuliMontesPosted about 2 years ago
@KelvinMvungi _ El diseño responsivo es importante para los componentes webs, realmente no es difícil, se trata de usar las media query para definir tamaño de pantallas y así ir ajustando el diseño en los elementos que se requiera. Anímate a realizarlo y completar el reto.
0@KelvinMvungiPosted about 2 years ago@JuliMontes Tu hablas ingles? Yo no comprender mucho el espanol.
0
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