Skip to content
Submitted 4 months ago

Recipe page using tailwindcss, next.js, flexbox

next, react, tailwind-css
P
BlonoBuccellati•320
@BlonoBuccellati
A solution to the Recipe page 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?

In the past, I wasn’t able to implement styling that wasn’t part of the previous assignments. I believe I have learned quite a few new techniques this time. However, I still feel that the styling isn’t quite appropriate, so I hope to be able to apply more suitable styling in the future.

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

Since we couldn't style the list markers directly, we addressed it by using the ::before pseudo-element for the ul tags and a span tag for the ol tags.

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

If you know any best practices for styling list markers, I would appreciate your insights.

In this project, we needed to style list markers, but since we couldn’t style the list markers directly, we handled it by using the ::before pseudo-element for ul tags and a span tag for ol tags.

Is this styling approach appropriate? And if there is a more suitable method, please let me know.

If you have any insights, I would greatly appreciate it.

Code

Please log in to post a comment

Log in

Community feedback

  • Marzia Jalili•8,410
    @MarziaJalili

    A tiny suggestion:

    I'm kinda planning to create a study group on Google Chats let me know if you're interensted to be added there. Let's beat Elon Musk together.

    😂😂😂

    Here's my email:

    astronomyfancy@gmail.com

    Throw me a hi on Google Chats, if you are willing to be a part of the devastation.

    😎😎😎

  • P
    NunoJDMachado•150
    @NunoJDMachado

    It's looking good overall. Just need to work on the image which I think is the most glaring issue. If you compare with the design screenshot you'll see it is being squished/distorted. Also visibile if you resize the window to test for responsiveness. I would avoid any fixed widths/heights for the image and just let it adapt to the container size.

    As for colouring the list markers, what worked for me was to give the whole <li> the colour I wanted the marker to be, and then inside them create <span> or <div> elements to style the text colour.

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