Profile Card Component

Community feedback

• 

  Bogdan Kim•780

  @semperprimumPosted over 1 year ago

  Heya there 🙌

  • Every image in this challenge except the profile picture is decorative, so you don't need to put alt text on it. Alt text on the profile picture should be more descriptive, something like alt="Profile picture of Victor Crest".
  • Regarding the background situation, you should use background properties instead of having two random images hanging in your HTML. Here's how i did it:

  body {
  background-color: hsl(185, 75%, 39%);
  background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
  background-position: right 42vw bottom 41vh, left 31vw top 47vh;
  background-repeat: no-repeat, no-repeat;
  }
  

  • In this example i used a background-color property to set an overall color for the background.

  • background-image adds two images for the background.

  • background-position positions both images. I used viewport units to move it. Using viewport units in this way allows the background image to adjust based on the size of the viewport. So, if the browser window is resized or viewed on different devices with varying screen sizes, the background image will still maintain a similar position relative to the element.

  • background-repeat: no-repeat means that the background image will only appear once and will not repeat horizontally or vertically.

  • The attribution part should be surrounded by a <footer> element. You also can use position: fixed on it and stick it to the bottom of the document.

  • To center the .card, you could've used grid or flex instead of positioning it absolutely, here's an example of using display: grid;:

  body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  • Instead of positioning a profile picture absolutely and throwing an 80px margin on .txt you could've used flexbox and negative margins. Here's the video that shows how it could be done.
  • I recommend using pixel units sparingly in your projects and instead use em and rem. There're a lot of articles and videos on the web explaining why you shouldn't use pixels. Definitely check them out.

  Here's my submission for this challenge. All of the things I talked about here could be found in my code.

  I hope you find this helpful 😁. Happy coding!

  Marked as helpful

  1

  ---

  

  Belly•300

  @Belly606Posted over 1 year ago

  I Find This Very Helpful not Just Helpful 😁. Thanks Bro for The Notes & Advices. I've Used to Use Pixels But I will Try to Use em and rem From Now @semperprimum

  1