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

Article Preview Component with Next.js, Tailwind CSS

JaceLee 240

@jaceleedev

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

  1. From this project onwards, logic requiring the use of state was introduced, and it was exciting to create the ShareBar functionality by appropriately utilizing useState. I was particularly pleased with how smoothly I implemented the ShareBar, which had slightly different appearances in mobile and desktop views.

  2. I learned for the first time during this project that the tag is used to implement modal dialog boxes (pop-up windows). It's much better than using both functionally and in terms of accessibility. I think I'll use it often when creating modals in the future.

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

  1. Creating the triangular shape of the ShareBar was extremely challenging. Additionally, adjusting the position of the ShareBar, which differs between desktop and mobile views, was tricky. However, I invested a lot of time and eventually succeeded.

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

All tips and know-how related to this project are welcome! 😊

Community feedback

@biernard1988

Posted

Thank you for sharing your code, it really clarify many doubts that I had.

0

JaceLee 240

@jaceleedev

Posted

@biernard1988 I'm glad my code is helpful to you. Have a great time 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