Skip to content
Submitted 7 months ago

Results Summary Component with raw HTML and CSS

sambensim•20
@sambensim
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Pretty proud of my use of a div background for the button to fade into a gradient, although I think I probably could've done without the extra background if I'd set the original background color to a gradient of only one color. I think I also could've gotten around using media queries if I'd set my flexbox sizing better.

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

As always, spacing was the largest annoyance, but I didn't face any real issues there. I didn't use all of the colors given, and I'm a bit unsure about where the light lavender color was supposed to go, but it looks fine...?

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

I need to work on formatting for accessibility and working out layers of specificity so I don't need so many selectors.

Community feedback

  • Abouelhouda Iliass•480
    @ilyesabPosted 7 months ago

    Hi @sambensim, I reviewed your solution a few remarks from my side:

    • your html code really misses on accessibility you're only using divs. divs don't convey any sematic meaning so a blind user using a screen reader will have a hard time navigating your website. try to use landmark elements such as:

    • <main> for main content

    • <section> for a generic section

    • <nav> for navigation

    and so on.

    • it seems that you also struggle on how you structure your styling using selectors like :first-child or nth-child should only be done rarely. if you want help with that I recommend you check out BEM which is a methodology of how to structure your html using classes to make styling more organised and maintainable.

    • it seems like you used flex a lot to center content and so on. I recommend you check out grid it allow you do much of what you did in your solution but in fewer lines.

    • you kept setting the weight of the font using font-variation-settings but you could use also just use font-weight by the way.

    hope this will be useful to you other than that good work!

    0

Please log in to post a comment

Log in with GitHub

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