Nesse desafio você vai construir a estrutura HTML da página de receita. Para isso, é necessário conhecer o básico de HTML.
Ao finalizar o desafio você vai ter um resultado parecido com o da imagem abaixo.
Lembrando que as imagens e textos abaixo são ilustrativos e você pode adicionar seu próprio conteúdo conforme as instruções acima.
Para iniciar o projeto devemos criar a estrutura HTML base. Você deve iniciar criando a pasta onde vai colocar os arquivos do projeto e dentro dela você já pode criar o arquivo index.html que é onde vamos escreve o HTML da página da receita.
Para criar a estrutura base do HTML no Visual Studio Code, você pode digitar ! e TAB em seguida. Feito isso, você vai ficar com uma estrutura parecida com o código abaixo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
</body>
</html>
Nessa seção você vai encontrar as instruções e dicas para resolver o desafio.
Então, bora codar! 👨💻👩💻
A receita deve ter um título, para isso você pode usar uma das tags de heading (h1, h2, h3, h4, h5, h6).
<aside> 💡 Você deve escolher a tag que faz mais sentido como título principal da página.
</aside>
A receita deve ter uma imagem ilustrativa.
<aside>
💡 Para adicionar uma legenda na imagem você pode usar as tags figure e figcaption como no exemplo abaixo:
</aside>
<figure>
<img src="<https://unsplash.com/photos/dEUyLofZe5o>" alt="Texto descritivo da imagem" />
<figcaption>Adicionar aqui a legenda da imagem</figcaption>
</figure>
<aside> 💡 Sites onde você pode encontrar imagens grátis para usar nos seus projetos: Unsplash, Pexels, Pixabay.
</aside>
Cada lista deve ter um subtítulo (Ingredientes e Modo de preparo) .
Os ingredientes devem ser apresentados como uma lista não ordenada <ul>.