Design comparison
SolutionDesign
Solution retrospective
Centering the card proved challenging for a beginner like me.
Community feedback
- @Mennatallah-HishamPosted 12 months ago
Hi prasanth,
Congratulations on completing your first challenge👏
You did great 👍
Here are some suggestions to improve your code:
Centered Card- you can center the card both horizontally and vertically using flexbox
.parent{ display:flex; justify-content:center; align-items:center; }
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"
INTERNAL CSS
- it is better to use external css over internal css as your project grows you may suffer from some of internal css disadvantages such as:
- Repetition in HTML files.
- Increased file size.
- Reduced code reusability.
- Limited style management across pages.
SEO
- you can add meta description for better SEO, it provides a brief summary of a web page
<meta name="description" content="..........."/>
here are some helpful articles:
Hope you find this helpful, Happy Coding
0 - @kerdainoPosted 12 months ago
You can use display:grid min height: 100vh place-content: center
in the body it should center the content and you can give the parent element a margin of auto
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