Skip to content
Submitted almost 3 years ago

Article preview component with HTML-CSS-JS

Ax-cd•310
@Ax-cd
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi! Here is my solution for this challenge: feedback on how I wrote the code is welcome, as well as advices to improve, thank you!

Code

Please log in to post a comment

Log in

Community feedback

  • Jose Gonzalez•310
    @placeteno

    Hi @Ax-cd, your component looks good, both in mobile and desktop, well done!

    I had a couple of suggestions that could improve your solution. For your .card class, using flexbox would make it easier to control the widths of the image and the content. You can add a gap and control the position of the elements much better. Also, instead of giving your .card a fixed width using percentages, try using <max-width> with rem, it's more responsive and it stays the same regardless of screen size.

    Regarding the media queries, there's no need to have one for mobile and desktop views. Usually, you decide what approach to use first, mobile-first or desktop-first and, once you decide it, just add the corresponding media queries for the other screen sizes. For example, you could have started with desktop-first writing the code for that view and then add media query for the mobile view, tablet, etc.

    I hope this helps!

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