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

Results Summary Component

@Saul-Gustavo

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I need help.

When creating this project, i encountered several difficulties. I wanted to make it look exactly like the design image, and i did achieve it, but it doesn't resemble the image as much as i'd like. As seen in the CSS styles sheet.

I added many properties that shouldn't be there, but they worked for me to make it look like the image. Honestly, i need to continue practicing my CSS skills.

I haven't explored many properties, and it's a bit challenging for me, but i'm very happy with the result obtained in the end. I enjoyed working on this project; it's the first project i've uploaded to my Frontend Mentor profile.

Community feedback

@BenjaminSemah

Posted

Hello Saul. Great job done! 👍

HTML: Your HTML is well structured and easy to read. I think what you can do to improve it is to use semantic HTML elements.

You use divs almost throughout. That works technically. But for the sake of improving accessibility and SEO, I will encourage you to consider using semantic elements like main, section, footer, and ul/li elements for lists.

CSS: For your CSS, you declare variables for the colors (which I think was excellent.) But going through your code, I realise you didn’t use the variables where you could have. For example, for your linear-gradients. You could have used the variables you declared instead of hardcoding the color values.

As your code is now, if you wanted to change the colors for the gradient, you would have to change them one by one. But if you had used the variables you declared, then when you want to change the colors, you wouldn’t need to change them one by one. But you only have to change the value of the variable and the change will apply to all places where the variable is used.

I hope this helps. Best wishes and happy coding!

Marked as helpful

1

@Saul-Gustavo

Posted

@BenjaminSemah Thank you very much, this project is quite complicated for me when I write in code, I will modify it, thank you very much for your contribution.

1

@mtjeth

Posted

HI, Just to say good luck and this was also my first project and its a good starting place and if you keep practicing i think frontendmentors.io is a good place to advance in your css skills.

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