Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 6 months ago

Media Query , semantic HTML, animations (transition, transform), flex.

RidaniFZ•80
@RidaniFZ
A solution to the Blog preview card challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I successfully implemented a responsive design that adapts well to different screen sizes, and smouth animation (transition and tronsform) ensuring a good user experience across various devices. I would explore more advanced CSS techniques like CSS Grid for complex layouts or animations to enhance the visual appeal and interactivity of the site.

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

Ensuring that the layout remained responsive and visually appealing across different screen sizes was challenging. Solution: I used media queries to apply different styles based on screen size.

Managing complex CSS layouts and ensuring that styles were applied consistently across different elements was tricky. Solution: I organized my CSS into logical sections, used a consistent naming convention for classes, and leveraged modern layout tools like Flexbox.

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

I'd like to explore using CSS Grid for more complex layouts, especially for creating responsive and dynamic grid systems. Adding more interactive elements with animations or transitions could enhance user engagement and visual appeal.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on RidaniFZ's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License