Profile Card

Community feedback

• 

  Daniel•280

  @Dani237

  Posted over 3 years ago

  Hi Paulina, first of all, great job.

  Some considerations about your report.

  For the HTML Validations:

  • Make sure that you are declaring the styles in your css file. So don't write styles code in your html file. In your specific case, '100%' is not an allowed value for 'width'.

  For the Accessibility:

  • Make sure that you are using a main tag in all your html projects. That is for the main content of your site and is very important for the browser.

  • You can put your main tag arround this piece of code.

  <main>
  <div class="card">
    <img class="background-user" alt="user background pattern" src="images/bg-pattern-card.svg" width="100%">
    <div class="profile">
    <img class="imgpf" src="images/image-victor.jpg" alt="profilepic" width="100" height="100">
    <h1 class="name">Victor Crest <span class="age">26</span></h1>
   <p class="london">London</p>
    </div>
  <div class="smallerinfo">
    <ul>
        <li>
            <span>80K</span>
            <span>Followers</span>
        </li>
        <li>
            <span>803K</span>
            <span>Likes</span>
        </li>
        <li>
            <span>1.4K</span>
            <span>Photos</span>
        </li>
    </ul>
  </div>
  </div>
  </main>
  

  • You can do the same with the footer tag

  <footer>
   <div class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      <br>
      Coded by <a href="https://github.com/paulinahs" target="_blank">Paulina Hesselius</a>.
    </div>
  </footer>
  

  I hope this can be helpful to you! :D

  11

  Marked as helpful
• 

  Sebastian•1,580

  @dnksebastian

  Posted over 3 years ago

  Hi Paulina,

  overall you did well! There's only a couple of small things which you might want to tweak up:

  • it's generally a good practice to name your classes or ID's in a way that explains what the given element does; for example you could use 'user-location' here: <p class="london">,
  • you could easily get rid of the accessibility issues by using semantic elements, such as <section> or <footer> instead of plain <div>'s,
  • it's recommended to avoid using HTML when it comes to the visual aspect of your site - that's why if you want to keep the line break in your footer, you can use CSS or just wrap your sentences in a block element, instead of using the <br> tag. Anyway, these are really minor points :)

  Hope that helps, keep it up!

  01