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

Fairly responsive Blog Preview Card

@begli-amanov

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?

Everything is outlined in the Updated readme file.

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

It was really annoying to tweak responsive text without media queries. Need to find a way to make it more effective. The approach was like from 90s. To much manual setup. Or maybe we are just too lazy?!

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

I am mostly interested in if my html and css semantics are robust enough and is my approach with cal() function good enough for responsive text on the page.

Community feedback

P
Marcus 110

@marcus-hill

Posted

Hi Begil, great job on the design! I am only starting out but here is some feedback I have:

  • Even with the use of a media query, your card is still too big for a small viewport (below 370px) and leads to the left hand side of the content being hidden.
  • I like your use of CSS variables, I haven't used these before but it prevented a lot of repetition of colours and styles.
  • I think the way you added the hover effect was quick by selecting multiple classes, but I don't believe this was required as per the design brief (only the name should apply)

Good luck with your learning, you're doing a great job!

1

@begli-amanov

Posted

Hi @marcus-hill, much appreciated your feedback! Helped me to look at my work under a bit different angle. Here is what I've changed so far:

  • I've added another media queries to make the card fit even the smallest display size (320px).
  • Hover effects was my intention to see how it works and I am pretty happy with the results. However your point is fully legitim.

Overall I am grateful for your attention and time and thanks for those kind words!

Be well Begli

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