@yefreescoding
Posted
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:
Marked as helpful