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

mobile first Responsive result-summary component

Muslim Abdullah• 100

@abdullahmuslim

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

Results summary component
  • HTML
  • CSS
1newbie
View challenge

Design comparison

SolutionDesign

Solution retrospective

I have much fun working on this one as it involves Javascript.

Amid the fun I still have little hiccups.

  • Is there any technique, app or website available to get font-size from image ?
  • Is there any global color picker for linux ?
  • Can anyone suggest what I should use to handle the .catch of my fetch request incase of error ?

Community feedback

_nehal💎• 6,710

@NehalSahu8055

Posted

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

  • Use responsive units(rem, em, %) from next project. Explore respective use cases on google.
  • It would be better if you use <footer> for your .attribution class.
  • Try to add accessibility features like aria, sr-only, title.

I hope you find this helpful.

Happy coding😄

Marked as helpful

1
Muslim Abdullah• 100

@abdullahmuslim

Posted

@NehalSahu8055 I'm aware of reponsive unit including vw, vh, vmin, .... I used few like vw, vh and % where I feel it's neccessary.

I'm really a noob, it will be more helpful if you can pin point areas where I should try those.

What more can I say, I'm grateful that you spend some of your time helping me out 🙂

0
_nehal💎• 6,710

@NehalSahu8055

Posted

@abdullahmuslim

Have a look at this, it may help you a bit and try to explore more on youtube, google and blogs, practice will make you understand the differences.

link

1
Muslim Abdullah• 100

@abdullahmuslim

Posted

@NehalSahu8055 Amazing article. The author's explanation are not very accurate i.e saying em is relative to the size of the parent element.

0
Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

POINTING CURSOR ↗️:

  • Looks like the component's button element has not a pointer, this property plays a major-role in terms of both UI & UX
  • The cursor: pointer CSS property is important for button-like elements because it changes the cursor from the default arrow to a pointer when hovering over the element. This provides a visual cue to the user that the element is clickable and encourages interaction.
  • In terms of UI/UX, using cursor: pointer helps to improve the usability of the interface by making it easier for users to identify interactive elements. It also helps to provide feedback to the user by indicating which elements are clickable and which are not.
  • So we want to add this property to the following button element
button {
cursor: pointer;
}
  • Now your component's button has got the pointer & you learned about this property as well

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

1
Muslim Abdullah• 100

@abdullahmuslim

Posted

@0xAbdulKhalid Having people like you arround wouod have make my development career a lot easier and quicker.

I didn't take close attention to that and thanks for pointing it out.

Maybe I will try mentioning you some other time in my project solutions.

You are really helpful.

0
_nehal💎• 6,710

@NehalSahu8055

Posted

Regarding Your Query:

  • I would suggest you use your intuition for font sizes if you do not want premium subscription.
  • You can have a look at following color-picker app link
1
Muslim Abdullah• 100

@abdullahmuslim

Posted

@NehalSahu8055 App looks great. My system architecture is amd64 not sure if that will work on my machine.

0
_nehal💎• 6,710

@NehalSahu8055

Posted

@abdullahmuslim Use figma color picker tool.

0
Muslim Abdullah• 100

@abdullahmuslim

Posted

@NehalSahu8055 my machine runs on ubuntu 20.04, I installed figma but it doesn't work. Segmentation fault

0
lunabassam• 0

@lunabassam

Posted

could you tell me where should i practice this challenge maybe a web or an app bcz i dont understand where you guys do the coding stuff

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