HTML & CSS (Grid) Solution

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The article element is not the best choice ❌ for wrapping these cards. In order to use the article element the component needs to be able to make sense on its own and be independently distributable (can be used in on another site). instead wrap them in div.

  More Info:📚

  MDN Article Element

  • The “icons” in this component are purely decorative. ⚠️ Their alt tag should be left blank to hide them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • Using CSS Grid with Grid-Template-Areas will make things way easier 💯 when building the layout; it will give you full control of the layout.

  Here is an example of how it works: EXAMPLE

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  1

  ---

  

  P

  Ryan Hemrick•290

  @Ryan-HemrickPosted almost 2 years ago

  @vcarames I was definitely doubting myself when I started using the article element for the cards. What you mentioned makes sense to me. I've been shying away from using div elements in an attempt to be more semantic, but I definitely need more context on when to use different tags.

  I read through the article that you linked about images. It was very informative! I was just throwing alt text on everything.

  In my last couple of projects, I created alternate CSS files that used grid-template-areas instead of the way that I did it here, and I think I need to get more comfortable with that approach. I think the syntax of it has been a bit tricky to memorize.

  Thanks!

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @Ryan-Hemrick

  The div is the most commonly used element, so don’t shy away from them. A common mistake a lot of people make is trying to make everything 100% semantically correct, that they end up using the elements incorrectly in the process.

  If they’re illustration or icons, they are 100% purely decorative. It becomes a little bit more trickier when it’s a real image. That’s when you’ll have to use your instinct to decided if it is decorative or not.

  Grid-Template-Areas is a great tool to use. I will admit though, sometimes it isn’t (if you need to overlap content) but for this challenge and few other ones it is.

  Keep it up!

  Marked as helpful

  1