Descrição
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.
Estimar frete
Payment & Security
Featured collection
![Curso de Angular e NodeJS - O Guia da Pilha MEAN [Edição 2023] - IBRATH Instituto Brasileiro de Terapias Holísticas teste011020230809](http://enciclopedia.paginasdabiblia.com/cdn/shop/products/a19556.png?v=1699935448&width=1024)
![Curso de Docker & Kubernetes: O Guia Prático [Edição 2023] - IBRATH Instituto Brasileiro de Terapias Holísticas teste011020230809](http://enciclopedia.paginasdabiblia.com/cdn/shop/products/a19570.png?v=1699935525&width=1024)
Dúvidas Gerais
Após a confirmação do pagamento, você receberá um e-mail com todas as instruções para acessar seus cursos. O e-mail incluirá um link para a plataforma de ensino, onde você poderá fazer login utilizando suas credenciais cadastradas no momento da compra. Caso seja um curso em formato de arquivo para download, o mesmo estará disponível na área do aluno e poderá ser acessado diretamente pelo link enviado. Se você não receber o e-mail de acesso em até 24 horas, verifique sua caixa de spam ou entre em contato com nossa equipe pelo e-mail suporte@amentil.com.br.
Após a confirmação do pagamento, seu pedido será processado e enviado para o endereço cadastrado. Você receberá um e-mail com os detalhes do envio, incluindo o código de rastreamento para acompanhar a entrega. Trabalhamos com transportadoras confiáveis e os prazos variam de acordo com o método de envio escolhido e sua localização. É importante garantir que o endereço de entrega esteja correto para evitar atrasos. Caso tenha dúvidas ou problemas com a entrega, nossa equipe de suporte está à disposição pelo e-mail suporte@amentil.com.br.
Você pode tirar dúvidas diretamente com nossa equipe de suporte por diversos canais:
- E-mail: Envie sua pergunta para suporte@amentil.com.br, e nossa equipe responderá em até 2 dias úteis.
- Telefone: Ligue para +55 (48) 1234-5678, disponível de segunda a sexta, das 9h às 18h.
- WhatsApp: Envie uma mensagem para +55 (48) 91265-4321 e receba atendimento rápido e prático.
- Formulário de Contato: Preencha o formulário disponível em nosso site na página Contato.
- Redes Sociais: Você também pode enviar suas dúvidas pelo Instagram ou Facebook em @amentil.sa.
Estamos sempre prontos para ajudar!
Reembolso e garantias
O prazo de reembolso pode variar dependendo da forma de pagamento utilizada:
- Cartão de Crédito: O estorno será realizado em até 7 dias úteis após a aprovação do reembolso, mas o crédito poderá aparecer na sua fatura em um prazo de 30 a 60 dias, conforme a política da operadora do cartão.
- Boleto Bancário ou Transferência: O valor será devolvido via depósito em conta bancária em até 7 dias úteis após a aprovação do reembolso.
Você pode solicitar a devolução de produtos físicos seguindo o passo a passo abaixo:
- Entre em contato com nosso suporte:
- Aguarde nossa resposta:
Nossa equipe analisará sua solicitação em até 3 dias úteis e fornecerá as instruções detalhadas para a devolução. - Prepare o produto:
- Envie o produto:
- Reembolso ou troca:
Nosso compromisso é fornecer uma experiência confiável e segura ao acessar nossa enciclopédia online. Garantimos a qualidade dos serviços e funcionalidades oferecidos, seguindo as condições descritas abaixo:
1. Garantia de Acesso
- Disponibilidade: Oferecemos garantia de disponibilidade da enciclopédia online 24 horas por dia, 7 dias por semana, exceto durante períodos programados de manutenção ou por problemas técnicos fora do nosso controle.
- Resolução de Problemas: Em caso de interrupções no serviço, nossa equipe técnica atuará para restaurar o acesso no menor tempo possível.
2. Garantia de Conteúdo
- Precisão e Atualização: Todo o conteúdo disponibilizado é cuidadosamente revisado para garantir precisão e relevância. No entanto, a enciclopédia online é constantemente atualizada, e não podemos garantir a exatidão absoluta em casos de informações sujeitas a mudanças rápidas.
- Correção de Erros: Caso identifique erros ou inconsistências no conteúdo, você pode nos informar pelo e-mail conteudo@amentil.com.br, e faremos a análise e correção, se necessário.
3. Garantia de Segurança
- Proteção de Dados: Utilizamos tecnologias avançadas para proteger suas informações pessoais e garantir que sua navegação na enciclopédia seja segura.
- Privacidade: Todos os dados coletados seguem as diretrizes da nossa Política de Privacidade.
4. Garantia de Reembolso
Para assinaturas da enciclopédia online:
- Direito de Arrependimento: Você pode solicitar o cancelamento e reembolso integral em até 7 dias corridos após a compra, desde que não tenha acessado conteúdos pagos da plataforma.
- Problemas Técnicos: Caso não consiga acessar os conteúdos devido a falhas técnicas imputáveis à plataforma, garantimos suporte prioritário e, se o problema não for resolvido, você pode solicitar reembolso proporcional ao período não utilizado.
5. Limitações
- Conexão à Internet: Não garantimos acesso à enciclopédia em situações de instabilidade ou falhas na conexão de internet do usuário.
- Uso Indevido: O acesso e uso da enciclopédia são pessoais e intransferíveis. O compartilhamento de credenciais pode resultar na suspensão ou cancelamento da assinatura sem reembolso.
6. Contato para Garantias
Caso precise de suporte ou queira exercer algum direito de garantia, entre em contato conosco:
- E-mail: suporte@amentil.com.br
- Telefone: +55 (48) 1234-5678
- Horário de atendimento: Segunda a sexta, das 9h às 18h.