Community feedback

• 

  Andrea-gli•10

  @Andrea-gliPosted about 19 hours ago

  Hi, it might be a good idea to write css in a separate css file than writing css inline :)

  1

  ---

  

  Brian Muniz Silveira•120

  @BrianMunizSilveiraPosted about 16 hours ago

  Following in @Andrea-gli footsteps, I have feedback for you as well:

  Suggestions to Improve the Code

  Positive Points:

  1. Visual Structure: Using display: grid in the .box class simplifies content alignment.
  2. Flexbox Usage: The .mainText class uses flexbox for text organization, ensuring easy maintenance and alignment.
  3. Clean Aesthetics: Soft colors like aliceblue and bisque create a clean and pleasant look.

  ---

  Suggested Improvements:

  1. Responsiveness

  • Define a maximum width for .box on smaller screens:

    .box {
        max-width: 90%; /* Adjusts width dynamically based on device size */
    }
    

  - Add media queries to adjust text size and spacing:
  
  ```css
  @media (max-width: 480px) {
     h1 {
         font-size: 18px;
         text-align: center;
     }
     p {
         font-size: 14px;
     }
  }
  

  ---

  2. Accessibility

  • Provide a clear description for the alt attribute in the image:

  <img src="images/image-qr-code.png" alt="QR Code linking to the Frontend Mentor website">
  

  • Use semantic tags like <article> and <section> to structure the content:

  <article class="box">
      <section class="first-box">
          <img ... />
      </section>
      <section class="second-box">
          ...
      </section>
  

  • Ensure the color contrast ratio is high enough for text readability.

  ---

  3. Improved Code Organization

  Remove inline styles from HTML (e.g., the style attribute in <img> and <h1> tags):

  img {
      border-radius: 15px;
  }
  
  h1 {
      font-size: 24px;
      font-weight: bold;
  }
  

  • Group related CSS rules into sections with comments for better maintainability:

  /* Layout styles */
  .box {
      ...
  }
  
  /* Typography */
  h1, p {
      ...
  }
  

  ---

  4. Content Alignment

  Adjust the .box margin to better handle top and bottom spacing:

  .box {
      margin: 20px auto;
  }
  

  ---

  By addressing these suggestions, your code will become more accessible, maintainable, and ready for different device sizes. Keep up the great work!

  Brian.

  0