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

Recipe using tailwindcss, CSS Grid, Flexbox

@rafbar2000rr

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

P
beowulf1958 1,350

@beowulf1958

Posted

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

@rafbar2000rr

Posted

@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
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