Skip to content
Submitted over 1 year ago

The QR-Code Project css flexbox

Princecodes205•90
@Princecodes205
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 didn't find any part of the code difficult when building the project The area of code I am unsure of is the media query section

Community feedback

  • Fer•3,970
    @fernandolapazPosted over 1 year ago

    Hi 👋🏻, regarding your comment:

    • It is not necessary for this challenge to use media queries since the designs are the same.
    • But if you were to use media queries remember that it might be good to get used to designing with the Mobile first approach, which means designing for mobile first and then for desktop or any other device, as it is widely considered best practice.

    I hope it’s useful : )

    Regards,

    0
  • _nehal💎•6,710
    @NehalSahu8055Posted over 1 year ago

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few suggestions regarding design.

    ➨ Add min-height:100vh your body and remove margins from .main to properly center the card.

    ➨ Use Semantics for the proper design of your code.

    <body>
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
wrap up `.attribtution` div inside your footer.
</body>

    • Every site must have one h1 element describing the main content of the page.

    • So, Add a level-one heading instead of h3 to improve accessibility.

    • <h1>Improve you frontend skills by building projects</h1>

    • For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

    • Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

    link.

    I hope you find this helpful.

    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