Social Links Profile Main - Vanilla CSS HTML

Community feedback

• 

  P

  Kamran Kiani•1,280

  @kaamiikPosted 8 days ago

  Hi, congrats on completing this challenge! I noticed a few points I'd like to mention. Before that, I suggest choosing challenges based on the Frontend Mentor learning path rather than selecting them randomly. It's better to start with basic challenges and then progress to junior, intermediate, and advanced levels.

  • First of all, your Github link is broken or wrong. I can not see your code inside the Github.

  ---

  • Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.

  ---

  • Adding padding or margin inside your body selector is not true I think and CSS on your body should contain more general CSS properties like font-size, min-height and ...

  ---

  • Your font-size and max-width should be in rem unit not px. You can read this article about it and why you should not use px as a font-size. Try to use more rem for padding and margin too.

  ---

  • Never limit your width and height in a container or element or tag that contains text inside. When you limit the width and height of elements containing text, you risk the text being cut off, overflowing, or becoming unreadable, especially on smaller screens or when the text dynamically changes. It's generally better to allow the container to adjust its size based on its content or set a flexible size that can adapt to different screen sizes and text lengths. You only need max-width here because it prevents elements from stretching beyond a certain point, keeping them visually appealing across different screen sizes. It ensures your design remains adaptive and doesn't get too wide on larger screens.

  ---

  • Only the h1 should be in the html and as I see the h2 and h3 should be a p tag. The address and description are not headings.

  ---

  • Elements that have hover effect are interactive. So because you have hover effects for your h1 then It needs to be a or button. Now you have to choose between a and button. If the element take you to a new page It should be an a tag and If do an action like submit a form or add to cart then It should be a button. Here the social links are interactive and they should be an a tag because They take you to a new page. and they are like a list of link items so you have to wrap them inside the ul with li for each link.

  Marked as helpful

  0