Skip to content

leonardorsolar/basic-html-css-javascript

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
README.md
README.md
 
 

Repository files navigation

🌐 Tutorial: Aprenda HTML, CSS e JavaScript do Zero

Bem-vindo(a) ao Mundo do Desenvolvimento Web!

Este tutorial foi criado para quem nunca programou e quer aprender a criar páginas web. Para cada passo, você encontrará um prompt pronto para copiar e colar no ChatGPT caso precise de ajuda adicional.

🎥 Assista ao vídeo introdutório

Assista ao vídeo introdutório para ter uma base de conhecimento antes de começar o tutorial:

Assista ao vídeo no YouTube

Depois, siga o tutorial a seguir 👇

📋 Passo 1: Instalar o VS Code

O que é o VS Code?
O Visual Studio Code (VS Code) é um editor de código gratuito e muito popular. É onde você escreverá o código das suas páginas web.

Instruções:

  1. Abra seu navegador (Chrome, Edge, Firefox, etc.)
  2. Acesse: https://code.visualstudio.com
  3. Clique no botão "Download for Windows"
  4. Aguarde o download terminar
  5. Clique duas vezes no arquivo baixado
  6. Siga o assistente de instalação (deixe todas as opções padrão marcadas)
  7. Clique em "Finish" ao final

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em programação web. Como faço para instalar o VS Code no meu computador com Windows? Explique passo a passo de forma bem detalhada, como se eu nunca tivesse instalado um programa antes.

🖥️ Passo 2: Abrir o VS Code e Conhecer a Interface

O que você verá:
O VS Code tem uma interface simples: barra lateral à esquerda, área central para escrever código e barra inferior para mensagens.

Instruções:

  1. Procure o ícone do VS Code na área de trabalho ou menu Iniciar
  2. Clique duas vezes para abrir
  3. Observe: barra lateral esquerda (Explorer), área central (editor), barra inferior (terminal/mensagens)
  4. Explore sem medo - você não vai "quebrar" nada!

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em desenvolvimento web. Acabei de abrir o VS Code pela primeira vez. Pode me explicar o que é cada parte da interface? Quero entender a barra lateral, a área central e os principais elementos da tela de forma bem simples.

📁 Passo 3: Criar uma Pasta para Seus Projetos Web

Por que criar uma pasta?
Organização é essencial! Cada site/projeto ficará em uma pasta separada com todos os arquivos necessários.

Instruções:

  1. No VS Code, clique em "File" → "Open Folder"
  2. Navegue até "Documentos"
  3. Clique em "New Folder" (Nova Pasta)
  4. Nomeie como "MeusProjetosWeb"
  5. Clique na pasta e depois em "Select Folder"
  6. Se aparecer mensagem sobre confiança, clique em "Yes, I trust"

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em desenvolvimento web. Por que é importante organizar projetos web em pastas separadas? Como devo estruturar meus arquivos HTML, CSS e JavaScript? Explique de forma simples.

📝 Passo 4: Criar Seu Primeiro Arquivo HTML Vazio

O que é HTML?
HTML (HyperText Markup Language) é a linguagem que estrutura páginas web. É como o "esqueleto" de um site.

Instruções:

  1. Com "MeusProjetosWeb" aberta, clique no ícone "New File" (documento com +)
  2. Digite o nome: index.html
  3. Pressione Enter
  4. O arquivo será criado e aberto

Importante: index.html é o nome padrão para a página inicial de um site!

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em desenvolvimento web. O que é HTML e por que é importante? Por que o arquivo principal se chama index.html? Explique de forma simples e motivadora.

🎯 Passo 5: Escrever a Estrutura HTML Mais Básica

Começando simples:
Vamos criar a estrutura HTML mais básica possível - apenas com o essencial!

Instruções:

  1. No arquivo index.html, digite este código: 
    <!DOCTYPE html>
<html>
    <head> </head>
    <body>
        Olá, Mundo!
    </body>
</html>
  2. Salve o arquivo: pressione Ctrl + S

Explicação:

  • <!DOCTYPE html> - Informa que é um documento HTML5
  • <html> - Tag que envolve todo o conteúdo
  • <head> - Cabeçalho (informações sobre a página)
  • <body> - Corpo (conteúdo visível da página)

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em HTML. Acabei de escrever minha primeira estrutura HTML. Pode explicar o que significa cada tag: <!DOCTYPE html>, <html>, <head> e <body>? Por que cada uma é necessária?

🌐 Passo 6: Abrir Seu HTML no Navegador

Momento mágico:
Vamos ver sua primeira página web funcionando no navegador!

Instruções:

  1. No VS Code, clique com botão direito no arquivo index.html (na barra lateral)
  2. Selecione "Reveal in File Explorer"
  3. Na janela que abrir, clique duas vezes em index.html
  4. Seu navegador abrirá mostrando "Olá, Mundo!"

Alternativa: Arraste o arquivo index.html para dentro do navegador aberto.

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em desenvolvimento web. Como funciona a relação entre o arquivo HTML que escrevo e o que aparece no navegador? O navegador lê o código e transforma em página? Explique de forma simples.

📌 Passo 7: Adicionar a Tag Title (Título da Página)

O que é o title?
O <title> aparece na aba do navegador e nos resultados de busca do Google. É muito importante!

Instruções:

  1. No arquivo index.html, adicione a tag <title> dentro do <head>: 
    <!DOCTYPE html>
<html>
    <head>
        <title>Minha Primeira Página</title>
    </head>
    <body>
        Olá, Mundo!
    </body>
</html>
  2. Salve (Ctrl + S)
  3. Volte ao navegador e atualize a página (F5)
  4. Observe: o título aparece na aba do navegador!

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em HTML. O que é a tag <title> e por que ela é importante? Onde ela aparece e qual seu impacto para SEO (aparecer no Google)? Dê exemplos de bons títulos.

🎨 Passo 8: Adicionar um Título Visível com H1

Tags de cabeçalho:
O HTML tem tags <h1> até <h6> para criar títulos visíveis na página. H1 é o mais importante.

Instruções:

  1. No <body>, substitua o texto por: 
    <!DOCTYPE html>
<html>
    <head>
        <title>Minha Primeira Página</title>
    </head>
    <body>
        <h1>Bem-vindo ao Meu Site!</h1>
        <p>Esta é minha primeira página web.</p>
    </body>
</html>
  2. Salve (Ctrl + S)
  3. Atualize o navegador (F5)
  4. Veja: o título está grande e em negrito!

Explicação:

  • <h1> - Título principal (maior e mais importante)
  • <p> - Parágrafo de texto

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em HTML. Qual a diferença entre <h1>, <h2>, <h3>, etc? Quando devo usar cada um? E o que é a tag <p>? Dê exemplos práticos de como estruturar conteúdo.

🎨 Passo 9: Criar Arquivo CSS para Estilizar o Título

O que é CSS?
CSS (Cascading Style Sheets) é a linguagem que deixa seu site bonito: cores, fontes, tamanhos, posicionamento.

Instruções:

  1. Crie um novo arquivo: clique em "New File"
  2. Nomeie como style.css
  3. No arquivo style.css, digite: 
    h1 {
    color: blue;
    font-size: 40px;
}
  4. Salve o arquivo CSS (Ctrl + S)

O CSS ainda não está funcionando! Vamos conectá-lo no próximo passo.

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em CSS. O que é CSS e por que ele é separado do HTML? Como funciona a sintaxe do CSS com seletores, propriedades e valores? Explique de forma simples.

🔗 Passo 10: Conectar o CSS ao HTML

Fazendo a ligação:
Para o CSS funcionar, você precisa "avisar" o HTML que ele existe usando a tag <link>.

Instruções:

  1. No arquivo index.html, adicione a tag <link> dentro do <head>: 
    <!DOCTYPE html>
<html>
    <head>
        <title>Minha Primeira Página</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>Bem-vindo ao Meu Site!</h1>
        <p>Esta é minha primeira página web.</p>
    </body>
</html>
  2. Salve (Ctrl + S)
  3. Atualize o navegador (F5)
  4. Veja a mágica: o título ficou azul e grande!

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em CSS. Como funciona a tag <link> para conectar CSS ao HTML? O que significa rel="stylesheet" e href? Posso ter vários arquivos CSS em uma página?

🌈 Passo 11: Adicionar Mais Estilos CSS

Deixando mais bonito:
Vamos adicionar mais propriedades CSS para melhorar a aparência.

Instruções:

  1. No arquivo style.css, adicione mais estilos:

    body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    padding: 20px;
}

h1 {
    color: #2c3e50;
    font-size: 40px;
    text-align: center;
}

p {
    color: #555;
    font-size: 18px;
    text-align: center;
}

  2. Salve (Ctrl + S)

  3. Atualize o navegador (F5)

  4. Observe as mudanças: fundo cinza, texto centralizado!

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em CSS. Pode me explicar propriedades como background-color, font-family, padding, text-align e color? Como escolher boas cores usando códigos hexadecimais (#)? Dê dicas de design básico.

📦 Passo 12: Criar uma Div Container

O que são divs?
<div> são caixas invisíveis usadas para agrupar e organizar conteúdo. São essenciais para layout!

Instruções:

  1. No index.html, envolva o conteúdo em uma <div>: 
    <!DOCTYPE html>
<html>
    <head>
        <title>Minha Primeira Página</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="container">
            <h1>Bem-vindo ao Meu Site!</h1>
            <p>Esta é minha primeira página web.</p>
        </div>
    </body>
</html>
  2. No style.css, adicione estilo para o container: 
    .container {
    background-color: white;
    max-width: 600px;
    margin: 50px auto;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
  3. Salve ambos os arquivos e atualize o navegador

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em HTML e CSS. O que são tags <div> e para que servem? O que é uma "classe" (class) e como ela se conecta ao CSS com o ponto (.)? Explique de forma simples.

📋 Passo 13: Criar Estrutura Básica do Formulário

O que são formulários?
Formulários (<form>) permitem que usuários enviem informações: login, cadastro, contato, etc.

Instruções:

  1. No index.html, adicione o formulário dentro da div:

    <div class="container">
    <h1>Cadastro de Usuário</h1>
    <p>Preencha os dados abaixo:</p>

    <form>
        <label>Nome:</label>
        <input type="text" />

        <label>Email:</label>
        <input type="email" />

        <label>Senha:</label>
        <input type="password" />

        <button type="submit">Cadastrar</button>
    </form>
</div>

  2. Salve e atualize o navegador

Explicação:

  • <form> - Define um formulário
  • <label> - Rótulo do campo
  • <input> - Campo de entrada
  • <button> - Botão de envio

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em HTML. O que são formulários e quais os principais tipos de input (text, email, password, etc)? Como funcionam as tags <form>, <label>, <input> e <button>? Dê exemplos práticos.

🎨 Passo 14: Estilizar o Formulário com CSS

Deixando o formulário bonito:
Vamos adicionar CSS para o formulário ficar profissional e organizado.

Instruções:

  1. No style.css, adicione estes estilos no final:

    form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

label {
    font-weight: bold;
    color: #2c3e50;
}

input {
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

input:focus {
    outline: none;
    border-color: #3498db;
}

button {
    background-color: #3498db;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
}

button:hover {
    background-color: #2980b9;
}

  2. Salve e atualize o navegador

  3. Veja: o formulário está lindo!

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em CSS. Pode explicar as propriedades display: flex, flex-direction, gap e padding? O que são pseudo-classes como :focus e :hover? Como deixar formulários bonitos e profissionais?

🏷️ Passo 15: Adicionar IDs aos Campos do Formulário

Por que IDs?
IDs são identificadores únicos que permitem o JavaScript acessar elementos específicos da página.

Instruções:

  1. No index.html, adicione id em cada campo:

    <form id="formCadastro">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" required />

    <label for="email">Email:</label>
    <input type="email" id="email" required />

    <label for="senha">Senha:</label>
    <input type="password" id="senha" required />

    <button type="submit">Cadastrar</button>
</form>

  2. Salve o arquivo

Explicação:

  • id="nome" - Identificador único
  • for="nome" - Conecta o label ao input
  • required - Campo obrigatório

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em HTML. Qual a diferença entre "id" e "class"? Por que usar "for" no label? O que faz o atributo "required"? Explique como conectar labels aos inputs corretamente.

⚡ Passo 16: Criar Arquivo JavaScript

O que é JavaScript?
JavaScript é a linguagem que torna sites interativos: cliques, validações, animações, salvamento de dados.

Instruções:

  1. Crie um novo arquivo: "New File"
  2. Nomeie como script.js
  3. No arquivo vazio por enquanto, apenas salve (Ctrl + S)
  4. No index.html, adicione antes de </body>: 
        </div>
    <script src="script.js"></script>
</body>
</html>
  5. Salve o HTML

Importante: A tag <script> conecta o JavaScript ao HTML, assim como <link> faz com CSS!

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em JavaScript. O que é JavaScript e para que serve? Como ele se diferencia de HTML e CSS? Por que a tag <script> geralmente fica no final do body? Explique de forma simples.

📝 Passo 17: Capturar os Dados do Formulário com JavaScript

Fazendo funcionar:
Vamos usar JavaScript para "ouvir" quando o usuário clicar em "Cadastrar" e pegar os dados digitados.

Instruções:

  1. No arquivo script.js, digite:

    // Pegar o formulário
const form = document.getElementById("formCadastro")

// Ouvir o envio do formulário
form.addEventListener("submit", function (event) {
    event.preventDefault() // Evita recarregar a página

    // Pegar os valores dos campos
    const nome = document.getElementById("nome").value
    const email = document.getElementById("email").value
    const senha = document.getElementById("senha").value

    // Mostrar no console (abra as Ferramentas do Desenvolvedor)
    console.log("Nome:", nome)
    console.log("Email:", email)
    console.log("Senha:", senha)
})

  2. Salve o arquivo

  3. Atualize o navegador

  4. Pressione F12 para abrir o Console

  5. Preencha o formulário e clique em "Cadastrar"

  6. Veja os dados aparecerem no console!

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em JavaScript. O que significa document.getElementById()? O que é addEventListener e event.preventDefault()? Como funciona o .value para pegar dados de inputs? Explique com exemplos simples.

💾 Passo 18: Criar Objeto com os Dados do Usuário

Organizando informações:
Em JavaScript, usamos objetos para agrupar dados relacionados. Vamos criar um objeto "usuario".

Instruções:

  1. No script.js, modifique o código:

    const form = document.getElementById("formCadastro")

form.addEventListener("submit", function (event) {
    event.preventDefault()

    // Pegar os valores
    const nome = document.getElementById("nome").value
    const email = document.getElementById("email").value
    const senha = document.getElementById("senha").value

    // Criar objeto usuario
    const usuario = {
        nome: nome,
        email: email,
        senha: senha,
    }

    console.log("Usuário criado:", usuario)
})

  2. Salve, atualize o navegador (F12 aberto)

  3. Preencha e envie o formulário

  4. Veja: agora aparece um objeto organizado no console!

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em JavaScript. O que são objetos em JavaScript? Como criar objetos com propriedades? Qual a vantagem de usar objetos ao invés de variáveis separadas? Dê exemplos práticos.

💾 Passo 19: Salvar no LocalStorage

O que é LocalStorage?
LocalStorage é um "cofre" no navegador onde você pode guardar informações mesmo depois que a página é fechada!

Instruções:

  1. No script.js, adicione o código para salvar:

    const form = document.getElementById("formCadastro")

form.addEventListener("submit", function (event) {
    event.preventDefault()

    const nome = document.getElementById("nome").value
    const email = document.getElementById("email").value
    const senha = document.getElementById("senha").value

    const usuario = {
        nome: nome,
        email: email,
        senha: senha,
    }

    // Converter objeto para texto (JSON)
    const usuarioJSON = JSON.stringify(usuario)

    // Salvar no LocalStorage
    localStorage.setItem("usuario", usuarioJSON)

    alert("Cadastro realizado com sucesso!")
    form.reset() // Limpa o formulário
})

  2. Salve e atualize o navegador

  3. Preencha o formulário e envie

  4. Veja o alerta de sucesso!

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em JavaScript. O que é localStorage e como ele funciona? O que é JSON.stringify() e por que preciso converter o objeto? Como posso ver o que está salvo no localStorage? Explique de forma clara.

🔍 Passo 20: Verificar Dados Salvos no LocalStorage

Vendo o que foi salvo:
Vamos aprender a verificar se os dados realmente foram salvos no navegador.

Instruções:

  1. Com a página aberta no navegador, pressione F12
  2. Clique na aba "Application" (ou "Armazenamento")
  3. No menu lateral, expanda "Local Storage"
  4. Clique no endereço da sua página
  5. Veja: seus dados estão lá!

Teste: Feche o navegador, abra novamente e veja que os dados continuam salvos!

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em JavaScript. Como posso ver os dados salvos no localStorage usando as Ferramentas do Desenvolvedor? Como excluir dados do localStorage? Qual a diferença entre localStorage e sessionStorage?

🎨 Passo 21: Adicionar Área para Exibir Usuário Cadastrado

Mostrando na tela:
Vamos criar uma área na página para exibir os dados do usuário cadastrado.

Instruções:

  1. No index.html, adicione após o formulário:

        </form>

    <div id="areaDados" style="display: none;">
        <h2>Usuário Cadastrado:</h2>
        <p><strong>Nome:</strong> <span id="exibirNome"></span></p>
        <p><strong>Email:</strong> <span id="exibirEmail"></span></p>
        <button id="btnLimpar">Limpar Dados</button>
    </div>
</div>

  2. No style.css, adicione:

    #areaDados {
    margin-top: 30px;
    padding: 20px;
    background-color: #e8f5e9;
    border-radius: 5px;
}

#btnLimpar {
    background-color: #e74c3c;
    margin-top: 10px;
}

#btnLimpar:hover {
    background-color: #c0392b;
}

  3. Salve ambos os arquivos

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em HTML e CSS. Como usar a propriedade display: none e display: block para mostrar/esconder elementos? O que são tags <span> e quando usá-las? Explique de forma prática.

🔄 Passo 22: Exibir Dados do LocalStorage ao Carregar a Página

Carregando dados salvos:
Quando a página abrir, vamos verificar se já existe usuário cadastrado e mostrar os dados.

Instruções:

  1. No script.js, adicione no início do arquivo:

    // Função para exibir dados salvos
function exibirUsuario() {
    // Pegar dados do localStorage
    const usuarioJSON = localStorage.getItem("usuario")

    if (usuarioJSON) {
        // Converter de texto para objeto
        const usuario = JSON.parse(usuarioJSON)

        // Exibir na página
        document.getElementById("exibirNome").textContent = usuario.nome
        document.getElementById("exibirEmail").textContent = usuario.email

        // Mostrar a área de dados
        document.getElementById("areaDados").style.display = "block"

        // Esconder o formulário
        document.getElementById("formCadastro").style.display = "none"
    }
}

// Executar ao carregar a página
exibirUsuario()

  2. Salve e atualize o navegador

  3. Se você já tiver cadastrado, verá os dados aparecerem!

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em JavaScript. O que é JSON.parse() e qual sua diferença para JSON.stringify()? Como funciona localStorage.getItem()? O que significa textContent? Explique o fluxo completo de salvar e recuperar dados.

🗑️ Passo 23: Adicionar Função para Limpar Dados

Botão de limpar:
Vamos fazer o botão "Limpar Dados" funcionar, removendo o usuário do localStorage.

Instruções:

  1. No script.js, adicione no final:

    // Função para limpar dados
function limparDados() {
    // Remover do localStorage
    localStorage.removeItem("usuario")

    // Esconder área de dados
    document.getElementById("areaDados").style.display = "none"

    // Mostrar formulário novamente
    document.getElementById("formCadastro").style.display = "flex"

    // Limpar campos
    document.getElementById("formCadastro").reset()
}

// Adicionar evento ao botão limpar
document.getElementById("btnLimpar").addEventListener("click", limparDados)

  2. Salve e teste: clique em "Limpar Dados"

  3. O formulário volta a aparecer e os dados são removidos!

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em JavaScript. Como funciona localStorage.removeItem()? Posso limpar todo o localStorage de uma vez? Qual a melhor prática para gerenciar dados no localStorage? Dê exemplos de quando usar.

✅ Passo 24: Adicionar Validações ao Formulário

Melhorando a segurança:
Vamos adicionar validações para garantir que os dados estão corretos antes de salvar.

Instruções:

  1. No script.js, modifique a função do formulário:

    form.addEventListener("submit", function (event) {
    event.preventDefault()

    const nome = document.getElementById("nome").value
    const email = document.getElementById("email").value
    const senha = document.getElementById("senha").value

    // Validações
    if (nome.length < 3) {
        alert("Nome deve ter pelo menos 3 caracteres!")
        return
    }

    if (!email.includes("@")) {
        alert("Digite um email válido!")
        return
    }

    if (senha.length < 6) {
        alert("Senha deve ter pelo menos 6 caracteres!")
        return
    }

    const usuario = {
        nome: nome,
        email: email,
        senha: senha,
    }

    const usuarioJSON = JSON.stringify(usuario)
    localStorage.setItem("usuario", usuarioJSON)

    alert("Cadastro realizado com sucesso!")
    exibirUsuario() // Atualiza a exibição
})

  2. Salve e teste com dados inválidos

  3. Veja: as validações funcionam!

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em JavaScript. O que são validações e por que são importantes? Como usar if/else e return? Quais outras validações posso fazer em formulários? Explique boas práticas de validação.

🎉 Passo 25: Projeto Completo - Revisão Final

Parabéns! 🎊
Você criou um sistema completo de cadastro com HTML, CSS e JavaScript!

O que você aprendeu:

  1. ✅ Estrutura HTML básica e semântica
  2. ✅ Estilização com CSS (cores, layout, responsividade)
  3. ✅ Formulários HTML e validação
  4. ✅ JavaScript básico (variáveis, funções, eventos)
  5. ✅ Manipulação do DOM
  6. ✅ LocalStorage para persistência de dados
  7. ✅ Fluxo completo de um aplicativo web

Próximos passos sugeridos:

  • Adicionar mais campos ao formulário
  • Criar múltiplos usuários (array no localStorage)
  • Adicionar sistema de login
  • Melhorar o design com mais CSS
  • Aprender sobre frameworks (React, Vue)

💬 Prompt para o ChatGPT:

Você é um instrutor para iniciantes em desenvolvimento web. Acabei de completar meu primeiro projeto: um formulário de cadastro com HTML, CSS e JavaScript que salva no localStorage. Quais são os próximos passos para evoluir? Que projetos você recomenda? Como posso melhorar este projeto?

📚 Recursos Adicionais

Sites para continuar aprendendo:

  • MDN Web Docs (documentação oficial)
  • W3Schools (tutoriais interativos)
  • FreeCodeCamp (cursos gratuitos)
  • JavaScript.info (guia completo de JS)

Dica final: Continue praticando! A melhor forma de aprender programação é fazendo projetos. Comece pequeno e vá evoluindo!

Criado com ❤️ para iniciantes em programação web

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published