Design comparison
Solution retrospective
For the next practices I will pay more attention to accessibility
What challenges did you encounter, and how did you overcome them?It took me a bit to figure out why the span element (category) took up the entire width of the card body, when it's an inline element. But in the end I solved the problem, the display flex of the parent container was affecting it
What specific areas of your project would you like help with?Any feedback is appreciated
Community feedback
- @R3ygoskiPosted 6 months ago
Hello Maria, I'd like to congratulate you because your project is almost identical to the proposed design. Good job!
I'd like to give you some tips regarding your HTML. Firstly, instead of using
<main>
as a background, it's more recommended to use thebody
for this role, while<main>
could represent the card.However, if you prefer to use
<main>
cs the background, know that it's not entirely wrong. In that case, what would complement<div class="card">
, best would be a<article>
, tag, because the card can be self-explanatory even without being in the content.Another part is
<div class="card__blog-image">
, which could be replaced with a<figure>
, since the image is directly related to the main content's theme.As for your CSS, it's impeccable. Congratulations!
If anything I said isn't clear, please comment below, and I'll try to help you in the best way possible.
Marked as helpful1@oppaheroPosted 6 months agoThank you very much for your recommendations :) they will be of great help to me. I will be reviewing those points.
Have a nice day! @R3ygoski
1 - @chrisvn1808Posted 6 months ago
Hi, congratulations on completing the project. You did a great job. I just have a suggestion that in HTML, you are using this:
<div> <span class="category category--yelow">Learning</span> </div>
Instead, you can use a single p tag to not only achieve the same result but also add meaning to the information you are marking up.
<p class="category category--yelow">Learning</p>
Hope it helps :). 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