Practice Social Media Card

Community feedback

• 

  Alper•1,090

  @adonmez04Posted 20 days ago

  Hi Moe. Everything looks good. Here are some tips:

  • You don't need display: flex for your a elements. You have text-align: center for the btn-list class and it will center any text within it.
  • You also don't need display: flex for your profile-pic class. Give your img element margin-inline: auto and it will be centered within of the containing block.
  • Feel free to use min-inline-size for the containing block. It avoids some broken UI elements. You can give your article element min-inline-size: 150px.

  Actually, you don't need to use display: flex for this challenge. Everything is in the normal document flow that is from top to bottom. Try to code this challenge without using flex or grid and see when you should use flex or grid.

  Marked as helpful

  0
• 

  Erick Rodrigues•380

  @SortJakkePosted 21 days ago

  Hello! Here are some suggestions to improve your project:

  • More semantic HTML: I would recommend replacing the article tag with the main tag and the divs with sections. This change will make your HTML code more semantic and eliminate an unnecessary tag. In the CSS, you can move the main tag declarations to the body for a cleaner and better-organized code structure.

  • CSS declarations: It's great that you used predefined declarations as it helps save time. However, I would remove unnecessary or unused declarations to avoid excess in your code.

  • Best practices: Even though it might not make a significant difference, removing unnecessary parts of the code is considered a good practice. It makes the page more readable, optimized, and easier to maintain in the future.

  • Additional suggestion: Since you designed this card to feel personal, enabling the GitHub and Frontend Mentor links would be a fun "easter egg." This would add an extra touch and make the user experience even more engaging.

  Despite these suggestions, the final result looks fantastic! Comparing it with the original design, it seems the only differences are intentional, which shows your attention to detail. Congratulations on a job well done!

  Marked as helpful

  0