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 page using Tailwind

@mehrnaz98

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P

@kaamiik

Posted

سلام. من یکسری نکات رو داخل کد شما دیدم گفتم اگر اشاره کنم بد نباشه. کدتون خوانا و خیلی تمیزه و موارد مربوط به accessibility رو بنظرم خوب رعایت کردین. من با انگلیسی یکم دست و پا شکسته مینویسم که قاطی نباشه. اگر ایرادی داره ببخشید :)

  1. header tag is mostly use for nav items and your logo. In this page all you need is a main and footer.

  2. Maybe not very important but Your bullets inside the li should be a center aligned and also need a gap between the text and bullet. It's ok inside the Ingredients but not inside the Preparation time. I think you can use li::marker to style your bullets.

  3. One alternative for each horizontal line after each section is to use hr tag. I think here is a good use case.

  4. When your page become narrower; I mean between 650px to 800px, you need to add a margin to your card container to have a distance from the edges.

امیدوارم در ادامه مسیر موفق باشی.

0

@mehrnaz98

Posted

Thanks for the feedback @kaamiik ! 🙏ممنون از نکات مفیدی که بهشون اشاره کردید

1
P
tloyan 255

@tloyan

Posted

Great work!

However, be careful with the bullet markers in the unordered list, as they are not properly centered. To my knowledge, this can't be easily fixed with native markers or Tailwind's default utilities. :)

0

@mehrnaz98

Posted

Thanks for the feedback @tloyan ! I'll try to fix that.

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