This is my first project that I tried to do all by myself using CSS and HTML. I still have no trouble trying to optimize the CSS code part and apply some customizations.
I didn't find it difficult to build this project, it took me a while because I still don't have practice. I tried to customize it a bit more, to try and explore other features.
I wanted to know if there is anything I can improve in optimizing the code.
@Kamlesh0007
Posted
To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚. For this demonstration we use css Grid to center the component. body { min-height: 100vh; display: grid; place-items: center; }
Marked as helpful
@Azzumarithm
Posted
Good job on completing your first project but I can't view your code.
Code Improvement:
I assume that you do everything within the body element(if not then target the suitable parent element). If you want to center it horizontally, vertically then you can do it like this :
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
the default flex-direction is row(but you can change it to column but that's unnecessary for now) so in this case justify-content is to center horizontally and align-items is to center vertically (if you change to flex-direction: column, justify-content will center vertically and align-items will center horizontally)
min-height : 100vh - ensures that the body element is at least 100vh (viewport height) tall, but will expand vertically as needed based on its content.
Good luck on coding your journey
Marked as helpful
@cassiotsantos
Posted
@Azzumarithm Thank you very much! I will review the code with your suggestion, it will be much more optimized.
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
