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, mobile first site

Bals 25

@pbalasnoa

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

I would like feedback. Thank you.

Community feedback

Szymon Rojek 4,540

@SzymonRojek

Posted

Hi Bals,

I have checked mainly your HTML structure, a few tips from me:

  • this is a single page component so you can add the h1 tag, for example Victor Crest;
  • alt text => don't need to use words like picture or image, photo, icons in the alt text as it's already announced as being an image;
  • check your HTML issue report and try to fix it;
  • card-footer: instead of it you can use ul > li;
  • generally applying semantic tags is not very easy because there is a chance that we can overuse them. In this solution probably I would do the header tag, and footer but it is not necessary here;
  • the circles are a bit tricky in this challenge: I have used pseudo-elements, position absolute, vw and vh, background url, transform translate and @media. In your solution they are not very stable on different devices, for example Iphone X => check your project by the inspector in your browser.
  • check the footer (should be in the middle of a page).

Greetings :D

1

Bals 25

@pbalasnoa

Posted

Hi @SzymonRojek,

Thank you very much for your feedback, I will take your comments into account to improve my code.

What you mentioned about the challenge with the circles could you share more information to me to have a stable code in different devices.

thanks and greetings ✌😊

1
Szymon Rojek 4,540

@SzymonRojek

Posted

@pbalasnoa

I was checking your solution in my browser by the inspector and on different mobiles the circles ran in opposite directions far from the main content. I have used pseudo-elements ::before (top circle) and ::after (bottom circle), position absolute, 100vh and 100vw, background-size auto, transform translate (-50%, -50%), playing with top and left and finally @media (just set top and left for ::before and ::after) => my solution is not the best but works.

Hopefully it will help you :D

Let me know.

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