Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog Card Project using React-Vite-Tailwind

RappyProg 30

@RappyProg

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

On this project i am quite proud of the better understanding of the tasks. I didn't quite see the readme or style-guide on the last project, but i have safely followed the guide this time.

What challenges did you encounter, and how did you overcome them?

Challenges came when i was messing around @media screen to see whether it's phone or pc size.

Thankfully i already made it responsive from the start, so it's not a huge problem.

What specific areas of your project would you like help with?

I have little to no difficulty on this project. I would love some feedback instead.

Community feedback

haquanq ®️ 1,585

@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 inside article or just it's content (except image).
  • figure is being misused here, figure is often used along with figcaption 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 using figure for an image with zero context and it is redundant, leave only the img 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 🙀🙀

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord