@Blackpachamame
Posted
Greetings! you have done a great job 😎
📌 Some accessibility and semantics recommendations for your HTML
- To improve the semantics of your HTML, you can change your
<section>
to a<main>
- I can only mention an accessibility issue, you can add a short description to your image with the
alt
attribute. In case it is just a decorative image, such as an icon or logo, you can leave it empty:alt=""
. More info
📌 Some suggestions
- I recommend doing a small
reset
to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector*
, with this you will make your site look the same in all browsers - I leave you the task of researching the
reset CSS
and thebox-sizing: border-box
- If you didn't apply the reset, you can add
margin: 0
to yourbody
, this will remove annoying scrolling on large screens. If you want to maintain separation on very small screens, you can apply themargin
again using media querys - You can apply
display: block
to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements - Apply
max-width: 100%
to yourimg
so that it occupies the correct width within the container - I don't think it's a good idea to apply
margin-top
andmargin-bottom
to your universal selector*
- You can apply padding on all sides of your card and avoid having to use a margin-top in the header.
- It is not necessary to apply
border-radius
in theheader
and in theimg
, you only have to do it in one. If you do it in theheader
, you must apply theoverflow: hidden;
property to it so that it hides the tips of the image. Don't apply the same properties on both elements unnecessarily
Marked as helpful