Testimonial FlexBox

Community feedback

• 

  RogerTito455•170

  @RogerTito455Posted 3 months ago

  Your HTML and CSS implementation for the testimonial grid is well done! Here’s some feedback to help you refine it further:

  HTML Feedback: Semantic HTML:

  You're using div elements effectively, but consider using more semantic elements where appropriate. For example: Wrap the entire content in a <main> tag instead of a div with main-container. Each testimonial card could be an <article> element instead of a div with a card class. Alt Text:

  The alt text for images is descriptive, which is good, but avoid using the word "icon" unless the image is purely decorative. Instead, use something like "Portrait of Daniel Clifford". Title Tag:

  Replace [Challenge Name Here] with the actual challenge name or a more descriptive title, like "Testimonial Grid Section | Frontend Mentor Challenge". CSS Feedback: Use of CSS Variables:

  Great job using CSS variables for your colors and typography. This makes your stylesheet easier to maintain and scale. Grid Layout:

  The grid layout is well-implemented. However, in your media query for mobile, consider using grid-template-areas for a more intuitive arrangement, especially if you have more complex layouts. Typography:

  Consider adding line-height to your text to improve readability, especially in longer paragraphs. Box-sizing:

  You’ve correctly used box-sizing: border-box; in the .card class, but it’s generally good practice to apply this globally to all elements: css Copiar código *, *::before, *::after { box-sizing: border-box; } Accessibility:

  To improve accessibility, ensure that there’s enough contrast between the text and background colors. For instance, you might want to check the contrast between the white text and var(--moderate-violet) or var(--very-dark-grayish-blue) backgrounds. Consistency:

  There's a typo in your CSS variable names: --very-dark-blackish-blue-light-trasparency should be --very-dark-blackish-blue-light-transparency, and similarly for --very-dark-blackish-blue-hard-trasparency. Font Size and Units:

  The use of rem instead of px for font sizes and margins/paddings is recommended for better scalability across different screen sizes and devices. Responsive Design:

  Your mobile styles are well handled with a media query. However, consider using a mobile-first approach where the base styles are designed for smaller screens, and then using media queries for larger screens. This approach tends to be more efficient and easier to maintain.

  0