@correlucas
Posted
👾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, use CLASS that’s better, note that with id these styles are not reusables, so prefer to use ID forms and Javascript and CLASS 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 between width and max-width is that the first(width) is fixed and the second(max-width) is flexible and make the element shrink when the screen starts to scale down. So if you want a responsive block element, never use width choose or min-width or max-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!
@Flexowitsch
Posted
@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
