Skip to content
Submitted about 1 year ago

qr-code-component-main

waltertaya•110
@waltertaya
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

Community feedback

  • Mayank Arora•430
    @mayankdrvrPosted about 1 year ago

    Congratulations waltertaya for completing this challenge. Your design matches the solution very well.

    Here are a few observations-

    1. Below 348px width of screen, the text and container gets partially hidden and the text does not wrap. Maybe, you can make it more responsive by setting the maximum width of container to be upto 100% of width of body. See if using this CSS property in image styling can make the image more responsive- max-width: 100%;
    2. Try to use the Block Element Modifier(BEM) naming method as a good practice of naming classes for referencing html elements in the css file.
    3. Setting min-height: 100vh; on the body element in your CSS is a common technique used to ensure that the body of your web page takes up at least the full height of the viewport (the visible area of the browser window). This is often used to create layouts where the content expands to fill the entire screen, which can be particularly useful for single-page applications or websites with a full-screen design.
    4. Using css reset is also a good practice. A CSS reset is a set of CSS rules or styles that are applied to your web page at the beginning to reset or neutralize the default browser styles. This is done to ensure a more consistent starting point for your own CSS styles, as different browsers have different default styles for elements like headings, paragraphs, lists, etc. By resetting these defaults, you have more control over how your website appears across various browsers.
    5. Google Fonts provides the option to load fonts via <link> tags or an @import statement. The <link> code snippet includes a preconnect resource hint and therefore will likely result in faster stylesheet delivery than using @import version. Importing google fonts in the html head section is a good practice instead of importing them in the css file-
    <head>
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&family=Outfit:wght@400;700&display=swap" rel="stylesheet">
</head>

    Awesome solution and keep it up.

    0

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