Grid-Template-Columns

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  Greetings! you have done a great job 😎

  📌 Some accessibility and semantics recommendations for your HTML

  • To improve the semantics of your HTML, you can change your <section> to a <main>
  • I can only mention an accessibility issue, you can add a short description to your image with the alt attribute. In case it is just a decorative image, such as an icon or logo, you can leave it empty: alt="". More info

  📌 Some suggestions

  • I recommend doing a small reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsers
  • I leave you the task of researching the reset CSS and the box-sizing: border-box
  • If you didn't apply the reset, you can add margin: 0 to your body, this will remove annoying scrolling on large screens. If you want to maintain separation on very small screens, you can apply the margin again using media querys
  • You can apply display: block to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements
  • Apply max-width: 100% to your img so that it occupies the correct width within the container
  • I don't think it's a good idea to apply margin-top and margin-bottom to your universal selector *
  • You can apply padding on all sides of your card and avoid having to use a margin-top in the header.
  • It is not necessary to apply border-radius in the header and in the img, you only have to do it in one. If you do it in the header, you must apply the overflow: hidden; property to it so that it hides the tips of the image. Don't apply the same properties on both elements unnecessarily

  Marked as helpful

  1
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello @Cusecheg !

  Your solution looks excellent!

  I have just one suggestion:

  • Use <main> to wrap the main content instead of <section>. And you can use a <div> instead of <article> to wrap the text of the container.

  📌 The tags <article> and <section> would make more sense if the card was part of a bigger website (in certainly would in real world), but here it is all we have on the screen.

  This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0
• 

  Juan Useche•130

  @CusechegPosted 10 months ago

  Muito obrigado pelas dicas, agradeço 🙏🏽@Blackpqchamame_ @danielmrz-dev

  0