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 Component

Randomgituser69• 220

@Randomgituser69

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


What are you most proud of, and what would you do differently next time?

I'm proud of making it similar to what is in the picture

What challenges did you encounter, and how did you overcome them?

I didn't remember that much on the challenges that i encountered or like didn't remember did i really encounter or not

What specific areas of your project would you like help with?

How can i add the image to the background on top and bottom just like in the picture?

Community feedback

T
Grace• 28,810

@grace-snow

Posted

You've done something to the image asset that came with this, making the image look srambled and broken. Use the assets as provided.

I've left feedback on your QR card challenge solution, and much of that is applicaple and needs applying here (as well as to all other solutions). Here are a few additional points:

  • You cannot have aria-labels on divs! Aria-label is only to be used sparingly and the element would need to have a role to work consistently. By littering your solution with aria, you are making it much LESS accessible not better.
  • Look up how and when to write alt text on images. There are some great posts about this in the resources channel of the frontend mentor discord server. The alts need to change in this.
  • It's really important to carefully think through the HTML that's appropriate for the content in a design. As well as avoiding so many divs which I've already meantioned to you, you need to carefully choose meaningful elements particularly for text content. For example, headings and their order are meant to give an outline of the content of a page or component. It would never make sense to have a number as a heading like "80k". Imagine what this content would be in a plain document. The statistics would be a list -- three simple bullet points. So that's what it should be in the HTML -- an unordered list with three list items.
0

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