Responsive Social Links Profile with HTML/CSS :) (Second attempt)

Community feedback

• 

  Francesco•300

  @FraCav99

  Posted about 1 year ago

  Hi Yas, good job on this one.

  I have some hints for you to better improve the code.

  The first important thing is to set a reset in your CSS code. This guarantee a equal starting point for all browser removing any inconsistency.

  Two good resets I've found on the web are these two:

  First Second

  You don't have to use all the rules used in them, but you can tweak one the two resets based on your needs. For example, in this project this is what I used:

  *,
  *::before,
  *::after {
    margin: 0;
    box-sizing: border-box;
  }
  
  body {
    ...other code
    min-height: 100vh;
    min-height: 100dvh;
    ...other code
  }
  
  img {
    display: block;
    max-width: 100%;
  }
  

  Is my code easy to read? How can I make it easier to understand?

  Comes to formatting, you can install a vs code extension called Prettier, which is good for formatting the code in an easy readable way.

  Beside that, I found it a little bit repetitive, since you use a lots of time flexbox where it's not really needed and add only more code.

  Flexbox is a good way to lay out content, but you can embrace the natural behaviour of CSS. For example, all block elements (i.e. p, div, h1, h2, etc..) naturally stack on top of each other, since they take all the space available by default.

  Also what you can do is to flatten you HTML code and this helps you makes things a lot easier in CSS. For example:

  Instead of what you've done:

   <main class="main-container">
      <div class="user-info-container">
        <img class="user-photo" src="assets/images/avatar-jessica.jpeg" alt="profile-picture">
          <div class="info-2">
            <p class="user-name">Jessica Randall</p>
            <p class="user-location">London, United Kingdom</p> 
          </div>
          <p class="user-description">"Front-end developer and avid reader."</p>
        </div>
  
       ...rest of code   
    </main>
  

  I'd done something like:

   <main class="main-container">
   <img class="user-photo" src="assets/images/avatar-jessica.jpeg" alt="profile-picture">
            <p class="user-name">Jessica Randall</p>
            <p class="user-location">London, United Kingdom</p> 
  
       ...rest of code   
    </main>
  

  Doing that you have a flat structure in your HTML and in your CSS you can just put the flexbox on your main! :)

  Another thing I recommend you to do is, avoid using px units for margin, padding and font-size. Rather use units like rem, em or ch (for font-size avoid em, since this unit cause unexpected effects if not using with attention)

  This because if user takes time to change font-size from browser settings, if you use px units, they basically ignore the font set by the user.

  Last things is an accessibility topic. Don't overuse div elements, since it doesn't have any semantic meaning to screen readers. Use them as generic containers when you don't have any better alternatives to group content.

  One thing I'd change is the list of social links. Instead of using buttons, like you did, I'd use an unorder list element of links, since they are effectively links.

  So instead of:

   <div class="social-buttons">
    <button>GitHub</button> 
    <button>Frontend Mentor</button>
    <button>LinkedIn</button>
    <button>Twitter</button>
    <button>Instagram</button>
    </div>
  

  this:

        <ul class="social-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>
  

  This because, as I said, they're links, not actions. But this is just my opinion, maybe someone could disagree with that.

  I hope you find this hints useful.

  Other than that, you did an amazing job! :)

  Consider also diving in CSS Grid, they're very good to organize your layout in an easy way!

  Keep coding! :)

  02