Social Links Website with HTML5, CSS3, and BEM

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 4 months ago

  Hey there!

  Congrats on finishing the challenge! ✅

  Your solution looks awesome!

  📌 It's a good idea to use semantic HTML elements like <ul> and <li> for lists. This makes your code more accessible, maintainable, and meaningful.

  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>
  

  Using <ul> and <li> makes your content structure clearer, which is better for screen readers and search engines. Plus, it follows best practices for HTML.

  Hope this helps!

  Keep up the great work!

  0
• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @HavillahAnya,

  Congratulations on successfully completing the challenge! Your code is well-structured, and the website works perfectly across different screens.

  Here is some information about BEM class naming that might be useful for you:

  The BEM (Block Element Modifier) methodology is a popular CSS naming convention that aims to make your code more maintainable and scalable. Here's a brief overview of how BEM works and how you can apply it to your HTML structure:

  BEM Methodology Overview

  1. Block: The main component or container.
  2. Element: A part of the block that performs a certain function.
  3. Modifier: A flag for a block or element that changes its appearance or behavior.

  The naming convention follows this pattern:

  • Block: .block
  • Element: .block__element
  • Modifier: .block--modifier or .block__element--modifier

  Class names suggestion for your solution:

  • Block: .card is the main component or container.
  • Elements:
    • .card__img-box for the image container.
    • .card__img for the image itself.
    • .card__header for the header section.
    • .card__header-name for the name within the header.
    • .card__header-location for the location within the header.
    • .card__lead for the lead paragraph.
    • .card__social-links for the container of social link buttons.
    • .card__social-link for each social link button.

  I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

  Feel free to reach out if you have more questions or need further assistance.

  Happy coding!

  0