Design comparison
Community feedback
- @R3ygoskiPosted 6 months ago
Hello @Praanshuu, congratulations on completing another project. It turned out very well, although it's misaligned, it's clear that it's well done.
To align it to the center, you can use this snippet in your CSS:
body { display: flex; justify-content: center; align-items: center; }
This will perfectly center the card.
I'd like to make some suggestions regarding your HTML. It's well structured, but it lacks some semantics, which is important not only for SEO but also for accessibility. Here are some parts that could be improved:
<div Id="card">
: This could be replaced with<main>
, as it contains all the main content of your page.<div Id="top">
: This could be replaced with<header>
, as it contains the introductory part of your page.<div Id="bottom">
: This could be replaced with<article>
, as it's independent from the rest of the content and is also self-explanatory.
Another tip, regarding accessibility, is to avoid skipping heading levels, as this can cause some accessibility issues. It's always correct to start with an
<h1>
and progress downwards. So, changing your heading tags to<h1>
,<h2>
, and<h3>
will make your page more accessible. W3School - HeadingOnce again, congratulations. If you have any questions, please feel free to ask, and I'll do my best to help.
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