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 using flexbox

@matheraduar

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


how i can make the responsive format work???

Community feedback

Szymon Rojek 4,540

@SzymonRojek

Posted

Hi Matheus,

Well done! :D

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

  • I'd recommend reading more about the alt text. You 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. You can easily type the name "Victor";
  • a few times you have used the span tag. IMO SPAN (and DIV) elements by themselves are generally considered to be semantically neutral. A good approach is to use semantic markup as much as appropriately possible, it all depends on the context (of course, I use the span but before it, I try to think about the other semantic tags). In your project I'd recommend to use paragraph for => followers, likes, photos.
  • 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.

Semantic tags and attributes - their importance is important for accessibility. Aslo, if you want to learn about RWD, I can recommend Flexbox or Grid courses made by Wes Bos, they are for free:

Finally, congrats! ** Please, don't forget to upvote any comments on here that you find helpful. That's it from me. Hopefully, it will help you.

Greetings :D

2
Jane 1,040

@janegca

Posted

Hi Matheus, nice work. For a more responsive design, instead of hard coding sizes with pixels, convert them to rem units using 1 rem = 16 pixels. It also helps to set max-widths or min-widths rather than strict widths.

Hope that helps.

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