Results Summary Component using HTML and CSS

Community feedback

• 

  Olaniyi Ezekiel•7,580

  @Ezekiel225Posted 9 months ago

  Hello there 👋 @JoaoVFBraga.

  Good job on completing the challenge !

  Your project looks really good!

  I have a suggestion about your code that might interest you.

  📌 First: Use <main> to wrap the main content instead of <div>.

  Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page.

  📌Second: Consider changing the background-color of the body element and the div with theclass of card to hsl(0, 0%, 100%), then add a box-shadow to the div with the class of container.

  body {
    background-color: hsl(0, 0%, 100%);
  }
  
  .container {
    background-color: hsl(0, 0%, 100%);
    box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.1);
  }
  

  📌Third: Consider adding a min-height of 100vh to the body element so as to centralize your project.

  body { 
    min-height: 100vh;
    align-items: center;
    display: flex;
    justify-content: center;
  }
  
  

  There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I recommend it to you.

  I hope this suggestion is useful for future projects.

  Keep up the excellent work and continue to challenge yourself with new projects. Your progress is impressive, and each project is a step forward in your front-end development journey! 🚀🌟.

  Other than that, great job!

  Happy coding.

  Marked as helpful

  1