Design comparison
Solution retrospective
First introduction to css without GPT
First test the simples solution before go on with more complex solutions, because i see so much and tried to use, fail hard and waste a lot of time.
What challenges did you encounter, and how did you overcome them?Don`t know how to center a div xD
Most of thing just with some time I get it, but center a div make me so confused that I try everything to the simples ones up to more difficult ones and return to simples ones, just more slowly and it work.
What specific areas of your project would you like help with?I`m here to use css efficiently and responsive
So if I could recive advice about hoe to use more clean css and assure the sites I design are responsive I gradly accept.
Community feedback
- @marjskyPosted 8 months ago
I see that you are using individual margin properties throughout your embedded CSS. I would like to suggest considering shorthand properties for margins to streamline your code and improve readability.
1 - @0xabdulkhaliqPosted 8 months ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your code that I believe will be of great interest to you.
QR iMAGE ALT TEXT 📸:
- Since this component involves scanning the QR code, the image is not a decoration, so it must have an
alt
attribute.
- The
alt
attribute should explain the purpose of theimage
.
- E.g.
alt="QR code to frontendmentor.io"
<img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">
- Additionally the radius of component is not well applied because of using
%
units, instead you can use relative units likeem
&rem
, For example:
.container { border-radius: 1.5rem; } img { border-radius: 1rem; }
- Here we added border radius for both wrapper of component and qr image so that it would like as same as design provided by FEM.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
1@Juan1423Posted 8 months ago@0xabdulkhalid Why using % units is wrong? Could you explain it please and what unit are better for specific uses?
0@0xabdulkhaliqPosted 8 months ago@Juan1423, If we use
%
units for minute things likeborder-radius
then it will respond according to our device width and height. So this will make the website's elements to look weird on mobile & desktop.You can
%
forwidth
andheight
it would absolutely helpful in these cases but not for styling minute details.0 - @ad-monir2001Posted 8 months ago
Hey, Nice work . You have worked hard to solved . Nice coding ,
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