Profile Card Component

Community feedback

• 

  Daniel•1,010

  @GhraviteePosted over 1 year ago

  Hello Aziz!!, congrats on completing this challenge. Here are some tips to make your code better.

  • To center your container, you can simply make use of flexbox on it's direct parent which in your case will be the <main>. Your code will look like so: main { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 5rem 2rem; // Add padding on it's direct parent to avoid your container from touching the top, bottom and sides of the screen for mobile view. }

  • Try to add classes as much as possible. The specificity will make your life easier as a frontend developer.

  • If you're making use of a main tag for the purpose of semantics, you should close off your attribution with a landmark like a footer.

  • Always apply this reset for images: img { display: block; max-width: 100%; } This will keep your image inside its container at full width. Look up other css resets and apply them. Here's one: css resets

  • Please pay attention to the accessibility and validation reports on frontend mentor.

  I hope you find this helpful. Happy coding.

  Marked as helpful

  1

  ---

  

  Aziz•130

  @AzizJatoiPosted over 1 year ago

  @Ghravitee Thank you so much, I will make sure to not make mistakes like these again. I really appreciate your time looking at my code and for your guidance.

  0