Kickoff Solution for Frontend Mentor QR Code Task
Design comparison
Solution retrospective
First project on GitHub
Community feedback
- @correlucasPosted about 2 years ago
👾Hi @Flexowitsch, congratulations on your solution!👋 Welcome to the Frontend Mentor Coding Community!
Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:
1.Add the website favicon inserting the svg image inside the
<head>
.<link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">
2.Instead of use
ID
to give style to your elements, useCLASS
that’s better, note that withid
these styles are not reusables, so prefer to useID
forms and Javascript andCLASS
for styling.It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again.3.Fix the component responsiveness, its not working yet and this is due the
fixed width
you've applied to the container. The difference betweenwidth
andmax-width
is that the first(width) is fixed and the second(max-width) isflexible
and make the element shrink when the screen starts to scale down. So if you want a responsive block element, never usewidth
choose ormin-width
ormax-width
.Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR
✌️ I hope this helps you and happy coding!
1@FlexowitschPosted about 2 years ago@correlucas Hey thanks for the feedback.
-
I didn't use the provided index html. I probably havent added it thus.
-
id was used here since it is the only appearance of the UI element. I figured in a boarder scale this qr code card might be used as a modal or a popup. therefor the functionality might stay the same and thus i chose an ID over a class.
-
True. In the Figma file the Mobile and the desktop the Card had the same width. Therefore I worked with a fixed width. Do you have any recommendation how I can get percentages out of figma? In general, when suited I prefer using % for width etc.
BTW. cool darkmode design - when I know more about JavaScript I might work on this too
1 -
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