Fer• 3,970
@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.
- Every page should have an
<h1>to improve user experience and because it is an important element when it comes to SEO. It is good not to skip heading levels (start with<h1>, then<h2>, and so on).
CSS:
- As part of the mini CSS reset you did, it's important to include the
box-sizingproperty to allow us to include padding and border in the overall width and height of the elements:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
If you are setting box-sizing: border-box; to the <body> wanting to do that reset, note that it will only apply to that element as this property is not inherited by default by the child elements.
- It is better to use
min-height: 100vh;for the body, as usingheightcauses the page to be cut off in viewports with small height (such as mobile landscape orientation). Also, there's no need to set a width to 100vw, as block elements are full width by default.
- It might be good to get used to designing with the Mobile first approach, which means designing for mobile first and then for desktop or any other device, as it is widely considered best practice.
I hope you find it useful, any questions do not hesitate : )
Regards,
Marked as helpful
0
Abraham Oñate• 190
@Abraham0216
Posted
Thanks! @fernandolapaz I really appreciate this detailed feedback, now I know what I can improve!
1
