Responsive social links page using flexbox and grid

Community feedback

• 

  P

  solvman•1,650

  @solvmanPosted 9 months ago

  Hi @juancaa03 👋

  Very well done! 🎊

  I have a couple of suggestions:

  ⭐️ You might want to consider using REM units and shorthand property for padding and margin and not write them out line by line, for example:

  .card {
      background-color: hsl(0, 0%, 12%);
      border-radius: 8px;
      padding: 1.5rem 2rem 1rem; ?=/* top inline bottom */
  }
  

  You may read more on Padding - Shorthand Property

  ⭐️ There is no need to use grid-template-columns: repeat(1, 1fr);, if only one column and row exists. It is just like that by default, and it can be removed. Consider using gap size in REM units as well:

  .buttons {
      display: grid;
      gap: 1rem;
      margin-block: 1.5rem;
  }
  

  There is an excellent (in my opinion) video that goes over various sizing you that I highly recommend: Are you using the correct CSS units? by Kevin Powell

  I hope you find these comments useful 👌

  Marked as helpful

  0
• 

  Marzuk Sanni•1,360

  @ZukizukPosted 9 months ago

  Hello there, Congratulations on completing this project

  Your solution looks nice

  I have few suggestions that I think might be of interest to you.

  - HTML: Consider using semantic HTML tags like <main></main>,<section></section> and others that you can find in this link. And in this case, replace the <div class="container"> with <main class="container">. the main tag should hold the main content of the page so consider correcting that.

  The semantic HTML tags help the search engines and other user devices to determine the importance and context of web pages. The pages made with semantic elements are much easier to read. It has greater accessibility. It offers a better user experience. Using div when there's a better alternative is not a good practice as div hold no semantic value.

  I hope this feedback is helpful

  Other than that great job

  Marked as helpful

  0