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 made in HTML/CSS

Hirwa Jr 140

@HIRWA13

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


this design Kinda challenged me but I had to come out with many ways to make it look same as the original one and I learned some new stuffs while I was playing with the desings!

Community feedback

T
Chamu 13,110

@ChamuMutezva

Posted

Hi. Congratulations for taking the challenge and reaching this stage. Here are some issues to look at:

  • give the body element a min-height of 100vh, that will make the site scrollable if there is need and helps in centering your grid. You can then remove the margin-top: 15% from the .results__preview
  • keep your specificity very low , avoid scenarios like .results__total .marks h2 . You can add a class to the h2 and simply apply the styles on it. Avoid using ID for styling for similar reasons
  • when writing alt values, describe the information in the image, but do not write what the image is. See the following article for a better and detailed explanation images and alt values

Happy coding

0

Hirwa Jr 140

@HIRWA13

Posted

@ChamuMutezva Thank youuu🥳🥳

0
Finney 3,030

@Finney06

Posted

Hello there 👋. Good job on completing the challenge !

Here are some suggestions regarding your code that may be of interest to you.

HTML 🏷️:

To clear the Accessibility report:

  • Wrap the page's whole main content in the <main> tag.

  • Use HTML5 semantic elements such as <header>, <nav>, <main>, <aside>, and <footer> to define these sections.

Here is a web accessibility evaluation tool📕 to check your webpage for any remaining errors or warnings related to landmarks.

I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!

0

Hirwa Jr 140

@HIRWA13

Posted

@Finney06 thanks It is helpful indeed🥳

1

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