<aside> ⚠️

Antes de iniciar meus estudos em JavaScript, decidi dedicar um tempo para reforçar e aprimorar minhas habilidades em HTML e CSS, concluindo quatro desafios técnicos do Frontend Mentor.

Essa etapa será essencial para meu crescimento como desenvolvedor, pois me permitirá colocar em prática todo o conhecimento teórico adquirido até aqui. Trocarei as longas horas dedicas à leitura de documentações, criação de resumos e absorção de conteúdo por meio das aulas por desenvolvimento prático e individual de código.

Ao término da lapidação, estarei pronto para avançar para o módulo de JavaScript Básico do curso DevQuest.

</aside>

Desafios

1. Primeiro desafio: HTML semântico ✅

   Frontend Mentor | Recipe page coding challenge

2. Segundo desafio: CSS Flexbox ✅

   Frontend Mentor | Product preview card component coding challenge

3. Terceiro desafio: CSS Grid ✅

   Frontend Mentor | Bento grid coding challenge

4. Quarto desafio: Tudo ✅

   Frontend Mentor | Huddle landing page with alternating feature blocks coding challenge

Página de Receitas | Frontend Mentor

• Link do deasafio: https://www.frontendmentor.io/challenges/recipe-page-KiTsR8QQKm

Seu desafio é criar esta página de receita e fazer com que ela tenha a aparência mais próxima possível do design. Você pode usar qualquer ferramenta que quiser para ajudar a completar o desafio. Então, se você tem algo que gostaria de praticar, sinta-se à vontade para tentar. Baixe o código inicial e percorra o README.md arquivo. Isso fornecerá mais detalhes sobre o projeto. O style-guide.md arquivo é onde você encontrará cores, fontes, etc.

Conhecimento Adquiro: Recipe Page

Melhorando a Semântica da Página via Inteligência Artificial

Pergunta ao ChatGPT:

De modo a lapidar meus conhecimentos em HTML e CSS, desafiei-me a resolver 4 desafios técnicos do Frontend Mentor. Estou codificando o primeiro: Recipe Page, uma página de receitas. O objetivo deste projeto é testar nosso conhecimento em HTML semântico. Nesse momento, acabo de finalizar o código HTML do projeto. Quero que você o analise e, caso necessário, sugira-me melhorias no âmbito da semântica da minha marcação.

<main class="main-container">
    <section class="hero">
        <img src="./src/images/image-omelette.jpeg" alt="Imagem do omelete no qual a receita ensina a preparar">
        <h1 class="recipe-tittle">Simple Omelette Recipe</h1>
        <p class="recipe-summary">An easy and quick dish, perfect for any meal. This classic omelette combines
            beaten eggs cooked
            to perfection, optionally filled with your choice of cheese, vegetables, or meats.</p>
    </section>
    <section class="preparation-time">
        <h3>Preparation time</h3>
        <ul>
            <li><span>Total:</span>Approximately 10 minutes</li>
            <li><span>Preparation:</span> 5 minutes</li>
            <li><span>Cooking:</span> 5 minutes</li>
        </ul>
    </section>

    <section class="ingredients">
        <h2>Ingredients</h2>
        <ul>
            <li>2-3 large eggs</li>
            <li>Salt, to taste/li>
            <li>Pepper, to taste</li>
            <li>1 tablespoon of butter or oil</li>
            <li>Optional fillings: cheese, diced vegetables, cooked meats, herbs</li>
        </ul>
    </section>

    <section class="instructions">
        <h3>Instructions</h3>
        <ol>
            <li><span>Beat the eggs:</span> 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><span>Heat the pan:</span> Place a non-stick frying pan over medium heat and add butter or oil.</li>
            <li><span>Cook the omelette:</span> Once the butter is melted and bubbling, pour in the eggs. Tilt the pan
                to ensure the eggs evenly coat the surface.</li>
            <li><span>Add fillings (optional):</span> 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><span>Fold and serve:</span> 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><span>Enjoy:</span> Serve hot, with additional salt and pepper if needed.</li>
        </ol>
    </section>

    <section class="nutrition">
        <h2>Nutrition</h2>
        <p>The table below shows nutritional values per serving without the additional fillings.</p>

        <table>
            <tr>
                <th>Calories</th>
                <td>277kcal</td>
            </tr>
            <tr>
                <th>Carbs</th>
                <td>0g</td>
            </tr>
            <tr>
                <th>Protein</th>
                <td>20g</td>
            </tr>
            <tr>
                <th>Fat</th>
                <td>22g</td>
            </tr>
        </table>
    </section>

    <footer>
        <div class="footer-credits">
            <p class="attribution">
                Challenge by <a
                    href="<https://www.frontendmentor.io/challenges/huddle-landing-page-with-a-single-introductory-section-B_2Wvxgi0>"
                    target="_blank">Frontend Mentor</a>.
                Coded by <a href="<https://www.linkedin.com/in/m%C3%A1rio-miguel-de-almeida-741291285/>"
                    target="_blank">Mário
                    Miguel de Almeida</a>.
            </p>
        </div>
    </footer>

</main>

Resposta do ChatGPT:

1. Adicionar a tag <header>

O título principal da receita ("Simple Omelette Recipe") pode ser colocado dentro de um <header>, pois ele serve como a introdução principal do conteúdo.