Skip to content
Submitted about 1 year ago

results-summary-component

Maduka Chisom•90
@chisomwest
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

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,680
    @hitmorecodePosted about 1 year ago

    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
    Maduka Chisom•90
    @chisomwestPosted about 1 year ago

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

    0
  • Ahmed Abd Allah•180
    @Ahmed7019Posted about 1 year ago

    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
    Maduka Chisom•90
    @chisomwestPosted about 1 year ago

    Thank you so much, the code worked @Ahmed7019

    0

Please log in to post a comment

Log in with GitHub

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