Hi Nathaniel, congratulations on completing the challenge! When looking at your solution submission I have noticed a BEM hashtag. I recently searched for some way of organizing/naming CSS to use especially on a bit larger projects than this one and learned about BEM. As I understood by reading through getbem website and by watching a few YouTube videos on the topic, block and its elements should be separated by double underscores. So in your HTML code
<div class="card">
<div class=“card-content">
<div class=“card-img">
<img src="images/image-qr-code.png" alt="qr-code">
</div>
<div class=“card-text">
<h2 class=“card-heading">Improve your front-end skills by building projects</h2>
<p class=“card-desc">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</div>
</div>
If element with .card class is a block then every tag that has no standalone meaning and is semantically tied to it is its element. As per element definition on getbem.
In your example standalone elements of card block are: image, heading and paragraph elements. By BEM convention class names of elements should be created by formula: “.block-name__element-name” <=> block name plus two underscores plus element name.
For example in your case, heading element should have a class of “.card__card-heading”, but for sake of not repeating yourself class name can be shortened to “.card__heading”. Paragraph element should have a class of “.card__card-desc” that is “.card__desc” for short.
Divs with classes “.card-content”. “.card-img” and “.card-text” are containers or wrappers used for grouping/styling purposes and are treated the same way as elements no matter how deeply nested they are. You can read about that it this article.
So as I understand it your piece of code written using BEM convention should look like this:
<div class="card">
<div class=“card__content-wrapper“>
<div class=“card__img-wrapper”>
<img class=“card__qr-code-img” src="images/image-qr-code.png" alt="qr-code">
</div>
<div class=“card__text-wrapper“>
<h2 class=“card__heading">Improve your front-end skills by building projects</h2>
<p class=“card__desc">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</div>
</div>
Not long ago I started learning CSS for the n-th time! This time after learning about BEM CSS files that I was writing had structure and it no longer seemed that code was as random or all over the place. This helped me a lot in terms of motivation for further study.
Also, there are a few things that initially caused a problem in my Accessibility report.
First thing is that I din’t use h1 tag in the document. Changing card title from h2 tag to h1 solved it for me. Another thing that caused an accessibility error was that I didn’t wrap my card component in any semantic tag. I fixed that problem by wrapping card component in main tag and acknowledgments in footer tag. Now that I think about it probably card and attribution components should both be inside the main tag.
Does your Accessibility report show any errors or warnings since I see that you have similar situation as I did?
I’d appreciate if you checked my solution and shared any suggestions. I hope this helps in any way shape or form and that I was clear enough since English is not my first language.
Best regards, Josip.
