@vanzasetia
Posted
Very nice work on this challenge, Darrick! ð
It's great to see you submit another great solution! ð It's responsive and looks good on both landscape and portrait mobile views! ð
I don't understand Vite however, I notice that the first section is wrapped with header
tag which it should not. This site doesn't have a header
. Normally, header
is going to have a logo and nav
element. The heading one should live inside the main
element (which commonly the heading for the hero section).
Overall, great work and it's great that you added a cool hover effect on those cards. Keep up the good work! ð
Marked as helpful
@DarrickFauvel
Posted
@vanzasetia Hi Vanza! ð
Thank you for the kind words. I always appreciate your helpful feedback.
Vite is very good and fast. I'm now using it instead of Parcel and Webpack. It also supports Sass out-of-the-box as they say. Vite website
Regarding the header
, I guess I fell into the page pattern of applying a header, main, and footer. But, as this is a "section" project, I've now wrapped the header
and cards
into a section
landmark. I think it works better as a section > header. Does that make sense? ðĪ·ââïļ
I just updated this solution and it is now more visually closer to the design and is using more CSS Open Props. Open Props ð
The hover effects are my way of having a little fun transform
ing the design.
Thanks again for the great feedback, Vanza! ð
@vanzasetia
Posted
@DarrickFauvel I recommend still keeping the main
and removing the header
. header
inside the section
element would have no meaning which means it doesn't make it more accessible and hurt the accessibility at the same time. It works like div
. So, all the child elements of the body
element would be landmark elements (main
and footer
).
Also, nice work with the update! It's amazing that it perfectly matches the design! ð
Keep up the great work! ð
Marked as helpful
@DarrickFauvel
Posted
@vanzasetia Thanks for making that clarification about main, header, & section.ð I have made the correction.
Thanks for kind words about perfectly matching the design. I know the goal is not pixel perfection, but I try to get pretty close. Even if it makes me ðĪŠ.
@vanzasetia
Posted
@DarrickFauvel You're welcome! ð