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

Responsive recipe page

@CaioQuerino

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Nesse desafio tive que usar algumas tags para marcar o e estilizar no css, cada ponto era muito espacífico, porem fiquei com duvida se deveria fazer da forma que fiz

Não consegui deixar alguns pontos do código como era para ficar, gostaria de uma ajuda para corrigir essas imperfeiçoes

<div class="instrucoes">
                <h3 class="sub-titulo">Instructions</h3>
                <ul>
                    <ol>
                        <li>
                            <strong class="text-color">Beat the eggs:</strong> In a bowl, beat the eggs with a pinch of
                            salt and pepper until they are well mixed.
                            You can add a tablespoon of water or milk for a fluffier texture.
                        </li>
                        <li><strong class="text-color">Heat the pan:</strong> Place a non-stick frying pan over medium
                            heat and add butter or oil.</li>
                        <li>
                            <strong class="text-color">Cook the omelette:</strong> Once the butter is melted and
                            bubbling, pour in the eggs. Tilt the pan to ensure
                            the eggs evenly coat the surface.
                        </li>
                        <li>
                            <strong class="text-color">Add fillings (optional):</strong> When the eggs begin to set at
                            the edges but are still slightly runny in the
                            middle, sprinkle your chosen fillings over one half of the omelette.
                        </li>
                        <li>
                            <strong class="text-color">Fold and serve:</strong> As the omelette continues to cook,
                            carefully lift one edge and fold it over the
                            fillings. Let it cook for another minute, then slide it onto a plate.
                        </li>
                        <li><strong class="text-color">Enjoy:</strong> Serve hot, with additional salt and pepper if
                            needed.</li>
                    </ol>
                </ul>
            </div>

Community feedback

@bccpadge

Posted

Hello @CaioQuerin. Congratulations on completing this challenge!!!🎉

I have a few suggestions you might be interested in to improve your solution.

For the instructions section you should only wrap the content using ol rather than ul

  • ol is a numbered list

  • ul is an unordered list like a navigation links on wrapped in nav

  • Instead of wrapping your content using <div> replace them using <section> or <article> tag - HTML Semantic Elements

  • Be sure to using Heading tags in chronological order

    • All the <h3> should be <h2>

You can use the HTML Tables for the Nutrition section .

Example:

<table>
<tr>
   <td>Calories</td>
   <td>277kcal</td>
</tr>
</table>

Here is my solution to this challenge - Recipe page

I hope you find this useful and don't hesitate to reach out if you have any questions

Marked as helpful

0

@CaioQuerino

Posted

Obrigado @bccpadge, eu fiz algumas alterações no códig ; eu vou continuar o resto depois. Eu vi que até na hora de inspecionar o código ficou mais organizado.

Link atualizado

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