Design comparison
Solution retrospective
Was i'm right using @media query for image in HTML document with <picture> and <source> tags? Or there was other way in CSS?
Can i use more semantic tags in this challenge?
Also welcome to any help - how to improve this card.
Thanks.
Community feedback
- @Enmanuel-Otero-MontanoPosted over 2 years ago
Hello Alexander! Congratulations for your solution.
To use labels with semantic sense, in this case I would substitute the
div class: product__description;
by a section tag. This answering the question if you can use more semantic tags in this challenge.On the other hand, the
div class: wrapper;
I eliminate it. If you think about it a bit you can achieve the same result without that div.**Cheers!**🦾🦾🦾
Marked as helpful0@MrSoykaPosted over 2 years ago@Enmanuel-Otero-Montano can i use
<body>
instead ofdiv class: wrapper;
?0@Enmanuel-Otero-MontanoPosted over 2 years ago@MrSoyka Surely yes, it is not usual to use a div to contain the main. You may have to change the code in your css a bit if you do the deleting of the div class: wrapper; but I think it's worth it, it's a better way to encode.
On the other hand, I was looking at your CSS and there is a part that has this:
nav, footer, header, aside { display: block; }
, I think that this code does not need to be implemented, since these tags are implicitly block tags.A small maxim. Try to achieve the result by writing as little code as possible. Remember that the browser has to read all the code before rendering your page and the more code, the longer it takes to load and this does not provide a good user experience. In small sites this is not noticeable, but in large ones it is.
**Don't be discouraged.**🦾🦾🦾
0 - @mohammedlahboubPosted over 2 years ago
U could use a
<figure>
element with it'sbackground-image: url("image-Desktop.jpg"); background-size: cover;
and@media ( max-width: 620px ){figure {background-image: url("image-Mobile.jpg");}}
For more semantic meaning :
- make sure use heading frome highest level to the lowest.
-use html 5 landmarks
<header> <main> <footer>...
instead of<div>
elements
I'm myself new to webdev , all I can do is recommend you to read this developer.mozilla.org
0 - make sure use heading frome highest level to the lowest.
-use html 5 landmarks
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