Skip to content
Submitted 24 days ago

NextJs - Tailwind CSS

next, tailwind-css
Grecco Oliva, Franco•270
@GreccoOliva-Franco
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

  • It was faster to understand the UI

  • It was faster to build the solution

  • Difficulties to partially hide the image with overflows

What challenges did you encounter, and how did you overcome them?
  • Difficulties to partially hide the image with overflows
  • Did not try to implement the Popup for social sharing. Kept the mobile solution instead

No overcome. Just tried a bunch of things and the final one was "good enough"

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

Different ways to solve the image problem with different CSS solutions

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Amiko Elvis•170
    @amikoelvis

    Hi Olivia,

    I had a look at your Article Preview Component — great work getting the structure started! I can see you’ve included all the important content, and you also remembered the attribution section at the bottom, which is awesome.

    Here are a few suggestions to make it even better:

    Try wrapping your text content inside HTML elements like <div>, <h1>, and <p> to give the structure more meaning and improve readability.

    You could use a <button> element for the "Share" action instead of just writing "Share" as plain text — this will help with interactivity later.

    Organizing the author's information (name, date) inside a separate container will also make it easier to style.

    Lastly, once your structure is ready, adding some CSS will really help bring your design to life!

    Overall, you're off to a strong start — just a few small improvements and it will look amazing! Keep going, you’re doing great!

    Marked as helpful

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