React?JS library Semantic HTML5 markup CSS3 JSX Flexbox Mobile-first

Greetings! you have done a great job 😎

📌 Some accessibility and semantics recommendations for your HTML

• To improve the semantics of your HTML, you can change your <div class="Component"> to a <main class="Component"> and the <div class="attribution"> to a <footer class="attribution">
• You can apply display: block to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements
• Apply max-width: 100% to your img so that it occupies the correct width within the container
• Add a max-width to your container with class card to prevent the image from spreading too far
• Do not apply height: 90vh in your Component, instead add the following in the App class:

.App {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 20px; /* Separate the main from the footer */
}

• You have linked the favicon in your head, however, you did not upload it to your repository, therefore, it is not visible

Hello @Richouf95!

Your solution looks great!

I have a suggestion for improvement:

• For semantic reasons, use <main> to wrap the main content instead of a <div>. The tag <div> has no semantic value.

📌 This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, great job!