Profile card component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi @delacruzralph 👋, good job completing this challenge! 🎉

  I have some suggestions you might consider to improve your code:

  • Use the <main> tag to wrap all the main content in your solution instead of using <div class="card-container"> to improve the accessibility of the website. Also, remove role=main from the body element.

  • Not all images should have alt text. The "Header Image of Card" is for decoration is for decoration only, it has no additional meaning to the component, so it can be hidden for screen-readers if aria-hidden="true" is added and its alt attribute is left empty: <img src="./images/icon-dice.svg" alt aria-hidden="true">

  • The alternative text must not contain hyphens, underscores, or the words "image", "picture" or "photo", because the image tag already provides enough information that it is an image

  • With the profile photo, your alternative text could be the name of the person: <img src="images/image-victor.jpg" alt="Victor Crest" class="profile-pic"> . You can read more about alternative text here.

  • Instead of using two <img> tags, you could use the CSS backgrounds properties to set the background:

  body {
      . . .
      min-height: 100vh;
      background-color: hsl(185, 75%, 39%);
      background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
      background-repeat: no-repeat, no-repeat;
      background-position: right 52vw bottom 35vh, left 48vw top 52vh;
  }
  

  • background-color Set the background color
  • background-image Set a background image
  • background-repeat Sets if a background image will be repeated along the horizontal and vertical axes, or not repeated at all.
  • background-position Sets the starting position of a background image. More information
  • You can also specify the size of the background image with background-size

  The background property is shorthand for all the properties mentioned above but for now. It is better to understand them separately.

  The background-position for me worked with the vw (viewport width) and vh (viewport height) units, but you can also use percentages. It's just a matter of trial and error to place them as you wish.

  References:

  1. CSS background Property
  2. Background property
  3. Background-repeat (MDN)

  I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  1

  ---

  

  Ralph•190

  @delacruzralphPosted almost 2 years ago

  @MelvinAguilar Excellent suggestions! Thanks

  1