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

@UJFord

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


Open for Feedback/Criticisms

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hi, Ford Ulbata! 👋

Good job on this challenge! 👏

In addition to SzymonRojek's helpful advice, one small suggestion that I think will improve your solution would be to use the font from the original design to make the text on the page look better. 😉

Also, using CSS background images to add and position the background SVGs might be a good idea, since that'll keep your markup cleaner and I think makes a little more sense to do for background images such as these.

Keep coding (and happy coding, too)! 😁

2

Szymon Rojek 4,540

@SzymonRojek

Posted

@ApplePieGiraffe

As always you have got good eye :D

Cheers :D

2
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@SzymonRojek

Haha, thanks! 😊 You're doing a great job, too, by giving such detailed feedback! Keep it up! 👍

1

@UJFord

Posted

Thank you for this @ApplePieGiraffe . After i read this comment, I'm now using div then background-image as backgrounds than using img alone and reasesrched about how to import and link fonts, now my next solutions to challenges will have more identically same fonts.

As a newbie this is a big help. Again, thank you for this and for your feedback on other newbies as well.

1
Szymon Rojek 4,540

@SzymonRojek

Posted

@UJFord

I like @ApplePieGiraffe solution => very responsive, great job. Check it out :D

1
Szymon Rojek 4,540

@SzymonRojek

Posted

Hi Ford,

Well done with the circles :D

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

  • I'd recommend reading about semantic tags, headings, alt text (why they matter);
  • check your accessibility and HTML issues report above (try to fix it);
  • shouldn't use ID's just for style => in this case we have got classes (ID's are better when JS will be needed);
  • this is a single page component h1 can be added, for example Victor Crest;
  • instead of this div id="bot" you can use ul > li;
  • check your project by the inspector in your browser on different devices (mostly margin).

Greetings :D

2

@UJFord

Posted

Thank You for this @SzymonRojek. Next time i'll be using semantic tags more and using divs less. I have a question about the img that i used for the background pattern, do i still need alt texts even tough it is a background?

Again thank you for this...i'm a newbie and this really helps a lot. Again, thank you for this and for your feedback on other newbies as well

1
Szymon Rojek 4,540

@SzymonRojek

Posted

@UJFord

You're welcome! :D

I like these newbie challenges, they are very demanding and preparing for more difficult tasks. We are learning all together.

According to your question, in this project, icons have only decorative role - that's a reason why alt text should be provided as a empty (alt="") so these circles can be ignored by assistive technologies, such as Screen Readers. I have used pseudo-elements so I didn't need an alt text.

Greetings :D

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