My second challange - Profile card (HTML and CSS)

Community feedback

• 

  Nick•160

  @HarmoniaCodesPosted about 2 years ago

  Hello Allen! Congrats on completing the challenge! I have a few pieces of feedback for your code:

  • The background images are missing. This requires the use of 2 .svg files in order to match the design prompt. You might look into positioning properties and z-index values in order to get these where they need to go. The MDN documentation for these is below.

  Edit: Upon further inspection, it also appears that the url you are using for the background images is resulting in a 404 error.

  CSS Position Property: https://developer.mozilla.org/en-US/docs/Web/CSS/position

  Z-index Values: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

  • The card itself should have a shadow effect. Box-shadow is an easy solution to this. Check out the MDN documentation for this below.

  Box-shadow Property: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

  Keep up the great work! Happy Coding!

  Marked as helpful

  0

  ---

  

  Alien•50

  @AlienowyPosted about 2 years ago

  @HarmoniaCodes I have improved my code. Thank You so much for your feedback. Would you mind checking it again?

  1

  

  Nick•160

  @HarmoniaCodesPosted about 2 years ago

  @Alienowy You made some really great changes! I can see the box-shadow and the background images. Everything is displaying very nicely on desktop. My only remaining suggestion would be to check how the page looks on a mobile display and see how it compares to the design images for the challenge.

  You can do this without having to use a mobile device by accessing the responsive design modes in your browser. Check the links below for how to activate this.

  • On Firefox: https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/
  • On Chrome: https://developer.chrome.com/docs/devtools/device-mode/

  You might also try using media queries to create more responsive code for various display sizes. I have linked the MDN documentation below.

  • Media Queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

  You are doing great work! Keep it up :)

  Marked as helpful

  0

  

  Alien•50

  @AlienowyPosted about 2 years ago

  @HarmoniaCodes Thank You!

  0