Contenu du cours

Essentiels du Développement Web avec l'IA

1. Aperçu du Cours et IA dans le Codage

Introduction au Cours L'Évolution du Codage avec l'IA Comprendre l'IA dans le Développement

2. Anatomie du Site Web

Composants Clés d'un Site Web Introduction à HTML pour Structurer le Contenu Introduction à CSS pour le Style des Pages Web Introduction à JavaScript pour l'Interactivité Combiner HTML, CSS et JavaScript

3. Introduction à ChatGPT

Comprendre ChatGPT Comment Utiliser ChatGPT Élaborer des Invites Efficaces Générer du Code avec ChatGPT Défi : Créer un Site Web de Portfolio avec ChatGPT

4. Construction du Site Web du Blog

Aperçu du Projet Structurer le Document HTML Appliquer le Style du Site Web avec CSS Ajouter et Organiser le Contenu Trouver et Ajouter des Images Implémentation de la Fonctionnalité de Filtrage Récapitulatif du Cours et Prochaines Étapes dans le Développement Web

Implémentation de la Fonctionnalité de Filtrage

Objectif

Enfin et surtout, la dernière étape consiste à ajouter une fonctionnalité pour filtrer les articles par sujet, qui sera implémentée en utilisant JavaScript.

Invite Possible

Pouvez-vous implémenter la fonctionnalité de filtrage des articles par sujet en utilisant des boutons HTML et JavaScript ?

Résultat

fichier index.html

Nous ajoutons un bloc nav à l'header où nos boutons de filtrage seront placés ;
Nous fournissons à chaque article l'attribut data-category et la valeur de sujet correspondante ;
Nous ajoutons le lien vers le fichier index.js avant la balise de fermeture body.

fichier index.css
Nous ajoutons quelques styles pour rendre les boutons de filtrage jolis.

fichier index.js
Nous collons le script qui implémente la logique de filtrage.

Tout cela, ChaGPT nous a dit de le faire. Nous avons suivi ses instructions.

index.html

index.css

index.js

État du site Web

Tutoriel Vidéo

Voilà. Vous l'avez fait. Ceci est votre site web complet et entièrement fonctionnel. Bon travail !

Tout était clair ?

Merci pour vos commentaires !

Section 4. Chapitre 6

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion