Frontend Mentor - Gerenciar página de destino

! [Visualização do design para o desafio de codificação da página de destino Gerenciar] (./ design / desktop-preview.jpg)

Bem-vinda! 👋

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

Os desafios do [Frontend Mentor] (https://www.front Bedor.io) permitem que você aprimore suas habilidades em um fluxo de trabalho da vida real.

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

O desafio

Seu desafio é construir esta página de destino 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. Portanto, se você tem algo que gostaria de praticar, sinta-se à vontade para experimentar.

Seus usuários devem ser capazes de:

• Visualize o layout ideal para o site, dependendo do tamanho da tela do dispositivo
• Veja os estados de foco para todos os elementos interativos na página
• Veja todos os depoimentos em um controle deslizante horizontal
• Receber uma mensagem de erro quando o formulário de inscrição no boletim informativo for enviado se:
  • O campo input está vazio
  • O endereço de e-mail não está formatado corretamente

Quer algum apoio no desafio? [Junte-se à nossa comunidade no Slack] (https://www.front”or.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 para trabalhar.

Os designs estão no formato estático JPG. Isso significa que você precisará usar seu melhor julgamento para estilos como font-size, padding e margin. Isso deve ajudar a treinar seu olho para perceber diferenças em espaçamentos e tamanhos.

Se desejar o arquivo Sketch para inspecionar o design com mais detalhes, você pode [inscrever-se como um 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, que contém 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 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/). Isso 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 URL. 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, mas recomendamos usar [Vercel] (https://bit.ly/fem-vercel). Temos mais informações sobre como implantar seu projeto com Vercel abaixo.
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 as classes CSS que você poderia criar para criar 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 de conteúdo geral, como font-family e font-size.
6. Comece adicionando estilos ao topo da página e vá descendo. Passe para a próxima seção apenas quando estiver satisfeito por ter concluído a área em que está trabalhando.

Implantando seu projeto

Conforme mencionado acima, existem várias maneiras de hospedar seu projeto gratuitamente. Recomendamos o uso do [Vercel] (https://bit.ly/fem-vercel), pois é um serviço incrível e extremamente simples de configurar. Se você gostaria de usar o Vercel, aqui estão algumas etapas a seguir para começar:

1. [Inscreva-se no Vercel] (https://bit.ly/fem-vercel-signup) e siga o fluxo de integração, garantindo que sua conta GitHub esteja conectada usando o [Vercel para GitHub] (https: // vercel integração .com / docs / v2 / git-integrations / vercel-for-github).
2. Conecte seu projeto ao Vercel a partir da [página "Importar projeto"] (https://vercel.com/import), usando o botão "Do repositório Git" e selecionando o projeto que deseja implantar.
3. Uma vez conectado, toda vez que você git push, Vercel criará uma nova [implantação] (https://vercel.com/docs/v2/platform/deployments) e a URL de implantação será exibida em seu [Painel] (https://vercel.com/dashboard). Você também receberá um e-mail para cada implantação com o URL.

Compartilhando sua solução

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

1. Envie-o na plataforma para que outros usuários vejam sua solução no site. Aqui está nosso ["Guia completo para enviar soluções"] (https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) para ajudá-lo a fazer isso.
2. Compartilhe sua página de solução no canal ** # completed-projects ** da [comunidade do Slack] (https://www.front|or.io/slack).
3. Faça um tweet em [@frontExitor] (https://twitter.com/front envieor) e mencione **

@ frontpostor ** incluindo o repo e URLs ativos no tweet. Adoraríamos dar uma olhada no que você construiu e ajudar a compartilhá-lo.

Dando feedback

Comentários são sempre bem-vindos, então se você tiver algum a dar sobre este desafio, envie um e-mail hi [arroba] frontp>

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

** Divirta-se construindo! ** 🚀

patrocinadores da comunidade

Um grande obrigado aos patrocinadores da nossa comunidade!

• [Zero to Mastery] (https://bit.ly/fem-ztm) é um recurso de aprendizagem incrível para todas as coisas de desenvolvimento web. Liderados por Andrei Neagoie, os cursos são realmente de conteúdo de alta qualidade e cobrem uma ampla gama de habilidades exigidas.
• [Diversify Tech] (https://bit.ly/fem-diversify-tech) é um recurso incrível para pessoas sub-representadas em tecnologia. O site apresenta listas de empregos para quem procura novas oportunidades. A seção de recursos também está cheia de links úteis para mergulhar!
• [Triplebyte] (http://bit.ly/fem-triplebyte) é uma oferta muito boa se você está procurando uma nova função. É um serviço gratuito que permite que você responda a um questionário confidencial. Com base em seus resultados, as empresas lhe apresentarão suas vagas!