Skip to content
Submitted about 4 years ago

Using SCSS and BEM naming

SuzuMantan•370
@agusthas
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello everyone, this is my solution to the challenges. I would love some feedback or advice on:

  • Background Image Position. (is using vw and vh the right way to position the background? or should i just use position absolute and use top, left, right, bottom ? )
  • BEM Naming classes. (its my first time using BEM naming, any advice on how i should named the class would be appreciated).

Thank you!.

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    Hi

    This looks really good! Viewing on mobile the top left bg circle isn't visible but the rest looks spot on.

    BEM naming looks fine ☺

    But html markup needs some attention:

    • alt text should be intentionally blank on meaningless / decorative images like the bg pattern.
    • if that meaningless image happens to be an svg you should also include aria-hidden true on it
    • meaningful images (like the profile picture do need alt text, but it needs to be readable text describing the image. So in this case it should be his name
    • not sure why your first heading is a h4? What three levels of headings would you expect to come before this if it was included on a webpage? Remember heading levels are 100% about semantics and 0% about styling.
    • similarly, would numbers like 80k make sense on a contents page as headings for an element? Nope. So they shouldn't be headings. Their meaning is tied very closely to the word that accompanies them so the html elements chosen need to reflect that. Think list items or paragraphs with spans inside, think the description list element, think tables with the numbers as tds and words as ths.... Any of those would be valid semantic html to present this information.

    I hope that all makes sense and helps you

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