Implement Links profile component using Flexbox and pseudo-classes

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  MAKING ACCESSIBLE LINKS:

  • The links like Github, Frontend Mentor are needed to be actual <a> elements which are wrapped up using li and ul elements. Because we need to use semantic elements to improve accessibility of our solution.

  ---

  • This is the current markup,

  <div class="main-buttons_container">
        <p>GitHub</p>
        <p>Frontend Mentor</p>
        ....
  </div>
  ...
  

  ---

  • In order to make this solution accessible, we need to use <a> elements with href attribute. Here's the example

  <ul>
      <li>
         <a href="#">Github</a>
      </li>
      <li>
         <a href="#">Frontend Mentor</a>
       </li>
      ...
  </ul>
  ....
  

  ---

  • If you have any questions or need further clarification feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Hien Giang•70

  @hinn1411Posted 7 months ago

  @0xabdulkhalid thank you for your suggestion. It is very helpful!

  0
• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello again Hien, your project looks great, congratulations! It's very similar to the proposed design, my sincere congratulations.

  Regarding your question, yes, your CSS is very clean. I would only recommend one thing: instead of leaving the colors you have to use in a comment, try putting them inside a ::root. That way, you can use variables, which helps keep the code even cleaner.

  Now, here are some recommendations to make your CSS cleaner: CSS Custom Properties, CSS Nesting, adding comments to separate sections of your code (just like you did), and removing comments from properties that are not being used.

  With the Sass preprocessor, you can use variables, partial files, nesting, and mixins.

  Now, some tips for your semantic HTML:

  • <figure class="main-image_container">: The correct tag for this section should be <section>. This is because the content has thematic relevance among the items (user profile). <figure> is usually used for a main figure or one that needs a caption (<figcaption>).
  • <div class="main-buttons_container">: It would be more appropriate here to use a <ul> and <li>. This is because those buttons are identical items with similar purposes, so placing them as list items makes more sense.
  • <p>GitHub</p> and the others that simulate a button: Since they have the functionality of a link, it's more appropriate to use an <a> tag, even if the href is empty.

  Once again, congratulations! Your project looks great. Keep up the good work. If you have any questions about what I said, please comment below, and I'll try to help as best as I can.

  Marked as helpful

  1

  ---

  

  Hien Giang•70

  @hinn1411Posted 7 months ago

  @R3ygoski Thank you very much, Bernardo! I changed my code based on your advice, It is really valuable for me.

  0

  

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello @hinn1411 Hien, I'm happy my tips were valuable for you. I just wanted to kindly ask that if you found my comment helpful and it aided you, I would appreciate it if you could kindly mark it as "helpful" as it helps me a lot. Thank you in advance, and if you have any questions, just ask below.

  Marked as helpful

  1