Submitted over 3 years ago

profile card component main make in record time

Jehan Carlos Hurtado Guerrero•720

@Jank1510

A solution to the Profile card component challenge

Preview Code

Solution retrospective

Lately I have challenged myself to develop these projects in a short period of time, I appreciate the comments !

Code

Please log in to post a comment

Community feedback

Vanza Setia•27,715
@vanzasetia
Posted over 3 years ago
👋 Hi Jehan!

🎉 Congratulations on finishing this challenge!

In my opinion, you should not challenge yourself to do projects as fast as possible. It's not beneficial and makes you write low-quality code, especially when you are just starting out. I would recommend challenging yourself to focus on the quality of the code and I think speed will come naturally.

Feedback:
- Accessibility
  
  All the page content should live inside landmark elements (header, nav, main, and footer). By using them correctly, you can make users of assistive technology navigate the website easily. In this case, you can wrap all of it with main tag,except the attribution. The attribution should be lived inside the footer.
```
<body>
  <main>
    page content goes here...
  </main>
  <footer class="attribution" role="contentinfo">
      attribution links goes here...
  </footer>
</body>
```
- Also, about the div with role="contentinfo", swap it with footer instead.
- Alternative text for images should be informative for the user.
- Some resources to learn about the alternative text.
  
  Axess Lab | Alt-texts: The Ultimate Guide
  
  Images Concepts • WAI Web Accessibility Tutorials
- For the profile image, you can use his name as the alternative text. alt="Victor Crest".
- For the background patterns, I would recommend making them as background-image with CSS instead of the actual element of the HTML.
- Every page should contain only one h1 as an identifier.
- Always wrap text content with a meaningful element (p).
- Only use div and span for styling purposes.
- I would recommend making the inferior element as a ul element instead and wrapping each list item with li. Also, swap the h1 with span. It's okay to use span since it's already been wrapped with a meaningful tag, in this case, the li element.
```
<ul class="inferior">
  <li>
    <span>80K</span>
    <span>Followers</span>
  </li>
  ...more list item
</ul>
```
- Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
- Styling
  
  There's no need to make body element to be position: absolute;.
  
  I would recommend refactoring the CSS since currently, it has a lot of absolute positioning.
  
  On my desktop view (1280px * 840px), the card is too wide.
  
  On mobile view (360px * 640px), the card is not positioned in the middle of the page.
  
  The thing that I want to say is to make sure that your solution is responsive and looks good on any resolution.
- Best Practice (Recommended)
- Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain).
That's it! Hopefully, this is helpful!
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord