All solutions

What are you most proud of, and what would you do differently next time?

Melhorar modo de estrutura do html

What are you most proud of, and what would you do differently next time?

Colocaria resposivo no projeto

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

O desafio Seu desafio é construir esta página de receita e fazê-la parecer o mais próximo possível do design.

Você pode usar qualquer ferramenta que desejar para ajudá-lo a completar o desafio. Então, se você tem algo que gostaria de praticar, sinta-se à vontade para tentar.

Onde encontrar tudo Sua tarefa é construir o projeto conforme os designs dentro da pasta /design. Você encontrará uma versão móvel e uma versão para desktop do design.

Os designs estão em formato JPG estático. Usar JPGs significa que você precisará usar seu melhor julgamento para estilos como tamanho da fonte, preenchimento e margem.

Se você gostaria dos arquivos de design (nós fornecemos versões Sketch & Figma) para inspecionar o design mais detalhadamente, você pode se inscrever como um membro PRO.

Todos os ativos necessários para este projeto estão na pasta /assets. As imagens já estão exportadas para o tamanho de tela correto e otimizadas.

Nós também incluímos arquivos de fontes variáveis e estáticas para as fontes necessárias para este projeto. Você pode escolher ligar para as Fontes do Google ou usar os arquivos de fonte locais para hospedar as fontes você mesmo. Note que removemos os arquivos de fonte estática para os pesos de fonte que não são necessários para este projeto.

Também há um arquivo style-guide.md contendo as informações que você precisará, como paleta de cores e fontes.

Construindo seu projeto Sinta-se à vontade para usar qualquer fluxo de trabalho com o qual se sinta confortável. Abaixo está um processo sugerido, mas não sinta que você precisa seguir esses passos:

Inicialize seu projeto como um repositório público no GitHub. Criar um repositório facilitará compartilhar seu código com a comunidade se você precisar de ajuda. Se você não tem certeza de como fazer isso, leia este recurso Try Git. Configure seu repositório para publicar seu código em um endereço web. Isso também será útil se você precisar de ajuda durante um desafio, pois você pode compartilhar a URL do seu projeto com a URL do seu repositório. Há várias maneiras de fazer isso, e nós fornecemos algumas recomendações abaixo. Examine os designs para começar a planejar como você vai abordar o projeto. Este passo é crucial para ajudá-lo a pensar com antecedência sobre classes CSS para criar estilos reutilizáveis. Antes de adicionar quaisquer estilos, estruture seu conteúdo com HTML. Escrever seu HTML primeiro pode ajudar a focar sua atenção em criar um conteúdo bem estruturado. Escreva os estilos básicos para seu projeto, incluindo estilos de conteúdo gerais, como família de fontes e tamanho da fonte. Comece adicionando estilos ao topo da página e trabalhe para baixo. Só passe para a próxima seção quando estiver satisfeito que completou a área em que está trabalhando. Implantando seu projeto Como mencionado acima, há muitas maneiras de hospedar seu projeto gratuitamente. Nossos anfitriões recomendados são:

Páginas do GitHub Vercel Netlify Você pode hospedar seu site usando uma dessas soluções ou qualquer um de