Página de links para redes sociais responsivo

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted 5 months ago

  I notice a few issues with this so hope the feedback is helpful.

  1. Reorder the head tag contents. The meta tags and title should be at the top above things like font and css links. Head order has a huge impact on performance and will become more important in future challenges.
  2. This design shows a list of links. So use a list in html.
  3. Try to keep html as simple as possible. For example, there's no need to wrap that img in a div
  4. Always include a modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
  5. The component max width must be defined in rem not px. This allows the layout to scale correctly for all users, including those with a different text size setting. With a px max width people with larger text will still see a really narrow column with their large text squished inside. But with a rem max width the whole component will be able to go wider for those people and still look nice. (It's the same principle why media queries must be defined in rem or em not px).
  6. Give the body a little padding on all sides so the component can never touch screen edges. Then remove the media query from this challenge there is no need for it.
  7. Don't use large margins to create a layout. To center the component on the screen use flex properties and min-height 100svh on the body in this challenge.
  8. The links should not have side margins. The whole card should have padding, that's what prevents it's content from hitting the sides of the component. Make sure you understand the difference between padding and margin. Because of the margin you've used on these links, the solution looks wrong on my mobile because the links are all super narrow and the text above is touching the component edges. Padding on the card is the answer. This can be in px if you like as it probably doesn't need to scale.
  9. Make sure you are converting font sizes correctly. 0.9rem equates to 14.4px but I seriously doubt the style guide will have recommended that as the body font size.
  10. The image in this is an exact size (could be defined in px or rem, depending on if you want it to scale). Give it an exact width and height. You can optionally include the aspect ratio property set to 1 as well.
  11. Usually profile images / avatars are counted as meaningful content not decorative images. I think that's open to interpretation in this design so not essential, but consider writing alt on that image.

  Marked as helpful

  0

  ---

  

  T

  Grace•31,090

  @grace-snowPosted 5 months ago

  p.s. don't rush ahead onto the next challenge until you've had feedback on the existing on (or read other people's feedback) and refactored to apply what you've learned.

  Marked as helpful

  0
• 

  Shoaib Shuja•560

  @ShoaibShujaPosted 5 months ago

  Amazing job my friend but the page's height unfortunately doesn't seem to fit the page and overflows a bit, you can fix this by using a min-height: 100vh; on the body tag which sets the page to take a full view height. Or you can set the height of your main card which has the class of .cartao to have a height set to max-content. Have a beautiful day.

  Marked as helpful

  0
• 

  EFEELE•350

  @EFEELEPosted 5 months ago

  Great Job!

  0