Skip to content
Submitted about 2 years ago

qr-code-component

Benedicta Nwachukwu•30
@symplybennie
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 had difficulty aligning the paragraph tag, i had to use the <br>, so how do you align the paragraph tag without using the break tag tag

Community feedback

  • Eduardo•200
    @EDDuardOo-CodePosted about 2 years ago

    Congratulations in completing your challenge Benedicta

    Somehting that you can try it is to use your body for aling your card ,that would make you reduce the mayority of the css code and simplify your code,

    body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}

    also something that you cand do, it is to use the padding to make the text wrap, usually we use padding or maring to make the text wrap or create spaces

    there is a video in which Kevin Powell talks about that topic, or you coul also see this sort video

    hope to se more of your work and good luck in your journey 😃

    Marked as helpful
    0
    Benedicta Nwachukwu•30
    @symplybenniePosted about 2 years ago

    @EDDuardOo-Code thank you, noted, i appreciate

    1
  • Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    Hi, Benedicta Nwachukwu! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉

    Regarding the br elements, I would recommend removing all of them. I would suggest letting lines wrap where they need to. Screen readers will read out br elements. You can't accommodate every screen size, so it's rare you'll ever need to use them.

    Also, I would suggest simplifying the HTML markup and using main element to wrap all the card content.

    Hope this helps! 🙂

    Marked as helpful
    0
    Benedicta Nwachukwu•30
    @symplybenniePosted about 2 years ago

    @vanzasetia noted, thank you, i appreciate

    0
    Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    @symplybennie You are welcome! 👍

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

    👾Hello Benedicta, congratulations for your new solution!

    👨‍💻 Here’s some tips to improve your solution code:

    1.Your solution is great and the code is working, but the html structure can be reduced by removing unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading and paragraph.

    YOUR CURRENT CODE:

    <div class="container">
    <div class="section">
      <div class="innerDiv">
              <div class="image">
                <div class="qrCode">
                  <img src="images/image-qr-code.png" alt="qr-code">
                </div>
            </div>
            <div class="text">
              <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>
          </div>
      </div>
    </div>
  </div>

    Here’s a minimal html structure for this challenge:

    <body>
<main>
<img>
<h1></h1>
<p></p>
</main>
</body>

    2.For future projects think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.

    3.When you download the project files there’s a file called style-guide.md where you can find information such as hsl color codes and the font-size for the headings. The background-color in this case is background-color: #D5E1EF.The correct value for this shadow is box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 3%);

    ✌️ I hope this helps you and happy coding!

    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