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 with SCSS and BEM

Franco A. 200

@franco-a

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


Hello! I would like some feedback when it comes to semantic html. I was not sure on what to use so I went with spans and divs instead, or is a semantic approach unnecessary?

Community feedback

Rael 270

@Raelian

Posted

Heya, just wanted to say that your design looks really spot on! I'm not very experienced but I don't think you need traditional semantic html for such a challenge but that's just my two cents. Overall I wanted to say that your design it looks awesome and your code also gave me some new insight on how to properly place those two circles in the background, so... thanks! ^^'

2

Franco A. 200

@franco-a

Posted

@Raelian Thanks! I'm glad you liked it

1
P
tediko 6,680

@tediko

Posted

Hello, Franco! 👋

Good effort on this challenge! Your solution is almost same as design. What I would suggest is:

  • Since your .profile-card__patern image is decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies, such as screen readers.
  • Read about semantic. Semantic elements lead to more consistent code, they are easier to read and improve accessibility.

Good luck with that, have fun coding! 💪

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