QR code component using Flexbox and custom box-shadow

Solution retrospective
I'm proud that I finally overcame the fear of starting and completing a project. This was my first Frontend Mentor submission, and I learned how to center elements using Flexbox and style components using shadows and custom fonts.
Next time, I would try not to rely on external help too early. I want to build more confidence by solving layout issues on my own first.
What challenges did you encounter, and how did you overcome them?One of the main challenges was understanding how to inspect design dimensions from just an image. I used Figma to estimate the size of the card and padding. Another issue was unwanted space below the image, which I fixed by using display: block
on the image tag.
Also, I was initially nervous to even start the project, but breaking it down step-by-step helped reduce the fear.
What specific areas of your project would you like help with?I'd like feedback on my use of pseudo-selectors like :first-child
and :last-child
for styling elements. Is that a reliable method in professional projects, or should I use class-based selectors?
Also, any tips to make my layout more responsive without using media queries would be appreciated.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @mustafasen97
Your design is great. Feel free to use media queries. This is often necessary for responsive design.
Is Using :first-child, :last-child Professional?
- Yes, it can be used in professional projects.
However, you should pay attention to the following conditions:
When is it safe:
-
If the structure is static and will not change (for example, if there are 3 fixed blocks).
-
In semantically meaningful places like ul > li:first-child.
When is it dangerous:
-
When the element order in the DOM can change (for example, if the list is sorted with JS).
-
When other developers will add to it later and rely on the order
Suggestion:
Selectors like :first-child, :last-child:
-
Should be used with utility or special class names,
-
Or in critical cases, should be overridden with the class.
I hope this helps you. Good luck with your future designs.
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