Novos Projetos Tailwind CSS: Construa Clones do Instagram e Tesla

Bem-vindo ao Melhor Curso para Aprender Tailwind CSS

Aprenda Tailwind CSS através do design de sites do mundo real. Este curso baseado em projetos inclui projetos práticos como clones do Instagram e Tesla. Utilizaremos as melhores práticas do Tailwind CSS para projetar e construir sites bonitos e responsivos. Até agora, dois projetos foram criados para este curso, incluindo clones do Instagram e Tesla, e mais projetos estão sendo adicionados a cada mês. Você pode conferir a prévia de cada projeto no currículo do curso.

O que você vai aprender

• Melhores práticas do Tailwind CSS 3.0
• Construir sites responsivos
• Criar clones do Tesla e Instagram
• Aprender conceitos fundamentais como Fundamentos de Utilidade-Primeiro, Design Responsivo, Reutilização de Estilos e Adição de Estilos Personalizados
• Aprender sobre Layout, Flexbox & Grid, Espaçamento, Dimensionamento, Tipografia, Efeitos, Transições & Animação, e muito mais
• Aprender como usar plugins oficiais do Tailwind CSS, como scrollbar e form

Sobre o Instrutor

Meu nome é Sahand, e tenho mais de 15 anos de experiência em programação. Serei seu instrutor e responderei a todas as suas perguntas na seção de Perguntas e Respostas. Espero vê-lo no curso e começar a trabalhar nos projetos com você.

Projeto 1: Clone da Interface do Tesla

Neste projeto, vamos criar um clone da interface do Tesla usando o Tailwind CSS. Temos duas partes na página inicial, incluindo o cabeçalho e a seção principal. O cabeçalho inclui o logotipo da Tesla, os produtos e os menus principais. Esses itens no menu têm um efeito de hover com uma mudança na cor de fundo. O cabeçalho é responsivo de forma que, quando temos uma tela menor, não podemos ver mais o menu de produtos. Vamos conseguir isso usando as classes hidden e inline do Tailwind CSS. O cabeçalho e a seção principal da página inicial têm uma imagem de fundo, que é a imagem do Modelo 3. Vamos aprender como alterar a imagem de fundo usando a classe bg do Tailwind CSS. Abaixo do cabeçalho, temos o título do carro e o link de entrega sem contato. Este link tem um sublinhado que fica mais grosso quando passamos o mouse sobre ele. Vamos aprender como fazer isso usando as classes de decoração do Tailwind CSS. Também temos 2 botões aqui. Os botões também são responsivos. Quando temos uma tela menor, eles ficam um em cima do outro, mas em uma tela maior, eles ficam um ao lado do outro e menores. Na parte inferior da página, temos uma seta que está pulando. Este ícone vem do site hero-icons, que tem o mesmo proprietário do Tailwind CSS. E o efeito de pulo é adicionado usando a classe animate do Tailwind CSS. Nas outras 2 páginas, temos o Modelo Y e acessórios, e finalmente, no final, temos o rodapé da página, que também é responsivo. Todo o site é estilizado usando apenas o Tailwind CSS versão 3.0. O código-fonte completo está disponível em um repositório do GitHub, que você pode encontrar na seção de recursos.

Projeto 2: Clone da Interface do Instagram

Neste projeto, vamos criar um clone da interface do Instagram usando o Tailwind CSS. Temos duas partes na página inicial, incluindo o cabeçalho e a seção de feed. O cabeçalho inclui o logotipo do Instagram, a barra de pesquisa e também o menu com a imagem do usuário. Esses ícones são animados usando a função CSS scale(). O cabeçalho é responsivo de forma que, quando temos uma tela menor, o logotipo do Instagram é diferente e não podemos mais ver o ícone de home. Abaixo do cabeçalho, na seção de feed, temos a seção de histórias, que é rolável e tem efeitos de transição para os usuários também. Também temos 2 posts na seção de feed. Cada post tem um cabeçalho, uma imagem, botões, legenda, comentários e a caixa de entrada. O número de curtidas é mostrado no segundo post. Além disso, neste post, os ícones de coração e de marcador estão preenchidos com uma cor. Todo o site é estilizado usando apenas o Tailwind CSS versão 3.0. Além disso, todos os ícones do site são do hero-icons, que tem o mesmo proprietário do Tailwind CSS. O código-fonte completo está disponível em um repositório do GitHub, que você pode encontrar na seção de recursos.