Basic Social Links Profile using simple HTML5 and CSS.

Community feedback

• 

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 5 months ago

  @BozJR

  Hiya! 👋

  Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

  Things I like about your solution 🎉

  • Use of semantic HTML elements
  • Clear descriptive CSS classes
  • Use of CSS custom properties

  Things you could improve ✍️

  • Add a bit of padding to your body element so the card has room to breath on smaller viewports.

  • Change the height on your body element to min-height: 100vh so the body is 100vh at a minimum but still is able to grow.

  • Try using relative CSS units like rem for your font-size so they are scalable.

  • I would suggest making your card and the text a bit bigger so it's easier to read.

  • You don't have to wrap your image in a separate <div>, you can style the image directly and achieve the same result.

  • You can set text-align: center on the card (parent) and remove it from the childs. Child elements inherit CSS from their parent due to the CSS cascade. So you only have to write the CSS rule once instead of declaring it multiple times.

  • You can turn your buttons into <a> tags with a href attribute to get the typical functionality with a pointer cursor.

  I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was! 🌟

  Let me know if you have more questions and I'll do my best to answer them. 🙋‍♂️

  Happy coding! 😎

  Marked as helpful

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 5 months ago

  Hey there!

  Congrats on finishing the challenge! ✅

  Your solution looks awesome!

  📌 It's a good idea to use the anchor tag <a> when you have links to other pages on your project.

  Here's an example of how you can refactor your code:

  After Refactoring

  <ul class="list-container">
      <li><a href="#">Github</a></li>
      <li><a href="#">Frontend Mentor</a></li>
      <li><a href="#">LinkedIn</a></li>
      ...
  </ul>
  

  Hope this helps!

  Keep up the great work!

  0

  ---

  

  P

  BozJR•250

  @BozJRPosted 5 months ago

  @danielmrz-dev Thanks for the tip!

  0