Curso online gratuitoWeb Fundamentos: HTML e CSS com Projetos
Duração do curso online: 24 horas e 59 minutos
Novo
Curso gratuito de HTML e CSS com projetos práticos: semântica, layouts, responsivo, Flexbox, Grid, efeitos e animações para iniciar no Front-End.
Neste curso gratuito, aprenda sobre
Introdução ao HTML e Estrutura de Documento
Fundamentos de CSS: Regras, Classes e Box Model
Imagens, Semântica e Layouts com Display, Float e Box Sizing (Projeto 1)
Posicionamento com CSS e Projeto Fashion
Listas, Overflow e Tabelas
Formulários: Semântica, Tipos de Input e Estilização
Efeitos Visuais e Tipografia com CSS
Projeto Strata: HTML Semântico e CSS Completo
Seletores Avançados, Pseudo-classes e Acessibilidade
Design Responsivo: Media Queries e Projeto Responsivo
Mídias Incorporadas: Áudio, Vídeo, Iframe e Figure
Imagens Responsivas com Picture e Srcset
Cores e Gradientes Avançados
Layouts com Flexbox
Layouts com CSS Grid e Desafio da Calculadora
Semântica Avançada e Especificidade no CSS
Animações com CSS (Transitions e Keyframes)
Descrição do curso
Web Fundamentos: HTML e CSS com Projetos é um curso online gratuito para quem quer sair do zero e construir páginas modernas com base sólida em Front-End. Ao longo das aulas, você aprende a estruturar conteúdo com HTML semântico e a estilizar interfaces com CSS, entendendo como cada escolha afeta legibilidade, organização do código e experiência do usuário.
A proposta é prática: você evolui de marcação básica para layouts completos, trabalhando com imagens, menus, cards, posicionamento, tipografia e componentes comuns do dia a dia. Também aprofunda conceitos essenciais como box model, seletores, pseudo-classes e pseudo-elementos, além de técnicas para criar efeitos visuais com sombras, gradientes e transições suaves.
O curso ainda avança para temas indispensáveis no desenvolvimento atual, como design responsivo com media queries, incorporação de mídias e recursos de imagens responsivas. Na parte de layout, você consolida conhecimentos com Flexbox e CSS Grid, aprendendo a organizar áreas, alinhar elementos, controlar espaçamentos e adaptar a página para diferentes tamanhos de tela com mais previsibilidade.
Para fechar, você explora especificidade, boas práticas de semântica e animações em CSS, ganhando repertório para criar interfaces mais dinâmicas e profissionais. Uma ótima escolha para montar portfólio, reforçar fundamentos e ganhar confiança para seguir para frameworks e projetos mais avançados.
Conteúdo do curso
Aula em vídeo: Seção 1 - Aula 1 - CURSO HTML e CSS - Apresentação06m
Exercício: Qual é o foco principal do treinamento em Web Fundamentos?
Aula em vídeo: Seção 1 - Aula 2 - CURSO HTML e CSS - Introdução19m
Aula em vídeo: Seção 1 - Aula 3 - Primeiro HTML13m
Aula em vídeo: Seção 1 - Aula 4 - Algumas Tags principais14m
Exercício: Qual é o objetivo principal das tags de título (H1 a H6) no HTML?
Aula em vídeo: Seção 1 - Aula 5 - Principais tags - mão na massa16m
Aula em vídeo: Seção 1 - Aula 6 - Correção de exercício04m
Aula em vídeo: Seção 1 - Aula 7 - Estrutura base - teoria07m
Exercício: Qual é a função principal da tag head em um documento HTML?
Aula em vídeo: Seção 1 - Aula 8 - Estrutura base - mão na massa08m
Aula em vídeo: Seção 1 - Aula 9 - Para que servem as Metatags?03m
Aula em vídeo: Seção 2 - Aula 1 - As folhas de estilo em cascata13m
Exercício: Qual é a forma mais recomendada de aplicar CSS em um site com várias páginas, visando facilitar a manutenção?
Aula em vídeo: Seção 2 - Aula 2 - Primeiras regras de CSS15m
Aula em vídeo: Seção 3 - Aula 1 - Trabalhando com imagens08m
Aula em vídeo: Seção 3 - Aula 2 - Imagens - mão no código14m
Exercício: Qual propriedade CSS faz a imagem de fundo ficar fixa na janela, sem rolar junto com a página?
Aula em vídeo: Seção 3 - Aula 3 - Estruturando layouts com semântica13m
Aula em vídeo: Seção 3 - Aula 4 - Projeto 1 - HTML11m
Aula em vídeo: Seção 3 - Aula 5 - Projeto 1 - CSS19m
Exercício: Ao criar um arquivo CSS dentro da pasta css e precisar usar uma imagem que está na pasta imagens no mesmo nível, qual caminho relativo é o mais adequado para o background-image?
Aula em vídeo: Seção 3 - Aula 6 - footer - como centralizar na vertical02m
Aula em vídeo: Seção 3 - Aula 7 - CSS display: inline, block e inline-block15m
Aula em vídeo: Seção 3 - Aula 8 - Projeto 1 - menu horizontal14m
Aula em vídeo: Seção 3 - Aula 11 - CSS Float e clear na prática13m
Exercício: Ao aplicar float: left em um elemento, qual efeito colateral comum ocorre no fluxo do documento e como pode ser corrigido no elemento seguinte?
Aula em vídeo: Seção 3 - Aula 12 - Projeto 1 - cards horizontais12m
Aula em vídeo: Seção 4 - Aula 1 - CSS Position09m
Aula em vídeo: Seção 4 - Aula 2 - CSS Position na prática09m
Exercício: Ao usar position: absolute em um elemento, o que faz ele passar a se posicionar em relação ao bloco laranja (pai) em vez de se posicionar em relação ao documento?
Aula em vídeo: Seção 4 - Aula 3 - Projeto Fashion - início05m
Aula em vídeo: Seção 4 - Aula 4 - Projeto Fashion - HTML15m
Aula em vídeo: Seção 4 - Aula 5 - Projeto Fashion - CSS - parte 118m
Exercício: Ao posicionar um menu com position: absolute dentro do cabeçalho, o que é necessário no elemento pai para que o posicionamento (top/left) seja relativo a ele, e não ao documento inteiro?
Aula em vídeo: Seção 4 - Aula 6 - Projeto Fashion - CSS - parte 211m
Aula em vídeo: Seção 5 - Aula 1 - Listas aninhadas e de definição03m
Aula em vídeo: Seção 5 - Aula 2 - Listas aninhadas e de definição na prática08m
Exercício: Qual seletor CSS oculta apenas a lista (ol/ul) que está dentro de um item (li) de outra lista, sem esconder a lista principal?
Aula em vídeo: Seção 5 - Aula 3 - Overflow06m
Aula em vídeo: Seção 5 - Aula 4 - Tabelas06m
Aula em vídeo: Seção 5 - Aula 5 - Tabelas na prática10m
Exercício: Em uma tabela HTML, qual atributo deve ser usado para fazer uma célula (TD) ocupar 3 colunas, como no rodapé com uma frase única?
Aula em vídeo: Seção 6 - Aula 1 - Formulário de busca no Google14m
Aula em vídeo: Seção 6 - Aula 2 - Semântica em formulários06m
Aula em vídeo: Seção 6 - Aula 3 - CSS em formulários15m
Exercício: Em um formulário de login, qual atributo do
Aula em vídeo: Seção 6 - Aula 4 - Tipos de entrada de dados - parte 116m
Aula em vídeo: Seção 6 - Aula 5 - Tipos de entrada de dados - parte 205 0523m
Aula em vídeo: Seção 6 - Aula 6 - Tipos de entrada de dados - parte 302m
Exercício: Qual é a finalidade correta do atributo HTML placeholder em um input?
Aula em vídeo: Seção 7 - Aula 1 - Quais efeitos veremos?01m
Exercício: Ao estruturar uma área de “trabalhos recentes” com vários cards (imagem + título + texto), quais elementos HTML semânticos são mais adequados para separar a seção e representar cada card?
Aula em vídeo: Seção 8 - Aula 3 - HTML Get in Touch09m
Aula em vídeo: Seção 8 - Aula 4 - HTML - Elements - parte 120m
Aula em vídeo: Seção 8 - Aula 5 - HTML - Elements - parte 2 - Links05m
Aula em vídeo: Seção 8 - Aula 6 -HTML - Elements - parte 3 - Tabelas01m
Aula em vídeo: Seção 8 - Aula 7 - HTML - Elements - parte 4 - buttons11m
Aula em vídeo: Seção 8 - Aula 8 - HTML - Elements - parte 5 - Imagens05m
Exercício: Para organizar uma seção de imagens em HTML e facilitar a formatação no CSS, qual estrutura é a mais adequada?
Aula em vídeo: Seção 8 - Aula 11 - CSS - parte 1 - base17m
Exercício: Para evitar que a borda inferior do link desapareça de forma brusca ao tirar o mouse, qual ajuste é o mais indicado?
Aula em vídeo: Seção 8 - Aula 12 - CSS - parte 2 - listas14m
Aula em vídeo: Seção 8 - Aula 13 - CSS - parte 3 - botões09m
Aula em vídeo: Seção 8 - Aula 14 - CSS - parte 4 - tabelas11m
Exercício: Qual propriedade CSS é usada para remover o espaço entre as bordas das células de uma tabela, fazendo parecer uma borda única?
Aula em vídeo: Seção 8 - Aula 15 - CSS - parte 5 - Get in Touch23m
Aula em vídeo: Seção 8 - Aula 16 - CSS - parte 6 - arrumar o formulário05m
Aula em vídeo: Seção 8 - Aula 17 - CSS - parte 7 - ajustes10m
Aula em vídeo: Seção 8 - Aula 18 - CSS - parte 8 - Galeria de imagens - 3 colunas12m
Aula em vídeo: Seção 8 - Aula 19 - CSS - parte 9 - Corrigir grid10m
Aula em vídeo: Seção 8 - Aula 20 - CSS - parte 10 - hover nos botões05m
Exercício: No CSS, qual propriedade pode ser usada para criar uma animação suave ao passar o mouse (hover) em botões e links, aplicando a transição a qualquer propriedade alterada?
Aula em vídeo: Seção 8 - Aula 21 - CSS - parte 11 - footer04m
Exercício: No modelo de cores HSL, o que o parâmetro Hue (Tom) representa?
Aula em vídeo: Seção 13 - Aula 2 -preparando o exercício com CSS counter04m
Aula em vídeo: Seção 13 - Aula 3 - gradientes radiais - parte 122m
Aula em vídeo: Seção 13 - Aula 4 - gradientes radiais - parte 206m
Exercício: Ao combinar uma imagem de fundo com um gradiente radial no CSS, como garantir que o gradiente fique sobre a imagem e apenas na parte de cima?