Frontend Mentor | QR-Code-Card With [HTMl && CSS] coding challenge solution

@Mar1362

Posted 22 days 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

Kal• 30

@CodeCrafter-kal

Posted 22 days 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 !!

Mamadou Mar• 550

@Mar1362

Posted 22 days 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

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

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community