Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

qr-code using css

@rafe-designs

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Creating a card was my proudest moment. i'll try making the card better and similar to the sample

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

trying to make the QR section of the card just like the design was alot harder and even after spending sometime on goggle i still couldn't get it to look exactly

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

how to make the card exactly like the design

Community feedback

@DylandeBruijn

Posted

Hiya @rafe-designs,

Welcome to Frontend Mentor and congratulations on your first solution!

I'm happy to give you some friendly constructive feedback:

  • At the moment your card is pretty small which makes the QR code hard to scan. I suggest removing the height and width restrictions on the img and putting a max-width: 100% on there. Also it seems the image you use is different from the one provided by the challenge. I suggest taking another look at the challenge briefing.

  • Try using more descriptive classes like .card and .card-title. This makes it easier for you to style your elements and for other developers to read your code.

  • You could try using an article element for you card instead of a div to give it more semantic meaning.

  • Try putting the font-family on the body element instead of your card. This way you make use of the cascade. In other words all children of the body will inherit the font-family of the body. You can always overwrite the font-family for specific elements by setting it explicitly!

  • CSS classes by convention are in lowercase like so .qr-code-card, instead of Qr-code-card.

I hope you find my feedback helpful, as always I would appreciate it if you could mark my comment as helpful when it was!

Let me know if you have more questions and I'll try to answer them.

Marked as helpful

2

@ItxUzair1

Posted

There is no any semantic tags used in code but next time I will used them. The code is readable and simple. It is also well structured

0

Please log in to post a comment

Log in with GitHub
Discord logo

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