Social Links Profile Challenge

Community feedback

• 

  Exequiel Arco•390

  @quielLovesLasagnaPosted 10 months ago

  Ayos! CHARLES MC VIGO

  Here are some suggestions:

  • Use external CSS instead of internal, this makes your code more cleaner and organized.

  • In the case of your CSS reset:

      *{
        margin: 0;
        padding: 0;
        font-family: 'Inter', sans-serif;
      }
  

  I suggest you remove the font-family declaration and add it inside the body. The reason for this is that it is more of a good practice to add the properties that affect the texts inside the body because it also gets inherited, and the use case for the universal selector, many devs suggest that you use it for removing default padding, margins, and setting the box-sizing to border-box. You can read more about it here and here

  • I notice an error in this part:

      main img{
        height: 80px;
        width: 8-px; <-------
        border-radius: 50%;
        padding: 25px;
        cursor: pointer;
      }
  

  • I also noticed an inconsistency in your markup, you added an id for your location and quotes, I suggest (for styling's sake) you use a class and don't use it only for two elements, use it for elements that need it. Using a class for selecting elements to style is a good practice instead of adding ID randomly because you want to style them differently.

  • In this part:

      <div class="links">
        <a href="#">GitHub</a>
        <a href="#">Frontend Mentor</a>
        <a href="#">LinkedIn</a>
        <a href="#">Twitter</a>
        <a href="#">Instagram</a>
      </div>
  

  This is a list of social media platforms, it's more semantic to use ul and li here. Like this:

      <ul class="links">
        <li><a href="#">GitHub</a></li>
        <li><a href="#">Frontend Mentor</a></li>
        <li><a href="#">LinkedIn</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Instagram</a></li>
      </ul>
  

  That's all! I hope these may help you.

  Marked as helpful

  0
• 

  gfunk77•1,200

  @gfunk77Posted 10 months ago

  Great job on your solution! If you would like the cursor to match the design, you can do the following:

  • create a file called <yourFileName>.svg
  • put this code in it:

  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="15" viewBox="0 0 18 15" fill="none">
    <path d="M5.45613 1.7498V6.6248C5.30392 6.47993 3.30097 4.57754 3.10412 4.50402C2.90727 4.4305 2.69757 4.39756 2.48766 4.40718C2.27774 4.4168 2.07195 4.46879 1.88264 4.56001C1.69334 4.65124 1.52445 4.77981 1.38613 4.938C1.1313 5.22887 0.993749 5.6041 1.00022 5.99075C1.00669 6.3774 1.15672 6.74783 1.42113 7.03L7.36313 13.368C7.74213 13.771 8.26913 14 8.82213 14H13.4561C15.8561 14 17.4561 12 17.4561 10V1.429" fill="black"/>
    <path d="M5.45613 1.7498V6.6248C5.30392 6.47993 3.30097 4.57754 3.10412 4.50402C2.90727 4.4305 2.69757 4.39756 2.48766 4.40718C2.27774 4.4168 2.07195 4.46879 1.88264 4.56001C1.69334 4.65124 1.52445 4.77981 1.38613 4.938C1.1313 5.22887 0.993749 5.6041 1.00022 5.99075C1.00669 6.3774 1.15672 6.74783 1.42113 7.03L7.36313 13.368C7.74213 13.771 8.26913 14 8.82213 14H13.4561C15.8561 14 17.4561 12 17.4561 10V1.429" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
  

  • In your css:

  your-button { 
     cursor: url('./path-to-your-file.svg'), auto;
   }
  

  Make sure your path to the .svg file is correct and you include auto.

  Your solution is great. I hope this helps!!!

  Marked as helpful

  0