Imagem do Curso gratuito HTML e CSS para Iniciantes

Curso online gratuitoHTML e CSS para Iniciantes

Duração do curso online: 8 horas e 41 minutos

5

EstrelaEstrelaEstrelaEstrelaEstrela

(3)

Crie sites do zero com HTML e CSS, aprenda layouts e responsividade na prática. Curso online gratuito com exercícios e projeto para o portfólio.

Neste curso gratuito, aprenda sobre

  • Estruturar páginas com HTML: cabeçalho, conteúdo principal (main) e rodapé
  • Função do CSS: estilizar e controlar o visual e o layout do HTML
  • Uso de
    para agrupar elementos e facilitar organização e estilização
  • Montar layouts com Flexbox: direção (linha/coluna), alinhamento e distribuição
  • Centralizar elementos horizontalmente com CSS (ex.: margin auto, flexbox)
  • Criar interfaces: seção de busca, hero, cards e seções de uma landing page
  • Aplicar bordas arredondadas com border-radius
  • Posicionamento com position: relative, fixed e controle de sobreposição
  • Aplicar efeitos visuais: clip-path, box-shadow, drop-shadow e backdrop-filter
  • Diferenças entre box-shadow e drop-shadow em sombras de elementos
  • Controlar camadas com z-index para sobrepor elementos corretamente
  • Criar popups/modais com overlay e comportamento de tela cheia
  • Construir responsividade com media queries e ajustes para diferentes telas
  • Usar o atributo type em botões para definir comportamento em formulários

Descrição do curso

Aprender HTML e CSS é o primeiro passo para criar páginas web profissionais e entender como a internet é construída por trás da tela. Neste curso online gratuito, você vai desenvolver uma base sólida em estruturação de conteúdo e estilização, evoluindo de conceitos essenciais para a construção de páginas completas, modernas e responsivas. A proposta é direta: ensinar o que realmente importa para começar no Front-End, com prática constante e foco em resultados visíveis.

Ao longo das aulas, você vai entender como o HTML organiza as seções de uma página e como o CSS dá forma à interface, controlando espaçamento, cores, tipografia e posicionamento. Você também vai aprender a montar layouts de forma flexível, alinhando elementos com precisão e criando componentes visuais como cabeçalho, área principal, seções e rodapé. Em vez de ficar apenas na teoria, o curso conduz a construção de páginas inspiradas em interfaces reais, o que facilita enxergar aplicações imediatas e acelera seu aprendizado.

Conforme avança, você treina técnicas muito usadas no dia a dia do desenvolvimento: criação de cartões e seções de destaque, aplicação de sombras e efeitos, controle de camadas para organizar elementos na tela e construção de interfaces que se adaptam bem a diferentes tamanhos de dispositivos. O curso também aborda a criação de recursos comuns em sites atuais, como janelas pop-up e sobreposições, ajudando você a entender posicionamento e comportamento visual de componentes.

Para reforçar o conhecimento, há exercícios e perguntas ao longo do percurso, úteis para fixar conceitos e evitar que detalhes importantes passem despercebidos. Ao final, você terá mais confiança para criar sua própria landing page, ajustar um layout com autonomia e iniciar projetos com organização, preparando terreno para avançar em JavaScript, frameworks e desenvolvimento de interfaces mais complexas. Se você quer entrar em Programação Front-End com um caminho claro e prático, este curso é uma excelente porta de entrada.

Conteúdo do curso

  • Aula em vídeo: Introdução ao HTML e ao CSS - Curso Básico de HTML e CSS [Aula 1] 33m
  • Exercício: Qual é o propósito principal do CSS em um documento HTML?
  • Aula em vídeo: Criando o Cabeçalho da Página do Google - Curso Básico de HTML e CSS [Aula 2] 34m
  • Exercício: Qual é a tag HTML utilizada para definir a parte principal do conteúdo de uma página web?
  • Aula em vídeo: Criando o rodapé da página do Google - Curso Básico de HTML e CSS [Aula 3] 22m
  • Exercício: Qual é o propósito da tag
    no desenvolvimento de uma página HTML?
  • Aula em vídeo: Ajustando o Layout da Página do Google - Curso Básico de HTML e CSS [Aula 4] 20m
  • Exercício: Qual é a propriedade CSS que permite organizar os elementos de um contêiner de layout de forma flexível, podendo ser em linha ou coluna, e alinhar seus filhos facilmente?
  • Aula em vídeo: Criando a Seção de Pesquisa do Google - Curso Básico de HTML e CSS [Aula 5] 41m
  • Exercício: Qual é a propriedade CSS utilizada para definir a curvatura das bordas de um elemento, como caixas ou botões, para criar cantos arredondados?
  • Aula em vídeo: Finalizando a página do Google - Curso Básico de HTML e CSS [Aula 6] 42m
  • Exercício: Qual é a propriedade CSS usada para posicionar um elemento de forma relativa ao seu container?
  • Aula em vídeo: Curso de HTML e CSS - Criando uma Landing Page do Zero [Aula 1] 37m
  • Exercício: Qual dos itens a seguir indica corretamente a função do CSS na criação de uma página web?
  • Aula em vídeo: Criando o Card da Seção Hero - Curso de HTML e CSS [Aula 2] 51m
  • Exercício: Quando estamos criando uma página responsiva em HTML e CSS, como podemos centralizar um elemento horizontalmente na tela usando CSS?
  • Aula em vídeo: Construindo a Seção Hero e Passos - Curso de HTML e CSS [Aula 3] 50m
  • Exercício: O que é o Flexbox no CSS?
  • Aula em vídeo: Clip Path e Drop Shadow na Seção Aprender - Curso de HTML e CSS [Aula 4] 55m
  • Exercício: Qual a diferença entre usar 'box-shadow' e 'drop-shadow' no CSS para aplicar sombras a elementos?
  • Aula em vídeo: Finalizando as Seções e o Rodapé com Z-Index - Curso de HTML e CSS [Aula 5] 37m
  • Exercício: No desenvolvimento de uma página web, qual é a finalidade de usar o 'z-index' em CSS?
  • Aula em vídeo: Criando um Popup de Inscrição (backdrop-filter e position fixed) - Curso de HTML e CSS [Aula 6] 45m
  • Exercício: Qual é a função do atributo 'type' ao definir um botão em HTML?
  • Aula em vídeo: Tornando o Site Responsivo com Media Queries - Curso de HTML e CSS [Aula 7] 49m
  • Exercício: O que é uma 'media query' em CSS?

Este curso gratuito inclui:

8 horas e 41 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