Skip to content
Submitted 2 months ago

Result Summary Componenet

Ajaya-Rajbhandari•130
@Ajaya-Rajbhandari
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?

  • I'm most proud of the overall design and layout of the CSS code. The use of variables for colors and font weights makes the code more maintainable and scalable.

  • One thing I would do differently next time is to add more comments to the code to explain the purpose of each section and the reasoning behind certain design decisions. This would make the code more readable and easier to understand for others.

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

Responsive design: The code lacked a clear responsive design strategy, which made it challenging to adapt the layout to different screen sizes and devices. I had to add media queries and adjust the layout to ensure a smooth user experience across various devices. But i don't think that i succeed doing that.

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

I would like to get help on following topics:

  • Consistency in naming conventions for classes and variables
  • Adding more comments to explain the purpose of each section and design decisions
  • Improving accessibility features, such as color contrast and ARIA attributes
  • Refining the responsive design for mobile devices
  • Optimizing the code for better performance and maintainability

Community feedback

  • Huy Phan•2,300
    @huyphan2210Posted 2 months ago

    Hi, @Ajaya-Rajbhandari

    I reviewed your solution and wanted to share some feedback:

    • Your solution is missing key components from the design, such as the Reaction, Memory, Verbal, and Visual parts. Additionally, the font-family URL in your style.css is incorrect. It should be https://fonts.googleapis.com/css2?family=Hanken+Grotesk:[email protected]&display=swap instead of https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;700&display=swap.
    • If you don't have a responsive design strategy in place, consider researching the mobile-first approach. Mobile-first is a responsive design strategy where you begin the design and development process with mobile devices in mind, ensuring that the website looks good on smaller screens first. Once that's done, you use media queries to progressively enhance the layout for larger screens like tablets and desktops. This strategy ensures a better experience on mobile devices, which are now more common.
    • For naming conventions, I suggest looking into the BEM methodology for CSS and using camelCase for JavaScript.
    • Regarding your point on adding comments: good class, variable, and function names should be self-explanatory. Focus on clear naming unless something is particularly complex and needs clarification.
    • For accessibility, I'd recommend researching semantic HTML. Don't stress about color contrast for now—those concerns are more design-related. As for ARIA attributes, I don't think they need to be a priority at this stage. Focus on nailing the design first.

    It seems like you have more questions, but from my perspective, your solution is currently incomplete. The goal of Frontend Mentor is learning, not just earning points. It feels like you're rushing through the process. Take your time to match the design as closely as possible, and we can dive into other topics later.

    Hope this helps!

    Marked as helpful
    0
    Ajaya-Rajbhandari•130
    @Ajaya-RajbhandariPosted 2 months ago

    @huyphan2210 "Thank you for your detailed feedback. I appreciate your time and effort in reviewing my solution.

    You're right about the main components but it is being rendered after the "Continue" button is clicked. I've since updated the code to require user interaction before rendering those components. This change aligns more closely with the design's intended flow.

    I'll continue to work on improving the project based on your suggestions, especially regarding responsive design and naming conventions. Thank you again for your guidance!"

    1

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