@Da-vi-de
Posted
Hi Elena, it's not a bad result for this challenge but it will be nice after making some changes in your code.
-
First thing, i'd recommend checking the report and try to resolve those issues. I try to guide you for better understanding:
-
The
alt
attribute must always be included in images (except decoratives images, the attribute can be left blank) tags. -
The issues about landmarks is because your HTML is not semantic, that means it can't work properly with assistive technology. You should read about landmaks by clicking the link
Learn more
but i tell you what you miss in your code. -
<main></main>
element rght after thebody
tag, read about it here -
The
h2
heading needs to be ah1
instead! Heading elements should be in a sequentially-descending order, there always must be ah1
heading. -
The attribution goes in
<footer></footer>
element. -
The
padding
problem you referred is casued by a wrong approach, which is not mobile first. You used a media query that indicates a width smaller than600px
in which you applied just thepadding
but the rest of the code is for desktop, you need to resize your entire card for a small screen. This doesn't happen when the workflow is mobile first because you start working for the smaller device width, you can surf the web and you'll find tons of articles tutorial etc.. -
By the way, that little horizontal scroll bar is there because the card width is larger than the mobile width, the CSS property
overflow
controls the scrollbar behavior when it's set tohidden
you don't see scrollbars anymore.
Hope it helps a little, keep coding :-)
Marked as helpful
@nenamartinez
Posted
@Da-vi-de Hello Davide, thank you for checking the code in such detail. You're right, I'm missing a lot of semantic elements. I have a bad habit of desktop-first design since I first learned to make websites long ago, I will make a point of doing mobile-first design next time, to be sure. I will be fixing the problems you listed and going through the error report as well. Thanks a bunch for your detailed response!