Community feedback

• 

  Uyoyo Whiskey•20

  @Uyoyo-WPosted about 11 hours ago

  Hi there! Great job completing on the challenge and exploring frontend development as a backend developer. Your code is off to a great start. Here are a few things that could make it much better

  1. Check out the styleguide.md file where you'll find the specified font for this project and colours which are to be used in the p tag in the code. You can find and import this font (called Outfit) from Google Fonts

  2. It would really help out to check the Figma file for this task to see the exact styling details for the design

  Well done again on making progress with this task!

  0
• 

  Brian Muniz Silveira•120

  @BrianMunizSilveiraPosted about 15 hours ago

  Feedback for Your QR Code Component

  Hello! It's great to see you working on layouts, especially as a backend developer. Building layouts with HTML and CSS is such a valuable skill, and it's always useful in full-stack projects.

  Your code is well-organized! Here are a few suggestions that might help you improve further:

  ---

  1. Remove Duplicate background-color Declaration:

  • In your code, you declared background-color twice for body, html. The #f0f0f0 value is already applied correctly, so you can remove the line with background-color: azure to avoid redundancy.

  ---

  2. Responsive Images:

  • You're using width: 100% for your images, which is great! This ensures that the layout adapts to smaller screens. However, you should also consider adding max-width: 100% to ensure the image doesn't exceed its container size. Here's how you can adjust it:

  .card img {
      width: 100%;  /* Ensures the image fills the container */
      max-width: 100%; /* Prevents the image from exceeding container width */
      height: auto;  /* Maintains the aspect ratio */
  }
  

  ---

  3. Typography Improvements:

  • You might want to make the h3 title slightly larger or bold to enhance the visual hierarchy. Consider using:

  .card h3 {
      font-size: 20px;  /* Makes the title a bit larger */
      font-weight: bold;  /* Makes the title stand out more */
  }
  

  ---

  4. A11y (Accessibility) Improvement:

  • Always add an alt attribute for images to improve accessibility. For example, the QR code image could be more descriptive like this:

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

  ---

  5. Remember Responsiveness:

  Ensure that your layout works on all screen sizes, not just desktop. Consider using media queries to adjust font sizes, padding, and the layout for smaller screens. For example:

  @media (max-width: 600px) {
      .card {
          width: 90%;  /* Makes the card more flexible on small screens */
      }
  
      .card h3 {
          font-size: 18px;  /* Smaller font for mobile */
      }
  }
  

  ---

  These small improvements can make your project even more polished and responsive. Overall, great job, and keep practicing! If you need more help with front-end work, feel free to reach out. 😊

  0