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

Results Summary using Flexbox

MH-Rashid 50

@MH-Rashid

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


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

Very close to the final design. Learnt how to use gradients. Lot of practise with flexbox Great step forward in handling position of footer in this project, but still not the most clean styling.

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

  • Flexbox: in the Summary section's skill boxes, struggled to keep the first 2 elements (icon and skill name) at the start and the last element (score) at the end without grouping the first 2 elements into a div, i.e. keeping them both as direct children of the flexbox. Achieved by giving 3rd element margin-left: auto, but ideally wanted to fix the issue using flexbox properties and knowhow
  • Manipulating position of the card when its width and height were set as percentages. Its size obviously changes as I resize the browser window, which made it difficult to set the correct styling when it came to making the page responsive. Solved by switching to fixed height and width in pixels, but would like to learn how to keep relative measurements such as rem / percentages and still manage responsive styling
  • Footer issues. Managed to keep it at the bottom and center even when scrolling. Di so by setting position to static and defining suitable padding to ensure it remains at the bottom at different viewing RWD breakpoints. But ran into an issue when exceeding the mobile-width breakpoint and entering desktop view -- the footer would jump to the top of the page. Still not sure why -- any ideas? Had to "force fix" by setting top padding

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

As mentioned above

Community feedback

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