Skip to content
Submitted 12 months ago

My Try

Vithor Felix Batista•10
@vithogigm
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

its my secound turn, using the frontend mentor, and my secound try making "sites", with no help of courses and teachers, give me please one feedback, of what i have to fix

Community feedback

  • Nebil Nejmudin•230
    @Nebil-NejPosted 12 months ago

    Hello There My good sir, First of well done on completing the challenge without any Help! Now for fixing some of the issues. HTML

    1. rather than <section> tag should of used <Main> for the accessibility and then using a section tag to enclose the qr picture and headings.
    2. it is better to differentiate and enclose the <img> tag in its own section, or in no other section, and the descriptions in its own section to control both them the best way.
    <body>
<main class="container">
<section class="aba">
        <img src="src/img/image-qr-code.png" alt="foto" class="foto">
<section class="description"> //helps to control the look for anything inside more easily
        <h1> <strong> Improve your front-end <br> skills by building projects </strong> </h1>

        <p>Scan the QR code to visit Frontend <br> Mentor and take your coding skills <br> to the next level</p>
</section>
</section>
</main>

    CSS

    1. first of it is not optimal to use percent value for margins and paddings, better to use values that are not changing like px,rem..etc.
    2. in the body you limited the width by a value used on Heights, unless there is a valid reason to do so, there is no need to use vh(viewport height) value for your width as the name says.
    3. in the .aba class you used "-ms- flexbox" for you "display" and you could of just used flexbox, and as well as used percent value's for the margin, and you also did not give it either a min-width or max-width, which lead to the broken look you get when you look at the design to check responsiveness.

    hope you will work on and make this project better on your, good luck with other projects as well!

    Marked as helpful
    1
    Vithor Felix Batista•10
    @vithogigmPosted 12 months ago

    @Nebil-Nej Thank you for the feedback, i will try to do It again, using your tips

    0
  • Daniel 🛸•44,310
    @danielmrz-devPosted 12 months ago

    Hey, Vithor!

    Your project looks nice!

    Here's one tip:

    You can place your card in the middle of the page doing this:

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

    Hope it helps!

    2
    Vithor Felix Batista•10
    @vithogigmPosted 12 months ago

    @danielmrz-dev thanks for the tip

    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