Design comparison
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
- @bccpadgePosted 9 months ago
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 thanul
-
ol
is a numbered list -
ul
is an unordered list like a navigation links on wrapped innav
-
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>
- All the
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 helpful0@CaioQuerinoPosted 9 months agoObrigado @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.
0 -
Please log in to post a comment
Log in with GitHubJoin 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