Frontend Mentor - Cartão de resumo do pedido

! [Visualização do design para o desafio de codificação do cartão de resumo do pedido] (./ design / desktop-preview.jpg)

Receber! 👋

Obrigado por verificar este desafio de codificação de front-end.

Os desafios do [Frontend Mentor] (https://www.front Bedor.io) ajudam você a melhorar suas habilidades de codificação ao construir projetos realistas.

** Para fazer este desafio, você precisa de um conhecimento básico de HTML e CSS. **

O desafio

Seu desafio é construir este componente do cartão de resumo do pedido e fazê-lo parecer o mais próximo possível do design possível.

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

Seus usuários devem ser capazes de:

  • Ver estados de foco para elementos interativos

Quer algum apoio no desafio? [Junte-se à nossa comunidade no Slack] (https://www.frontellenceor.io/slack) e faça perguntas no canal ** # help **.

Onde encontrar tudo

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

Os designs estão no formato estático JPG. Usar JPGs significa que você precisará usar seu melhor julgamento para estilos como font-size, padding e margin.

Se desejar que os arquivos de design (fornecemos versões Sketch e Figma) inspecionem o design com mais detalhes, você pode [inscrever-se como membro PRO] (https://www.front”or.io/pro).

Você encontrará todos os recursos necessários na pasta / images. Os ativos já estão otimizados.

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

Construindo seu projeto

Sinta-se à vontade para usar qualquer fluxo de trabalho com o qual você se sinta confortável. Abaixo está uma sugestão de processo, mas você não precisa seguir estas etapas:

  1. Inicialize seu projeto como um repositório público no [GitHub] (https://github.com/). Criar um repositório tornará mais fácil compartilhar seu código com a comunidade se você precisar de ajuda. Se você não tiver certeza de como fazer isso, [leia este recurso Try Git] (https://try.github.io/).
  2. Configure seu repositório para publicar seu código em um endereço da web. Isso também será útil se você precisar de ajuda durante um desafio, pois pode compartilhar a URL do seu projeto com a URL do repo. Existem várias maneiras de fazer isso e fornecemos algumas recomendações a seguir.
  3. Examine os designs para começar a planejar como você lidará com o projeto. Esta etapa é crucial para ajudá-lo a pensar no futuro para que as classes CSS criem estilos reutilizáveis.
  4. Antes de adicionar qualquer estilo, estruture seu conteúdo com HTML. Escrever seu HTML primeiro pode ajudar a concentrar sua atenção na criação de conteúdo bem estruturado.
  5. Escreva os estilos básicos para o seu projeto, incluindo estilos gerais de conteúdo, como font-family e font-size.
  6. Comece adicionando estilos ao topo da página e vá trabalhando para baixo. Passe para a próxima seção apenas quando estiver satisfeito de ter concluído a área em que está trabalhando.

Implantando seu projeto

Conforme mencionado acima, existem muitas maneiras de hospedar seu projeto gratuitamente. Nossos hosts recomendados são:

Você pode hospedar seu site usando uma dessas soluções ou qualquer um de nossos outros fornecedores confiáveis. [Leia mais sobre nossos hosts recomendados e confiáveis] (https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe).

Crie um README.md personalizado

Recomendamos fortemente sobrescrever este README.md por um personalizado. Fornecemos um modelo dentro do arquivo [README-template.md] (./ README-template.md) neste código inicial.

O modelo fornece um guia sobre o que adicionar. Um README personalizado irá ajudá-lo a explicar seu projeto e refletir sobre seus aprendizados. Sinta-se à vontade para editar nosso modelo o quanto quiser.

Depois de adicionar suas informações ao modelo, exclua este arquivo e renomeie o arquivo README-template.md para README.md. Isso fará com que apareça como o arquivo README do seu repositório.

Enviando sua solução

Envie sua solução na plataforma para que o resto da comunidade veja. Siga nosso ["Guia completo para enviar soluções"] (https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) para dicas sobre como fazer isto.

Lembre-se, se você está procurando feedback sobre sua solução, certifique-se de fazer perguntas ao enviá-la. Quanto mais específico e detalhado você for com suas perguntas, maiores serão as chances de obter feedback valioso da comunidade.

Compartilhando sua solução

Existem vários lugares onde você pode compartilhar sua solução:

  1. Compartilhe sua página de solução no canal ** # completed-projects ** da [comunidade Slack] (https://www.front|or.io/slack).
  2. Faça um tweet em [@frontellenceor] (https://twitter.com/frontpiteor) e mencione ** @ front Budapor **, incluindo o repo e os URLs ativos no tweet. Adoraríamos dar uma olhada no que você construiu e ajudar a compartilhá-lo.
  3. Compartilhe sua solução em outros canais sociais como o LinkedIn.
  4. Faça um blog sobre sua experiência na construção de seu projeto. Escrever sobre seu fluxo de trabalho, escolhas técnicas e falar sobre seu código é uma maneira brilhante de reforçar o que você aprendeu. Ótimas plataformas para escrever são [dev.to] (https://dev.to/), [Hashnode] (https://hashnode.com/) e [CodeNewbie] (https://community.codenewbie.org /).

Fornecemos modelos para ajudá-lo a compartilhar sua solução depois de submetê-la à plataforma. Edite-os e inclua perguntas específicas quando estiver procurando feedback.

Quanto mais específico você for com suas perguntas, mais provável será que outro membro da comunidade lhe dê feedback.

Tem algum feedback para nós?

Adoramos receber feedback! Estamos sempre procurando melhorar nossos desafios e nossa plataforma. Portanto, se você tiver algo que gostaria de mencionar, envie um e-mail para hi [arroba] frontgramor [ponto] io.

Este desafio é totalmente gratuito. Compartilhe-o com qualquer pessoa que o considere útil para a prática.

** Divirta-se construindo! ** 🚀