Submitted over 1 year ago

qr-code-component

#foundation#styled-components#accessibility

Benedicta Nwachukwu• 30

@symplybennie

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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-Code

Posted over 1 year 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

Benedicta Nwachukwu• 30

@symplybennie

Posted over 1 year ago

@EDDuardOo-Code thank you, noted, i appreciate

Vanza Setia• 27,855

@vanzasetia

Posted over 1 year 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

Benedicta Nwachukwu• 30

@symplybennie

Posted over 1 year ago

@vanzasetia noted, thank you, i appreciate

Vanza Setia• 27,855

@vanzasetia

Posted over 1 year ago

@symplybennie You are welcome! 👍

Lucas 👾• 104,560

@correlucas

Posted over 1 year 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!

Please log in to post a comment

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