My first one - Summary Card Component - HTML | CSS

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @fabricioceppi 👋🏻

  I have a couple of suggestions to help you fix the project's accessibility and HTML issues. Also, I believe I know how to get rid of that line at the bottom of the image.

  • If you change your <div id="card">...</div> to <main id="card">...</main> and <div class="attribution">...</div> to <footer class="attribution">...</footer>, those will fix your accessibility issues. Don't forget to generate a new report once you fix the code.
  • For the HTML issue, I'd suggest adding a class to your image and then giving styles to the class, because inline styling such as this line here, <img src="images/illustration-hero.svg" alt="Illustration of a girl enjoying her music" width="100%"> where you gave width in HTML, is considered bad practice. Here, you can read more about CSS specificity. Once you add a class for the image, add display="block" and it will fix the issue with the bottom line.

  I hope this was helpful 👨🏻‍💻 Other than that, you did a great job for the first project, it seems pixel perfect 👌🏻 Cheers!

  Marked as helpful

  2

  ---

  

  Fabricio Ceppi Rojas•130

  @fabricioceppiPosted about 3 years ago

  @kens-visuals Your answer was much more than helpful! Thank you very much. I fixed the image display problem and also your suggested fixes for accessibility problems.

  Thank you for the motivation too. Cheers!

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @fabricioceppi I'm glad I could help, you're welcome!!!

  0
• 

  Mark Mitchell•1,820

  @markup-mitchellPosted about 3 years ago

  I'm not 100% sure why, but it seems to be an artefact of the image display property being "inline" by default (this accommodates descenders when placed in-line with text).

  Setting your image's display to "block" seems to resolve it.

  Marked as helpful

  1

  ---

  

  Fabricio Ceppi Rojas•130

  @fabricioceppiPosted about 3 years ago

  @markup-mitchell Thank you! It seems it was the problem, I already fixed it, and it's working fine.

  Thanks!

  0