@vanzasetia
Posted
Hi, CodeBeaker! ๐
Before getting into the styling to put the cards in the middle of the page, I recommend fixing the HTML markup first.
- No extra elements: You only need one
<div>
which is to wrap all the cards. You can remove the<div class="container">
. You can use the<body>
element instead. - Landmark element: You should swap the
<div class="wrapper">
with<main>
. Users of assistive technology can navigate through landmark elements. This will help them quickly navigate a website or application. - Replace all the
<h1>
with<h2>
: There should not be more than oneh1
on a page. Many<h1>
elements mean many titles which can confuse the users, especially the screen reader users.
Then, to put all the card in the middle of the page, you can make the body element a flex or grid container of the element that wraps all the cardsโ<main>
.
Another suggestion for styling, you do not need to use absolute positioning on the wrapper.
I hope this helps. Happy coding!
Marked as helpful
@Code-Beaker
Posted
@vanzasetia Hi there! Thank you for solving my doubts. It will be helpful in my next projects.
Happy Coding!
@vanzasetia
Posted
@Code-Beaker Happy to hear that was helpful! ๐