Submitted 6 months ago

QR code HTML CSS Bootstrap

#bootstrap

StasMelamed• 40

@StasMelamed

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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-Hisham

Posted 6 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

hitmorecode• 6,270

@hitmorecode

Posted 6 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

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