social media dashboard with theme switcher

Mentor de front -end - Painel de mídia social com comutador de temas

Bem-vindo!

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

Os desafios do mentor de front-end permitem melhorar suas habilidades em um fluxo de trabalho da vida real.

Para fazer esse desafio, você precisa de um entendimento básico do HTML, CSS e um pouquinho de JavaScript.

O desafio

Seu desafio é construir este painel de mídia social e fazer com que pareça o mais próximo possível do design.

Você pode usar todas as ferramentas que deseja ajudá -lo a concluir o desafio. Então, se você tiver algo que gostaria de praticar, fique à vontade para tentar.

Seus usuários devem poder:

• Veja o layout ideal para o site, dependendo do tamanho da tela do dispositivo
• Veja os Estados do Hover para todos os elementos interativos na página
• Alternar o tema da cor à sua preferência

Quer algum apoio no desafio? Junte -se à nossa comunidade Slack e faça perguntas no canal #HELP .

Onde encontrar tudo

Sua tarefa é criar o projeto para os projetos dentro da pasta /design . Você encontrará uma versão móvel e uma área de trabalho do design para trabalhar.

Os projetos estão em 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 seus olhos para perceber diferenças nos espaçamentos e tamanhos.

Se você deseja o arquivo de esboço para inspecionar o design com mais detalhes, ele está disponível para comprar na página de desafio na plataforma.

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

Há também um arquivo style-guide.md .

Construindo seu projeto

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

1. Inicialize seu projeto como um repositório público no GitHub. 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 esse recurso Try Git.
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 poderá compartilhar o URL do seu projeto com o seu URL de repo. Existem várias maneiras de fazer isso, mas recomendamos usar o Zeit agora. Temos mais informações sobre como implantar seu projeto com o Zeit abaixo.
3. Veja os designs para começar a planejar como você abordará o projeto. Esta etapa é crucial para ajudá -lo a pensar no futuro para as aulas CSS que você pode criar para criar estilos reutilizáveis.
4. Antes de adicionar estilos, 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 base do seu projeto, incluindo estilos de conteúdo geral, como font-family e font-size .
6. Comece a adicionar estilos ao topo da página e resolva. Apenas passe para a próxima seção quando estiver feliz por concluir a área em que está trabalhando.

Implantando seu projeto

Como mencionado acima, existem várias maneiras de hospedar seu projeto gratuitamente. Recomendamos usar o Zeit agora, pois é um serviço incrível e extremamente simples de se preparar. Se você quiser usar o Zeit, aqui estão algumas etapas a seguir para começar:

1. Inscreva -se no Zeit agora e passe pelo fluxo de integração, garantindo que sua conta do GitHub esteja conectada usando o Zeit agora para a integração do GitHub.
2. Conecte seu projeto ao Zeit agora a partir da página "Criar um novo projeto", usando o botão "Novo projeto do github" e selecionando o projeto que você deseja implantar.
3. Uma vez conectado, toda vez que você git push , o Zeit agora criará uma nova implantação e o URL da implantação será exibido no seu painel Zeit. Você também receberá um email para cada implantação com o URL.

Compartilhando sua solução

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

1. Envie -o na plataforma para que outros usuários vejam sua solução no site. Outros usuários poderão fornecer feedback, o que pode ajudar a melhorar seu código para o próximo projeto.
2. Compartilhe seu repositório e o URL ao vivo no canal #acabado-projetos da comunidade Slack.
3. Tweet @frondendmentor e mencione @Frontendmentor , incluindo o repo e os URLs ao vivo no tweet. Gostaríamos muito de dar uma olhada no que você construiu e ajudar a compartilhá -lo.

Dando feedback

O feedback é sempre bem -vindo, por isso, se você tiver algum para dar esse desafio, envie um e -mail para o Hi [AT] Frontendmentor [DOT] IO.

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

Divirta -se prédio!