Skip to content
Submitted about 1 year ago

QR Code Component(HTML, CSS)

SolidEnder•120
@SolidEnder
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

So this was my first project I started with FEM, so me and this one go way back. I was new to really working optimizing web pages- I knew about media queries, I just wasn't used to working with them, so this took a lot of figuring out for me. I didn't even figure out how to modify it for the desktop view, so I just kind of sought assistance from an AI, and learned... never go to an AI to help you write your code, because it way overcomplicated the code that I was writing, and basically I was using a lot of clamps and the calc function to center things. So eventually I just kind of had to rewrite a lot of the CSS entirely. I also used relative instead of absolute positioning for the text elements unlike what I've been doing, which has made things a little bit easier and cleaned things up a little bit. And I'm mostly satisfied with how this came out. If anything I just think the text is a little bit too close to the bottom of the container. So if you have any feedback and suggestions on how I can improve on this one, or improve in the future, I'm open to it!

Community feedback

  • Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

    Hi, SolidEnder👋. Congratulations on successfully completing the challenge! 🎉

    Your solution looks good, and you've done a fantastic job overall! However, here are some small 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:

    • Using IDs for styling in HTML and CSS is generally not considered a best practice. While IDs can be useful for targeting specific elements and applying unique styles, they come with some limitations and potential 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
    1
    SolidEnder•120
    @SolidEnderPosted about 1 year ago

    @kanishkasubash Thank you! I definitely thought I had a decent enough grasp of HTML and CSS before, but, even though I thought it looked serviceable at the time, I can see that it's not the best quality possible either. I've definitely been realizing with my submissions so far that I have a lot of room for improvement, especially in the areas of accessibility and maintenance, so it's been very humbling for me to hear the feedback from the seasoned users on here such as yourself, and I really appreciate that! I pretty much just got around to learning grid, which has been quite the challenge for me so far, since the CSS I wrote for the project I'm working on started out differently, using just relative positioning for each element- so I'm basically in the middle of rewriting most of it at this point.

    I also didn't realize that the semantic HTML elements help so much with SEO and user accessibility until I read your comment either! That is one of the things I figured I was going to have to learn sooner or later, so I'll remember to use that with my upcoming submissions for sure.

    So I really appreciate your feedback! So far this has been a pretty fun experience for me, and I love how much I'm learning from the community.

    0
    Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

    @SolidEnder

    I'm so glad to hear that my efforts have been impactful. It's people like you who inspire me to keep doing my best. Thank you😊

    Keep up the great work! 👍

    🖥️Happy coding!

    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