Design comparison
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-HishamPosted about 1 year 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 - @hitmorecodePosted about 1 year 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 GitHubJoin 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