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

two sizes review card

@amina-refik

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 have utilized semantic web tags.

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

Correctly sizing the article illustration in the mobile view is challenging due to the image ratio. I was able to resolve it by using object-fit: cover;.

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

I can't figure out how to properly space the elements.

Community feedback

@abderrahmanebnd

Posted

Salam, I liked how you used the semantic tags but i have some observations: 1- What happened if you will decide that color hsl(47, 88%, 63%) have to change to blue for example? so your variable --yellow: will be blue. And that is a mess. use something neutral for that, for example:

:root {
    --primary-color: hsl(47, 88%, 63%);
}

2 - add

.review-card {
cursor:pointer 
}

to know that this is clickable, maybe u can add transition also .

3- about your problem : just try to estimate the spaces between elements .

1

@amina-refik

Posted

salam @abderrahmanebnd ,

Thank you for your feedback. I've incorporated your suggestions, and I will explore further on how to incorporate CSS transitions.

0

@abderrahmanebnd

Posted

you can also do it with the other colors I mean the yellow one was just an exemple ,

--color-brand-1:white,
--color-branb-2:red ,
and so on , 
0

@lindajensen

Posted

I think your it looks really great. I haven't been coding for very long so it's kind of hard to give feedback and offer solutions to the areas you need help with. The only thing I can think of is that it looks like the height of your card is a bit off. But then again I never would have known that if i didn't have the design image straight next to your version. I decided to put a height on my card, but I'm so not sure if that's how you're suppose to solve it.

Good job and happy coding!

0

@amina-refik

Posted

hi @lindajensen ,

I also feel a bit awkward giving feedback to strangers who have had similar or greater experiences compared to mine, so please don't feel alone.

Regarding the height of the card, yes, it was indeed larger in the screenshot than in the design. This discrepancy occurred because of the size of the avatar image. On the live site, the avatar image is smaller, and the issue only occurred in the screenshot. Upon inspection, I found that the problem stemmed from the use of nested CSS selectors. The headless browser used to screenshot the site doesn't support them. However, I have fixed the problem now.

Happy coding!

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