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

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  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

  Marked as helpful

  1

  ---

  

  Richouf95•30

  @Richouf95Posted 10 months ago

  Hello @Blackpachamame

  Thank you for your time and suggestions.

  I integrate them immediately.

  I've applied your suggestions and they don't seem to affect the visual result in any way.

  You can check once more to make sure I've incorporated the corrections.

  Many thanks again

  0

  

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  @Richouf95 The idea is to reach the same visual result with the most organized code.

  1

  

  Richouf95•30

  @Richouf95Posted 10 months ago

  @Blackpachamame Thanks again

  0
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 10 months ago

  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!

  Marked as helpful

  1

  ---

  

  Richouf95•30

  @Richouf95Posted 10 months ago

  Hello @danielmrz-dev I take note of your suggestion. I will integrate the corrections immediately.

  Thank you very much for your attention to my project and for the enriching suggestions.

  You can check once more to make sure I've incorporated the corrections.

  0