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

responsive design with bootstrap card and flexbox, node packages

@skozmi

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


Thanks in advance to anyone who decides to leave feedback - it's much appreciated!

Community feedback

stenito 80

@stenito

Posted

Hi there!

Seems like you did a good job! I would try to respect the design sizes though. In a professional setting, that’s what will be expected.

It’s harder when you don’t have a pro account because you have to figure out the sizes from a jpg which is not always easy. You can use an image editor (photoshop or free: gimp) to figure out the sizes of all elements. Font sizes are harder. You could set the design jog as a background in your html, set your card html element to opacity 0.5 and then adjust sizes and other properties. It’s like a template under your work.

Marked as helpful

0

@skozmi

Posted

@stenito Thank you very much for feedback! Yes, you're right... I can't determine the sizes too precisely for responsive design, I'm doing it roughly and mostly non-dynamic. Also, I have adobe photoshop but in this case I didn't use it for image processing. You have good idea :) Greetings!

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