Profile Card Component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @anetaanette,

  Great work positioning those background images,

  • There should be two landmark components as children of the body element - a main (which will be the component) and a footer (which will be the attribution).Using landmark elements , you can improve the navigation experience on your site for users of assistive technology . So you can wrap the content of the body (card) in<main>.

  • I recommend to use an <ul> list for <div class="card__bottom"> and in each list item would contain only a span or maybe strong tag needs to wrap the numbers.as The number and word have to be read together to make sense so need to be in the same meaningful element.

  • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. Usingpxwon't allow the user to control the font size based on their needs.

  Hopefully this feedback helps.

  Marked as helpful

  0

  ---

  

  Aneta•180

  @anetaanettePosted almost 3 years ago

  @PhoenixDev22 Thanks a lot! I'll improve these few things next time :)

  1
• 

  Abhijit Sarode•90

  @AbhijitSarodePosted almost 3 years ago

  Hey Aneta 👋

  As Maqsud mentioned above its hard to utilise full power of BEM in small projects nonetheless code is well written. I'll suggest more use of the responsive measurement units (e.g rem, vh, vw, ch, %, em etc but also be aware of its additive properties). You can also use functions like minmax(), max-width(), min-width(), clamp(). One more thing, you can use resets in your projects as it makes life easier in the end. You can read more about resets here https://piccalil.li/blog/a-modern-css-reset

  Hope this helps Abhijit

  Marked as helpful

  0

  ---

  

  Aneta•180

  @anetaanettePosted almost 3 years ago

  @AbhijitSarode Thanks a lot Abhijit!

  0
• Account deleted

  Good job 👋

  In a smaller project actually, it's hard to learn bem I guess, try it in bigger projects. If you want to learn more about BEM I suggest this cheatsheet https://9elements.com/bem-cheat-sheet/

  Cheers Maqsud

  Marked as helpful

  0
• 

  cacosted•570

  @cacostedPosted almost 3 years ago

  Cool solution, I really like the way you handle the background images, more clear than mine. 👍

  1