@pikapikamart
Posted
Hey, great work on this one. Layout in desktop is good and it responds well, the mobile layout is great as well.
Regarding your question:
- It is fine to use
img
tag on the icons, alternative is just creating adiv
to which uses that image as thebackground-image
and on this one, both is fine, since the image is just decoration, you usingalt=""
on it is great.
Some other suggestions would be:
- I would not use
section
for each card, if I were to usesection
I would use 1section
to wrap all the cards, since it will be the card-collection-section. You usesection
to group related components that creates content on its own. - Avoid using
height: 100%
orheight: 100vh
on thehtml
or thebody
or any element that is a large container. If you try to inspect your layout in dev tools at the bottom, you will notice that part of the layout is cut and can't be scrolled, since using that limits your element's height that is relative to the viewport's height, you could just remove it or replace it withmin-height: 100vh
, this will expand if it needs to. - Avoid using multiple
h1
element on a webpage, always use only 1h1
. On this one, theh1
would be a screen-reader only text, have a look at Grace's solution inspect and look for theh1
element and see the css styling on it.
Other than those, great job.
Marked as helpful