Skip to content
Submitted 5 months ago

Article preview component---made with combination of Flexbox and Grid

Ivano•70
@IvanoCro
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud of the combination of Flexbox, Grid and the final appearance.

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

I encountered a challenge with JavaScript (to open a popup with options after pressing the share button) — I resolved it with the help of W3Schools. I also faced a problem with the appearance of the popup for share options; I made a simple shape, but it still doesn't match the provided design.

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

I would like feedback.

Community feedback

  • Sarah•580
    @AutumnsCodePosted 5 months ago

    Hi Ivano, well done for completing. This challenge isn't the easiest one to pick for beginner. There are few area I am suggest you might look into more.

    • Try to use less divs-element and maybe use semantic HTML instead. It helps to put a some structure in the code for not only us as developer but also for accessibitly.
    • Beside colors for hsl and co. there is hardly any use for % in your styling.
    • A common practice nowadays are the use of css custom variable.It will help you to main like all the color property in one place
    • To archive the mobile view is to add flex-direction: column in the element with the class of .card. and later change it back to row
    0
    Ivano•70
    @IvanoCroPosted 5 months ago

    Hi @AutumnsCode, thank you for the feedback, it means a lot to me, and I will make sure to follow your instructions.

    0

Please log in to post a comment

Log in with GitHub

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