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-preview-card

@LANRIE-DEV

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?

I was able to apply new tricks like transitions, transformations and media queries.

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

I faced the challenge of the focus state for the card, but it was worthwhile.

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

I would like help with the extensive use of media queries and transformations (2D & 3D).

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello @LANRIE-DEV!

Your solution looks great!

I have one suggestion:

  • When using the tag <img>, make sure to set the correct path, otherwise your code won't be able to find the image. And if your code can't find it, it won't show.

📌 This is your code:

<img src="/assets/images/image-avatar.webp"> ❌

📌 And here's the update with the correct path:

<img src="./assets/images/image-avatar.webp"> ✅

The difference is just a dot but it's enough to prevent your image from showing.

I hope it helps!

Other than that, great job!

Marked as helpful

1

@LANRIE-DEV

Posted

@danielmrz-dev, thank you for the feedback😃, will get to the corrections promptly.

0

@pauzuffinetti

Posted

I've been having the same issue with the media querys and transformations. Have you been able to correct it yet?

Marked as helpful

1

@LANRIE-DEV

Posted

@pauzuffinetti, yes I have gotten the hang of it.

1

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