Submitted 3 months ago

QR code

ilyesfennour•60

@ilyesfennour

Preview site View code

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?

It was an easy task to accomplish. Enjoyed it very much.

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

a space between the image and the text. I added a display: flex to their parent to remove it.

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

I'm having an issue with the spacing between the image and the text. When I add a display block to the box (content), with margin and padding set to 0 for the text and the image, I still end up with a 4px space that I can't figure out how to remove.

Community feedback

Ahmed-Abdul-ghaffar•40

@Ahmed-Abdul-ghaffarPosted 3 months ago

Hello there, great job on completing the challenge!

I have a few small suggestions that I believe could enhance the professionalism of your code:

Semantic HTML: It's a good practice to use elements like <article> to wrap your content. This not only helps with semantics but also makes your code more meaningful and accessible. For example:

 <body>
    <div class="container">
      <article class="qr-component">
        <img
          class="qr-component-img"
          src="images/image-qr-code.png"
          alt="qr code image"
        />
        <h2 class="qr-component-title">
          Improve your front-end<br />
          skills by building projects
        </h2>
        <p class="qr-component-title-description">
          Scan the QR code to visit Frontend<br />
          Mentor and take your coding skills to<br />
          the next level
        </p>
      </article>
    </div>
  </body>

CSS Class Naming: In larger projects, it’s helpful to use clear and descriptive class names in your CSS. This makes your code easier to read and understand without constantly referencing the HTML. Here's an approach that can improve clarity:

.qr-component-img {
}
.qr-component-title {
}
.qr-component-title-description {

}
.qr-component {

}

That's all I have for now. I hope you find these suggestions helpful.

Keep up the great work and happy coding!

Marked as helpful

Danish•80
@Danish030Posted 3 months ago
it is helpfull, comparing to my design i need improvemnet in selectiong the right size
1

Please log in to post a comment

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