Conteúdo do Curso

Essenciais de Desenvolvimento Web com IA

1. Visão Geral do Curso & IA na Codificação

Introdução ao Curso A Evolução da Programação com IA Compreendendo a IA no Desenvolvimento

2. Anatomia do Site

Componentes do Site HTML (Linguagem de Marcação de Hipertexto)CSS (Folhas de Estilo em Cascata)JavaScript (Linguagem de Programação)Reunindo HTML, CSS e JS

3. Introdução ao ChatGPT

Compreendendo o ChatGPT Como Usar o ChatGPT Criando um Prompt Trabalhando com Código via ChatGPT Desafio: Codificação via ChatGPT

4. Construindo o Site do Blog

Visão Geral do Projeto Estrutura do Documento HTML Estilização de Sites Adicionando Conteúdo Imagens Funcionalidade de Filtragem Conclusão e Próximos Passos

Funcionalidade de Filtragem

Objetivo

Por último, mas não menos importante, o passo final é adicionar a funcionalidade para filtrar os artigos por tópico, que será implementada usando JavaScript.

Possível Solicitação

Você pode implementar o recurso de filtrar artigos por tópico usando botões HTML e JavaScript?

Resultado

Arquivo index.html

Adicionamos um bloco nav ao header onde nossos botões de filtragem serão colocados;
Atribuímos a cada artigo o atributo data-category e o valor correspondente ao tópico;
Adicionamos o link para o arquivo index.js antes da tag de fechamento body.

Arquivo index.css
Adicionamos alguns estilos para que os botões de filtragem fiquem bonitos.

Arquivo index.js
Colamos o script que implementa a lógica de filtragem.

Tudo isso o ChaGPT nos disse para fazer. Seguimos suas instruções.

index.html

index.css

index.js

Estado do Site

Tutorial em Vídeo

Aqui está. Você conseguiu. Este é o seu site completo e totalmente funcional. Ótimo trabalho!

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 4. Capítulo 6

Pergunte à IA

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo