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

HTML and CSS Foundation

P

@mickoymouse

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?

Got to learn about some things about hierarchy selectors. Will definitely try to learn more about them.

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

Not being able to select some elements/classes. Turns out I was doing it wrong since I didn't even consider the dom structure.

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

As usual, mark ups and whatnot.

I used an article since I thought this can be put in any website as a standalone component. Not sure if my assumption is right but from what I've learned so far it should be. Please let me know otherwise.

Feedbacks are greatly appreciated!

Community feedback

P
Ian Parker 180

@i-prkr

Posted

I really liked your solution and how you have used pure css and particularly variables for really clean and well-structured code,. It has helped me to see how I can be writing better css for my own projects!

The layout looks great on all screen sizes and spot on with the design, well done.

It looked like there was extra spacing on the right side of the card, and possibly cutting a bit of the right side of the image and preventing the corners being rounded correctly. Adding align-self: center; to the image appeared to correct this. Interested to see what you think - I believe your skills are a bit above my own!

Thanks for a nice solution.

1

P

@mickoymouse

Posted

@i-prkr Thank you for the detailed feedback.

You're right. I've missed that. Thank you for pointing it out. I've opted out in just filling the width and height to span across its containing element. This way, the image wrapper and the image itself are the same size which I think makes sense on this scenario.

I've updated the css to correct this. Thank you!

1

@vaguepizza

Posted

I think you can reduce your padding, and if you haven't, use font-size of 16px = 1rem for your paragraph element

1

P

@mickoymouse

Posted

@vaguepizza Ty for the feedback.

I have this defined on my css :)

But I see what you mean. It looks like I have used the wrong variable for it.

I've updated it now. Thanks!

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