All solutions

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

I'm proud to finish this whole project and make the component look as similar as possible to the given end result image.

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

1. I found it difficult to center the author's name. I fixed it by setting vertical-align: middle to the image element.
2. I changed the text color of the title when it receives focus and found that there is a default border when the title receives the focus. At first, I did not know how to remove the border but later learned that I could use outline: none; for it.

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

1. Accessibility
2. Code readability and reusability
3. Could someone please tell me what should be the behavior of this project on orientation change of a mobile device?
4. I would very much appreciate any suggestions that could improve my skills.

Thank you so much!

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

I'm proud to finish this whole project and make the component look as similar as possible to the given end result image.

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

1. Font size - I had to search the web first on how to include a specific font to the project. Also, I had difficulty identifying the font size. I used the given 16px size but for some reasons, I cannot get the exact look of the title of the QR code. I'm also new to reading a Figma file so that's another challenge.
2. Card size - I'm not sure if I used the correct size for the QR code area with the white background. I just guessed the size by comparing the given solution image and my solution.
3. Shadow - I'm not sure if there is really a box shadow or is it just in my imagination. (Haha!) I ended up not doing it. :(

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

1. Accessibility - I'm not sure if the HTML elements I used are accessible. Could you please check my work and provide feedback regarding this?
2. QR Code Size - As I mentioned above, I guessed the size of the QR code container. Where can I get this information from the given files?
3. Font Size - I used em as the unit of measure for the image's title. Could you please advise if this is correct?
4. Code readability and reusability - Any feedback about how I coded this project will be appreciated. Thank you so much!