Design comparison
Solution retrospective
This was a basic challenge. Maybe was too easy? Or maybe I missed something because it was too easy? I didn't use any flexbox or grid layouts, just worked with the basic margins for the layout. Any productive feedback is always welcomed.
Community feedback
- @denieldenPosted about 2 years ago
Hello Naomi, You have done a good work! 😁
Some little tips to improve your code:
- add
main
tag and wrap the card for improve the Accessibility - also you can use
article
tag instead of a simplediv
to the container card for improve the Accessibility - remove all
margin
from.main-container
class - use flexbox to the body to center the card. Read here -> best flex guide
- after, add
min-height: 100vh
to body because Flexbox aligns child items to the size of the parent container - instead of using
px
use relative units of measurement likerem
-> read here
Keep learning how to code with your amazing solutions to challenges.
Hope this help 😉 and Happy coding!
Marked as helpful0 - add
- @AdrianoEscarabotePosted about 2 years ago
Hi naomichoe, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:
To align some content in the center of the screen, always prefer to use
display: flex;
it will make the layout more responsive!Example:
body { margin: 0; padding: 0; display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 100vh; }
Every Html document must contain the main tag, so we can identify the main content, to fix this, wrap the main content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
The rest is great!
I hope it helps... 👍
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