Skip to content
Submitted 6 months ago

Recipe page using html + css + bem + sass

yoyov51234•240
@yoyov51234
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?
  1. Keep to try even though it was hard.
  2. Pay attention on the divs which css should be affecting.
What challenges did you encounter, and how did you overcome them?
  1. For the list, the height is not the original one, I put some margin-bottom for each li
  2. For the list, the bullets have some space between the text, I used padding-left for the li so that there will be space
  3. Using tailwind, sometimes the config doesn't apply, I don't know why and haven't figured it out.
  4. There are a lot of duplications on the styles
  5. When there's no padding , the li marker won't show.
What specific areas of your project would you like help with?

Any feedback on the improvements

Community feedback

  • Adhitya Aditama Nugraha•180
    @aaditamanugrahaPosted 5 months ago

    Hi yoyov!

    your code are already nice, but maybe you can pay attention more to style because as a front end it's very nice if you can stay same as the design. You can see the style-guide.md file at the challenge file to find the right color for your code.

    Happy coding and keep grinding everyday!

    Marked as helpful
    0
    yoyov51234•240
    @yoyov51234Posted 5 months ago

    @aaditamanugraha Thank you for the comments. Regarding your comment, I checked again on the design, changed the font color of Nutrition table. I also made some gap changes for the tables, it's now better than before. : )

    If possible, could you please help point out the differences directly next time, since sometimes i dindn't notice the differences : (, Thank you very much for your inputs!

    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