Results Summary Component (With Responsive Design)- Jordan Kleinbaum

Community feedback

• 

  Yefree Valdez•940

  @yefreescoding

  Posted almost 2 years ago

  You did an awesome job with this solution! It looks almost spot on compared to the original design. To answer your question, I'll share how I did it, along with some tips on writing cleaner, more semantic, and organized code.

  • ⚠️Always remember to use semantic tags in your HTML file. Tags like header, main, footer, section, aside... Check out this link for more details on why they're important!.

  To address your doubt regarding the "[...], the blue rectangle has rounded corners and is on top of the white rectangle with no rounded corners. [...]". I believe this solution would work without altering your HTML file. Simply assign a background color to the parent component, which, in your case, is this one <div class="everything">

  .everything{
    background-color: white; //Or any color you want
    // The rest of your styles go here.
  }
  // Is not necessary to give a background color to the right half of the component
  .right-half {
    background-color: transparent;
  }
  

  I did check your code, and test this solution on my browser with the developer tools. It fixes the problem 🥳

  Additionally, I'd like to provide some corrections and offer you advice on how to improve your solution.

  • First you should use a container to wrap all your content. And then your component would be the section inside of this container.

  <main class="wrapper">
    <div class="everything">
      <section class="left-half">
        // Your context goes here
      </section>
      <section class="right-half">
        // Your context goes here
      </section>
    </div>
  </main>
  

  • A <h1> is a must have in every web page. important❗️ Just one per page.

  // Change this p for a h1
  ❌
  <p class="your">Your Result</p>
  ✅
  <h1 class="your">Your Result</h1>
  

  • As a said before, we should only use <div>, when there's no other option. A good practice will be something like this.

  <section class="lefthalf">
    <header class="topPart">
      <h1 class="your">Your Result</h1>
    </header>
    <article class="middlePart">
      <h2 class="rating">76</h2>
      <p class="of">of 100</p>
    </article>
    <article class="bottomPart">
      <h2 class="great">Great</h2>
      <p class="you-scored">
        You scored higher than 65% of the people who have taken these tests.
      </p>
    </article>
  </section>
  

  These are just some pieces of advice for good practices, writing cleaner, more semantic, and better-structured code. Following these tips will help you debug faster and become a valuable part of the team. Additionally, it will make your websites more accessible and improve their SEO. Overall, you're doing great! Congratulations! I hope the tips I've shared here will help you become an even better developer.

  Extra tips:

  • Introduction to Flexbox
  • Introduction to Grid
  • The Odin Project

  10

  Marked as helpful
• 

  Luis Jimenez•760

  @LuisJimenez19

  Posted almost 2 years ago

  Hi, congratulations for finishing the challenge.

  Regarding your question, to achieve the desired effect, you should wrap both sides in a main container, although I see that you are using the everything layer, this layer is the one that should give the white background, that will give the desired effect. Another suggestion is that it is always better to manipulate the content in the container, example:

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

  With this you can center the entire card without having to play with the positioning. And in this main everything container you can also apply a flex and a max-width:740px or the width you want, then each part of the card will occupy half and you don't have to specify it in each one. if it doesn't work add the rule flex-grow:1; this will make each part occupy the same size.

  I hope my contribution is helpful.

  00

  Marked as helpful
• 

  Ali Ali•40

  @alibeniaminali

  Posted almost 2 years ago

  Hi Jordan,

  Well done on the solution! Looks great!

  Regarding your question. As far as I can see the box-shadow is on the Summary (the one with class="righthalf"), instead try to put the box-shadow on the whole component (the one with class="everything"). That should fix the whole thing for you.

  Let me know if that was helpful.

  Kind regards, Ali

  00