Como usar Flexbox para alinhar elementos em uma página HTML?

Com a propriedade display: flex, é possível organizar e alinhar os elementos filhos em linha ou coluna.

Para que serve uma media query no CSS?

Ela permite aplicar estilos diferentes conforme o tamanho da tela, criando layouts responsivos.

Qual é a diferença entre box-shadow e drop-shadow no CSS?

Box-shadow cria sombra na caixa do elemento; drop-shadow acompanha melhor o formato visível de imagens e elementos com transparência.

Imagem do Curso gratuito HTML e CSS para Iniciantes

Curso online gratuito HTML e CSS para Iniciantes

Name: HTML e CSS para Iniciantes
Availability: InStock

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

(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

Sobre o curso online gratuito

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?