@thibault-deverge
Posted
Overall Feedback: First of all, excellent work! You've done a great job and the design is really close to the original. The layout works well across devices, especially on phone screens, which is a big win for responsiveness!
Visual Feedback:
- Border Radius: The border radius on the container is slightly off compared to the original design. It’s a small detail, but achieving pixel-perfect precision is a valuable skill. Paying attention to these details will bring your design even closer to the original.
- Typography: The heading could be a bit bolder to match the design more closely, and the font size of the text could be slightly smaller. As part of the learning path, the igma file is available for free for the first two projects—it's a great tool to refine your pixel-perfect integration skills.
- Font Family: I noticed that the font family isn't displaying correctly because of a small typo. In the CSS, you have
"Outift"
instead of"Outfit"
. Fixing this should resolve the issue.
Code Feedback:
- Naming Conventions: The naming structure in your code is fine, especially for a small project like this. However, as projects grow larger, it might be helpful to adopt a more consistent naming convention like BEM (Block, Element, Modifier). It’s a good habit that will make your code more scalable and easier to manage.
- Semantic HTML: Great job using semantic elements like
<main>
,<section>
, and<article>
instead of relying solely on<div>
! This improves both accessibility and SEO. Keep this up! - File Organization: It's a best practice to store your CSS files in a
styles
directory instead of placing them inassets
. This will keep your project structure clean and organized. Adding a CSS reset file would also be beneficial to remove browser inconsistencies and ensure your design renders more consistently across different browsers. - Relative Units: It’s great to see you using
rem
andem
for font sizes, which is excellent for accessibility and scalability. Try applying the same approach to padding and margin values as well. Pixels should generally be reserved for small, unchanging elements likeborder-radius
.
Conclusion: Overall, this is a fantastic effort, and you’re definitely on the right track! There are a few areas to refine, but that's really good already! Keep pushing forward, and I’m excited to see how your future projects turn out. Best of luck, and happy coding! :)