Result Summary Component Using Only HTML and CSS

Community feedback

• 

  P

  Kevin•250

  @zs-kevPosted over 1 year ago

  Hey Samyak317

  Great attempt at this challenge, you did a great job.

  There a few things though that I would suggest taking a look at:

  1)I would look at wrapping your div_1 and div_2 into one container, and apply the border radius to that, and then apply that same border radius to your div_1 to give it a closer look to the design. The reason I would suggest doing it this way is because if you look at the box shadow on the design, the shadow comes from the whole component, and not just the right side.

  2)With regards to the shadow, I would play around with the spread and some of the other variables to give it a bit more of a softer look. As well look at playing around with the color, as if you look at the design, the shadow does have a slight blue tinge to it. If you need some help with it, there are some fantastic tools out there which will visualise and generate the css for you: https://www.cssmatic.com/box-shadow

  3)This is just something to be aware of for future, though you could change it here as well. I would avoid using class names like div_1 and div_2, as when looking at the HTML it can be obvious as to what is what, but when you look at the CSS, it can become confusing as to what div_1 is referring to. With a little project like this its not the end of the world, but as you start to get to bigger and bigger projects, this could become very confusing. So I would recommend looking at what that div holds, and then naming it accordingly...so like div_1 could be result-container, and div_2 could be summary-container...hope this makes sense.

  4)You have aligned items in each container to be centered horizontally, but I would investigate aligning them vertically as well. I see you are using flexbox, so I would investigate how you could possibly align everything vertically with that.....or how you could spread the content out with space-between - just a little flexbox hint there ;)

  5)With the 76 of 100, you should be able to get that looking like the design without using absolute positioning. Without giving the answer outright, look at how you achieved the summary results, and play around with your markup and styling to see if you can't get it without position: absolute.

  If you can get those few things just right, you'll be pretty close to the design. Well done though, you have done great job thus far.

  Marked as helpful

  1

  ---

  

  samyak317•50

  @samyak317Posted over 1 year ago

  @zs-kev thanks! for you feedback. It really helped me a lot to impove and cleared some of my doubts... i have a question regarding this that how can you implement and take the use of the flexbox (comment - 4) and it would be really helpful if you give me some more information regarding comment - 5 ...... THANK YOU !

  0

  

  P

  Kevin•250

  @zs-kevPosted over 1 year ago

  @samyak317 Glad that I could help.

  Sure thing, can definitely explain those two points in more detail. I ideally don't like to give a straight answer as the best way to learn when you are utterly stuck is to be guided rather than given the answer outright...or at least thats when I have learnt the most. So Ill do my best to try and guide you in the right direction, as you do need to change quite a bit in order to make it all work.

  4)So with this one, you have aligned everything in your div_1 and you div_2 horizontally with text-align: center. If however you look at the design compared to your solution, you will see that all the content is spaced out from the top of the component, to the bottom, where with your solution, everything is sitting at the top of the component, and you have large white space at the bottom. So to fix this, I hinted at using a specific property in flexbox that will resolve that issue, which is justify-content: space-between (This is will arrange all your items so that they fill up the parents width or length, depending on the direction, and they will space themselves out evenly in that space). So on your div_1 and div_2, you will need use display:flex, from there play around with it and see if you can't make it work. One thing I will tell you, as this will make it seem as though its not working, you need to remove margin: auto on your div_1 h1, div_2 p as this will conflict with flexboxs space-between.

  To make the layout work properly, you will need to make css adjustments else where, but play around with it, break it, fix it, and see if you can get it closer to the design.

  5)With this one, position: absolute is not necessary at all. What I would recommend doing is to remove the absolute positioning, and remove the other styling elements related to it, so that would be the top: 70% transform: translate...etc. Once you have done that, it should be very close to the design, but the text will be aligned to the top of the element, and we want it centered. So you have 2 options, either by using flexbox, or grid, whatever you would prefer to use. If you are unsure on how to center items vertically with flexbox, a quick google search will show you the way ;)

  I hope that the above guides you in the right direction. If not, let me know and we can then resolve the issues.

  Marked as helpful

  1

  

  samyak317•50

  @samyak317Posted over 1 year ago

  @zs-kev THANKS A LOT ! it will really help me to improve things in the future and i request you to check my future solutions so that i can move on a right path and decision making in the future . the above recommendation will help me to improve my code...

  1