Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

HTML, CSS e JAVASCRIPT do Zero ao Avançado + Projetos Reais

Name: HTML, CSS e JAVASCRIPT do Zero ao Avançado + Projetos Reais
Rating: 4.2 (8 reviews)

Aprenda Desenvolvimento Web Front-End criando sites com HTML, CSS e JavaScript passo a passo perfeito para iniciantes

Created byTayse Rosa

Last updated 4/2026

Portuguese

What you'll learn

Entender os fundamentos do JavaScript moderno (variáveis, tipos de dados, operadores e estruturas de controle)
Criar funções, manipular arrays e objetos e organizar melhor o código
Manipular o DOM para tornar páginas web interativas e dinâmicas
Trabalhar com eventos, validação de formulários e interações reais no navegador
Desenvolver projetos práticos aplicando JavaScript do zero até funcionalidades completas

Course content

5 sections • 57 lectures • 7h 36m total length

Boas vindas e visão geral do curso2:15
? Boas-vindas e Visão Geral do Curso

Seja muito bem-vindo(a) ao curso de HTML ,CSS e JAVASCRIPT do zero ao Avançado! ?
É um prazer enorme ter você aqui, e eu posso te garantir uma coisa: ao final deste curso, você vai sair com uma base sólida para criar seus próprios sites do zero, com estrutura, estilo e projetos reais publicados na internet.

Este curso foi criado especialmente para quem:

Está começando do absoluto zero

Sempre teve curiosidade sobre criação de sites

Quer aprender de forma simples, prática e sem complicação

Deseja entender como a web funciona de verdade

Quer dar os primeiros passos no desenvolvimento web

Aqui, você não vai encontrar explicações complicadas ou cheias de termos técnicos sem sentido. A proposta é te ensinar como se eu estivesse do seu lado, mostrando passo a passo, na prática, como tudo funciona.

? O que você vai aprender neste curso

Ao longo do curso, você vai aprender:

? HTML — A estrutura do seu site

Você vai entender como criar a base de qualquer site, aprendendo:

O que é HTML e para que ele serve

Como criar arquivos e organizar seu projeto

O que são tags e como usá-las corretamente

HTML semântico (para sites mais organizados e profissionais)

Estrutura básica de uma página HTML

Tabelas, formulários e validações

Boas práticas como indentação e organização do código

? CSS — O visual do seu site

Aqui é onde seu site ganha vida e fica bonito! Você vai aprender:

O que é CSS e como aplicar estilos no site

Cores, fontes e formatação de textos

Margins, paddings, bordas, width e height

Estilização de links e formulários

Unidades de medida

Como deixar seu site responsivo para celular, tablet e computador

?️ Projetos práticos + Site no ar

Você não vai ficar só na teoria. Neste curso, você vai colocar a mão na massa com vários projetos reais.

? Como aproveitar melhor este curso

Para ter os melhores resultados, eu recomendo:

Assistir às aulas na ordem

Praticar junto comigo

Pausar o vídeo e testar no seu computador

Não ter medo de errar (errar faz parte do aprendizado!)

Usar a área de perguntas sempre que tiver dúvidas

? Para quem é este curso

Este curso é ideal para:

Iniciantes em programação

Pessoas que querem criar seus próprios sites

Freelancers iniciantes

Empreendedores que querem entender como funciona a web

Estudantes e curiosos pela área de tecnologia

❤️ Mensagem final

Fico muito feliz em te acompanhar nessa jornada. Aprender programação pode parecer difícil no começo, mas com o método certo, tudo fica mais simples.

Meu objetivo aqui é te mostrar que você é capaz, mesmo que hoje ainda ache que “isso não é pra mim”.

Agora, bora começar? ?
Nos vemos na próxima aula!
Grupo de alunos e rede de contato0:05
O que é HTML e para que serve4:52
Quais softwares vou precisar3:15
Conhecendo o VSCode por dentro10:28
5. HTML Base1:45
Títulos parágrafos e quebras de linha9:48
Imagem no HTML4:34
O que é a tag meta4:08
O que é indentação e por que é importante regravar3:22
Listas no HTML5:18
Entendendo HTML Semântico8:11
Tabela no HTML10:57
Formulário no HTML7:44

Extensões recomendadas0:02
Live Server
Color Highlight
Dracula Theme Official
Criando nosso Hello World7:26
Primeiros testes no console.log1:43
Variaveis9:51
Comentarios3:18
Tipos de dados13:41
Variáveis (var, let, const)5:46
Orientações sobre o ponto e vírgula4:31
Operações em variáveis3:41
String e Template String6:22
Estrutura condicional If / else8:08
Diferença entre == e ===5:11
Multi-condicionais (&& e ||)4:18
Condicional ternária4:00
Switch6:25
Introdução a função7:20
Função na prática6:53
Return da função3:49
Arrow function4:43
While5:49
Do While2:55
Introdução a array5:51
Adicionar itens ao array3:02
Remove itens do array20:38
Exercícios de array7:21
O que são objetos9:36
Acessando e alterando itens do objeto6:17
Resolvendo exercicios sobre objetos3:52
Loop em for (arrays e objetos)10:04
Loops em Arrays no JavaScript

Nesta aula vamos aprender diferentes formas de percorrer arrays utilizando loops no JavaScript.
Para facilitar o entendimento, vamos utilizar exemplos com animais.
1. Percorrendo um Array com for
Primeiro vamos criar um array de animais.
let animais = ['cachorro', 'gato', 'leão', 'elefante']
for (let n = 0; n < 15; n++) {
console.log(animais[n])
}

Explicação
let n = 0 → iniciamos o contador em 0
n < 15 → o loop será executado 15 vezes
n++ → o valor de n aumenta a cada repetição

⚠️ Como o array possui apenas 4 itens, o loop tentará acessar posições que não existem, retornando undefined.

2. Usando o tamanho do Array com length
Podemos evitar esse problema utilizando a propriedade length, que retorna o tamanho do array.
let animais = ['cachorro', 'gato', 'leão', 'elefante']
for (let n = 0; n < animais.length; n++) {
console.log(animais[n])
}

Explicação
animais.length retorna a quantidade de elementos do array.
Neste caso:
4
Assim o loop irá percorrer apenas os itens existentes no array.

3. Outra forma de trabalhar com loop em arrays (for in)
Também podemos utilizar o for in para percorrer arrays.
let animais = ['cachorro', 'gato', 'leão', 'elefante']
animais.push('tigre')
// i vai ser a chave do meu array
for(let i in animais){
console.log(animais[i])
}

Explicação
for in percorre os índices do array.
Exemplo de índices:
0
1
2
3
4

E usamos esses índices para acessar os valores:

animais[i]

4. Outra forma de percorrer arrays (for of)
O for of percorre diretamente os valores do array.
let animais = ['cachorro', 'gato', 'leão', 'elefante']
animais.push('tigre')
// animal DE animais = se referindo ao valor
for(let animal of animais){
console.log(animal)
}

Explicação
Diferente do for in, o for of retorna diretamente o valor do array.
Saída no console:

cachorro
gato
leão
elefante
tigre

5. Como acessar objetos dentro de um Array
Arrays também podem armazenar objetos.
let animais = [
{nome:'cachorro', qt:10},
{nome:'gato', qt:5},
{nome:'leão', qt:15},
]

for(let animal of animais){
console.log(animal.nome + ' - ' + animal.qt)
}

Explicação
Cada item do array é um objeto contendo duas propriedades:

nome
qt (quantidade)

Podemos acessar essas propriedades assim:

animal.nome
animal.qt

Saída no console:

cachorro - 10
gato - 5
leão - 15
Conclusão

Nesta aula aprendemos várias formas de percorrer arrays no JavaScript:

for tradicional
for usando length
for in
for of
percorrer arrays de objetos

Essas técnicas são muito utilizadas no dia a dia do desenvolvimento JavaScript.

Requirements

Não é necessário ter experiência prévia, ensinaremos tudo no curso
Computador com acesso à internet
Editor de código gratuito como VS Code (ou similar)
Navegador (Google Chrome, ou similar)
Interesse em aprender Programação JavaScript do zero

Description

HTML, CSS e JavaScript do Zero ao Avançado + Projetos Reais

Aprenda HTML, CSS e JavaScript do absoluto zero e desenvolva sites completos e interativos, mesmo que você nunca tenha programado antes.

Este é um curso completo de desenvolvimento web front-end, criado especialmente para iniciantes que querem aprender passo a passo, entendendo cada conceito na prática enquanto constroem projetos reais.

Ao longo do curso, você vai aprender como funciona a estrutura de um site, como estilizar páginas modernas com CSS e como usar JavaScript para adicionar interatividade às páginas.

Tudo isso de forma simples, prática e direta, sem explicações complicadas.

O que você vai aprender

Criar sua primeira página web do zero
Aprender HTML passo a passo, mesmo sem experiência
Estilizar páginas com CSS e entender layouts modernos
Criar interatividade com JavaScript
Construir projetos reais durante o curso
Baixar o código de cada aula para acompanhar e praticar

Durante o curso você aprenderá:

O que é HTML e como criar a estrutura de um site
Como usar tags, links, imagens, listas e tabelas
Como estilizar páginas com CSS (cores, fontes, espaçamentos e layout)
Como criar formulários modernos
Como adicionar interatividade com JavaScript
Como organizar seu código como um desenvolvedor profissional
Como criar sites responsivos que funcionam no celular e no computador
Como publicar seu site gratuitamente na internet

Aprendizado 100% Prático

Este curso é focado na prática.

Na maioria das aulas você poderá baixar o código utilizado, acompanhar passo a passo e comparar com o seu próprio código para corrigir erros e aprender mais rápido.

Você não aprende apenas assistindo — você aprende fazendo.

Este curso é ideal para:

Iniciantes que nunca programaram
Pessoas que querem criar seus próprios sites
Quem deseja iniciar no desenvolvimento web
Quem quer se tornar freelancer ou desenvolvedor front-end
Estudantes que querem aprender HTML, CSS e JavaScript na prática

Nunca programou antes?

Este curso foi feito exatamente para você.

Aqui você aprenderá do absoluto zero, sem precisar de experiência anterior em programação.

Tudo é explicado passo a passo, de forma clara e prática.

Ao concluir o curso você terá:

Criado seus próprios projetos
Desenvolvido sites completos
Aprendido HTML, CSS e JavaScript na prática
Publicado um site na internet

Além disso, você terá base sólida para avançar para tecnologias mais avançadas como:

React
Frameworks modernos
Desenvolvimento Front-End profissional

Se você quer entrar no mundo da programação web, aprender desenvolvimento front-end e começar a criar seus próprios sites, este curso é o ponto de partida ideal.

Vamos começar?

Who this course is for:

Quem deseja entender HTML, CSS e Javascript
Quem deseja entender JavaScript moderno na prática, aplicando em projetos reais

HTML, CSS e JAVASCRIPT do Zero ao Avançado + Projetos Reais

What you'll learn

Explore related topics

Course content

Introdução ao HTML14 lectures • 1hr 17min

Introdução ao CSS9 lectures • 1hr 10min

Projetos HTML e CSS5 lectures • 2hr 8min

Fundamentos do Javascript29 lectures • 3hr 3min

Exercícios Javascript0

Requirements

Description

Who this course is for: