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

Curso gratuito de Tailwind CSS do básico ao avançado para criar interfaces rápidas e responsivas com utility-first, flex, grid e componentes.

Neste curso gratuito, aprenda sobre

  • Introdução e Preparação do Ambiente
  • Tipografia: Texto, Fontes e Cores
  • Fundamentos de Layout e Estilos de Fundo
  • Layout Moderno com Flexbox e Grid
  • Construindo Componentes e Seções na Prática

Descrição do curso

Tailwind CSS do Iniciante ao Avançado é um curso online gratuito da área de Programação Front-End, ideal para quem quer acelerar a criação de interfaces modernas usando uma abordagem utility-first. Em vez de escrever longos arquivos de CSS, você aprende a compor layouts diretamente no HTML com classes prontas, ganhando produtividade e consistência no design.

Ao longo do curso, você entende o que é o Tailwind e como preparar o ambiente de desenvolvimento para começar com segurança no seu próprio computador. A prática segue pelos fundamentos de tipografia e estilos, permitindo ajustar tamanhos de texto, fontes e pesos com rapidez, além de trabalhar cores, alinhamentos e recursos visuais que fazem diferença no acabamento da UI.

Na parte de layout, o foco é dominar espaçamentos e dimensões, aplicando largura e altura de forma objetiva, além de bordas e comportamento de elementos em diferentes contextos. Você também explora técnicas essenciais de construção de páginas responsivas usando flexbox e grid com Tailwind, entendendo como organizar colunas, linhas e estruturas mais complexas sem complicação.

Para fechar, o curso evolui para componentes comuns do dia a dia, ajudando você a montar seções completas e elementos com aparência profissional, como cards e áreas de destaque para páginas de produto, serviços ou marketing. É uma jornada prática para quem quer criar interfaces com velocidade, manter um padrão visual e se sentir mais confiante ao desenvolver telas no front-end com Tailwind CSS.

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