@gmagnenat
Posted
Hi, Congrats on completing the challenge ! I gave a good look at your repository and I have a few comments that can bring you value for your next challenges.
First I feel many part are overcomplicated in your CSS and could be done more easily.
(1) Adding a reset to your CSS will help you by setting strong default that will help you deal with difference between browsers. Modern CSS Reset by Josh W Comeau is a good one.
(2) This is a card component. You can easily center your card on the page using flexbox. Add this to your body :
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
(3) As it's a card element, all your content can be wrapped in this card making the spacing and placement of content quite straight forward. You can refactor your code and remove negative margins for example as everything is stack on top of each other.
(4) You should learn about other units then pixels. This is related to accessibility and responsive layouts. You can read about it on this great article by Grace Snow Why font-size must NEVER be in pixels
That's already quite some elements to checkout so I'll stop here but don't hesitate to reach out if you have any questions.
I hope you find these comments useful and that it will help you on your journey.
Happy coding ! ✌️
Marked as helpful
@LuffySec
Posted
@gmagnenat thanks for the advice, i find really hard to make everything on center, and i only remember a few elements on css, cause i started learn web development 25 days ago on freecodecamp
@gmagnenat
Posted
@LuffySec that's normal to find it hard in the beginning. Stay patient and don't rush on the basics. Move slowly but regularly and go back to your previous code when learning something new to upgrade your solutions. Try to understand the feedbacks and learn from them.
Here is a good read by Josh W Comeau about centering divs: Center a div
@LuffySec
Posted
@gmagnenat alright thanks :D
