Imagem do Curso gratuito Tailwind CSS do Iniciante ao Avançado

Curso online gratuitoTailwind CSS do Iniciante ao Avançado

Duração do curso online: 5 horas e 59 minutos

Novo

Crie interfaces modernas com Tailwind CSS e acelere seu front-end: do básico ao avançado, com curso online gratuito, exercícios e prática responsiva.

Neste curso gratuito, aprenda sobre

  • Conceito e proposta do Tailwind CSS (utility-first) para estilizar interfaces rapidamente
  • Formas de iniciar com Tailwind: via CDN e preparando ambiente local de desenvolvimento
  • Tipografia no Tailwind: text-base (16px), font-family (font-mono), peso e itálico/not-italic
  • Cores de texto e fundo: ex. text-red-500 e bg-black para padronizar paleta
  • Alinhamento de texto com utilitários como text-center
  • Backgrounds: uso de bg-* e controle de repetição com bg-no-repeat
  • Dimensões: w-full, classes de height e utilitário size-* para largura/altura simultâneas
  • Bordas e box model: border-* e box-border para incluir padding/borda no tamanho
  • Float: uso de float-right para texto contornar imagens em artigos
  • Flexbox: controle de flex-basis com basis-full e composição de layouts flex
  • Grid avançado: grid-cols-[...] e grid-rows-[...] para templates customizados
  • Responsividade: breakpoints (ex. md:) para 1 coluna no mobile e 4 colunas no md+
  • Componentização na prática: criação de cards, seções de planos, serviços e CTAs
  • Animações utilitárias: hover com classes de transição e animate-pulse

Descrição do curso

Aprenda a construir interfaces rápidas, consistentes e responsivas com Tailwind CSS, uma abordagem utilitária que muda a forma de escrever estilos no front-end. Em vez de passar tempo criando dezenas de classes personalizadas e alternando entre arquivos, você desenvolve diretamente no HTML com utilitários prontos, mantendo produtividade alta e visual bem padronizado. Este curso online gratuito foi pensado para quem quer sair do “CSS que vira bagunça” e alcançar um fluxo de desenvolvimento mais ágil, ideal para projetos pessoais, portfólios e aplicações web.

Do nível iniciante ao avançado, você evolui com prática guiada e exercícios que ajudam a fixar o raciocínio por trás das classes do Tailwind. Ao longo do caminho, você fortalece fundamentos essenciais de tipografia e cores, controla alinhamentos e espaçamentos com precisão, ajusta dimensões e comportamento de layout, e entende como lidar com bordas e regras que influenciam o tamanho final dos elementos. Tudo isso com foco em aplicar as utilidades de forma intencional, evitando excesso de classes e ganhando legibilidade no código.

Conforme avança, você passa a dominar padrões de layout amplamente usados no mercado, explorando flexbox e grid para criar estruturas mais complexas. A construção de componentes na prática, como cards e seções comuns em sites modernos, aproxima o aprendizado do cenário real de trabalho, enquanto você treina responsividade com breakpoints e aprende a organizar grades que se adaptam bem do mobile ao desktop. Além disso, você vê como adicionar interações e animações usando classes do próprio framework, elevando a sensação de qualidade da interface sem depender de configurações complicadas.

Ao final, você terá segurança para iniciar um projeto com Tailwind, configurar o ambiente, escolher boas combinações de utilitários e transformar layouts rapidamente em interfaces profissionais. É uma evolução valiosa para quem busca colocação em programação front-end, quer entregar telas com mais velocidade ou deseja modernizar o jeito de criar UI com um framework adotado por times e produtos no mundo todo.

Conteúdo do curso

  • Aula em vídeo: O que é o Tailwind CSS? - Curso do Iniciante ao Avançado em Tailwind CSS 19m
  • Exercício: Qual é a principal proposta do Tailwind CSS ao estilizar uma interface?
  • Aula em vídeo: #2 Como prepara o ambiente de desenvolvimento do TAILWIND no seu computador - Maykon Silveira 19m
  • Exercício: Qual é a forma mais simples apresentada para começar a usar Tailwind CSS sem instalar pacotes via NPM?
  • Aula em vídeo: #3 Trabalhando com text-size / font-size no Tailwind CSS - Curso de Tailwind CSS por Maykon Silveira 19m
  • Exercício: No Tailwind CSS, qual classe define o tamanho de fonte equivalente ao padrão de 16px?
  • Aula em vídeo: #4 Como trabalhar com font-family no TAILWIND CSS - Curso de TailWind CSS por Maykon Silveira 12m
  • Exercício: No Tailwind CSS, qual classe é usada para aplicar uma família de fonte monoespaçada (monospace) ao texto?
  • Aula em vídeo: #5 Como trabalhar com font-weight no TAILWIND CSS - Programação Web na Prática - Msflix 11m
  • Exercício: Em Tailwind CSS, quais classes controlam o estilo da fonte para aplicar e remover itálico?
  • Aula em vídeo: #6 Programação web com Tailwind CSS, como trabalhar com FONT-COLORS NO Tailwind CSS - MSFLIX 28m
  • Exercício: Em Tailwind CSS, qual classe aplica a cor vermelha ao texto com intensidade (shade) 500?
  • Aula em vídeo: #7 Curso de desenvolvimento web com Tailwind CSS - Como trabalhar com text-align no Tailwind CSS 06m
  • Exercício: Qual classe do Tailwind CSS é usada para alinhar um texto ao centro?
  • Aula em vídeo: #8 Como usar os background-color no Tailwind CSS passo a passo - Maykon Silveira - Programação Web 22m
  • Exercício: Qual classe do Tailwind CSS define a cor de fundo de um elemento para preto?
  • Aula em vídeo: #9 Como trabalhar com background-image no Tailwind Css Maykon Silveira 09m
  • Exercício: Qual classe do Tailwind CSS é usada para evitar que uma imagem de fundo se repita?
  • Aula em vídeo: #10 - Como trabalhar com width no Tailwind CSS -Maykon Silveira - CURSO DE TAILWIND CSS - FRONT-END 23m
  • Exercício: No Tailwind CSS, qual classe define a largura do elemento para ocupar 100% do espaço disponível?
  • Aula em vídeo: #11 Como usar o height no Tailwind Css com Maykon Silveira - Curso de Programação Web 13m
  • Exercício: Em Tailwind CSS, qual utilitário define altura e largura iguais ao mesmo tempo (por exemplo, 1px por 1px)?
  • Aula em vídeo: #12 Como Trabalhar com BORDER no TAILWIND CSS Maykon Silveira - Curso de Programação Web 15m
  • Exercício: No Tailwind CSS, qual classe aplica o modelo de box sizing em que borda e padding entram no cálculo do tamanho do elemento?
  • Aula em vídeo: #13 Como usar FLOAT no TAILWIND CSS - Curso de Front-end para Iniciantes - Maykon Silveira 06m
  • Exercício: Qual classe do Tailwind CSS é usada para fazer a imagem flutuar à direita dentro de um artigo, permitindo que o texto contorne a imagem?
  • Aula em vídeo: #14 Como trabalhar com flex-basis no tailwind css - Maykon Silveira - Curso de front-end 13m
  • Exercício: No Tailwind CSS, qual classe é usada para definir que um item flex deve ocupar 100% da largura disponível (flex-basis)?
  • Aula em vídeo: #15 Como trabalhar com GRID-TAMPLATE-COLUMNS no TAILWIND CSS na pratica - Curso de programação web 31m
  • Exercício: Em Tailwind CSS, qual utilidade principal do recurso de Grid Template Columns (ex.: grid-cols-[150px_auto_150px])?
  • Aula em vídeo: #16 ???? ????Como trabalhar com GRID-ROWS no TAILWIND CSS - Maykon Silveira 24m
  • Exercício: No Tailwind CSS, qual utilitário é usado para definir a estrutura de linhas (rows) de um layout com topo, conteúdo e rodapé, ajustando tamanhos como 100px 1fr 200px?
  • Aula em vídeo: #17 ???? Como construir um CARD PROFISSIONAL no TAILWIND CSS - Maykon Silveira 14m
  • Exercício: Qual classe do Tailwind CSS permite aplicar uma animação ao passar o mouse (hover) sem escrever CSS?
  • Aula em vídeo: #18 Como criar uma Section de Planos no TailWind Css - Curso de Front-end Developer Maykon Silveira 18m
  • Exercício: Em Tailwind CSS, qual conjunto de classes deixa a grade responsiva com 1 coluna no mobile e 4 colunas a partir do breakpoint md?
  • Aula em vídeo: #19 Como criar SECTION de SERVIÇOS no TAILWIND CSS - Front-end para Iniciantes Maykon Silveira 26m
  • Exercício: Qual é a principal vantagem ao usar Tailwind/Twind CSS no desenvolvimento de layouts rápidos?
  • Aula em vídeo: #20 Como criar um CTA DESTAQUE para uma agência de marketing digital no TAILWIND CSS Maykon Silveira 23m
  • Exercício: Qual classe do Tailwind CSS aplica a animação de “pulsar” (pulse) em um elemento?

Este curso gratuito inclui:

5 horas e 59 minutos de curso online em vídeo

Certificado digital de conclusão de curso ( Gratuito )

Exercícios para treinar seus conhecimentos

100% gratuito, do conteúdo ao certificado

Pronto para começar?Baixe o app e comece hoje mesmo.

Instale o app agora

para ter acesso ao curso
Ícone representando cursos de tecnologia e negócios

+ de 5.000 cursos gratuitos

Programação, Inglês, Marketing Digital e muito mais! Aprenda o que quiser, gratuitamente.

Ícone de calendário com alvo representando planejamento de estudos

Plano de estudos com IA

A Inteligência Artificial do nosso aplicativo pode criar um cronograma de estudos para o curso que você escolher.

Ícone de profissional representando carreira e negócios

Do zero ao Sucesso profissional

Melhore seu currículo com nosso Certificado gratuito e depois utilize nossa Inteligência Artificial para buscar seu emprego dos sonhos.

Você também pode utilizar o QR Code ou os Links abaixo

QR Code - Baixar Cursa - Cursos Online

Mais cursos gratuitos em Programação Front-End

Ebook + Áudiobooks gratuitos! Aprenda ouvindo ou lendo!

Baixe o Aplicativo agora para ter acesso a + de 5000 cursos gratuitos, exercícios, certificado e muito conteúdo sem pagar nada!

  • Cursos online 100% gratuitos do início ao fim

    Milhares de cursos online em vídeo, ebooks e áudiobooks.

  • Mais de 60 mil exercícios gratuitos

    Para testar seus conhecimentos no decorrer dos cursos online

  • Certificado Digital gratuito válido em todo o Brasil

    Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail

Aplicativo Cursa na tela de ebook, na tela de curso em vídeo e na tela de exercícios do curso, mais o certificado de conclusão de curso