Design comparison
Solution retrospective
I'm most proud of... making my design more accessible. Not only did I only use semantic HTML (no or
tags here, but also took the extra step to make the QR code into a clickable link as well. Just in case anyone doesn't have a smartphone handy to use, or they want to follow the link on their laptop.
Next time, I would.... delve into media queries more. I didn't really do that this time as I felt it was unnecessary for the size of the element in the project. In lining up with my ideas above, I'd also want to use more adjustable sizes. This time I used {px} as the unit of length to adjust everything but I'd like to use {em} or {rem} units more once I understand them a bit better.
What challenges did you encounter, and how did you overcome them?I struggled to figure out a way to seperate out the attribution from the card element. I didn't want it just under the card but hovering on the bottom of the page, but I didn't realise there was no {justify-self}
property when using Flexbox! While I was browsing other people's solutions for some inspiration, I came across @vanillatte68's solution! It reminded me of the {position}
property, and lo and behold, a quick peek on MDN Web Docs to remind me how to use and the problem was solved.
I'd love to know whether using {px} as the unit of length is acceptable for webpage design or if it's better to use units like {em} or {rem}? On this thread, I'm also wondering if there are some simple rules to follow when using these units or was my approach of adjusting it bit by bit until it looked right the accepted standard?
Is a media query necessary for something like this? If the main element is already narrow enough to be read on a mobile screen does it really need all the extra bells and whistles to scale it down? Feels like you would be doing a lot of extra work for something unneccessary or am I seeing this wrong?
Any other feedback on how to make the code better, more readable or even using less lines would be very much appreciated!
Community feedback
- @Marvie-03Posted 6 months ago
After checking your code, I saw you included metatags in the head section. It stood out for me. Great Structure and semantics too
0
Please log in to post a comment
Log in with GitHubJoin 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