Skip to content
Submitted about 2 years ago

Kickoff Solution for Frontend Mentor QR Code Task

Flexowitsch•160
@Flexowitsch
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

First project on GitHub

Community feedback

  • Lucas 👾•104,340
    @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, 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!

    1
    Flexowitsch•160
    @FlexowitschPosted about 2 years ago

    @correlucas Hey thanks for the feedback.

    1. I didn't use the provided index html. I probably havent added it thus.

    2. 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.

    3. 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 GitHub

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