@fernandolapaz
Posted
Hi 👋🏻, some of this may interest you for future projects:
- Skipping heading levels can be confusing and should be avoided whenever possible (start from <h1>, followed by <h2> and so on).
- The icons are decorative and therefore need an empty
alt
attribute to be ignored by screen readers.
- When there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, the image should be wrapped with
<a>
or<button>
(depending on what happened when clicking on it), and also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the<a>
tag.
- You could also use flexbox to center the content of the page:
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
And removing the margin
from the 'main-container'.
- Think about using relative units since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals 16px by default), consider this suggestion especially for the
font-size
.
I hope it’s useful : )
Saludos,
Marked as helpful
@rendichiara5
Posted
@fernandolapaz wow, so much good information :D, thank you so much for taking the time to analyze and give me these tips!
Thank you very much!