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

Responsive Results summary component Using Flexbox

@SalarSadeghi

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


Which part of this project do you think is more important? In my opinion the corner-borders of the 4 items in the summary section(right-side). What is the best-practice implementing them? Check my solution...!

Community feedback

@DeWill404

Posted

This is a great design, you are correct small borders at the edges are tricky. And you have nailed it properly.

We can make a few improvements here & there, like instead of repeating ids for each summary type, you can use class to apply style specific to each edge.

Also, for border style for each edge, we can set all borders in the common class, then in respective class hide unnecessary borders.

0

@SalarSadeghi

Posted

Absolutely right. I will revise that.

Also, there is another point I'd like to mention. There are some ways to use local JSON data in JS file. Which one is the best practice?

0

@DeWill404

Posted

@SalarSadeghi The best and easiest way is to use fetch with file path as URL.

Remember to use the complete file path not relative to project directory

0

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