Skip to content
Submitted 12 months ago

QR code HTML CSS Bootstrap

StasMelamed•40
@StasMelamed
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

Hello to everybody, this is my first challenge here, I hope not the last one) As for hardships, for me it was quite tricky to center the content on the page, first of all vertically. In order to do so I used stretching the outer block to 100% (height: vh-100) from Bootstrap classes + margin 0 auto for inner class. I think there are more ways to do so and I would appreciate if you share your solutions. Thanks!

Community feedback

  • Mennatallah Hesham•1,490
    @Mennatallah-HishamPosted 12 months ago

    Hi StasMelamed,

    Congratulations on completing your first challenge👏

    You did great 👍

    Here are some suggestions to improve your code:

    Semantic HTML

    • wrap your content in <main>,this element represents the dominant content of the <body>
    • wrap your card in <article>
    <main>
<article>
</article>
<div>
</div>
</main>

    Headings

    • each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.
     <h1>Improving your front-end skills by building projects</h1>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="QR code linking to Frontend Mentor challenges"

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    0
  • hitmorecode•6,250
    @hitmorecodePosted 12 months ago

    Well done. There is an issue with your page, when the screen size is around 991px, the card stretches to fill the content. Here are a few tips;

    • When working with cards give it a fixed width and height, unless you have a good reason not to do so. In this case it's best to do so.
    • To place the card in the middle of the page, you could have done it with flexbox or css grid. If you give the body a min-height: 100vh, you can then use justify-content and align-items to place the card in the middle of the page.
    • You can remove width: 100%, by default the width of the body is always 100%

    I don't know how good you are familiar with vanilla css. If not then I suggest to start with vanilla css once you learn vanilla css then jumpo into frameworks.

    Good job and keep it up

    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