@fernandolapaz
Posted
Hi 👋, perhaps some of this may interest you:
HTML / ACCESSIBILITY:
- The main content of every page (the card in this case) should be wrapped with the
<main>
tag.
- Instead of wrap each element with a
<div>
, better to use semantic elements like<h1>
or<p>
.
- This is a meaningful image and in case the user can't see it, the
alt
text should give a description.
CSS:
- You might consider using some CSS reset as a good practice at the start of each project, to have a clean starting point and reduce differences between browsers. An example of a CSS reset from Josh Comeau 🔎
For example, here are some very common and useful ones to get you started:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
- You should remove
width: 1440px
from thebody
to correctly center the card on the page (the body should always occupy the entire viewport). Also it is better to usemin-height: 100vh;
for the body, as usingheight
causes the page to be cut off in viewports with small height (such as mobile landscape orientation).
- Consider using relative units like rem or em since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals the font size of the root element, 16px by default). Consider this suggestion especially for the
font-size
.
I hope you find it useful, any questions do not hesitate 🙂
Regards,
@KarolJaworski
Posted
@fernandolapaz Hey, thank you for taking a moment to review my code and give me some advices, I do appreciate it. I have just replaced the divs with semantic elements and switched the font-size to rem. As for the CSS reset, I'll start using it from now on :D
Regards!