Skip to content
Submitted about 1 year ago

QR code component using html5 and css custom properties

Pappyjay•170
@Manifoldbit
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

What are you most proud of, and what would you do differently next time?

I am able to write html and css

What challenges did you encounter, and how did you overcome them?

css

What specific areas of your project would you like help with?

css

Community feedback

  • Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

    Hi, Pappyjay👋. Congratulations on completing the challenge! 🎉

    Here are some suggestions after taking a look at your code to make it even better that might interest you:

    HTML:

    • The <main> element should wrap around the entire component. Using the <header>, <main>, <footer> elements provide structural clarity, accessibility improvements, SEO benefits, and facilitates responsive design. It helps you create well-organized, maintainable, and user-friendly web pages.
    • It's important to note that the alt text should be descriptive but concise, conveying the essential information without being overly long. It should provide a meaningful summary of the image's content and purpose. (Eg: alt="QR Code for frontendmentor.io")
    • Starting with <h1> and working your way down the heading levels <h2>, <h3> etc. helps ensure that your document has a clear and consistent hierarchy. Source
    <body>
    <main class="container">
        <div class="card">
            <img class="card-image" src="images/image-qr-code.png" alt="QR Code for frontendmentor.io">
            <h1 class="card-heading">Improve your front-end skills by building projects</h1>
            <p class="card-description">Scan the QR code to visit Frontend Mentor and take your coding skills to the
                next level</p>
        </div>
    </main>
<footer><div class="attribution">...</div></footer>
</body>

    CSS:

    • It's better to apply styles using classes rather than IDs. Reserve IDs for JavaScript functionality and use classes for applying styles. This helps to avoid specificity issues.
    • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    CSS resets that are widely used:

    Reset CSS

    "My Custom CSS Reset" by JoshWComeau

    • Using advanced layout features like Flexbox and Grid can provide more efficient and flexible ways to create complex layouts and manage spacing between elements. Flexbox is generally the best modern layout method to use for flexible responsive structures. Grid would be used for content where you want better control of their layout using columns and rows. This article explains it quite well Link as well as this video by Kevin Powell which demonstrates in practice when you would use which Link (NB. You can also combine them in an application, it all depends on the use-case)
    • If you want to build the most-accessible product possible, you need to use both pixels and ems/rems. It's not an either/or situation. There are circumstances where rems are more accessible, and other circumstances where pixels are more accessible. Link
    • To center the content properly and make your layout more flexible, consider using min-height: 100vh. This way, your content will adjust to fit the screen height regardless of the device.
    • You can use the max-width, margin and padding to control the width and position of your elements. For example:
    .container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;    
}

.card {
    max-width: 20rem;
    background-color: hsl(0, 0%, 100%);
    border-radius: 0.938rem;
    text-align: center;
}

.card-image {    
    width: 90%;
    border-radius: 0.625rem;
    margin: 5%;
}

.card-heading {
    margin: 2% 5%;
    padding: 0 5%;
}

.card-description {
    margin: 5% 5% 12%;
    padding: 0 5%;
}

    I hope you find this helpful! 😄 Keep up the great work! 👍

    🖥️Happy coding!

    Marked as helpful
    0
    Pappyjay•170
    @ManifoldbitPosted about 1 year ago

    Thanks a lot, this was really helpful...@kanishkasubash

    0
  • hitmorecode•6,250
    @hitmorecodePosted about 1 year ago

    I took a look at what you did and I have a few pointers

    • Avoid using css style inside the elements, use css file for this
    • Don't use <br> if it's not necessary, in this case it's not.
    • You used position on every selector, again only use position when necessary. In this case it's not necessary to use it.
    • This is how your css structure should look like (this will make things easier)
    <body>
  <main>
    <div class="card">
        /* everything goes in here */
    </div>
  </main>
</body>
    Marked as helpful
    0
  • Hosseinfm•10
    @HosseinfmPosted about 1 year ago

    To fix this problem, you must use padding-left in your css code.

    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