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 Component for Newbies

@vaibhavbshete

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


How do you go about measuring the dimensions units from the given jpg? I have used ms paint and figured out the sizes in pixels. What are the units recommended?

How to check if design matches pixel perfectly?

Community feedback

Eduardo 200

@EDDuardOo-Code

Posted

Congratulations completing your challenge

About measuring the dimesions of the units, if you want a tool , photophea (it is free) it is a really good option, it works like photoshop but on the browser and there is an option to measure the images, but if you want something more profesional there is Figma

About what measuring units are recommended, we want the desing to be responsive, usually we use rem,em ,vh or vw 1rem=16px Units and measures also if you want to change the measures here is a rem to PX calculator Calculator RemPx

About the last question, I think you should look at your desing and compare it with the web you are building,

keep the good work

Marked as helpful

0

@vaibhavbshete

Posted

@EDDuardOo-Code Thank you so much for the guidance. Have updated the code. photopea didn't open for some reason, but used pixlr to a similar effect. Units conversion tool nekocalc was very effective. I have also done a trick this time - I overlaid the reference design with lowered opacity and then tweaked the code till it matched fairly well. Now the solution and - design slider also shows a very closely matching design! Is this considered cheating?

1
Eduardo 200

@EDDuardOo-Code

Posted

@vaibhavbshete you created a solution my friend, as long as your solution match the result and you didn't hurt anybody, everything is good,

keep the good work and hope to some more of your work

Marked as helpful

1

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