Submitted 7 months ago

Results summary using HTML/CSS/JS

Rossella Ferrandino• 10

@RossellaFer

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Results summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I planned the HTML beforehand, thinking about the semantic elements that could be used for the different sections of the design.

Next time I would try out a CSS framework, or extend the design with some micro interactions on hover.

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

Getting the colors right without the use of Figma

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

What semantic elements would you use for this layout? I chose because it is meant for a reusable component.
What do you think about the CSS organization? I tried to have the more general rules at the top and then move on to the elements top to bottom

Community feedback

Shaurya Gupta• 100

@madebyshaurya

Posted 7 months ago

Hi, I wanted to say that if you were having trouble with colours, you can use the "style-guide" file included in every frontend mentor project. The style guide has specific colours which you can copy-paste in your website.

If you found this useful please upvote this comment, thanks.

Abdul Khaliq 🚀• 72,620

@0xabdulkhaliq

Posted 7 months ago

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

I have a suggestion regarding your code that I believe will be of great interest to you.

MOBILE FIRST WORKFLOW 📲 :

Your CSS layout skills are impressive! To refine them further, I suggest trying out a mobile-first workflow.

This approach starts with designing for mobile devices, which not only caters to the increasing number of mobile users but also helps in creating more responsive and efficient layouts.

It's like putting your users first and ensuring they have a great experience no matter what device they're using.

If you're interested in learning more, here are some resources that might help: Responsive Web Design Basics by MDN Web Docs for a comprehensive guide, Guide on Mobile First Design by UX-Pin which offers valuable insights into creating mobile-friendly designs

Incorporating a mobile-first approach into your workflow not only enhances your skills but also ensures your designs are future-proof and user-friendly. Keep up the great work!

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

Happy coding!

Please log in to post a comment

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