@haquanq
Posted
Hellooooo @RappyProg 👋👋👋
Nice work on the challenge, it look similar to the design!!
Here is some other things that can be improved:
- Each page should have one
main
landmark which means wrap you most important content of the page inside it (there are other landmarks). - Using more semantic HTML markups and keep your HTML simple like
article, section, time,..
. For example you can wrap entire card insidearticle
or just it's content (except image). figure
is being misused here,figure
is often used along withfigcaption
and wraps around contents to give it extra details/explanations (SEO and accessibility improvement ) - could think of it simply as a label/caption (not only for images, can be a list, a long paragraph,... ). Here you are usingfigure
for an image with zero context and it is redundant, leave only theimg
alone is fine.- Consider add some
transition
to your hovering events:
transition-property: properties name (color, background-color, outline, border,...)
transition-duration: time of ms (micro-second)
transition-timing-function: ease/ease-in/... (transition behaviors)
/* shorthand it looks like this*/
transition: color 200ms ease;
There is a small detail that you may have missed, when you hover the title the black shadow will move!!! You can check out my solution to see (don't look at my code and try to build it yourself, it's interesting)
Hope this help 🙀🙀