Design comparison
Solution retrospective
I'm still new to HTML and CSS so the hardest part was centering everything. Was there an easier way to center this project?
Community feedback
- @MariusG1991Posted 10 months ago
Hi,
Easier way to center everything is using flexbox or grid, I will show u both solutions:
First one
body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; }
Second
body{ display: grid; place-items: center; min-height: 100vh; }
If you use one of this, you can remove
position absolute,top,left,transform
from your body selector ;)Marked as helpful0@sarahhetmanPosted 10 months ago@MariusG1991 Thank you! I remember learning flexbox but it is definitely something I need to work on.
0 - @solvmanPosted 10 months ago
Very well done! ššš
Use should look into semantic HTML instead of plain
<div>
elements for better accessibility. I have some suggestions on how you can improve your project. First, the<main>
element represents the dominant content of the<body>
and expands on the central topic of the document. Such widgets as cards are more suited to be constructed with the<article>
element, which encapsulates reusable, self-contained content. Titles and headings are usually denoted by<h1>
,<h2>
,<h3>
, and so on. Do not skip levels of headings. Regular text is generally encapsulated by<p>.
With that being said, I would redo your code as so:<body> <main> <article class="card"> <img class="card__img" src='images/image-qr-code.png'> <h1 class="card__title">Improve your front-end skills by building projects</h1> <p class="card__text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </article> </main> </body>
Learn more about semantic HTML elements here
To center your card in the middle of the screen, you could do the following:
body { height: 100vh; min-height: 600px; /* prevents clipping */ display: grid; place-content: center; }
Please remember that block-level elements stack one on top of the other. The only element that is not block level within the card is
<img>,
which could be "converted" to block level through a simple reset, which should be used almost on every project anyways:img { display: block; max-width: 100%; /* ensures images does not overflow the container */ }
To center
<h1>
and<p>
horizontally, you could use the margin left and right asauto
like so:h1, p { margin-inline: auto; /* -inline denotes left and right */ }
Otherwise, very well done!š Keep it up!š
Marked as helpful0@sarahhetmanPosted 10 months ago@solvman Thank you for reviewing my code! I don't know why I didn't use semantic HTML. Clearly I just skipped all thinking in that area. š
0 - @BlackpachamamePosted 10 months ago
Greetings! you have done a great job š
š Some accessibility and semantics recommendations for your HTML
- To improve the semantics of your HTML, you can change your
<div class="container">
to a<main class="container">
- I recommend doing a small
reset
to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector*
, with this you will make your site look the same in all browsers - I leave you the task of researching the
reset CSS
and thebox-sizing: border-box
- If you didn't apply the reset, you can add
margin: 0
to yourbody
, this will remove annoying scrolling on large screens. If you want to maintain separation on very small screens, you can apply themargin
again using media querys - Instead of using
position
to center your content in the center of the screen, you can use theflexbox
properties in thebody
:
body { font-family: "Outfit"; background-color: #d6e1ee; text-align: center; min-height: 100vh; display: flex; justify-content: center; align-items: center; }
Marked as helpful0@sarahhetmanPosted 10 months ago@Blackpachamame Thank you for looking over this! I'm going to make those changes and do some review on flexbox. š
1 - To improve the semantics of your HTML, you can change your
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