Skip to content
Submitted almost 3 years ago

QR Code Component Page made with pure classic CSS

styled-components
Little-Koder•30
@Little-Koder
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I don't think my HTML markup was well-thought-out, especially on naming IDs and classes. How do you... 1. Layout and plan your HTML markup? 2. Name your classes and ids? 3. Layout and plan your CSS styles? READ: For some reason, the screenshot isn't working properly, I also haven't learned how to make the site look good on all devices. Sorry!

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Lucas 👾•104,160
    @correlucas

    Hello Little-Koder! Congratulations for your first challenge solution, well done!

    I've looked your live site and you replicated really good the qr code card elements! I've some tips that you can consider applying to your solution, in case you're interest I'll let a list:

    1.To keep simple the challenge I would say you to try to use the attribution tag only when you'll have a concrete knowledge of centering elements. This can make a little bit harder your first challenge.

    2.You can wrap all the content inside the <main> that's semantically fine, no need for the extra element <article> and <figure> in this case. The structure can be only <body><main><img><h1></h1><p></p></main></body>. I wrote the structure here, fixing your html

    <body cz-shortcut-listen="true"> <main class="card"><img src="/img/image-qr-code.png" alt="The qr code image" class="qr-img"><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>

    3.No need to add <br> to the paragraphy, the line will break automatically when your set the card max-width.

    4.Classes, you don't need many classes in this challenge since you've only one h1, img and p. Work their properties in the CSS just using an img {} for example.

    5.Consider using flex instead of position: relative; to align the card center. Info about flexbox here: ://www.w3schools.com/css/css3_flexbox.asp

    6.You can separate the elements using padding-top, for example a padding-top: 12px; in the h1 and p.

    I hope it helps you bro, keep coding!

    Marked as helpful
  • Vanza Setia•27,715
    @vanzasetia

    Hi, Little-Koder! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉

    Regarding your questions,

    • For the HTML markup, I would keep it as simple as possible. Also, the card layout is straightforward. But, to answer your question about planning, I would plan the HTML markup for the desktop. After that, I would style the site from mobile view then to larger screen sizes. (This should answer your first and your last question)
    <main>
  <img>
  <h1></h1>
  <p></p>
</main>
    • For naming things, is one of the hardest things that we have to do as a developer in every project. 😅 So, for this skill, you have to keep practicing to get better at it. 😉

    Regarding the screenshot, the card element is also not in the middle of the page in my view as well. You need to use flexbox or grid to make the card always in the middle of the page regardless of the user's screen size.

    If you follow my HTML markup, then you need to make the body element as a flex container and set min-height: 100vh to the body element. By doing this, the card should be horizontally and vertically centered.

    Lastly, figure element doesn't need to wrap the img element. The only reason to use figure is if you need to include a figcaption. Otherwise img tag is fine.

    That's it! I hope this helps. Happy coding! 😄

    Marked as helpful
  • Fat•910
    @Fahatmah

    Hello there!

    Atleast you completed the design. Here are some of my tips to layout or do a markup in your code:

    • Visualize the design and then make section and dividers on it. For example, the whole body is the screen and the section is the card which will contain many div element or container for the texts or images. I usually make the main tag as the body and then section tag as the container of the design and inside of the section are div elements. Just like this:

    <main><section><div></div><div></div><div></div></section ></main>

    • And that is where you are going to base your css code. Inside of the first tag for example, <section class="card_container"><section>

    Lastly, your card is not in the center of the screen. You can use these following but the body should have a min-height: 100vh;

    1. display: flex; align-items: center; justify-content: center;

    2. display: grid; place-items: center;

    3. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); this last number, you can use it in the card container.

    Hope this helps you!

    Marked as helpful

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