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 solution.

Sj 120

@SJ-74

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


I couldn't understand the image positioning in this one. Upon researching here and there found APG's solution for the challenge. Was impressed with his style of positioning images. So, copied the line for the same. Rest, any feedback would be appreciated.

Community feedback

@pikapikamart

Posted

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

Also glad that you find APG's solution a good reference, awesome.

Some other suggestions would be:

  • The img on the card, the pattern, it should have alt="" on it. If an image is just for decoration, using alt="" on them would be really good, so that screen reader won't pick them up.
  • The london word should not have used heading tag. p tag or span would work just fine.
  • On the list of information, those should have been using ul element, since they are list right.
  • Also, each list of information highlighted text should not have used heading tags at all along with the text below it. Heading tags are for text elements that gives an overview to the section and those are not.
  • Also on the body tag. Avoid using height: 100vh on an element. This makes the element's height limited only to the current viewport's height. Instead, replace it with min-height: 100vh, this takes full viewport's height and it will expanded if it needs to.

Also a good reference to this challenge is by Grace's solution You will accessible usage on elements on it.

Aside from those, great work.

0

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