Skip to content
Submitted over 2 years ago

HTML,CSS

Erkin•50
@ErkinN
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 am a newbie in the area, please give me any feedback. I would appreciate it, thank y'all !!!

Community feedback

  • Illyaas•700
    @Illyaas4ShowPosted over 2 years ago

    This is a good first attempt, well done!

    • You should increase the border-radius: ;
    • You should also add box-shadow: ; as it is present on the challenge card and it makes the card pop.
    • You can also centre it by using flexbox using the following lines of css to the body or the main element
    main {
   display: flex;
   justify-content: center;
   align-items: centre;
   min-height: 100vh;
}

    Hopes this helps! Happy coding :)

    Marked as helpful
    0
  • Account deleted

    Hey, Nice work.

    Check your css code increase the attribution font-size to 18px.

    .attribution { font-size: 11px; // here should be 18px to make it more legible. text-align: center; }

    Only your attribution has a comment. Always comment your work section both the html and the css so code reviewer can easily go through. You will appreciate this when you embark on bigger project.

    If you found any of these helpful, give it a like.

    Happy Coding!

    Marked as helpful
    0
  • darryncodes•6,370
    @darryncodesPosted over 2 years ago

    Hi Erkin,

    I really like your solution, it looks great!

    Your accessibility report is highlighting a few tweaks you could make:

    • swap .container <div> with a <main>
    • swap .attribution <div> with a <footer>
    • consider swapping your <h2> with a <h1>

    Using semantic html is a really fundamental part of building an accessible page. Also Heading hierarchy is important!

    • also try adding min-height: 100vh; to your <body> to help nice centre the design in the viewport

    I hope that helps!

    Marked as helpful
    0
    Erkin•50
    @ErkinNPosted over 2 years ago

    @darryncodes Thank you a lot !!!

    0
  • Udeh Ifeanyi•520
    @IfescohubPosted over 2 years ago

    @ErikN Your work is well done. It is very close to the project.

    Regarding your report, You are getting some of the reports because you wrapped everything in a div tag. To set that, wrap your "container" and "attribution" class in a main and footer tags respectively. I.e

        <main class="container">
         //other div
     </main>
    <footer class="attribution">
           //Your text
     </footer>   ```

Happy coding.
    Marked as helpful
    0
    Erkin•50
    @ErkinNPosted over 2 years ago

    @Ifescohub Thank you :)

    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