@pikapikamart
Posted
Hey, awesome work on this one. Layout in desktop looks great as well as the mobile layout, however, responsiveness could be improve because if you resize the screen in width, the layout start to get squeezed.
Fluffy Kas already said really great things about the layout, just going to add some as well:
- I don't suggest using
margin
on thebody
tag to give shape to the content, I would give explicitheight
andwidth
to the cards or make use ofgrid-template-columns
to give the properwidth
to each of the cards if it is agrid
but since it is aflexbox
, I would usepadding
on thebody
tag then useflex-basis: 100%
for each card, this way, all 3 card will have the same dimension. - I wouldn't use
section
for each card, since those cards are just basically related right, all of them are card example, it would be better that thesection
is used by nesting all those 3 cards, because it is a "section of cards" - The
alt
for each the car icons should bealt=""
since those icons are just decoration. If an image is just decoration, usealt=""
on them, but if theimg
adds content, then use meaningfulalt
value. Also, when usingalt
avoid adding words that relates to "graphic" such as "vector, image, icon...", those are already images that is why you don't need to add them. - Avoid using multiple
h1
on a webpage, use at least only 1h1
per webpage, so change those intoh2
. But every webpage needs to have 1h1
, on this one, theh1
would be a screen-reader only text. Have a look at Grace's solution, inspect the layout and see how she uses theh1
element and see the css stylings applied on it as well. You will be using a lot like this in your career. learn more
could be better if it was a link, since it would be like a link to "learn more" about the car.
Other than those, great work, just the responsiveness, avoid making them to be squeezed. Still, great job :>