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

HTML/CSS QR code component

@hobbycoder7

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


I'm not very "artistic". I find it hard to visualize things. I was able to use a Chrome extension to overlay the design image and fiddled with CSS in developer tools until I was able to create my solution. How do you go from Idea or Visual to code?

Community feedback

nerometa 250

@nerometa

Posted

First of all, that was great. Your design is pretty similar to the challenge's design. I might have to checkout PixelPerfect that you using though. It's interesting.

I think when it comes to transferring idea to code, you might have to do some UX/UI design beforehand like these challenges provide you. You can literally see how your code will look like on it.

Maybe you cannot 'see' how the page are structured. I think learning more about different HTML tags and what and how they're use is crucial here.

Maybe you don't know some of CSS properties. That explains you fiddling in dev tools, which I suggest you go check out CSS guides here: https://css-tricks.com/guides/ or you might have to learn the basics more.

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