Skip to content
Submitted about 1 month ago

Recipe using tailwindcss, CSS Grid, Flexbox

Rafael Ibarra•120
@rafbar2000rr
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am proud of learning to use CSS Grid. Next time I would try to improve my code.

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

At the end of the recipe there was a table, I could have done it by using the tag, but instead I used CSS Grid so I will learn to make a table in a different way.

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

Althougth I use fonts by linking to google fonts, I would like to know how to use fonts by using the local font files provided inside the fonts folder.

Community feedback

  • beowulf1958•1,450
    @beowulf1958Posted about 1 month ago

    Great job completing this challenge. The site looks brilliant! However, I did notice that the dots in front of the unordered lists were not styled. Tailwindcss has a very easy way to do this using the ::marker pseudo-element. Add marker:text-Rose-800 to the preparation ul and marker:text-Brown-800 to the ingredients ul. You can find more information about Tailwindcss list markers here in the documentation.

    Hosting fonts locally has become an issue with this court ruling in Germany. Essentially, there are concerns about privacy when using the Google fonts CDN. To host fonts locally in Tailwind, you would use the @font-face rule in the input.css This is explained in the documentation here.

    Hope this helps. And keep on coding.

    Marked as helpful
    0
    Rafael Ibarra•120
    @rafbar2000rrPosted about 1 month ago

    @beowulf1958 Good observation, I hadn't noticed that. I have added the classes and it worked. Thanks!

    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