Design comparison
Solution retrospective
I'm proud of how compartmentalized the card's style code is. I tried to keep it all together and I think it came out nicely.
I also think I was able to finish this project relatively quickly by sticking to some methodologies like BEM (Block-Element-Modifier) and SCSS nesting classes. Much of the project bones were completed before spinning up the page to see how it looked. By the time I did, it was almost complete.
What challenges did you encounter, and how did you overcome them?I had a bit of trouble figuring out how to wrap a background color around a short line of text. A little bit of research and trial-and-error gave me the result that I want, but I'm not super happy with the semantics of the HTML that gave me that result.
What specific areas of your project would you like help with?I'd like some advice on using semantic HTML to write a component like this. There are only a few different tag options that are viable, but I am not 100% sure I covered all my bases.
Community feedback
- P@Theosaurus-RexPosted about 2 months ago
Hi Gabe, great work on this solution!
Honestly, a span is totally fine for the "Learning" category element in my opinion - I probably wouldn't even nest the paragraph inside of there.
A couple of small notes on the semantics in the rest of your markup:
- You'll want to change your
<h2>to a<h1>in this case, since it's the first heading on the page - I'd actually never seen the
<cite>tag before today, but from reading the MDN docs, I think that tag is used to link to works such as academic papers or novels, not to the author themselves. Still, I learned something from your code!
This looks great and very solid on the semantics compared to most of the solutions for this challenge I have seen, so well done!
Marked as helpful1P@gabeiPosted about 2 months ago@Theosaurus-Rex Thank you for the feedback! I had wondered about that when it came to the <cite> tag. I hadn't heard of it either, and using it actually applied styles I didn't want to the text. I'll have to read a little further down the page next time. :)
1 - You'll want to change your
- @LincolnBollschweilerPosted about 2 months ago
@gabei, you made the correct choice for wrapping your text in a background color: padding; and background-color;
As far as semantics, keep doing challenges and there will be articles in the learning flow that will help with that.
Great job! Happy coding, --Lincoln
Marked as helpful1
Please log in to post a comment
Log in with GitHub
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