All comments

• 

  Mungai Simon• 150

  @theMungai

  Submitted 16 days ago

  

  Blog Preview Card with CSS

  1

  30

  

  Łukasz Gwarda• 40

  @lgwarda

  Posted 3 days ago

  Overall, this solution demonstrates strong foundational skills in both HTML and CSS. The use of CSS variables and media queries enhances maintainability and responsiveness. However, the link to the live demo does not work, which could hinder the presentation of the project. Additionally, ensure that the design matches the original specifications more closely, particularly in terms of size of the card width. Improving semantic HTML and ensuring all accessibility features are in place will further elevate the quality of this project. Great job, and keep refining your skills! If you have any specific questions or need further guidance, feel free to ask!

  Marked as helpful

  1
• 

  Brandon Jr Cortez• 30

  @BrandonJr20

  Submitted 7 days ago

  

  Primer ejercicio responsivo - Componente QR

  1

  30

  

  Łukasz Gwarda• 40

  @lgwarda

  Posted 6 days ago

  Your solution is well-structured and visually appealing, with a clean layout. It effectively meets the requirements of the QR code challenge. Here’s some specific feedback on key areas:

  • Use of Semantic Elements: The structure could benefit from additional semantic elements. Consider using <header>, <main>, and <footer> tags to enhance the HTML semantics. For example, wrapping the main content in a <main> tag can improve the document's structure and accessibility.

  • Image Alt Text: The alt attribute of the image could be more descriptive. Instead of "QR DE LA PAGINA FRONTEND MENTOR," consider using "QR code linking to Frontend Mentor website" to provide context for screen reader users.
  • Heading Structure: Since you have a heading (<h1>), make sure that it’s the primary heading of the page. If there are multiple sections, consider using <h2> for subsections to maintain a proper heading hierarchy.
  • Contrast: Check the color contrast between the text and background to ensure it meets accessibility standards. Tools like the WebAIM contrast checker can help you with this.

  • Media Queries: Your media query adjusts the card size well for smaller screens. However, consider testing it on a range of devices to ensure it looks good across various screen sizes.
  • Flexibility: You might want to explore using percentage-based widths or flexible units (like vw or vh) to enhance the adaptability of your layout.

  • CSS Organization: The CSS is generally clear and well-organized. For improved readability, consider grouping related styles together and adding comments to explain sections or complex styles.
  • Reusability: To enhance reusability, you could create utility classes for common styles (e.g., margin and padding) instead of applying them directly in specific classes. This could reduce redundancy in your CSS.

  • Design Differences: Ensure the visual design closely matches any provided specifications (if applicable). While the overall design looks good, verify that font sizes, colors, and spacing match the intended design.

  • Testing with Screen Readers: Try testing your page with a screen reader to see how the content is read. This will help identify any areas for improvement in accessibility.
  • Performance: If the image size is large, consider optimizing it for better performance, especially for mobile users.

  0