Hey,
First of all, I wanted to welcome you to Frontend Mentor and congratulate you on successfully completing your first challenge.
Let's start by reviewing your HTML. The general structure looks good.
Maybe I'm nitpicking here, but I think it would be great if you used the <div> element for the card itself and wrapped both text elements in their own <div> element, like in the example below:
<main>
<div class="card">
<img src="./assets/images/image-qr-code.png" alt="qr code" loading="lazy" />
<div class="card-content">
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</div>
</main>
Here is a good resource of example card - w3school example card
Looking at the css..
I see that you missed the left and right padding in the text section, which is included in the Figma design file's "Text" component - view screenshot
The border-radius
on the card should be 20px
instead of 16px
- view screenshot
The padding on the card should be 16px
instead of 15px
.
The card's image is currently 240px
by 240px
but in the design it is 288px
by 288px
There are a lot of incorrect/missing values that are specific to this task and provided to us.
I think you need to pay more attention to the design system provided in the Figma files and maybe watch a Figma tutorial to see where to get all the values. This will ensure that all the challenges look as good as possible.
Overall, it is a good project, but I would recommend following the provided design system more closely to improve accuracy and consistency.
Marked as helpful
@damigand
Posted
@RobertsPeirags this is pretty good feedback and I appreciate the honestly through the entire post. Personally I didn't want to look at the figma design because, generally speaking, I'm not going to have access to them in future challenges, so I wanted to use this first submission as a test to see if I could eye-catch the dimensions. That being said, obviously the resource was there, so it was dumb of me not to check it.
Cheers and have a great one!