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-component

@chisomwest

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


Here are my Questions, I would really appreciate your feedback

Overall Structure and Organization:

  • Is the overall structure of my webpage well-organized and logical?
  • Are there any best practices for structuring HTML and CSS that I should be following?

Semantic HTML:

  • Am I using semantic HTML elements appropriately to represent the content?
  • Are there places where I could use more specific HTML elements for better semantics?

CSS Styling:

  • Is my CSS code well-structured and organized?
  • Are there any redundant or unnecessary styles in my CSS?
  • How can I improve the readability and maintainability of my CSS?

Responsiveness:

  • Is my webpage responsive and mobile-friendly?
  • Have I considered different screen sizes and resolutions?
  • What improvements can I make to enhance the responsiveness?

Cross-Browser Compatibility:

  • Have I tested my webpage on different browsers, and does it display correctly?
  • Are there any specific CSS properties or features I should be aware of for cross-browser compatibility?

What resources or tutorials would you recommend for me to improve my HTML and CSS skills?

Are there specific topics or concepts I should focus on for my next challenge?

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

Nice well done. Ok, let's start with html

html

  • Make it a habit of setting your html like this
<body>
  <main>
    /* everything else goes in here */
  </main>
</body>
  • You have an empty div, is ther a reason for this?
  • You have a div with the class container, but the container is not defined in your css. This extra div layer is actually not needed.
  • You have two headers and no h1, I suggest to either make Your Result or Summary a h1. Every site must contain one h1.
  • The <strong> wasn't really necessary, because you are going to style it with css. You could have used a p tag also.
  • You did something I've never seen before. You have <ul> inside the <ul> you have a <div> and inside the <div> a <li>. I don't know if this is OK or not, I'll have to do some research. Maybe it would be better to do it like this.
## This I've seen it before and it seems logic.
<ul>
  <li>
    <div></div>
  </li>
</ul>

css

  • Like mentioned above, make it a habit of using min-height: 100vh; on the body. This is important to make to body responsive to it's content
  • Make more use of flexbox or grid to place the card in the middle of the page and remove all margins that are doing this at the moment.

Marked as helpful

4

@chisomwest

Posted

Thank you so much for the corrections. I learned a lot and will implement my learnings going forward @hitmorecode

0

@Ahmed7019

Posted

Well done completing this challenge , you did great job and here a tip :

  • to center the card in the middle :

` body :

display:grid;
place-items:center;
min-height:100vh;

`

1

@chisomwest

Posted

Thank you so much, the code worked @Ahmed7019

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