Skip to content
Submitted 2 months ago

QR-Code-Card With [HTMl && CSS]

Kal•30
@CodeCrafter-kal
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

finally I have done it, I think for next time I will see deeply about measurement units and there effect on d/t screen resolution

Community feedback

  • Teodor Jenkler•3,740
    @TedJenklerPosted 2 months ago

    Hi @CodeCrafter-kal,

    Nice project! Here are a few suggestions for improvement:

    ARIA Labels: When using div elements where semantic HTML isn’t possible, add aria-label="" to describe the content. This will improve accessibility for screen readers.

    OG Meta Tags: Practice using Open Graph (OG) meta tags to enhance SEO and improve how your site appears when shared on social media.

    Extra Challenge: Try creating a custom QR code as a fun exercise. You could include a secret message or a link to your socials, which is a great way to play with new skills and learn.

    Hope these suggestions help!

    Best, Teodor

    Marked as helpful
    0
  • Mamadou Mar•550
    @Mar1362Posted 2 months ago

    hi friend this is an awesome work, i really like it, in the render as well as in the code. there is not much to say. i was not so good like that at my begenning you're a genius. here are just some adjustment to think about hope it'll help you improve:

    In the HTML code you must know that the img tag is an "inline" element so you must always put it in a "block" element like, in this case, figure tag which is more suitable in my opinion. Moreover, you don't really need to wrap your heading and paragraph into a div element you can put them directly without the div. If there is something to wrap, it will be card itself into an article element. you can learn more about semantic HTML here. In order to see what i really mean take look at the code below:

    <body>
  <main>
      <article class="card">
          <figure><img class="qr-code" src="./images/image-qr-code.png" alt="A QR code"></figure>
           <h1 class="text-heading">Improve your front-end skills by building projects</h1>
           <p class="text-para">Scan the QR code to visit Frontend Mentor and take your coding skills to the <span>next level</span></p>
      <article>
  </main>
</body>

    here you go. It is just a suggestion and always remember there is not one best way to do stuff in coding. Hope you learned something from this friend.

    At your CSS, you must know that :root{} is the same that html{}. you might think that :root{} is just for declaring css-variable but you must know that :root{} is just a pseudo-class that refers to html{} so there is no need to use both you can use only one: read this. we use to declare css variables at the :root{} so that it can be inherited by all the document since variable are inherited. read this quickly for a better understanding.

    And that's all for me friend. Great continuation genius. Happy codin (:0)

    Marked as helpful
    0
    Kal•30
    @CodeCrafter-kalPosted 2 months ago

    everything what you say is correct tank you for your support !! to follow HTML5 semantic best practices, making the content more accessible, meaningful, and maintainable but i thought for :root{} and html{} Use html { font-size: 62.5%; } because it's the proper way to set the base font size across your website. b/c approach ensures consistency and easy to remember. I am also beginner Thank you for your time and support b/c you i have seen my mistake !!

    0
    Mamadou Mar•550
    @Mar1362Posted 2 months ago

    hello @CodeCrafter-kal, you're welcome friend we are just trying to improve together it's normal. I see what you mean but :root{} and html{} are literally the same thing. In fact, i always set the base font size inside the :root{} and it works well otherwise you can declare the variables and the font size inside the html{}. But it doesn't really matter you can use both it was just for explaining some concept for better understanding. Good continuation genius

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord