Apprendre HTML et CSS avec l’IA en 2025 : Guide Complet pour Débutants
Chaque site web dans le monde utilise HTML, CSS et JavaScript. Et je veux dire littéralement chacun d’entre eux. Mais cela va au-delà des sites web, car de nombreuses applications de bureau et mobiles utilisent également ces technologies web pour leur interface utilisateur. Si vous maîtrisez HTML et CSS et utilisez l’IA pour effectuer la majorité du codage, vous serez capable de construire pratiquement n’importe quel site web que vous pouvez imaginer.
Pourquoi apprendre le code si l’IA peut l’écrire pour vous ?
Si l’IA peut écrire tout le code à votre place, pourquoi devriez-vous vous donner la peine d’apprendre ces technologies ? Voici quelques raisons importantes :
- Cela vous aidera à mieux comprendre le code généré par l’IA
- Vous pourrez formuler des prompts plus précis pour l’IA
- Vous construirez des logiciels plus rapidement et avec une qualité supérieure
- Vous pourrez sortir des boucles infinies de dépannage dans lesquelles l’IA a tendance à s’enfermer
Examinons de plus près ces technologies et leur fonctionnement.
Comprendre HTML : La Structure Fondamentale
À la base de chaque page web se trouve le HTML. C’est un fichier texte brut qui ressemble à ceci. Il contient les différents contenus qui doivent être affichés sur la page ainsi que des liens vers les ressources que le navigateur doit télécharger.
La première chose qui se produit lorsque vous visitez un site web est que votre navigateur fait une requête pour télécharger ce HTML. À partir de là, il détermine les ressources supplémentaires, comme le fichier CSS, qu’il doit télécharger pour afficher correctement le HTML.
En général, le HTML contient tout le contenu de la page, tandis que le CSS décrit les styles ou comment ce contenu doit vous être présenté. Par exemple, le fait qu’une page affiche « example domain » fait partie du HTML, mais le fait que ce texte soit dans une police plus grande que le paragraphe est déterminé par le CSS.
Le HTML est toujours le point de départ. Il fait référence au CSS et au JavaScript qui doivent faire partie de cette page pour qu’elle fonctionne correctement.
Structure du HTML
Grâce à l’IA, vous n’avez plus besoin de mémoriser tous les éléments et propriétés spécifiques des balises HTML, mais vous devez savoir que le HTML a généralement une structure imbriquée comme celle-ci, où vous avez des éléments qui peuvent contenir d’autres éléments.
Les éléments HTML peuvent également contenir des attributs qui fournissent des informations supplémentaires sur cet élément mais ne sont pas visibles pour l’utilisateur final. Ces attributs sont souvent utilisés pour faire en sorte que l’élément se comporte d’une certaine manière ou pour ajouter du CSS ou du JavaScript à cet élément.
Explorer le HTML avec les Outils de Développement
Souvenez-vous que j’ai mentionné que le HTML est téléchargé sur votre ordinateur lorsque vous visitez un site web ? Vous pouvez en fait examiner ce HTML en allant sur n’importe quel site web, puis en faisant un clic droit et en cliquant sur « Inspecter ».
Cela ouvrira les outils de développement (Dev Tools), qui vous seront très utiles pour apprendre HTML et CSS. Vous y verrez le DOM, ou votre copie locale du HTML de ce site web. Vous pouvez voir toutes les différentes balises ou éléments qui composent cette page particulière, et lorsque vous passez votre souris dessus, le navigateur vous montre où cet élément est visuellement situé sur la page.
Ce qui est génial, c’est que vous pouvez réellement modifier le HTML de la page, car c’est simplement votre copie personnelle. Je peux simplement faire en sorte que cela dise « my cool domain ». Si je rafraîchis la page, elle téléchargera une nouvelle copie du HTML et affichera à nouveau « example domain ». Comme vous pouvez le modifier, cela vous donne un terrain de jeu parfait pour modifier le HTML et expérimenter diverses propriétés CSS.
Utiliser l’IA dans les Outils de Développement
Une autre fonctionnalité récemment ajoutée est cette fonction d’IA intégrée qui vous permet de poser des questions sur la page sur laquelle vous vous trouvez. Cela nécessite que vous activiez certaines fonctionnalités d’IA supplémentaires dans Google Chrome, mais une fois que vous l’aurez fait, vous pourrez poser des questions sur la page sur laquelle vous vous trouvez.
Dans ce cas, je vais sélectionner cet élément div et poser une question : « Pourquoi cet élément div a-t-il des coins arrondis et pouvez-vous les rendre plus arrondis ? »
L’IA a examiné le HTML et le CSS et a découvert que ce div a un border-radius de 8 pixels. C’est une propriété CSS qui définit comment des éléments particuliers doivent être stylisés. Nous en parlerons un peu plus tard dans cet article, mais pour l’instant, vous pouvez voir que vous pouvez utiliser ces outils d’IA intégrés pour modifier et comprendre ce qui se passe sur la page que vous visitez.
Je vous encourage à utiliser l’IA directement dans les Dev Tools pendant que vous apprenez tout cela.
Création d’une Page HTML Complète avec l’IA
Voyons maintenant comment l’IA peut nous aider à générer une page HTML plus complète. J’ai trouvé cette API d’images de chiens, alors créons une galerie de chiens qui nous montre des images de différents chiens dans une disposition en grille.
J’utilise Cursor, qui est un éditeur de code alimenté par l’IA, et je vous recommande vivement d’en utiliser un, que ce soit Cursor, Windsurf ou GitHub avec Copilot. Ces outils vont comprendre le contexte de votre code et seront beaucoup plus faciles à gérer que de copier-coller des choses depuis ChatGPT.
Je vais ouvrir une nouvelle discussion, passer en mode agent pour qu’il puisse écrire des fichiers pour nous, puis je vais demander : « Veuillez créer une page de galerie de chiens de type Pinterest qui utilise l’API suivante pour récupérer des images de chiens et les afficher dans une disposition en grille. Veuillez garder les styles dans un fichier CSS séparé. »
Analyse du HTML Généré
Voici ce que l’IA a généré. Examinons d’abord le HTML. La première chose que je veux souligner est qu’en haut, nous avons cette balise head. Elle est effectivement invisible pour l’utilisateur final, mais elle donne au navigateur des informations importantes, comme le titre de la page et où il peut récupérer des ressources supplémentaires comme les styles.
L’élément head contient également des balises meta qui seront importantes pour afficher correctement un aperçu de votre page lorsque vous partagez cette URL sur un site de médias sociaux.
Mais le contenu principal de la page se trouve dans le body. Dans le body, nous voyons qu’il y a un élément qui affiche une sorte d’en-tête, un titre appelé « Dog Gallery », un bouton qui nous permet de charger plus de chiens, puis un conteneur pour la galerie.
Il y a aussi cette balise script qui ajoute du JavaScript directement à ce fichier HTML. Dans les meilleures pratiques, nous voudrions en fait déplacer cela vers un fichier JavaScript dédié.
Dans le but de vous montrer le HTML, je veux garder le JavaScript en dehors. Je vais donc demander à Cursor de faire de cela une page plus statique, sans cette logique supplémentaire qui va récupérer ces images. Nous voulons afficher ce HTML comme une page complètement statique sans JavaScript.
Ouverture et Modification du HTML
Le HTML a été mis à jour et maintenant nous voyons ces éléments explicites qui vont contenir des images de chiens. Pour ouvrir votre fichier HTML dans un navigateur, vous pouvez simplement copier le chemin de ce fichier HTML, aller dans le navigateur et le coller comme URL.
Nous pouvons voir que certaines de ces images ne fonctionnent pas correctement, mais d’autres s’affichent sur cette page. Je vais supprimer certaines de ces images qui ne fonctionnent pas pour que vous puissiez voir comment la modification du HTML va apparaître lorsque nous rafraîchissons la page.
Ici, je vais supprimer cette image de Labrador, je vais simplement la sélectionner, la supprimer, rafraîchir, et maintenant vous voyez qu’elle a disparu. Encore une fois, le HTML est directement lié à ce que vous voyez sur la page.
Comprendre CSS : Styliser Votre Contenu
Nous voyons cette page, mais comment le navigateur sait-il ajouter ces coins arrondis et faire bouger ces cartes lorsque nous passons la souris dessus ? Comment ce fond est-il gris et pourquoi y a-t-il une ombre ici ? Tout cela est déterminé par le CSS.
Le CSS applique des styles à ces différents éléments et, généralement, la façon dont cela se fait est en utilisant une propriété sur l’élément HTML auquel le CSS peut se rattacher. Cela se fait en utilisant ce qu’on appelle un sélecteur, et un sélecteur est un moyen d’identifier des éléments HTML spécifiques afin que vous puissiez leur attacher des styles supplémentaires ou les modifier d’une autre manière en utilisant JavaScript.
Je vais vous montrer comment utiliser l’IA pour expliquer comment tout cela fonctionne : « Veuillez expliquer comment les styles du fichier CSS sont appliqués aux différentes images de chiens et quels styles sont spécifiquement utilisés. »
Sélecteurs CSS et Application des Styles
Voici notre première vue du fichier CSS. Nous y voyons ces sélecteurs, puis les styles qui doivent être appliqués aux éléments trouvés par ces sélecteurs. Ici, par exemple, les éléments H1 doivent avoir cette couleur particulière. Changeons-la en bleu vif et voyons à quoi cela ressemble.
Si je rafraîchis, vous pouvez voir que cet élément est maintenant bleu car c’est l’élément H1. Vous pouvez voir comment ces sélecteurs se rattachent à des éléments HTML spécifiques.
Mais l’utilisation du nom de la balise n’est pas la seule façon de lier le CSS à l’élément HTML. Vous pouvez également utiliser diverses propriétés, et la plus courante est l’utilisation de classes. Lorsque vous voyez ce petit point .gallery, cela signifie trouver les éléments HTML qui ont la classe « gallery ».
Dans notre fichier HTML, si nous regardons autour, nous pouvons voir que cet élément a une classe « gallery ». Cet élément ici va donc avoir ces styles qui lui sont appliqués. Changeons le nombre de colonnes à trois par exemple, rafraîchissons, et maintenant nous n’avons que trois colonnes d’images de chiens.
Propriétés CSS Fondamentales
Il existe une tonne de propriétés CSS et certaines d’entre elles interagissent de manière inattendue. L’IA est donc vraiment votre meilleure amie pour vous aider à comprendre ce qui se passe actuellement et comment obtenir un effet particulier que vous recherchez.
Mais je veux mettre en évidence certaines propriétés fondamentales que vous allez voir sur chaque page que vous visitez et qui vont être vraiment utiles à utiliser dans vos prompts.
Je vais d’abord demander à l’IA d’ajouter quelques détails supplémentaires pour qu’il me soit plus facile de vous montrer ces propriétés : « Veuillez ajouter un titre de chien et une description pour chaque carte. »
Le Modèle de Boîte (Box Model)
La première chose dont je veux parler est ce qu’on appelle le modèle de boîte (Box Model). Si vous faites un clic droit sur un élément et cliquez sur « Inspecter », puis que vous allez dans cet onglet « Computed », il va vous montrer la boîte définissant cet élément.
Dans la boîte, le contenu est tout au milieu. Ensuite, il y a le padding autour du contenu qui fait encore partie de cet élément. Puis il y a une bordure qui va être autour de cela, et enfin il y a la marge (margin) qui va être l’espace requis autour de cet élément qui n’en fait plus partie.
Il existe des styles CSS spécifiques qui définissent chacun de ces éléments. Dans notre exemple, nous avons actuellement un peu de padding sur cet élément et il est défini ici. Je vais simplifier cela et faire 16 pixels tout autour.
Si nous passons la souris sur le padding, nous pouvons en fait le voir mis en évidence visuellement en vert pour nous par le navigateur. Si je change cette valeur, nous allons voir l’espace entre ce texte, qui est le contenu de cet élément, et le bord de son parent rétrécir. Si je mets cela à zéro, nous pouvons voir que le texte monte jusqu’au bord de cet élément parent. Mais si nous rendons cela vraiment grand, alors nous voyons beaucoup d’espace ajouté.
Ajoutons une bordure rapide. C’est simplement la propriété border et je vais juste ajouter une bordure noire d’un pixel. Pourquoi la bordure noire que j’ai appliquée ne s’affiche-t-elle pas réellement sur l’élément ?
Il semble que l’élément P ait border-width défini à zéro pour tous les côtés. Donc même si j’ai défini la couleur de la bordure, je me demande pourquoi la largeur de la bordure est définie à zéro.
Le problème est que nous n’avons pas spécifié le style de bordure et qu’il est par défaut à « none » si nous n’en spécifions pas un. Si nous définissons simplement le style de bordure sur « solid », alors la bordure deviendra visible.
Ajoutons également une marge à ces éléments. Je vais ajouter margin: 16px. Maintenant, lorsque nous passons la souris dessus, nous la voyons autour de la bordure.
Je vais également ajouter border-radius: 16px. Maintenant, nous avons un joli petit coin arrondi.
C’est le modèle de boîte, et il définit comment les choses sont espacées. C’est bon à garder à l’esprit car vous pourriez demander à l’IA d’ajouter plus de padding, d’ajouter plus de margin ou de changer l’apparence de vos bordures.
Flexbox et Grid
Quelques autres domaines clés qui sont très profonds mais faciles à travailler avec l’IA sont Grid et Flexbox. Flexbox crée essentiellement un conteneur qui se déplace en fonction de la taille de la page et de l’espace dont il dispose. Il peut donc déplacer les différents contenus à l’intérieur.
Si c’est l’effet que vous recherchez, vous devriez utiliser le mot « flex » ou « flexbox » dans votre prompt. Et si vous voulez quelque chose disposé dans une sorte de grille comme celle-ci, surtout une qui se redimensionne lorsque vous déplacez la page, vous voulez demander à l’IA d’utiliser une disposition en grille (grid layout).
Si vous avez des exigences particulières en termes de nombre d’éléments que vous avez ou de tailles spécifiques que vous voulez maintenir, vous devriez également ajouter cela à votre prompt.
Propriété Position
Une autre propriété CSS importante à connaître est la propriété position, qui va déterminer comment l’élément est placé sur la page. Il y a quelques positions différentes, et laissez-moi demander à l’IA de créer quelques exemples pour nous.
« Veuillez ajouter un en-tête flexbox avec notre logo, le titre de la page et des liens vers des pages comme ‘À propos de nous’ et ‘Contactez-nous’. Ajoutez également divers éléments à la page qui vont montrer les différentes propriétés de position du CSS. »
Rafraîchissons notre page. Nous avons maintenant cette démo ici. Vous pouvez voir que lorsque nous changeons la taille de la page, les éléments ici dans cet en-tête s’ajustent en fonction de l’espace qu’ils ont. C’est ce que flexbox va nous permettre de faire.
Maintenant, je vais fermer les outils de développement et ici nous voyons les éléments de position. Lorsque je défile vers le bas, vous pouvez voir que l’élément jaune est « sticky » et qu’il reste en haut de la page. Vous pouvez voir qu’il y a un bouton vert en bas ici et c’est une position fixe, elle va être liée à votre écran réel. Et puis il y a un élément positionné absolument qui est relatif à cette boîte grise.
Explorez les positions par vous-même, et j’aurai également ce code dans un lien GitHub dans la description. Vérifiez-le et jouez avec. Mais c’est une bonne propriété à connaître car elle vous aidera à positionner correctement les choses.
Z-index et Superposition d’Éléments
Vous voyez comment l’élément en position fixe semble disparaître lorsque je passe la souris sur les chiens ? C’est à cause de la propriété z-index, qui est une autre propriété utile à connaître.
Si je vais sur cet élément et que je définis simplement son z-index à une valeur très élevée, même lorsque je passe la souris sur ces chiens, il restera au-dessus. Le z-index détermine à quel point il est proche de l’écran, et plus la valeur est élevée, plus il se superposera aux autres éléments en dessous.
Conclusion et Prochaines Étapes
Gardez à l’esprit qu’il existe une tonne de propriétés CSS, mais celles dont j’ai parlé sont celles auxquelles vous aurez affaire tout le temps. Je ne pourrais jamais toutes les énumérer dans une seule vidéo, mais il y en a d’autres dont vous devriez également être conscient, comme les media queries responsives qui vont changer les styles en fonction de la taille de l’écran.
Il y a aussi des styles que vous pouvez appliquer lorsque vous passez la souris sur un élément particulier, c’est ce que nous voyons avec ces images de chiens qui bougent. Et il y a aussi certaines animations CSS que vous pouvez appliquer.
Il y a beaucoup de choses avec lesquelles jouer, mais en général, cela se résume toujours à avoir le HTML, qui est la racine et la structure de la page, puis à avoir les styles appliqués aux éléments spécifiques du HTML pour qu’ils apparaissent d’une manière particulière.
Mais avec seulement HTML et CSS, le mieux que vous puissiez faire est de créer une page statique comme celle que nous regardions. Pour vraiment donner vie à votre page, vous aurez besoin d’utiliser JavaScript, qui vous permettra de mettre à jour le contenu et les styles de votre page et de la rendre interactive pour vos utilisateurs.
C’est exactement ce que nous allons couvrir dans le prochain épisode de AI Coding 101. À bientôt !
Featured image by Marvin Meyer on Unsplash