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

git, css, flexbox, transition and media queries

Jorge 40

@Broderpixelv1

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 solve the exercise faster, using flexbox seems very useful to me and every time I use it I understand it better, it is still not very clear to me the benefit of the units of measurement em and rem and why they are better than px, how can I see the difference and benefit

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

Importing the fonts gave me problems, but it was solved when I identified the style of each one

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

In the transition that is made when moving the cursor, I don't know if it is in the correct place, or declared, because sometimes when the page loads all the objects move

Community feedback

@SergioCasCeb

Posted

Overall really good job, and I like the extra animation you added to the card on hover, but there are a few things you could use to improve it.

  • Your spacing is a bit of from the design guidelines given in the Figma files.
  • You should not use the main element for you component, as that is not a good practice and should be used as the overarching parent of you content.
  • Since your hover is on the card, you didn't specify any behavior on focus and you font have any interactive element in your card title like and <a> element the focus behavior of course doesn't work.
  • Also you might be overdoing it with the HTML tags.
1

Jorge 40

@Broderpixelv1

Posted

@SergioCasCeb * I agree with everything, I am putting into practice what I am learning and I try to apply them in each exercise so as not to forget them, so yes, I am exaggerating. The <main> thing is correct, I'm going to replace it with a <section>, since after all, it is a card, it is a component of a page. In the animation I followed the animation of the prototype in figma in the title and the card, but, I am going to put a cursor: pointer; in the title. Thank you very much for the feedback, it helps me a lot.

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