Skip to content
OverviewSolutions
1
Comments
1

Phillip Cantu

@hereisphilAntigua, Guatemala30 points

American. Digital Nomad. Full Sail University web dev student. Bolt.new, Lovable.dev, and Cursor user.

Latest solutions

Latest comments

  • Phillip Cantu•30
    @hereisphil

    Hi @LegionofDead,

    Great job on completing the QR code component challenge and getting a solid solution up! Here’s some feedback I hope you’ll find helpful:

    • README file: Your repo doesn’t have a personally updated README.Adding even a minimal README with details like your process, and credits will improve professionalism and help others (and future you) understand the project quickly.

    • Semantic HTML: You used good structure with the container and clear heading hierarchy (nice use of an h1!), but you could improve accessibility and document semantics by wrapping your main content in semantic elements like <main>, <section>, or <article>, and moving the attribution into a proper <footer> element instead of a generic div.

    • Footer attribution links: Good job adding the attribution text, but don’t forget to add both rel="noopener noreferrer" and target="_blank" for better UX.

    • CSS resets and root variables: Nice job importing Google Fonts, setting up root color variables, and using a minimal reset – that’s solid practice.

    • Media query: Including a breakpoint at 500px to adjust the container width shows attention to responsive design, which is excellent at this stage.

    • Accessibility & alt text: Consider adding a descriptive alt text to your QR image instead of leaving it empty; even something like alt="QR code linking to Frontend Mentor" helps screen readers.

    • Additional tip: In your CSS, you could group typography styles (like text-align: center) into a shared class for better reusability, instead of repeating them in multiple selectors like .container h1 and .container p.

    Overall, you’re off to a great start with clear, readable code and thoughtful styling decisions. A few small tweaks like adding semantics, enhancing accessibility, and updating the README will really take your solution to the next level.

    Marked as helpful