Tailwind CSS do Zero | Aprenda Construindo Projetos

Construa layouts impressionantes de forma rápida e eficiente com o poder das classes utilitárias do Tailwind CSS. Este curso envolvente é baseado em projetos e irá ensiná-lo a criar layouts impressionantes usando o framework Tailwind CSS. Você também se tornará proficiente no uso de classes utilitárias, o que diferencia o Tailwind CSS de frameworks baseados em componentes como o Bootstrap. Vamos mergulhar nos detalhes deste curso...

O Sandbox

Antes de nos aprofundarmos nos projetos, vamos passar algum tempo no ambiente de codificação sandbox. Nas duas primeiras seções, trabalharemos em um ambiente de codificação dedicado. Cada vídeo apresentará um novo arquivo onde você pode experimentar e aprender sobre diferentes aspectos do Tailwind. Abordaremos tópicos como cores, tipografia, espaçamento, classes flex e muito mais. Essa abordagem estruturada nos permite cobrir todos os aspectos do Tailwind em uma ordem específica, garantindo uma experiência de aprendizado abrangente.

Mini-Projetos

Depois de se familiarizar com o ambiente sandbox, aplicaremos nosso conhecimento para criar pequenos projetos. Esses projetos levarão apenas de 10 a 20 minutos para serem concluídos, e cada projeto será abordado em um único vídeo. Alguns dos mini-projetos incluem um Cartão de Inscrição por E-mail, Grades de Preços, Modal de Produto, Galeria de Imagens e Modal de Login. Talvez até introduzamos mini-projetos adicionais para aprimorar ainda mais sua experiência de aprendizado. Esses exercícios práticos ajudarão você a ganhar confiança criando exemplos do mundo real.

Projetos de Websites

Após dominar o básico, passaremos para websites maiores de página de destino. É aqui que você colocará suas habilidades à prova. Selecionamos cuidadosamente 6 websites modernos e com visual limpo para você construir. Esses designs foram criados em colaboração com o Frontend Mentor. Alguns projetos envolverão JavaScript para recursos como menus hamburguer, abas e validação de formulários. Vamos dar uma olhada mais de perto nos projetos: - Website do Clipboard: Uma página simples de apresentação de produto de software que se concentra em flexbox e alinhamento. Também inclui imagens de fundo para maior apelo visual. - Loopstudios: Um website de empresa de realidade virtual com imagens cativantes e um menu móvel responsivo com JavaScript. Também incorpora efeitos de sobreposição de gradiente. - Shortly: Um website para uma ferramenta de encurtamento de links. Inclui um menu responsivo visualmente atraente e utiliza JavaScript para validação de formulários e manipulação do DOM. - Testimonial Grid: Este projeto enfatiza o uso das classes de grid do Tailwind para criar uma grade de depoimentos atraente. - Fylo: Uma página de produto com um recurso de modo claro/escuro. JavaScript é usado para salvar o modo de cor no armazenamento local. Também inclui um componente de aba dinâmica para a seção de perguntas frequentes. - Bookmark: Uma página de destino para uma extensão de gerenciador de favoritos. Este website apresenta imagens de fundo dinâmicas, um menu hamburguer e abas com funcionalidade em JavaScript.

O Que Você Vai Aprender

Ao se inscrever neste curso, você irá: - Dominar a arte de criar e editar layouts com uma velocidade incrível. - Ganhar proficiência no uso das classes utilitárias do Tailwind por meio de prática prática no sandbox de código. - Construir 5 mini-projetos e 6 projetos de websites para solidificar seu entendimento e habilidades. - Aprender a configurar um ambiente de desenvolvimento usando o Tailwind CLI. - Configurar seus estilos para criar layouts personalizados adaptados às suas necessidades específicas. Junte-se a nós nesta jornada emocionante para se tornar um desenvolvedor proficiente em Tailwind CSS!