Creating a social link profil using HTML & CSS

Community feedback

• 

  Henrique Cruz•130

  @Henr1queCruzPosted 7 months ago

  Hi there 👋. Amazing work!

  I suggest considering the use of flexbox or grid to enhance the responsiveness of the page. Relying solely on position: absolute with specific pixel values for positioning elements can result in a static layout.

  Additionally, there appears to be a misspelling in the class name of the last links group.

  Lastly, incorporating pseudo-classes such as :hover could enrich the user experience by providing interactive feedback when users interact with the links.

  Continue the great work! 😊

  Marked as helpful

  0

  ---

  

  CHBNDJ•440

  @CHBNDJPosted 7 months ago

  @Henr1queCruz thank you for the feedback i used position: absolute to be able to positioned the card exactly like the design but im agree with you the flexbox is more practical. The last links is card---links because i used a margin between the links but i didnt wanted in the last one thats why because the height will have been a little bit too big compared with the design. You mean :hover instead of :active ? I just followed the figma files but you right i personnaly prefer hover rather than active but in this case it does not really matter because we dont have the responsive.

  0

  

  Henrique Cruz•130

  @Henr1queCruzPosted 7 months ago

  @CHBNDJ Yeah you are right in the design is just for :active but I personally prefer using :hover instead.

  I have notice an improvement that you can do. You have this code and you are using basically the same code in both classes.

  .card--links {
      padding: 14px;
      background-color: hsl(0, 0%, 20%);
      border-radius: 8px;
      margin: 0 0 16px 0;
      display: flex;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;
  }
  
  .card---links {
      padding: 14px;
      background-color: hsl(0, 0%, 20%);
      border-radius: 8px;
      margin: 0 0 0 0;
      display: flex;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;
  }
  

  Instead of duplicating the same code, you can streamline it by grouping the shared properties togethe. This reduces redundancy and makes the code more maintainable

  .card--links,
  .card---links  {
      padding: 14px;
      background-color: hsl(0, 0%, 20%);
      border-radius: 8px;
      display: flex;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;
  }
  

  After consolidating the common properties, you only need to specify the unique property for .card--links, such as the margin

  .card--links {
     margin: 0 0 16px 0;
  }
  

  You don't need to add margin: 0 0 0 0 to .card---links because it is redundant.

  0