Submitted about 1 year ago

Html~Css solution

Hope Akpan• 60

@Hope-Akpan1

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

Community feedback

_nehal💎• 6,710

@NehalSahu8055

Posted about 1 year ago

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

Hope Akpan• 60

@Hope-Akpan1

Posted about 1 year ago

@NehalSahu8055 You just directly answered a question that has given me a bit of a tough time. Thank you!

hitmorecode• 6,230

@hitmorecode

Posted about 1 year ago

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

Posted about 1 year ago

@hitmorecode Thank you very much, I needed this.

Hope Akpan• 60

@Hope-Akpan1

Posted about 1 year ago

Any recommendations would be appreciated.

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