@vanzasetia
Posted
Hello, Adebayo Goodness Oluwadamilola! 👋
First, I recommend using a code-formatter. This way, your code base will have a consistent format, which makes it easier to read the code. I suggest using Prettier as your code-formatter.
Prettier · Opinionated Code Formatter
In this case, use interactive elements for any elements that have interactivity. Interactive elements can either be links or buttons.
For your information, anchor tags are for navigation. The <button> element is for an action such as opening a modal, submitting a form, and toggling an element. It is essential to use the correct elements.
Remove the code that I commented. Those are unnecessary styling.
body, html {
background-color: hsl(217, 54%, 11%);
/* width: 100%; */
/* height: 100%; */
justify-content: center;
align-items: center;
/* display: block; */
}
Also, you don't need to select the <html> element. You should just use the <body> element as the page element of the web.
I recommend making the <main> element as the card instead of using another <section>. Also, the card only needs a max-width to prevent it from becoming too large. No need for width and height. Let the content controls the height of it.
Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset | Andy Bell
Never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS
I hope this helps. Have fun coding! 😄
