lucaslinyker / blog-preview-card

Card of blog

Frontend Mentor - Solução para o desafio Blog preview card

Esta é uma solução para o Desafio Blog preview card no Frontend Mentor. Os desafios do Frontend Mentor ajudam você a melhorar suas habilidades de codificação, construindo projetos realistas.

Sumário

• Visão geral
  • O desafio
  • Captura de tela
  • Links
• Meu processo
  • Desenvolvido com
  • O que aprendi
  • Desenvolvimento contínuo
  • Recursos úteis
• Autor
• Instalação e execução

Visão Geral

O desafio

Os usuários devem ser capazes de:

• Ver estados de hover e foco para todos os elementos interativos na página

Captura de tela

Links

• URL da solução: https://github.com/lucaslinyker/blog-preview-card
• URL do site ao vivo: https://lucaslinyker.github.io/blog-preview-card

Meu processo

Desenvolvido com

• Marcação semântica de HTML5
• Flexbox
• Fluxo de trabalho mobile-first
• React - Biblioteca JS
• Tailwind CSS - Para estilização

O que aprendi

Criar componentes em React, configurações básicas do Tailwind para classes e organizar classes do Tailwind com ESLint.

Desenvolvimento contínuo

Continuar aprendendo mais sobre React e Tailwind CSS, assim como configurar o ESLint corretamente para melhorar a produtividade da minha equipe.

Tenho explorado diferentes componentes React, além de aprofundar-me nas classes de utilidade e recursos de design escuro do Tailwind CSS. Tem sido uma jornada emocionante até agora, e estou ansioso para aplicar meu conhecimento recém-adquirido em projetos futuros.

Se você tiver recursos ou dicas sobre React ou Tailwind CSS, sinta-se à vontade para compartilhar comigo!

Recursos úteis

• Vídeo sobre hospedagem no GitHub Pages com React - Isso me ajudou a hospedar um aplicativo em React. Eu já entendia como hospedar um site, mas não um site em React.
• Documentação do Tailwind - Esta é uma documentação incrível do Tailwind que me ajudou a finalmente entender como estilizar com o Tailwind. Eu recomendo para qualquer um que queira aprender este framework.

Autor

• GitHub - lucaslinyker
• Frontend Mentor - @lucaslinyker
• Instagram - @lucas_linyker

Instalação e execução

  # Clonar o projeto
  git clone https://github.com/lucaslinyker/blog-preview-card.git
  # Entrar na pasta do projeto
  cd blog-preview-card
  # Instalar as dependências
  npm install
  # Executar o projeto
  npm run dev

OBS: É necessário ter o Node.js instalado na máquina.

⬆ Voltar ao topo