Frontend Mentor | Ahmed-Abdul-ghaffar's profile

@ilyesfennour

Submitted about 1 month ago

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.

QR code

Ahmed-Abdul-ghaffar• 30

@Ahmed-Abdul-ghaffar

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

Ahmed-Abdul-ghaffar

All comments

QR code