Skip to content
Submitted about 2 years ago

HTML5 CSS3 Bootstrap5

Nathan Turkson•120
@nathan-codes
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

I would like to know the best practices to build this challenge and also ways I can improve my code to increase readability, flow and organization

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello Nathan Turkson, congratulations for your first solution!👋 Welcome to the Frontend Mentor Coding Community!

    Your solution its almost done and I’ve some tips to help you to improve it:

    Use <main> instead of <div> to wrap the card container, its better to use <main> in this case because you’re indicating that’s the main block of content of this page and also because <div> doesn’t have any meaning, it's just a block element.

    Something I've noticed in your code is that in many occasions you've added some <div> to wrap contents that don't really need to be inside of a div block. Note that for this challenge all you need is a single block to hold all the content, can be <div> or <main> if you want to use a semantic tag to wrap the content, the cleanest structure for this challenge is made by a block of content with div/main and all the content inside of it (img, h1 and p) without need of any other div or something. See the structure below:

    <body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
 <h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    Nathan Turkson•120
    @nathan-codesPosted about 2 years ago

    @correlucas Thank you so much for the feedback I truly do appreciate it. I always had trouble following best practices and making use semantic tags and so I joined this community to improve this deficiency. Based on your feedback, I'll hope right on it and make some adjustments to my solution. Thank you again for the feedback, this junior self taught dev somewhere in Africa really appreciates it a lot.

    1
  • Elaine•11,400
    @elaineleungPosted about 2 years ago

    Hi Nathan, well done on completing your first challenge, and I just want to follow Lucas by giving you a warm welcome to the FEM community 😊

    I had a peek at your code, and in terms of best practices, I think I can offer some observations on what's commonly done as convention:

    1. I see that you used an id on your main element, and that you named it mainSection using camel case. The use of id here with the camel case would make sense if you meant to do something with it in JavaScript, but there isn't JS used here. While it's OK to use id, most people normally try to use classes for styling with JavaScript. If you do use a class here, it's more common to see kebab case (as in, "main-section") used in the CSS and not camel case.

    2. Instead of using height: 100vh, try min-height instead. To see why, try making the browser height smaller than the content, and see whether the top part of your card is cut off. Also, to have some spacing around the card, I'd add margin: 1rem to the main element.

    3. Lastly, I see that you're using Bootstrap! While I don't use it (I also don't use Tailwind), I generally think it's best that if you're in the beginning stages of learning CSS, you should try writing out the CSS and then see how to use Bootstrap to achieve the same thing. Sometimes it could be hard to trouble with CSS libraries, so it would be good if you become proficient enough with just plain CSS first.

    That's all the thoughts I have for now; I hope you keep experimenting with what you've learned, and I also hope you enjoy your time here!

    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