Desenvolvimento Web com HTML, CSS e JavaScript (Nível 1 - Iniciante)

Desenvolvimento Web com HTML, CSS e JavaScript
(Nível 1 - Iniciante)

Dia 1: Fundamentos da Web e Ferramentas de Desenvolvimento

Módulo 1: Funcionamento de uma Página Web
● Objetivo: Entender o ciclo de requisição-resposta entre cliente e servidor.
● Conteúdo:
○ O que é a web? Cliente vs. servidor.
○ Protocolo HTTP e HTTPS, comunicação segura.
○ DNS e como o navegador acessa páginas.
○ Front-end vs. back-end: uma introdução.
○ IA no módulo: Ferramentas de IA para simular fluxos de requisição-resposta
e visualizar o processo de carregamento de páginas.

Módulo 2: Configuração de Ferramentas de Desenvolvimento
● Objetivo: Configurar o ambiente de desenvolvimento para trabalhar com HTML,
CSS e JS.
● Conteúdo:
○ Instalação do VSCode: Introdução ao editor de código.
○ Criação de uma conta no GitHub e configuração de repositórios.
○ Integração do VSCode com GitHub.
○ IA no módulo: Introdução ao uso de IA (ex: GitHub Copilot) para sugestões
de código e automação de tarefas de configuração.

Dia 2: Estrutura de Páginas com HTML e Estilização com CSS

Módulo 3: Fundamentos do HTML - Estruturação de Páginas
● Objetivo: Criar a estrutura básica de uma página web.
● Conteúdo:
○ Introdução às principais tags: , , , ,

, ,
.
○ Uso de divs para organizar conteúdo.
○ Introdução a tags HTML5: , , , .
○ IA no módulo: Utilização de IA para sugerir melhorias na estrutura do HTML,
verificar a semântica e corrigir erros de código.

Módulo 4: Fundamentos do CSS - Estilos Básicos
● Objetivo: Aplicar estilos básicos à página web.
● Conteúdo:
○ Como adicionar CSS: inline, interno, externo.
○ Propriedades de estilo: cores, fontes, margens, paddings.
○ Introdução ao Box Model e sua importância para layouts.
○ IA no módulo: Uso de IA para gerar código CSS, analisar o design da
página e propor melhorias de estilo.

Dia 3: Responsividade com FlexBox e Introdução ao JavaScript

Módulo 5: Layout Responsivo com FlexBox
● Objetivo: Criar layouts responsivos utilizando FlexBox.
● Conteúdo:
○ Introdução ao FlexBox: display: flex, flex-direction,
justify-content, align-items.
○ Construção de layouts responsivos com FlexBox.
○ Introdução a media queries para responsividade.
○ IA no módulo: Sugestão de layouts e ajustes de responsividade com IA.

Módulo 6: Introdução ao JavaScript e Manipulação do DOM
● Objetivo: Introduzir os conceitos básicos de JavaScript e manipulação de elementos
HTML.
● Conteúdo:
○ Inserção de JavaScript em uma página HTML.
○ O que é o DOM (Document Object Model)?
○ Seleção de elementos no DOM: getElementById, querySelector.
○ IA no módulo: Sugestões de código JavaScript para manipulação do DOM e
geração automática de scripts simples.

Dia 4: Interatividade com JavaScript

Módulo 7: Conceitos Básicos de JavaScript
● Objetivo: Entender os conceitos básicos de programação com JavaScript.
● Conteúdo:
○ Variáveis (var, let, const), tipos de dados e operadores.
○ Estruturas de controle: if, else, switch.
○ Funções: Declaração e invocação.
○ IA no módulo: Sugestões de código JS para criação de funções e validação
de condições.

Módulo 8: Eventos e Interatividade com JavaScript
● Objetivo: Criar interatividade em páginas com eventos JavaScript.
● Conteúdo:
○ Introdução a eventos: click, mouseover, keydown.
○ Manipulação de eventos para interatividade.
○ Atualização de elementos HTML dinamicamente com JS.
○ IA no módulo: Sugestões de scripts para manipulação de eventos e
interações dinâmicas com o DOM.

Dia 5: Consolidação da Landing Page e Publicação

Módulo 9: Revisão e Finalização da Landing Page
● Objetivo: Revisar os conceitos e preparar a landing page para publicação.
● Conteúdo:
○ Revisão de HTML, CSS e JavaScript aplicados à landing page.
○ Ajustes finais no layout e interatividade.
○ Criação de imagens com IA generativa para personalizar a landing page.
○ IA no módulo: Utilização de IA para revisão final do código, otimização de
desempenho e geração de conteúdo visual.

Módulo 10: Publicação da Landing Page com GitHub Pages
● Objetivo: Publicar a landing page online usando GitHub Pages.
● Conteúdo:
○ Introdução ao GitHub Pages.
○ Publicação da landing page: passos e melhores práticas.
○ Testes finais de usabilidade e responsividade.
○ IA no módulo: Verificação automatizada de erros e análise de performance
antes da publicação