Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile Card Component HTML CSS

@MartinsitoBritoDiaz

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi!, any feedback is welcome

Community feedback

@pikapikamart

Posted

Hey, great work on this one. Layout is good in general.

Some suggestions would be:

  • Always have a main element that will wrap the whole content of the webpage, on this one the .container element could have been used with main element.
  • The alt for the image should have use the person's name as the value like alt="Victor Crest"
  • Always have an h1 element on a webpage, on this one, the h1 would be a screen-reader only text. If this is new for you, screen-reader only text are just plain html elements, with css on it that is intended for users who are using screen-readers. This css makes the the text hidden for sighted users, but visible for impaired users. Have a look at Grace's solution inspect the layout and find the h1 element, and see the css stylings being used on it.
  • On those information below the user, it would be great to have them inside a ul since those are "list" of information. Also, those numbers like 80k should not be a heading tag, a p tag will be much better.

Aside from those, great work.

Marked as helpful

1

@MartinsitoBritoDiaz

Posted

@pikamart Hey, thanks for your feedback. I going to do this recommendation to do better code. I didnt know about to do code for impaired users

0

@Gauravkumario

Posted

give .card-img class white background color and everything is good

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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