All solutions

Please let me know if you have any feedbacks, thanks!

Didn't run into any particular difficulties with this one, though having recently learned Grid, I was contemplating using it for making it responsive, but ended up going back to Flex in the end. Would you have used Flex or Grid for such a project?

I feel like I struggle a bit with making things responsive. I have so far started off making the desktop version first, and then moving on to the mobile view, and usually have to experiment quite a bit to make everything responsive and presentable. One problem I had for example was the fact that when stacked in the mobile view, elements that are stacked at the top simple get cut off, and there is no way of scrolling up there (due to being in a negative position I presume), which I was able to fix by removing my justify-content: center. However I feel like there has to be a more standard way of making it responsive? Any suggestions on best practices in this case?

Was having difficulty making it more responsive. I was able to use mediaquery to set breakingpoints, however before the page is shrunk down to the breaking point, the card was already half off-screen due to lack of responsivity. Any suggestions?

I ran into a problem with flex box, and that is for the "Annual Plan" part of the website, I couldn't quite get it to align at flex-start, so I had to resort to using -margin to get it to move there, which seems less than ideal. Please let me know if you've spotted the problem, thanks!

I found target certain elements slightly challenging, as several elements had the same margins, but I didn't want to have an impact on the margins of their children. I wanted to keep individual targeting down to a minimum to keep the code as clean as possible. And I guess that is the thing I am most unsure of: whether or not the code in the end is clean or not. One thing that I was wondering about as well: How do I ensure what I had in the end was as close to the model images as possible. Besides the font size for the paragraph being provided, I had to eyeball everything else. Are there any best practices in this regard?

While I was working on this challenge, I came across two issues that I couldn't solve:

• When making the edges of the "container" (the one that housed the QR code and the text) rounded by using border-radius, I was unable to make it smooth; for some reason there are somewhat jagged edges
• When zooming in on the browser, the top would become cut-off, and I would be unable to scroll to the top to view the content there

Please let me know if you know what is causing the problems, thanks!