@devid8642
Posted
Firstly, congratulations on the solution.
I have some suggestions for your project:
Consider using flexbox to center the card instead of using large padding and margin values in the main and body. You can remove these values and use them in main:
main {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
Also consider using relative units for the values of margin, padding and font-size, in this case REM. I recommend that you research the usefulness of doing this as it is good practice.
Finally, the formatting of your HTML file is a little inadequate. I recommend using a formatting tool like prettier (https://prettier.io), which makes the job of keeping the file well formatted much easier. This tool integrates with the main code editors that currently exist.
Again, congratulations on the solution. I hope you found my review helpful.
Marked as helpful
@waru-guru
Posted
@devid8642 Thank you for the tip! I had forgotten to even add the closing tag for the link on the stylesheet. let me apply the following. Thank you once again!
@devid8642 Thank you for your feedback. I am grateful for your suggestions and I have taken them into notice. In my latest project I have used rem units. I have had trouble centering things on the page, but in my latest project I did it easy.