Skip to content
OverviewSolutions
2
Comments
2

PromiseSyl

@Program-doctorNigeria40 points

A female frontend developer and an entrepreneur.

Latest solutions

Latest comments

  • PromiseSyl•40
    @Program-doctor

    Clean and readable structure, well done! I would recommend adding a <meta viewport> tag for mobile responsiveness and using more semantic tags where possible. Also, consider improving accessibility by enhancing focus states or adding tabindex where needed. Great start overall!

  • Rhys Hatton•30
    @RhylaxNorlax
    What are you most proud of, and what would you do differently next time?

    The overall look of the site, it looks very close if not exact of the image provided.

    What challenges did you encounter, and how did you overcome them?

    I struggled trying to move the layout into the middle.

    I overcome this by using Flexbox within the body properties and justify and item aligned to center.

    What specific areas of your project would you like help with?

    I don't think I need any, it's completed.

    Flexbox responsive site displaying QR code for Frontend Mentor.

    2
    PromiseSyl•40
    @Program-doctor

    Hey! Great start — your file is well-organized, and you’ve already covered key details like responsive meta tags, Google Fonts, and an accessible alt text for the image — that’s solid.

    That said, there are a few improvements I'd suggest to make your code more semantic, clean, and accessible:

    1. Use Semantic Tags Instead of Excessive <div>s Right now, the layout is very <div>-heavy (.flex, #qr-container, #qr-head, #qr-body), but HTML5 offers semantic elements like <main>, <section>, and <figure> that improve accessibility and meaning.
    <body>
  <main class="container">
    <figure>
      <img src="./images/image-qr-code.png" alt="QR code for Frontend Mentor">
    </figure>
    <section>
      <h1>Improve your front-end skills by building projects</h1>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level.</p>
    </section>
  </main>
</body>
    <main> = Primary content of the page <figure> = Wraps the image (especially since it’s key visual content) <section> = Wraps the heading and paragraph
    1. Avoid Redundant IDs or Classes IDs like #qr-head is not needed unless you plan to style or manipulate them separately. Since it is not referenced in CSS, they add clutter.

    Fix: Remove them or replace with meaningful class names if needed (.qr-image, .qr-text)

    1. Use BEM or Clean Class Naming (Optional) If the project grows, class names like .flex, .container, .qr-body might start clashing or becoming too vague. Consider adopting:

    BEM (Block Element Modifier) — e.g., qr-card__image, qr-card__text

    Or just clear, flat naming like qr-card, qr-content

    1. Add lang Attribute and Meta Accessibility Notes Nice job adding the lang="en" and an informative alt attribute for the image, that’s good accessibility practice.
    2. Optional: Wrap Headings in Logical Hierarchy If this were part of a larger page, make sure to only use one <h1>, and go down the line (<h2>, <h3>) appropriately. In this small project, a single <h1> is totally fine.

    Overall, you’re off to a great start. Just replacing some divs with semantic tags and simplifying your structure will go a long way. It’s clean now — but with these changes, it’ll also be future-proof, accessible, and easier for others to read and maintain.

    Keep building! 💪 Let me know if you want help refactoring or applying this to your next project. Feel free to reach me on Linkedin

    Marked as helpful