Skip to content
Submitted over 1 year ago

HTML | CSS | Cutsom Properties | Flex | Grid

Daniel•130
@tenczowy
A solution to the Results summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I found it really hard to make a good HTML structure to access individual text pieces in summary section to add different color to each part of text. It would be really helpfull in the future if someone could give me advice on this topic.

Code

Please log in to post a comment

Log in

Community feedback

  • Jack Weru Kioni•240
    @Jaweki

    Nice work on that project. You have done it nicely, actually given that its plain HTML CSS. of course as @petritnuredini stated, it would be nice if you add some aria to aid in accessibility tools.

    I will comment that, It might have been easy for your development experience if you used something like react, because the repetitive code like the summary section elements can be react components created by mapping over a JSON object. Then to apply varying color on each element, using some CSS framework like Tailwind CSS, could have helped with conditional utility CSS on each component. Also tailwind allows you to define your own extended color palette besides the one it provides. Also its fun programming inline styles as you develop, because you see them being applied on the fly, rather that designing the html structure, then applying CSS separately, while trying to recall what class and id names you gave various elements.

    Anyways that's My thought, enjoy you web development journey...

    Marked as helpful
  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing your Results Summary Component project! 🌟 It's fantastic to see your dedication to creating an intuitive and visually appealing interface. Here are some best practices and suggestions to take your project to the next level:

    • HTML Structure & Semantics:

      • Great use of semantic HTML elements. For enhanced accessibility, consider using aria-labelledby or aria-describedby on complex elements like your summary component.
      • When using images, ensure the alt attribute is descriptive. For decorative images, it's okay to have an empty alt attribute (alt="").

    • CSS Styling:

      • Excellent use of CSS variables for maintaining a consistent theme. Consider using more relative units like em or rem for responsive sizing.
      • For responsive design, ensure your media queries cover a range of device sizes. It’s better to use max-width instead of just width in media queries for broader coverage.

    • Performance and Optimization:

      • Optimize your image assets to enhance loading times, especially for mobile users.
      • Compress and minify your CSS files in the production version for better performance.

    • General Suggestions:

      • Test your application across different browsers and devices to ensure compatibility and responsiveness.
      • Include a hover effect on clickable elements for better user interaction.

    • Learning Resources:

    Your progress is commendable, and your attention to detail shines through in your work. Keep experimenting with new ideas, technologies, and best practices. Your journey as a developer is on a promising path, and I'm excited to see what you'll create next. Keep up the great work! 💡💻

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