Skip to content
Submitted 4 months ago

Recipe Page with Recipe Schema (JSON/LD)

Younes Iddahamou Idrissi•40
@iddahadev
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 happy to have implemented the recipe schema in this challenge.

I would style my list differently (I plan on refactoring this part) next time.

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

I had a hard time styling the lists (spacing and alignment). The easiest for me was to use the '::beforepseudo-element and play with thedisplay` property.

I plan on refactoring the lists CSS by using this approach

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

Semantic HTML, CSS best practices and accessibility.

Community feedback

  • vakho_zerekidze•20
    @vakho-363Posted 4 months ago

    wow! briliant

    0
    Younes Iddahamou Idrissi•40
    @iddahadevPosted 4 months ago

    @vakho-363 Thanks! I appreciate! What did you like about my solution?

    1
    vakho_zerekidze•20
    @vakho-363Posted 4 months ago

    @iddahadev what did i like? are you kidding me? It's perfect from start to finish, I've never seen a task done so perfectly in a frontend mnetor. responsive+++ layout+++ lists+++ colors+++ Everything is done exactly, at first I did not understand which was the example and which was the result

    1000000000000000000000% werrry nice!!!!

    0
    vakho_zerekidze•20
    @vakho-363Posted 4 months ago

    Did you do it using figma or improvisation?@iddahadev

    0
    vakho_zerekidze•20
    @vakho-363Posted 4 months ago

    I never use figma, so I can never get it perfect. I appreciate. I wish you a lot of success, my friend, you obviously have a lot of talent@iddahadev

    0
    vakho_zerekidze•20
    @vakho-363Posted 4 months ago

    Can I take a look at your code and learn something? @iddahadev

    0
    Younes Iddahamou Idrissi•40
    @iddahadevPosted 4 months ago

    @vakho-363 If you watch closely, there's a slight difference compared to the design. On all of my solutions, the text is off by a pixel or two. I don't know where the problem is haha.

    And of course Figma helps a lot to get the spacing and the font sizes right!

    1
    Younes Iddahamou Idrissi•40
    @iddahadevPosted 4 months ago

    @vakho-363 Figma!

    1
    Younes Iddahamou Idrissi•40
    @iddahadevPosted 4 months ago

    @vakho-363 Even if you don't use Figma, you can use this tool on Google Chrome to check if your style is close to the design

    1
    vakho_zerekidze•20
    @vakho-363Posted 4 months ago

    thank you very much @iddahadev

    1
    vakho_zerekidze•20
    @vakho-363Posted 4 months ago

    If I can't make it normally, it will still be useful for making an omelette he he he @iddahadev

    1
    Younes Iddahamou Idrissi•40
    @iddahadevPosted 4 months ago

    You can of course take a look! Thanks! I wish you a lot of success too! @vakho-363

    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