@Damsithcoder
Posted
Great job .Well done if you can put the two divs in a <main> tag ,some warnings will be removed.
<main> <div class="card-1"> ... </div> <div class="card-2"> ... </div> </main> KEEP PRACTICING...!What ways could I have done the classing differently? Was my overall structure of the html tags okay? How do you think I could have made the better? (i really wanted to disable the submit button, funnily enough I only know how to get this done in react.)
Did I use some antiquated methods in my CSS?
All feedback is deeply appreciated.
@Damsithcoder
Posted
Great job .Well done if you can put the two divs in a <main> tag ,some warnings will be removed.
<main> <div class="card-1"> ... </div> <div class="card-2"> ... </div> </main> KEEP PRACTICING...!@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing your first challenge! 🎉
HTML 🏷️:
non-semantic
markup<div class="main-container">
with semantic element <main>
along with <div class="attribution">
with semantic element <footer>
to improve accessibility and organization of your page.CSS 🎨:
.main-container
both horizontally & vertically with cssFlexbox
or Grid
layout. You can read more about centering in CSS here 📙.grid
to center the componentbody {
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
}
I hope you find it helpful ! 😄 Above all, the solution you submitted is great
Happy coding!
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