Design comparison
Solution retrospective
I couldn't figure out which semantic element would be good for each card. I used the article but is it right?
Community feedback
- @mattstuddertPosted almost 5 years ago
Hey Alexandra, nice work on this challenge! For those cards, I'd just have them as
div
elements inside asection
. I typically reserve thearticle
tag for distinct pieces of content that could live on their own outside of the context of the overall site. For example, blog posts, news articles, and forum posts/comments. But I've seen people using them in the way you have too, so there's no distinct "right" answer here.A couple of things to mention regarding your code:
- I'd avoid the
@import
statement in CSS files. They're fine in Sass to load in partials, but in CSS each import actually delays the loading of the page slightly. Instead, I'd either have a go at using Sass or just keep everything in a single CSS file. - I'd also recommend avoiding IDs as CSS selectors. They're overly specific and they can't be reused on the page. Instead, I'd stick to class, attribute, pseudo and type selectors. This will help keep your CSS more maintainable. Especially as you start to build larger projects!
I hope this helps. Keep up the great work!
0@aLe3ouLaPosted almost 5 years ago@mattstuddert Thank you. I am always confused with when using article tag.
Thank you for the tips, i don't know why but i tend to use id's to sections for the internal navigate through links inside a landing page and now i have make a bad habit through it.
0 - I'd avoid the
- @just-a-devguyPosted almost 5 years ago
Hey! Question for you. I did this challenge myself and for the life of me I was not able to modify the SVG element so the second one can be all white while the first one has the pink. How were you able to do that?
0@aLe3ouLaPosted almost 5 years ago@adluders Hey! I actually used the actual svg content inside my HTML, instead of referencing them through img tag. You can add a class there and use the fill attribute to make it white.
1@just-a-devguyPosted almost 5 years ago@aLe3ouLa ahhhhh. I just checked your code and I saw what you did. Smart. I did not think of that. Thank you 😊
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