QR Code Component Challenge by Luc Lhote

@PhoenixDev22

They are some points I am not agree with.

1- I had doubt about it. In my way to approach it I decided to not put a text. A person with vision issues, for example, may never seen how looks a QR code and, even, if the image/QR generator doesn't load, the alternative text brings no useful information, for a QR code at least. It will precise that it is a QR code and then what do the user? He quits the page because it doesn't content the main information of it (I'm talking about the case of that challenge). In fact my deep reflection is that this image (the QR) should be transform into a link. This would be more useful than an alternative text. Because yes the image contains an information but it is a link at the end. And maybe a QR will never be scan by some people with visual issues, it would be faster for them to click the link. I guess that, I don't have visual issues and I don't talk for them but I imagine the complexity of these things for them. By the way, I didn't do the link in my code because I forgot to apply it, I will fix that.

2- About the second point, I decided to follow the size the author(s) used. I am used to produce with relative sizes for the pages, but here, the real challenge for me was to see how to counter troubles with a fixed body width and make it responsive and the experience was interesting. It helps to face cases we could meet with design teams into a company and how make everyone happy to produce a solution quick and efficient.

3- Still about the second point, you say: "In this challenge, there is no need for any media query". Where is it wrote that this challenge doesn't or does need media queries? You can use whatever you want to arrive the final result. I wanted to use the principe of media queries as they answer the need for responsive websites. You coded it your way, and my way needed a media query, to work on the fixed size issue. Plus, a responsive website has to be responsive everywhere. It is exactly why media queries exist if you want to modify a page according to the device type and screen dimension for example. Maybe I could do easier, it is true, but I want to practice them.

4- About your third point, I didn't notice that before. I did some tests and actually it is the browser who brings this bug. Before I start to work with GitHub I was all the time testing with resizing the window on computer. It is a bad habit I have. I also saw a way to counter this with the property/value height: webkit-fill-available;. I will test your counter and the one I found thanks for the tip!

5- About your last point, as said already, I understand about the relative size for the font. I never use fixe values usually. I just used the values provided by the file and it allowed me to reproduce something similar to the design. With this I arrive to imagine approximatively the card size. And as already said, soon as the size wasn't precise I used the rem unit. I could convert but I am not gonna lie I chose the easy way here.

@LucLhote

Apologies for the delayed reply.

I value the time you have taken to explain your opinion. You have shared many ideas and insights that are helpful.

I'm not trying to say that you my vision is correct and has to be followed by everyone. I'm still a learner too. I agree with with that everyone has his approach for the challenges and I'm only suggesting , it's up to you, you want take those suggestions on board or not.

Thanks a lot for the valuable advice put yourself more in the skin of the dev in front of you., I'll remember whenever have a look on any dev's codes.

Sorry for any misunderstanding.

Hi @PhoenixDev22,

No problem at all, you pushed me to analyze my work deeper and allowed us to have an interesting exchange on our ways to approach the project. I even mentioned you in my README! 😁

I may have misunderstood the tone of your posts which made me respond the way I did so I also apologize too. Really thank you for taking the time to see the work I have done.🙂

Hello @PhoenixDev22 !

Thank you for your feedback, I really appreciate. Let me explain you more in details my choices.

• For me what is needed is just the alt attribute. If the image is not something use to point a key point or descriptive content, there is no need for a text. According to the fact it is a QR code supposed to be scan, according to my reflexion, I decided to not add a text. You can check that link for more details about it: alt attribute
• About the max-width: 1440;, I did this especially because of the max width of the body. In adding the width property set up at 100% for the body in my media query, soon as the window size will change, the QR box will always be visible, in the middle. Usually, in the projects I worked, there is no a fixed size for the width of the page. It is to counter this that my media query is useful. If the body doesn't decrease his size even with another container inside that could, you will see a scroll bar and you will be able to go left right for 1440px.
• About the using min-height: 100vh;, I don't understand the need. There will be no other content in the page, so width: 100vw is a good choice for me. If I had other thing to add, I would probably do another choices, who knows.
• About the width: 285px;. Did you see the mobile version and desktop version? The size of the QR box is always the same. I don't like so much to use fixed values, but it seemed to be required. That's why I chose this. I just respect the expectation of the design, even, I agree, there is other ways to do.
• About the choice to use px unit for the font size, in the file style.guide.md provided with the files for this challenge it says: * Font size (paragraph): 18px*. I never use this unit for the font. If you watch the code, I use rem unit when the size is not specified.

Thank you to share your points and to take the time to watch what I did!