Skip to content
Submitted almost 2 years ago

Html~Css solution

Hope Akpan•60
@Hope-Akpan1
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  1. Uploading on GitHub was a bit challenging.
  2. Image couldn't be viewed.
Code

Please log in to post a comment

Log in

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few suggestions regarding design.

    • Use Semantics for the proper design of your code.
    <body>
<main>.... your main content ....</main>
</body>

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

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

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

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

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

    I hope you find this helpful.

    Happy coding😄

    Marked as helpful
  • hitmorecode•7,540
    @hitmorecode

    Congratulations on your effort. Just a few tips

    • Try to make good practice to start using css rest. I'll show you a simple css rest. You can go deeper into this subject with some research.
    /* simple css reset */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* with this you are removing unnecessary empty spaces. with this you can remove the margin on the body */

    body {
  margin: 0; /* remove this see comment above why */
/* to place the card in the middle of the page, use flexbox */
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column
}

.main {
/*   height: 100%; */ /* move this to the body and change it to min-height: 100vh */
/*   width: 360px; */ /* you don't need this */
  background-color: hsl(212, 45%, 89%); /* move this to the body */
/*   padding: 100px 0; */ /* you don't need this */
}

/* you don't need this */
/* .text {
  margin: auto;
} */

    In this case you don't need to use <br> to break lines. There are more thing you can fix. See if you can figure it out, if not let me know. I'll help you out.

    Keep coding

    Marked as helpful
  • Hope Akpan•60
    @Hope-Akpan1

    Any recommendations would be appreciated.

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