Construire des sites Web à partir de Scratch en utilisant du HTML, du CSS, et du JavaScript (AUCUNE EXPÉRIENCE DE PROGRAMMATION REQUIS)

1. Intro Epique: Comment quelqu'un qui n'a pas d'expérience en programmation et passe d'une page blanche vide à un site Web interactif et stylisé utilisant du code ? Je vais vous le dire, mais tout d'abord, permettez-moi d'expliquer ce qui fait un site Web. Le Web utilise trois langages fondamentaux pour fonctionner. Ces langages sont appelés HTML, CSS et JavaScript. Que font-ils ? Vous pouvez demander, eh bien, que HTML est utilisé pour structurer le contenu des pages Web. Sans cela, votre site Web ressemblerait à ceci. Cependant, le HTML à lui seul fait un site web assez ennuyeux. C'est là que le CSS arrive. Css est la ligne de conception. Cela rend tout joli pour que les gens reviennent sur votre site Web. Enfin, c'est JavaScript. Il aide à rendre votre site Web interactif afin qu'il puisse faire des choses comme celle-ci. Revenons donc à notre première question. Comment une personne sans expérience en programmation crée-t-elle sans expérience en programmation crée-t-elle un site Web stylisé à l'aide de code ? C'est simple. En moins de deux heures, ils suivent un cours amical pour débutants qui leur donne les compétences nécessaires pour commencer à devenir maîtres des langages Web fondamentaux. Heureusement pour vous, je connais juste le cours. C'est ce qu'on appelle créer des sites Web à partir de zéro en utilisant HTML, CSS et JavaScript. Aucune expérience de programmation n' est requise pour le remplissage. Dans ce cours, vous apprendrez comment créer les blocs de construction d'un site Web en HTML. Faites en sorte que ça ressemble à un CSS génial, et obtenez un peu plus cool avec JavaScript. Qui sera votre instructeur ? Eh bien, c'est moi. Bonjour, je suis Taylor English et j'aime la programmation. Alors, qu'attendez-vous ? Cliquez sur la leçon suivante pour commencer. 2. Comment configurer votre ordinateur pour écrire un code: Très bien, La première chose dont nous allons avoir besoin pour commencer à écrire notre site Web à partir de zéro, c'est un éditeur de code. Maintenant, si vous le souhaitez, vous pouvez utiliser quelque chose comme le Bloc-notes, mais je ne le recommande pas vraiment car il s' agit simplement d'un éditeur de texte basique. Il existe de bien meilleurs outils qui peuvent nous aider à écrire du code. Le programme que je vais vous montrer aujourd'hui est assez facile à utiliser et je vais vous montrer tous les trucs et astuces dont vous aurez besoin. Il s'agit d'un programme appelé Visual Studio Code, également connu sous le nom de VS Code, créé par Microsoft. Donc, si vous accédez à votre navigateur Web, vous pouvez simplement rechercher VS Code et cliquer simplement sur la première page. Maintenant, je suis sous Windows, donc je vais le télécharger pour Windows. Si vous cliquez sur cette flèche ici, vous pouvez également la télécharger pour Mac ou Linux, ou il y a aussi d'autres téléchargements. Maintenant, si vous utilisez Windows 11 et peut-être même Windows 10, cela peut fonctionner. Vous pouvez accéder au Microsoft Store, qui est intégré à votre ordinateur. Vous pouvez également le télécharger à partir de là. Si vous le faites de cette façon, je crois que le programme sera automatiquement mis à jour pour vous, ce qui est plutôt sympa. Je vais juste le télécharger pour Windows. C'est un téléchargement assez petit. devrait être assez rapide. C'est là. Vous pouvez simplement ouvrir. Et les installateurs sont assez simples. Il suffit d'accepter l'accord. Vous n'avez pas besoin de modifier quoi que ce soit sur cette page, sauf si vous le souhaitez, mais nous n'en aurons pas besoin pour ce tutoriel. Il suffit de cliquer sur Suivant , puis de cliquer sur Installer. Maintenant, je l' ai déjà sur mon ordinateur, donc je ne vais pas le réinstaller, mais laissez-moi vous montrer comment cela fonctionne. Ainsi, lorsque vous vous connectez, vous verrez probablement quelque chose comme ça. Maintenant, ce n'est qu'une petite page Commencer quelque chose pour vous aider à écrire votre code. Vous pouvez l'utiliser si vous le souhaitez ou décocher cette case pour qu'elle n'apparaisse pas au démarrage. Mais ce que nous allons devoir faire avant de commencer notre projet c'est créer un dossier dans lequel nous pouvons stocker tous les fichiers de notre site Web. Cliquez sur le fichier, puis cliquez sur Ouvrir un dossier. Nous devons maintenant choisir un endroit pour le stocker. Donc je vais le faire, voyons voir. Je vais créer un dossier ici. Je vais juste appeler ça mon site Web. Maintenant, si j'étais vous, je ferais tout cela en un mot sans espaces ni symboles fantaisistes, simplement parce que cela pourrait faciliter une partie du processus plus tard. Cliquez sur ce bouton, cliquez sur Sélectionner un dossier. Maintenant, nous sommes à l'intérieur de ce dossier. Permettez-moi donc de vous montrer certaines des fonctionnalités de Visual Studio Code ou du code VS. Ici, sur la gauche, nous avons notre explorateur. C'est ici que vous verrez tous les fichiers qui se trouvent dans ce dossier. Vous pouvez cliquer sur cette icône ici pour créer un nouveau fichier. Par exemple, si je voulais créer un fichier texte simple, je pourrais dire file.txt. Et lorsque vous mettez cette extension de fichier, le point TXT, il reconnaît automatiquement ce que c' est et il lui donnera une petite icône. Maintenant, pour vous, les icônes peuvent être différentes. J'utilise des modifications spéciales. Ce programme à réaliser. Certaines choses ont l'air un peu différentes, donc elles peuvent ne pas sembler exactement les mêmes pour vous. Si vous parcourez les paramètres, vous pouvez modifier le jeu de couleurs et les choses de ce genre. Mais nous ne le ferons pas dans ce tutoriel. Vous pouvez créer des fichiers. Ce bouton permet de créer des dossiers. Encore une fois, vous n' avez peut-être pas ces icônes. Vous pouvez simplement voir cette flèche et c'est très bien. Cette icône actualisera ce dossier au cas où des modifications ont été apportées, ce qui n' est généralement pas nécessaire. Si des dossiers sont ouverts. Par exemple, si j' avais ce fichier ici, alors appuyer sur ce bouton réduirait tous les blocs. Bon, regardons quelques-unes des autres fonctionnalités. Je vais simplement supprimer ça. Il s'agit de la recherche, de l'option de recherche. Cela vous permet de rechercher l'intégralité de votre projet, de rechercher tous vos dossiers et fichiers. C'est donc super sympa. Nous n'aurons pas à nous soucier du contrôle de la source. Nous y arriverons peut-être plus tard lorsque nous commencerons à publier un site Web, mais nous ne nous inquiéterons pas pour le moment. Nous ne nous inquiéterons pas de l'exécution de d par Remote Explorer, mais nous allons jeter un coup d'œil aux extensions. Il s'agit de l'une des meilleures fonctionnalités de Visual Studio Code. Visual Studio Code est très modulaire, ce qui signifie que vous pouvez y ajouter beaucoup de fonctionnalités très facilement et c'est gratuit, ce qui est vraiment cool. Ici. Il y a toutes sortes d' extensions que vous pouvez obtenir qui vous aideront. Je vais donc recommander un couple qui pourrait être utile pour ce cours. Si vous regardez l'emballage des balises HTML, c'est quelque chose que vous pouvez me voir utiliser de temps en temps. Il s'agit simplement d'un moyen de sélectionner du texte, puis d' envelopper tout ce texte dans des balises HTML, que nous en apprendrons plus tard. Ce n'est pas nécessaire mais serviable, il y vit. Vous voudrez télécharger ceci, cela vous sera très utile. Cela nous aidera simplement, cela aidera simplement à simplifier le processus d'édition. Je recommande vivement de télécharger le serveur live. Ensuite, si vous voulez que vos icônes ressemblent à la mienne, vous pouvez télécharger ce matériel, Icône, Thème, etc. Je crois donc que ce sont toutes les extensions qui auront réellement besoin pour cela. Bien sûr. Souvent, lorsque vous modifiez dans d'autres langages de programmation, vous pouvez obtenir des extensions pour les différentes langues et cela aidera à mettre en évidence leur syntaxe. La mise en surbrillance de la syntaxe signifie simplement que certaines parties du code sont colorées différemment. Cela vous aide donc à mieux voir les choses pendant que vous modifiez. Ce sont les principaux aspects de l'éditeur. Dans la vidéo suivante, nous expliquerons comment démarrer votre projet et commencer à écrire du code. 3. Comment configurer votre première page Web en HTML: Dans cette vidéo, nous allons commencer à créer notre première page Web, notre première page Web, juste une simple page. Et je vais vous montrer la structure du HTML et comment structurer un site Web simple et l'exécuter sur votre propre ordinateur. Nous allons passer à notre éditeur code VS Code et venir ici et créer un nouveau fichier. Et nous allons appeler ce fichier index.html. Maintenant, vous vous demandez probablement pourquoi appelons-nous index. C'est juste une norme en matière de développement Web et cela aide le processus de publication de votre site à se dérouler beaucoup plus facilement. Maintenant, nous devons mettre des points HTML car il s'agit d'un fichier HTML. Permettez-moi donc d'expliquer le HTML. Structure du site Web. Il y a essentiellement trois composantes pour presque tous les sites Web. Html, CSS et JavaScript. Html est la structure de la page. Toutes les images, tout le texte, les boutons, tout comme ça. Css, que nous apprendrons plus tard, le rend joli, n'est-ce pas. Cela rend tout beau et soigné, exactement comme vous le souhaitez. JavaScript le rend alors interactif. Cela fait que les boutons font des choses. Cela fait bouger les choses quand on clique sur quelque chose ou autre. Nous allons apprendre ces trois langues dans une certaine mesure. Mais nous allons commencer par le HTML. Permettez-moi d'expliquer comment fonctionne le HTML. Il utilise un système de balises. Permettez-moi de vous montrer juste une structure de base. Ensuite, j'expliquerai comment tout cela fonctionne. Tout est imbriqué à l'intérieur de ces balises. Vous aurez une étiquette d'ouverture, qui est simplement ces deux crochets avec le nom de la balise à l'intérieur. Ensuite, vous avez une balise de fermeture avec une barre oblique, puis le nom de la balise dont vous avez toujours besoin. Je ne devrais pas dire ça. Vous avez presque toujours besoin des deux. Certaines balises ne nécessitent pas de balise de fermeture, mais la majorité d'entre elles le font. Tous les sites Web auront ces trois balises. Par trois, je veux dire, ces trois balises d'ouverture et ces balises fermeture compagnon, vous avez besoin d'une balise HTML, d'une étiquette de tête et d'une balise de corps. Commençons par HTML si vous le souhaitez. Mais une chose très agréable avec VS Code, c'est que vous n'avez pas à taper le nom complet de la balise. Vous n'avez pas besoin de sortir les supports. Il vous suffit de taper ce nom rapide comme HTML et appuyer sur Tab et il sera complété automatiquement pour vous. Ensuite, je vais juste appuyer sur Entrée. Et cela va créer cet espace juste là. La balise HTML. Cela ne fait pas grand-chose, mais c'est en quelque sorte la norme de création de la structure de la page. Tout ce qui se trouve dans la page HTML se trouve entre crochets HTML pour les balises HTML. Maintenant, nous avons le porte-tête. L'étiquette principale est importante car elle spécifie des informations importantes sur votre site Web. Par exemple, le nom de la page affichée dans l' onglet en haut. Par exemple, si je écrire ici où il y a un nouvel onglet, est quelque chose que nous avons défini dans l'étiquette de tête. C'est important. Nous allons définir d'autres informations là-dedans, mais nous n'y pénétrerons probablement pas très profondément. Nous n'aurons pas besoin d'en faire trop. En dessous, il y a l'étiquette du corps. Veillez maintenant à ne pas mettre l'étiquette corporelle à l'intérieur de l'étiquette de tête. Il doit être en dessous. À l'intérieur de l'étiquette corporelle, c'est essentiellement là que nous mettons tout le reste. Il s'agit du reste de la page HTML. C'est le corps de la page. Pour commencer avec notre site Web simple à l'intérieur de l'étiquette de tête, placez une étiquette de titre. Le titre est cette partie. En haut de la page, l'onglet que vous voyez. Je vais juste dire mon site Web. Vous pouvez dire ce que vous voulez ici. Ça n'a pas d'importance. Ce sera juste le texte affiché là-haut. Parce qu'il ne s'agit que d'une simple déclaration d'une ligne. Je ne vais pas le rompre comme je l'ai fait les autres. C'est tout ce que nous allons mettre en tête pour l'instant. Ensuite, dans le corps, faisons une balise p, qui signifie paragraphe. Et ce n'est qu' un texte normal. Et vous n'avez qu'à mettre n'importe quel texte dans la balise p. Et nous allons juste dire, bienvenue sur mon site web. Appuyez sur Enregistrer. Nous devons maintenant lancer la page. C'est à ce moment que cette extension Live Server est utile. Si vous remarquez ici, en bas à droite, un bouton qui indique Go Live et qui indique cliquez pour exécuter le serveur en direct. Allez-y et cliquez dessus. Si ce bouton ne s'affiche pas, vous pouvez simplement cliquer avec le bouton droit de la souris sur la page et cliquer sur Ouvrir avec le serveur en direct. Cela va ouvrir une page votre navigateur Web qui affiche votre site Web. Je veux juste vous féliciter très rapidement. Vous avez créé un site Web. Il s'agit d'un site Web à toutes fins utiles. C'est que ce n'est pas encore très intéressant. Mais c'est un site Web que vous pouvez faire. Ceci. La programmation Web est vraiment amusante et ce n'est pas vraiment difficile. Nous pouvons apprendre cela. C'est notre site Web. Ce qui est vraiment génial Live Server, c'est que pendant que nous modifions , chaque fois que nous appuyons sur Enregistrer, il actualise automatiquement notre page et actualise nos modifications. Si j'ajoute une autre balise de paragraphe et que je dis simplement bonjour le monde et que je l'enregistre, il est automatiquement actualisé et apparaît sur la page. Maintenant, une chose que vous remarquerez quand je mettrai ce monde bonjour , c'est qu'il est apparu ci-dessous. Bienvenue sur mon site Web au lieu d'être à côté. Et c'est parce que les balises de paragraphe affichent les éléments sous forme de blocs. Signification. Vous pouvez imaginer un bloc qui traverse toute la page. Pour cela, bienvenue sur mon site web. En fait, nous pouvons visualiser cela comme ça. Vous devez vous inquiéter de ce que c'est. Ce ne sont que quelques outils de développement utiles dans le navigateur. Mais faites attention à cela. Tout ce que j'ai mis en évidence en bleu, c'est le corps. Et vous pouvez le voir en surbrillance ici. Maintenant, si je mets en évidence chacun d'entre eux, vous pouvez voir qu'il s'agit d'une balise de paragraphe juste là. Vous pouvez voir la lettre P et elle occupe toute cette rangée. Et c'est parce que la balise de paragraphe est une balise bloc. Il faut environ une section entière. Toute autre balise que vous mettez ensuite sera automatiquement en-dessous . C'est quelque chose que nous pourrons modifier ultérieurement en utilisant CSS si nous le voulons. Mais pour l'instant, il suffit de le reconnaître. Laissez-moi vous montrer quelques autres tags utiles. Nous avons donc appris le tag p. C'est pour des paragraphes simples. Si vous voulez des en-têtes, il y a quelques balises pour cela. Il y a donc H1, H2, H3, par H6. Ok, donc ce sont soudainement ou désolés, les six tailles d'en-têtes. L'un étant le plus grand, six étant le plus petit. Nous. C'est une étiquette utile à avoir. Par exemple, si nous l'avons, si vous écrivez un blog, par exemple, vous pouvez avoir un en-tête et bienvenue sur mon blog. Ensuite, vous pouvez mettre une balise de paragraphe et dire, mettre du texte ici. C'est un peu comme ça que vous pouvez utiliser ces en-têtes. C'est une étiquette très courante et utile. Apprenons d'autres balises. Apprends-en plus sur les listes. Si vous voulez une liste numérotée, vous pouvez dire l, ce qui signifie liste ordonnée, signifie qu'elle sera commandée 12345. Ainsi, à l'intérieur de la liste ordonnée, vous devez placer des éléments de liste qui sont des balises LI. Je veux dire l'article un, l'article deux, l'article trois, etc. Vous remarquerez également qu'il les met automatiquement en retrait. Maintenant, si vous voulez une liste à puces, c'est ce que nous appelons une liste non ordonnée ou une UL. Nous pouvons faire la même chose, mais les mêmes éléments de liste là-dedans. Mais au lieu de les numéroter, il leur donne des points de puces. Très bien, donc ce ne sont que quelques-unes des balises que nous allons utiliser. Il existe d'autres textes pour des éléments tels que des images, des liens, des boutons, etc. Et nous y reviendrons dans des vidéos ultérieures. Mais pour l'instant, c' est la base de la configuration d'un site Web HTML. N'oubliez pas que nous avons créé un fichier index.html. Le code HTML des points est très important. Ensuite, nous avons des balises d'ouverture et de fermeture. Chaque page HTML comporte une balise HTML, une balise de tête et une balise de corps. 4. Autres balises HTML utiles (Partie 1): Dans cette vidéo, nous allons parler d' autres balises HTML que vous trouverez probablement utiles. Le premier avec lequel nous allons commencer s'appelle la balise a. Et nous allons l' utiliser pour créer des liens. Et pourquoi c'est ce qu'on appelle l'étiquette A. C'est un peu déroutant. Il est synonyme d'ancrage, mais nous n'avons pas à nous inquiéter pour cette vidéo. Il suffit donc de taper la lettre a et de cliquer sur Tab. Vous verrez qu'il crée une balise avec un attribut appelé auriculaire. H ref est essentiellement l' endroit où nous mettons le lien pour tout ce que nous allons mettre ici. Ups fait une petite note sur les attributs. Et l'attribut en HTML est quelque chose que vous mettez à l'intérieur de la balise d'ouverture d'un élément. Ce sont tous des éléments pour le placer à l'intérieur de la balise d'ouverture. Et nous allons en apprendre un peu plus sur les attributs plus tard, mais ils vous permettront de changer de style et d'autres choses du genre. Mais pour celui-ci, nous devons y mettre le lien. Je vais juste aller sur Google. Je vais juste saisir ce lien, jeter ici. Maintenant, si je clique sur Enregistrer, vous remarquerez que rien ne s'est passé. Et c'est parce que nous devons en fait joindre le lien à un texte. Je vais juste mettre entre les balises d'ouverture et de fermeture. Je vais juste taper Google. Vous verrez que nous l' avons dit Google ici et cela nous montre qu' il s'agit d'un lien. Si vous cliquez dessus et que vous cliquez dessus, cela vous amènera à Google. Remarque rapide sur les balises et les liens. Il est très important que vous ayez le protocole HTTP ou HTTPS. Je suis presque sûr que cela ne fonctionnera pas sans elle. Je pourrais me tromper, mais je serais généralement en sécurité et je l'incluais. Le prochain tag dont nous allons parler est la balise B. C'est assez simple. Il est juste synonyme d'audace. Si j'ai un tag p, j'ai du texte et je dis simplement, bonjour tout le monde. Si je veux rendre World audacieux , je vais l' entourer d'une balise B. Ok, donc ça rend ça audacieux. Maintenant, je vais faire une petite note sur ce que je viens de faire. Vous avez vu que j'ai sélectionné le monde et j'ai appuyé sur Alt W sur mon clavier, ce qui ne fonctionne pas, ça ne fonctionnera pas encore pour vous. Je vais vous montrer comment faire en sorte que cela fonctionne. C'est l'extension tag wrap dont j'ai parlé plus tôt dans la vidéo. Si vous accédez à Extensions et que vous trouvez l'enveloppe de balises HTML, installez-le si vous le souhaitez. C'est juste une astuce utile. La façon dont vous l'utilisez lorsque vous sélectionnez le mot et appuyez sur Alt W., puis vous pouvez taper tout ce que vous voulez. Et il le placera dans les balises d'ouverture et de fermeture. Donc, si je mets le b ici, alors il met ses entrées juste là. C'est plutôt cool. Maintenant, si vous voulez rendre l' espacement un peu moins déroutant, vous pouvez en fait imbriquer la balise de paragraphe comme celle-ci, et c'est très bien. Maintenant, je vais vous montrer un autre tag. C'est la balise I ou l'italique. Alors, disons encore une fois. Nous allons mettre ça dedans. Vous pouvez voir juste là, ça met en italique. Maintenant, vous vous demandez probablement ce qui vient de se passer ici, où il place ces deux phrases l' une à côté de l' autre plutôt qu'une en haut, une en bas. Parce que dans l'éditeur de code, l'un était en haut et l' autre en bas. Eh bien, si nous revenons à ce dont nous avons parlé avec les éléments de bloc, balise de paragraphe est un élément bloc, ce qui signifie qu'il s' agira d'un seul bloc. Tout ce qu'il contient sera un pâté de maisons. Si vous voulez mettre quelque chose en dessous, vous devez y placer un autre bloc. La façon dont ce texte est lu, il pourrait aussi bien y être directement attaché. Ne pas nous demander d'appuyer sur Entrée ici et de faire cette pause. C'est. Cela ne nous aide pas ici. Ce que nous devrions faire, c'est. Créez une balise de deuxième paragraphe, donc un deuxième bloc et mettez-la dedans et de cette façon, elle la mettrait sous. Maintenant, encore une fois, vous n' avez pas besoin de les imbriquer, mais cela peut être utile si vous avez plusieurs balises qui peuvent rendre les choses un peu moins déroutantes. Parlons maintenant de la balise image. Allez-y, tapez IMG et appuyez sur Tab. s'agit simplement d'afficher des images sur votre site Web. Il possède deux attributs. L'un est l'attribut source et quel est l'attribut alt ? La source est l'endroit où se trouve votre photo sur votre ordinateur. Je vais vous parler d' ALT dans une minute. Laissez-moi trouver que j'ai une photo ici sur mon ordinateur, alors je vais l'attraper et la faire glisser dans mes fichiers. C'est juste une photo de moi jouant du piano. Si vous ne savez pas, j' aime vraiment jouer du piano. Mais de toute façon, j'ai cette photo juste là. Pour simplifier les choses. Je vais me renommer et je vais m'en tenir. Je vais me débarrasser de tous les espaces qui nous faciliteront la vie. Dans la balise source, nous devons taper ceci en jouant le piano dot JPG, JPEG. C'est la source. Maintenant, si nous cliquons sur Enregistrer, il va apparaître. Vraiment, vraiment gros. Ouah. C'est une image énorme. Je vais vous montrer comment régler cela dans une minute. Mais parlons très vite de cette étiquette alt. La balise alt permet d'afficher la description d'une image. S'il ne parvient pas à se charger. Si nous devions jouer du piano ici. Désordons très vite le lien des magasins. Débarrassez-vous d'une lettre et cliquez sur Enregistrer. Il ne trouve pas l'image car il ne sait pas comment elle s'appelle correctement. Nous obtenons donc cette petite erreur et une description du piano qui peut être pratique. Maintenant, si vous avez déjà survolé votre souris sur une image ou quelque chose d'autre, et qu'elle affiche la petite zone de texte flottante. C'est ce que nous appelons l'attribut title. Laissez-moi vous montrer comment cela fonctionne. Nous pouvons ajouter un attribut ici et dire titre. Et si nous disons jouer du piano ici, alors lorsque nous survolerons, l'image obtiendra ce petit blurb de texte où il est dit jouer du piano. Maintenant, cette image n'est pas très bonne, c'est énorme. Alors, comment pouvons-nous y remédier ? Nous pouvons ajouter une largeur, un attribut, la balise. Si nous parlons de largeur, nous pouvons entrer une mesure. Nous allons le faire en pixels. Si vous n'êtes pas familier avec les pixels, votre écran est essentiellement composé de millions et de millions de pixels, et c'est ce qui crée l' ensemble de l'image sur votre écran. Une image comme celle-ci, moi jouant du piano, est composée d'une certaine largeur en pixels et d'une certaine hauteur en pixels. Nous pouvons vérifier ce que c' est pour cette image en allant dans notre explorateur de fichiers. Nous cliquons avec le bouton droit sur l'image. Ensuite, dites révéler dans l'explorateur de fichiers. Ensuite, nous pouvons cliquer dessus avec le bouton droit de la souris et accéder aux propriétés. Et ensuite, allez dans les détails. Ici, vous verrez les dimensions. Il fait 4 mille x 6 000, et vous verrez que la largeur est de 4 000 pixels, hauteur est de 6 000 pixels. Je vais essayer de le redimensionner en quelque chose d'assez petit. Je vais le réduire un peu et juste dire 300 pixels. Vous écrivez cela par 300 px et assurez-vous qu'il n'y a pas d'espace entre le nombre et le px. Et cliquez sur Enregistrer. Voici l'image. Maintenant, vous vous demandez probablement si je dois vérifier la taille de chaque image que je mets ? Absolument pas. Vous pouvez certainement jouer avec ça comme vous le souhaitez. Vous pouvez simplement deviner les chiffres. Et si ce n'est pas tout à fait ce que vous aimeriez, faites-le un peu plus grand. Maintenant, la raison pour laquelle nous ne mettons que la largeur est que si nous ne mettons qu'une seule mesure, cette dimension unique, elle conservera automatiquement l'échelle de la hauteur afin qu' elle reste la même. Si nous le voulions, nous pourrions ajouter des attributs de hauteur et choisir ce que nous voulons. Je peux en faire un carré et dire 300 pixels. Cela écraserait notre image en un carré. Ce n'est probablement pas idéal dans la plupart des cas. C'est pourquoi vous ne feriez que garder la dimension unique. Soit vous pouvez garder la largeur, la hauteur. Il mettrait automatiquement à l'échelle l'autre. Cela garderait votre image intacte. C'est la balise image. Dans la prochaine vidéo, nous parlerons de quelques autres tags. 5. Autres balises HTML utiles (Partie 2): Nous allons parler de trois autres étiquettes , puis nous allons passer au style. Je suis donc excité pour ça. Plus tôt, je vous ai parlé de la balise de paragraphe et de la façon dont il s'agit d'un élément bloc. Si vous vous en souvenez, nous vous avons montré un exemple où si vous placez du texte à l'intérieur de ce paragraphe, il va simplement l'ajouter directement au dernier élément. Que se passe-t-il si vous souhaitez répliquer ce comportement mais avoir des balises distinctes ? Eh bien, il y a une étiquette pour ça. C'est ce qu'on appelle l'étiquette span. La balise span n'est pas un élément bloc, c'est un élément en ligne, ce qui signifie qu'il sera placé à côté tout ce que vous essayez de créer. Maintenant, le problème avec inline est que nous ne pouvons pas placer à côté la balise de paragraphe car le paragraphe est un type de bloc. Tout ce que vous mettez en dessous va être un nouveau bloc. Cependant, nous pouvons attacher deux balises de span ensemble. Ces étiquettes de span seront placées l'une à côté de l'autre. Mais si nous devions mettre une autre balise de paragraphe, ce serait un nouveau bloc. OK. Laissez-moi vous montrer quelque chose. Si c'est moi, je vais les souligner de manière à ce que vous puissiez voir chacun des éléments. Vous pouvez voir que Hello est son propre bloc. Ensuite, ce sont des éléments en ligne, ils sont séparés. Vous pouvez voir que le bonjour est à nouveau attaché l'un à l'autre. Ils sont séparés les uns des autres, mais ils sont sur la même ligne. Ensuite, la balise de paragraphe se sépare de celles-ci. C'est l'étiquette de span. Ensuite, nous parlerons de l'étiquette de rupture. La balise break signifie simplement que vous voulez un peu d'espace entre différents objets. Donc, si j'ai mon tag de paragraphe ici et que je veux mettre une image, disons : Est-ce que j'ai toujours cette image ? C'est vrai, oui. Disons que j'ai cette image d'une largeur de 100. Disons que je veux plus d' espace entre cette image. Je dirai jouer du piano. Je peux simplement mettre un break tag qui n'est que BR. Vous remarquerez maintenant qu'il n' a créé que la seule balise d'ouverture. La balise break est l'une de ces balises qui n'ont pas besoin d'une balise de fermeture. C'est juste sa petite chose. Vous pouvez le voir placer cet espace juste là. Maintenant, je peux le copier et le coller plusieurs fois. Et il y a beaucoup d'espace. C'est l'étiquette de rupture. Maintenant, la troisième étiquette dont nous allons parler est la balise bouton, que nous n'allons pas en faire beaucoup pour le moment, mais nous allons en faire beaucoup plus tard. Le bouton est amusant, c'est assez simple. Il suffit de mettre du texte à l'intérieur de ce que vous voulez dire sur le bouton. Je peux dire « poussez-moi ». Il y a maintenant un bouton. C'est un fait amusant. Vous remarquerez que le bouton est passé à côté de l'image et c'est parce que le bouton est un élément en ligne tout comme l'image. sont tous les deux en ligne, donc ils sont tous les deux à côté de moi. Par exemple, si je voulais mettre le bouton en dessous, si je pouvais juste mettre un break tag, peut-être un couple. Vous pouvez maintenant voir le bouton « Moi ». Je peux cliquer dessus, et c'est assez basique, mais ça ne fait rien. Il est assez difficile d' obtenir beaucoup de fonctionnalités avec des boutons utilisant uniquement du HTML. Nous allons avoir besoin de JavaScript pour cela. Alors restez à l'écoute. Nous allons faire des choses interactives intéressantes plus tard avec JavaScript et width, les boutons. 6. Construisons un site Web génial !: Dans cette section du cours, je vais vous montrer comment reproduire le site Web que vous envisagez en utilisant du HTML, CSS et un peu de JavaScript. Permettez-moi donc de vous faire une courte visite ce site Web afin que vous sachiez sur quoi nous travaillons. C'est assez basique et sa fonctionnalité, c'est un simple diaporama. Il ne se déplace pas automatiquement, mais nous pouvons modifier les images ici en cliquant sur ces images ci-dessous. Vous verrez qu'il y a un peu d'effet de bulle. Donc, quand je mets en surbrillance chacune des images, elles apparaissent un peu. Vous pouvez voir qu'ils sont séparés de manière uniforme et qu'ils sont centrés sur la page comme celle-ci. Vous pouvez également voir ce logo Explorer en haut. Juste une police fantaisie qui devient bleue lorsque je la souris dessus. Et les boutons de navigation deviennent rouges lorsque je les survole. Je vais également vous montrer une navigation de page. Donc, si nous cliquons sur cette page de la galerie, c'est juste une page simple que j'ai créée qui affiche les quatre images disponibles, mais je vais vous montrer comment naviguer sur cette page. Maintenant, bien que ce site soit assez simple, je veux impressionner dans vos esprits l'importance du CSS dans ce projet. Et je peux en fait aller de l'avant et désactiver le CSS ici et vous montrer à quoi il ressemble sans. Laissez-moi aller de l'avant et le faire. Il s'agit du code HTML brut de la page. Nous avons d'énormes images qui ne rentrent pas à l'écran. Ensuite, nous avons juste quelques boutons de navigation bizarres qui ne sont pas géniaux. Sauf que le CSS était toujours sur cette autre page. Mais vous pouvez voir que le CSS joue un rôle énorme et énorme dans ce à quoi ressemble une page Web. Et nous ne voulons pas qu'il soit simplement fait de HTML. Dans les prochaines vidéos, je vais vous montrer comment structurer ce site en HTML. Et nous y apprendrons quelques nouvelles choses. Je suis aussi, et ensuite les vidéos ultérieures, nous apprendrons tout le CSS requis pour cela ainsi que le JavaScript pour cela. n'y a pas beaucoup de JavaScript, mais il y a juste un peu pour faire en sorte que l'image change dans le diaporama. Je vous verrai dans la prochaine vidéo. 7. Styler votre en-tête et votre image principale (CSS Partie 1): Très bien, allons construire ce site Web. Pour commencer. J'ai commencé avec un nouveau dossier. Vous pouvez faire de même ou modifier les fichiers sur lesquels nous avons travaillé précédemment. Si vous le souhaitez, je vous recommande de commencer par un nouveau dossier. Ce que nous allons faire en premier, c'est créer notre fichier index.html. Nous allons simplement créer un fichier à la fois. Je vais créer ce nouveau fichier, index.html. Nous commencerons par les bases, la balise HTML et à l'intérieur de la balise principale, et à l'intérieur, le type de titre. Le titre de cela. L'objectif ici est de reproduire cette page. Ici, sur l'onglet, il est dit exploré. donc ce qu'est la balise titre. Quatre. Nous allons explorer. Ensuite, nous pouvons les aligner ici. On y va. Ensuite, sous l'étiquette principale, je vais créer une étiquette corporelle. Nous allons mettre un H1. Il suffit de dire explorer ça. On a cette grosse tête là-haut. Voyons à quoi ça ressemble jusqu'ici. Je vais l'enregistrer et cliquer avec le bouton droit de la souris et appuyer sur Ouvrir avec Live Server. Cela va ouvrir un autre onglet ici. Nous pouvons voir à quoi ressemble notre page. C'est ce que nous avons jusqu'ici, juste le H1 et il est également écrit Explorer ici en haut. C'est génial. Ensuite, je vais ignorer la navigation pour l'instant, mais mettons les images. OK ? Ce que nous voulons, c'est une image principale avec quatre images en dessous. Je vais juste mettre une étiquette d'image. Nous avons maintenant besoin des images réelles. Je vais inclure un lien dans R. Je vais inclure des liens de téléchargement pour les images et tout autre lien, comme des liens ou des choses dont j'ai parlé dans le cours, qui figureront dans la description du cours. Je vais inclure des liens pour télécharger les images, mais permettez-moi de les saisir très rapidement. J'ai ces quatre images. Mettons-le ici. Maintenant, vous verrez que vous pouvez voir ce dossier de code VS à points. Vous n'avez pas besoin de vous inquiéter à ce sujet. C'est juste quelque chose qui est automatiquement créé par VS Code et il semble que certains paramètres s'y trouvent, mais nous n'y toucherons pas. Cela n'affectera pas vraiment notre projet. J'ai mes quatre images et je peux les voir ici dans VS Code. Ce sont de très grandes images, donc elles prennent une seconde à charger. Mais j'ai mes quatre images. Ce que nous voulons faire, c'est que nous voulons que notre image principale commence car nous voulons prendre l'une des images pour commencer, je vais simplement choisir Image 1, que j'ai nommée comme pour ceci, cette image dans la source, Nous allons juste dire JPEG à un point immédiat. Ce que nous pouvons faire dans le texte alternatif, qui si vous vous souvenez, le texte alternatif est que nous apparaîtrons si une image ne peut pas s'afficher. Ici, je vais juste dire montagnes. Ou voyons voir, je dirai une ville à la montagne. Je pense que c'est une bonne description. Mais il ne rend pas justice à l'image. Bon, donc je vais l'enregistrer et nous allons regarder notre page maintenant. Nous avons Explore ici, puis une image énorme. Nous allons devoir travailler sur le redimensionnement, ce qui sera fait avec le CSS. Nous avons notre image principale. Commençons par ça. Commençons à travailler sur notre CSS. Nous devons créer un nouveau fichier. Nous allons l'appeler style.css. Nous devons lier ce fichier dans notre code HTML à l'intérieur de la balise principale. Sous la balise de titre, nous allons dire lien. Ensuite, vous pouvez la souris vers le bas, flèche vers le bas jusqu'à CSS. Et cela créera tout cela pour vous. Disons que c'est une feuille de style, c'est ce qu'est le CSS. Et puis le lien vers le fichier réel par défaut est style.css. Nous sommes assez chanceux avec notre nom. Maintenant, nous devons tester pour nous assurer que le fichier CSS fonctionne. Essayons donc de modifier quelque chose de simple. Nous voulons que la page soit noire. L'une des façons de le faire est que nous le pouvons réellement. Nous pouvons attacher certains styles à l'ensemble du corps de la page, à la balise body elle-même et rendre la page noire. Permettez-moi de vous montrer comment procéder dans nos feuilles de style, dans notre CSS. Vous pouvez nommer une étiquette. Je vais dire le nom du corps de l'étiquette. Et ensuite, vous allez mettre ces crochets bouclés ici. Et une fois que vous avez créé, une fois que vous avez touché le crochet d'ouverture, il crée automatiquement une paire , vous pouvez simplement appuyer sur Entrée et cela le fera pour vous. Maintenant, nous pouvons dire simplement, nous pouvons y mettre nos propriétés CSS, qui sont les éléments individuels de style que nous ajoutons à la page. Ce que nous voulons ici, c'est la couleur de fond, le noir. C'est assez simple car nous travaillons sur plus de CSS, vous verrez qu'une grande partie est très lisible, facile à comprendre. Maintenant, SSS n'est pas toujours facile. Il peut devenir très complexe. Mais j'espère que ce que je vous ai montré sera logique. Et j'espère que vous n'avez pas peur du CSS car c'est vraiment un excellent langage et c' est assez intuitif la plupart du temps, à mon avis. Allez-y et cliquez sur Enregistrer. Ce que nous avons fait ici, c'est que nous avons dit la balise de corps et que la couleur d' arrière-plan est noire, ce qui signifie que l'arrière-plan entier de la page doit être noir. Si nous allons sur notre page, vous pouvez voir que c'est techniquement vrai. Mais nous avons juste cette image qui a été retirée la plus grande partie de la page, donc vous ne pouvez pas vraiment dire que c'est l'arrière-plan est noir. Bon, alors travaillons avec ça. Allons réduire l'image. Je vais vous montrer une pièce d'identité. Dans CSS, nous avons essentiellement trois façons d'attacher des styles à des éléments. Nous pouvons sélectionner un élément par son nom de balise, que vous venez de voir avec la balise body. Ou nous pouvons utiliser un identifiant ou une classe. Une classe est lorsque vous souhaitez associer un style à plusieurs éléments. Vous donnez la même classe à chacune des balises. Et ensuite, vous pouvez donner le même style, tous. Et l'ID est l'endroit où nous ne voulons donner un style qu'à un seul. Permettez-moi de vous montrer comment faire cela. Dans une balise d'image. Nous voulons réduire un peu la largeur. Donc ce que je vais faire, c'est à l'intérieur de la balise, je vais ajouter un autre attribut, des sources, un attribut, alt en tant qu'attribut. Nous allons ajouter un autre attribut et nous allons l'appeler ID. Si vous appuyez simplement sur ID et appuyez sur la touche tabulation, cela devrait créer ce petit égal et la citation fonctionne. À l'intérieur, il y a ce que nous nommons l'identifiant. Cela peut être ce que vous voulez. Je vais appeler ça l'image principale. OK ? Désormais, généralement, si vous souhaitez plusieurs mots au nom d'un identifiant ou d'une classe, vous devez placer un trait d' union entre les mots. C'est juste la norme habituellement suivie. Nous allons y mettre l'image principale. Maintenant, ce que nous pouvons faire, c'est que nous pouvons le sélectionner dans notre style.css. Maintenant, pour dire au CSS qu'il s' agit d'un identifiant au lieu d'une balise, faut-il mettre un signe de livre, disons l'image principale. Si c'est une classe, on mettrait un point et on dirait une image principale comme celle-ci. Mais c'est une pièce d'identité, donc nous allons mettre un panneau de livre. Et maintenant, nous voulons modifier sa propriété width. Voyons ici. Nous allons lui donner une largeur de 100 %. Maintenant, cela signifie que la largeur va prendre 100 % du conteneur. Essentiellement. Le conteneur de cette image est le corps. C'est ainsi qu'il se situe dans la hiérarchie. À l'intérieur du corps. Il va prendre 100 % de la largeur. Voyons donc à quoi ça ressemble. Génial. Nous pouvons voir que l' image ne dépasse pas la largeur de l'écran. Il s'étend au-delà de la hauteur. Mais il s'adapte en largeur sur l'écran car il prend 100 % de la largeur. Maintenant, ce que nous voulons faire c'est que si nous redimensionnons cela, vous verrez que la quantité de l'image change en fonction de la largeur. Nous voulons que cela reste assez constant. Nous allons lui donner une hauteur de 400 pixels. Maintenant, vous pouvez voir que l'image a un peu écrasé. Mais il s'agit essentiellement de la même taille qu'ici. Nous jetons un coup d'œil. C'est à peu près la même taille, mais tout est floue. Nous allons maintenant utiliser une propriété CSS appelée objet bit. Et je ne sais pas tout sur cette propriété. Mais ce que je peux vous dire, c'est que, comme le dit le nom, cela modifie la façon dont l' objet sur la page, la valeur que nous allons lui donner est la couverture. Ce que cela a fait, c'est que l'image n'est plus écrasée, mais qu'elle soit coupée. Ce qui signifie que si vous modifiez la taille de celle-ci, vous verrez différentes parties de l'image. Essentiellement, il conserve le même rapport d'aspect. Mais selon la taille de l'écran, vous verrez une autre partie de l'image. Maintenant, pour nos besoins, c'est bon. Vous pouvez le voir sur la page principale, comme je le redimensionne, nous obtenons également cet effet. Nous avons notre image. Maintenant, ce que nous voulons faire, c'est que nous ne pouvons voir aucun de nos textes. Nous ne pouvons pas voir l' explorateur ici. Il est là, quelque part. On y va. Il se cache parce que c'est noir. Allons de l'avant et changeons la couleur de cela. Voyons voir. Nous avons le nôtre ici. Je vais donc ajouter 81 car c'est le nom de la balise. Je vais juste dire couleur, blanc. Vous pouvez voir CSS, ce n'est pas trop mal. Maintenant, des choses comme l'ajustement des objets peuvent être un peu déroutantes. Je mettrai des liens vers une référence CSS et une référence HTML qui vous montreront toutes les propriétés HTML et CSS et balisées que vous pourriez souhaiter utiliser. Et il vous donne beaucoup de détails sur la façon de l'utiliser correctement. Très utile. Lorsque vous effectuez un développement Web. Vous n'avez pas besoin de tout mémoriser. Vous n'avez même pas besoin de mémoriser exactement comment tout fonctionne. Ce qui est important, c'est que vous sachiez comment rechercher et trouver les informations dont vous avez besoin. Et c'est plutôt courant dans la plupart des programmes. Avant de terminer cette vidéo, faisons encore une chose. Changeons le style de cet explorateur pour qu'il ait ces polices fantaisies et qu' il soit centré sur la page. Comme je l'ai fait, j'utilisais un site Web appelé Google Fonts. Si vous allez sur fonts.google.com, vous serez amené à cette page. Vous ne saviez probablement pas que cela existait, mais c'est plutôt génial. Permettez-moi de vous montrer comment cela fonctionne. Je peux taper quelque chose ici. Je pourrais dire Explorer. Cela va nous montrer tous ces liens différents parmi lesquels nous pourrions choisir. Un tas de choses différentes que nous pourrions utiliser que nous pouvons intégrer gratuitement dans notre site Web. La police que nous voulons utiliser est appelée brosse à eau. C'est celui-là juste ici. Vous pouvez continuer et cliquer dessus. Et la plupart des polices auront plusieurs poids, ce qui signifie essentiellement à quel point le caractère audacieux est important. Et pour que vous puissiez les voir. Vous pouvez aussi simplement taper et voir à quoi cela ressemblerait dans différentes tailles et ce genre de choses. Ce que nous voulons faire, c'est cliquer sur sélectionner ce style. Maintenant, venez ici et cliquez sur Afficher les familles sélectionnées. Maintenant, j'ai d'autres choses, alors laissez-moi enlever ça. Je n'ai que ce pinceau à eau. Maintenant, il est dit de l'utiliser sur le Web. Il suffit d'intégrer cette balise, ce morceau de code au HTML, puis l'utiliser pour utiliser cette famille de polices dans le CSS. Nous allons copier ceci, nous reviendrons dans notre code HTML. Et nous allons le coller sous notre lien vers le fichier style.css. Je vais juste coller là-haut. Cela peut paraître vraiment ici. Si vous cliquez au début d'une ligne et que vous appuyez sur Tab, vous pouvez tout aligner correctement. Maintenant, si nous cliquons sur Enregistrer, cela ne donne pas immédiatement l'impression que nous voulons. L'autre partie est très importante pour ce qui est indiqué dans les règles CSS. Nous allons aller de l' avant et copier cela. Et dans notre H1 dans le CSS, il suffit d'aller de l'avant et de coller ça. Cette propriété s' appelle font-family. Et comme vous pouvez l'imaginer, cela modifie la police. Cette police s'appelle water brush, qui a accès à l'utilisation de Google Fonts. Et ça dit que c'est cursif. Appuyez sur Enregistrer. Vous pouvez aller de l'avant et regarder la page. Et puis on y va, c'est maintenant fantaisiste. Tout est cursif. C'est plutôt cool. faut maintenant le centrer en haut de la page. Ce que nous pouvons faire pour cela, c'est que nous allons maintenant modifier la taille de la police en tapant la taille de la police. Si vous faites défiler vers le bas, vous verrez qu'il existe de nombreux symboles étranges différents. Fondamentalement, il s'agit de différentes unités de mesure. Nous allons en utiliser un appelé EMS, orthographié EM. Laissez-moi vous montrer à quoi on ressemble. On dirait ça. M est essentiellement la taille de police par défaut de votre navigateur. Je pense que c'est basé sur la hauteur de la lettre M. s'agit d'un m, et cela peut varier selon les paramètres de votre navigateur. Mais ce que nous voulons faire, c'est que si vous le modifiez, c' est deux fois plus que cela. Ce que nous voulons, c'est cinq ampères, soit cinq fois la taille de police par défaut. Il existe d'autres façons de faire des tailles de blocs. Vous pouvez les faire en pixels. Vous pouvez les faire en pouces, centimètres, toutes sortes de choses. Vous pouvez les expérimenter ou regarder en ligne pour apprendre à les utiliser. Cela, parce qu'il existe de nombreuses façons intéressantes de faire les choses, vous pouvez également utiliser des pourcentages comme nous l'avons fait ici. Mais nous allons utiliser EMS. Maintenant, nous l'avons. Nous avons la taille de la police. Ce dont nous avons besoin maintenant, c'est de l' aligner au milieu de la page. J'ajoute une autre propriété et je dis centre d'alignement de texte. Et comme vous pouvez l'imaginer, cela aligne le texte au centre de l'image, comme nous le voulions. On se rapproche. Vous pouvez voir que nous n'y sommes pas encore, mais nous sommes en train de faire beaucoup. Dans la vidéo suivante, nous ferons encore plus de style. 8. Spécificité du sélecteur et effets de survol (CSS Partie 2): Très bien, faisons encore un peu de CSS. D'accord, donc la première chose que je veux que vous regardiez, lorsque nous comparons ces sites Web, vous pouvez presque voir une différence dans le côté de l'image. Vous verrez ici que cette image s'étend jusqu'aux bords de l'écran. Alors que c'est le cas ici. Pourquoi est-ce que c'est ? Eh bien, les navigateurs placeront automatiquement une sorte de remplissage ou essentiellement une couche d'espace sur la page. Ils le font simplement par défaut, nous devons en fait faire quelque chose pour nous en débarrasser afin que nous puissions le coiffer nous voulons le rendre exactement identique sur chaque appareil. Bon, donc allons de l'avant et regardons notre code. Voici comment nous pouvons le faire. Au sommet de notre CSS. Faites de l'espace et mettez une étoile, un astérisque. L'astérisque est un symbole qui signifie tout. Signification. Au lieu de sélectionner une balise, une classe ou un identifiant, cela s'applique à tout ce qui se trouve sur la page. D'accord ? Maintenant, je dois mentionner que chacun d'entre eux est ce que nous appelons un sélecteur, un sélecteur CSS. Ce n'est donc qu' un autre sélecteur CSS et cela signifie que nous sélectionnons tout. Nous devons donc nous débarrasser des valeurs par défaut. Nous allons donc ajouter deux propriétés. L'une est appelée marge et l'autre s'appelle rembourrage. Quelle est la différence ? Eh bien, la marge correspond essentiellement quantité d'espace à l'extérieur d'un objet. Donc, si vous avez deux objets ici et ici, la marge correspond à l' espace entre eux. Le rembourrage est, par exemple, si vous avez un objet ici, puis un objet à l'intérieur, comme certains textes, le rembourrage correspond à l'espace entre les bords de l' objet et ce qui se trouve à l'intérieur. Ok, donc nous en parlerons probablement un peu plus. Au fur et à mesure. Nous ajouterons de la marge et du rembourrage aux choses. Mais ce que nous voulons faire, c'est que nous voulons définir ces propriétés sur 0 par défaut, nous voulons une marge de 0, un remplissage de 0. Regardez donc ce qui va se passer. Nous cliquons sur Enregistrer et vous verrez instantanément que l'image est montée sur les côtés de l'écran. Et c'est parce que nous nous sommes débarrassés de ces propriétés par défaut. Vous vous demandez peut-être si nous appliquons une marge de 0 et un remplissage de 0, tout, que se passe-t-il si nous voulons modifier ces propriétés plus tard ? Eh bien, ce qui est intéressant avec CSS, c'est que la propriété qui s'applique à un objet est qu'elle dépend de votre spécificité. D'accord. Cela semble un peu déroutant. Laissez-moi vous expliquer. Par exemple, si nous avons cette balise de corps, ayez une couleur d'arrière-plan noire. Disons que nous voulons placer une boîte quelque part sur la page qui a une couleur d'arrière-plan bleue. D'accord. Ce que nous pouvons faire, c'est que nous pourrions donner la boîte, je suis un sélecteur plus spécifique comme un ID ou une classe. Et disons qu'il a une couleur d' arrière-plan différente. Et puis celui qui est plus vague, nous sommes plus éloignés, est annulé. Donc, si nous regardons, la façon dont la spécificité fonctionne est les balises les plus générales, puis les classes, puis les ID. Donc, une pièce d'identité va être emportée sur tout. Ça va s'en sortir. Donc, tout ce que vous dites dans la carte d'identité exclut tout ce que vous avez dit auparavant. Très bien ? J'espère que c' est un peu logique. Nous n'aurons pas trop à nous soucier la spécificité du CSS dans cette classe. Si vous voulez en savoir plus à ce sujet, vous pouvez trouver des tonnes de choses à ce sujet en ligne. Mais j'ai juste pensé que je devrais vous dire quel genre de fonctionnement cela fonctionne. Si vous ne comprenez pas de quoi je viens de parler, permettez-moi de le résumer en disant que nous pouvons appliquer cette marge de 0 et cette marge de 0 à tout. Mais ce sélecteur est très général puisqu'il s'applique généralement à tout. Si nous créons quelque chose de plus spécifique, comme si nous sélectionnons la balise , la classe ou l'ID. Quelle que soit la marge ou le rembourrage que nous avons mis, cela l'emporte sur tout et sur les règles. Ceci. D'accord ? Cela prépare juste le terrain pour nous laisser faire ce que nous voulons. Allez-y et sauvegardez ça. Qu'est-ce qui est différent ? Eh bien, il y a un espacement différent entre l' en-tête ici et la navigation. Nous avons également ces images ici. Et nous avons également ces effets de survol précis. Commençons donc par ça. Comment faire le vol stationnaire ? Très bien, c'est assez simple. Ce que nous devons faire, c'est créer un autre sélecteur. Et nous allons dire que c'est H1, mais nous mettons un deux-points et nous disons survoler, ce qui signifie que nous sélectionnons la balise H1, mais nous sommes précis et nous disons si nous le survolons, comme ceci, en surmontant la souris. D'accord. Donc, ce que nous pouvons faire, c'est que nous pouvons mettre une couleur bleue. Et plus précisément, nous allons utiliser cette couleur. Très bien ? Maintenant, ce que vous pouvez faire, c'est que vous pouvez copier ce mot pour mot si vous le souhaitez. Mais permettez-moi de vous montrer comment cela fonctionne. Quand j'ai créé cela, j'ai commencé avec le bleu. génial avec VS Code, c'est que si vous survolez une couleur, cela vous permet de la modifier. Vous avez ce sélecteur de couleurs. D'accord. J'ai trouvé la couleur que je voulais. Et vous pouvez voir qu'il y a ce code RVB en haut. C'est donc essentiellement ce que c'est. Le code RVB signifie essentiellement que c'est la quantité de rouge, c'est la quantité de vert, et c'est la quantité de bleu pour obtenir cette couleur. La syntaxe est donc RVB. Ensuite, entre parenthèses, il suffit de séparer les valeurs par Aqaba. Et assurez-vous qu'il y ait un point-virgule après ça. Donc, si nous cliquons sur Enregistrer et que nous allons sur notre page, si je surligne dessus, il devient maintenant de couleur noire. Vous remarquerez cependant que mon curseur n'est pas tout à fait ce que nous voulons. Si vous regardez ici, il y a plus de pointage du doigt. C'est quelque chose qui identifie que vous pouvez cliquer dessus, ce que vous pouvez. Mais nous n'avons pas ça ici. Alors, comment pouvons-nous obtenir cela ? Eh bien, sur ce même sélecteur de survol va ajouter une autre propriété appelée curseur. Il existe une variété de curseurs que vous pouvez obtenir. Tout, du chargement à tous les curseurs que vous avez vus sur le Web peut être défini ici pour la plupart. Par exemple, si nous mettons grab et que nous cliquons sur Enregistrer, cela nous donne cette petite main qui saisit, comme si nous pouvions la déplacer. Ok, donc celui que nous recherchons s'appelle pointeur. C'est juste ce genre de simple clic. C'est ce que nous voulons. Nous voulons également mettre ici une transition qui s'estompe en quelque sorte, estompe dans le ballon pour qu'elle soit un peu plus naturelle. Comme ici. On peut voir qu'il s'estompe un peu plus lentement. Nous allons donc mettre ici une propriété appelée transition. Nous allons utiliser une transition appelée facilité d'entrée, de sortie. Maintenant, ce que cela signifie, c' est que la transition a un début lent et une fin lente. Facilité d'entrée et de sortie. D'accord ? Et donc la sortie est un peu difficile à voir avec cela ici, mais vous pouvez aussi dire aisance. Il existe une variété de transitions que vous pouvez utiliser. À côté de faciliter l'entrée, nous allons mettre un espace et mettre 0,2 S quatre secondes. Donc, cela fait en sorte que l'animation se produise dans un délai de 0,2 seconde. Il économise. Et maintenant, nous avons survolé la souris. Et vous pouvez voir même si ce n'est que 0,2 seconde, ça fait une différence. C'est plus naturel. C'est juste que c'est plus agréable. D'accord ? Nous avons donc fait notre en-tête. Pourquoi ne pas placer les quatre images sous l'image principale ici ? Ce que nous voulons faire dans notre code, nous allons créer une liste non ordonnée. La liste non ordonnée est donc essentiellement une liste à puces. Il n'est pas numéroté. Une liste ordonnée serait numérotée. Donc, nous faisons essentiellement une liste à puces et je vais vous montrer pourquoi dans une minute. Mais à l'intérieur de ce point de balle. Listes, nous voulons placer chacune des images. Nous allons donc dire LI pour l'élément de liste. Et nous allons créer une balise d'image. L'image et la source. Nous voulons l'image 1234. Nous voulons tous les afficher. Ils diront image un point JPEG, JPEG. Et nous pouvons mettre dans les montagnes juste là. Bon, maintenant, je vais copier ceci et le coller trois fois pour que nous en ayons quatre. Ensuite, il suffit de changer l' image en image trois et l'image pour. Maintenant, pour les besoins de cette classe, je ne vais pas m' inquiéter des autres balises alt, mais c'est quelque chose que vous voudrez probablement le mettre. Vous allez choisir. Voyons à quoi ça ressemble. Ok, on peut voir qu'il montre les images. Mais ils sont énormes. On dirait que nous devons les redimensionner. D'accord ? Ce que nous allons faire c'est que nous allons créer un cours pour ces images. Parce que si je disais simplement sélectionner, désolé, si je devais simplement utiliser la balise image, cela modifierait également cela. Et nous ne voulons pas que cela ressemble aux images plus petites. Permettez-moi donc de vous montrer comment créer un cours. Nous allons ajouter un attribut HTML appelé class. Vous pouvez simplement cliquer sur la tabulation. Et nous allons appeler cette petite image ou IMG. Maintenant, la raison pour laquelle nous créons une classe est que nous voulons appliquer les mêmes propriétés à ces quatre images. Nous allons donc ajouter cette classe, chaque balise de la liste. Je vais enregistrer que dans notre style.css va taper point pour la classe et nous dirons petite image. Et nous voulons donner à chacun d' eux une largeur de 100 pixels. Ok, c'est juste les rendre vraiment, n'importe qui est vraiment petit. Et voyons à quoi ça ressemble. D'accord ? Nous avons donc les quatre images juste là. D'accord ? Nous avons maintenant besoin qu'ils soient centrés. Donc, continuons tout simplement. Nous allons d'abord coiffer les images et ensuite je vais vous montrer comment nous faisons l'espacement. D'accord ? Donnons donc à chacun d'eux une bordure de, nous allons dire une bordure de trois pixels, ce qui signifie qu'elle a trois pixels d'épaisseur. Je vais dire blanc solide. Maintenant, pour arrondir les coins, nous allons utiliser une propriété appelée rayon de bordure, ce qui est juste une façon chic de dire que nous allons arrondir les coins et que nous allons économiser dix pixels. Vous pouvez donc jouer avec la mesure ici. Mais essentiellement, plus le nombre de pixels est élevé, plus le courant est grand jusqu'à ce qu'il devienne presque circulaire. On va donc dire dix pixels pour obtenir un rectangle arrondi. Regardez. D'accord ? Et oui, alors laissons-les là pour l'instant. Dans la vidéo suivante, je vais expliquer comment les aligner horizontalement sous cette image. 9. Apprendre l'espacement de la marge et de la flexbox (Partie 3): Dans cette vidéo, nous allons découvrir une superbe propriété CSS appelée Flexbox. Ça a l'air effrayant, mais je promets que c'est génial. Permettez-moi de dessiner ce c'est pour que vous puissiez comprendre un peu mieux. Imaginons que nous ayons cette boîte, ce conteneur, d'accord ? Et en fait, nous allons le dimensionner comme ça. En ce moment. Nos images sont empilées comme ça. D'accord ? Donc, ça ressemble à ça. C'est donc un peu ce que nous avons en train de se passer. Maintenant, lorsque nous appliquons Flexbox. Voici ce qui va changer. Tout va devenir horizontal. Et soudain, tout va être aligné comme ça, non ? Oh, tu n'as pas vu que je ne suis pas très habile en tableau blanc. Mais vous comprenez l'idée, tout sera à l'intérieur. Et la flexbox nous donne d' autres propriétés intéressantes. Je vais mettre un lien vers une référence spécifiquement Flexbox dans la description de la classe. Je recommande vivement, vivement de le regarder. C'est un magnifique diagramme, explique vraiment les choses bien mieux que je ne peux ici. Mais je vais vous montrer comment nous allons utiliser cela sur notre site. Nous voulons donc appliquer la propriété flexbox à la liste non ordonnée, car c'est ce qui contient tous les éléments d'élément de liste. Donc, si vous avez oublié, ce sont techniquement tous des objets à balles. On ne voit pas vraiment les points de balle. Parce que tout est noir et écrasé ensemble. Et nous allons en fait nous débarrasser des points de balle plus tard, je vais vous montrer comment le faire. Mais ce que nous devons faire, c'est en faire une flexbox pour qu' elle puisse être horizontale. Je vais donc taper UL pour la balise de liste non ordonnée et dire affichage Flex Box. Maintenant, si vous regardez, il y a d'autres choses ici. Lorsque nous avons parlé du HTML et du début de la classe, nous avons parlé un peu des éléments en bloc et en ligne. Un autre type d'affichage pour un objet est donc un flexbox. Et vous pouvez simplement écrire noirs pour utiliser la flexbox. D'accord. Voyons ce qui se passe lorsque nous faisons cela. Ok, instantanément, il l' a tourné de côté. Nous avons maintenant besoin d'un peu d'espace entre les deux. Nous allons donc utiliser une propriété spécifique à Flexbox appelée Justify content. En gros, cela signifie que justifier est l'espacement. Donc, comment espacer le contenu à l'intérieur de la boîte ou de la liste non ordonnée. Nous allons donc dire espace. Ce que cela fait, c'est que je vais vous montrer quelques clips. Désolé, pas là. Laissez-moi vous montrer quelque chose de soigné ici. Cette boîte violette est notre liste non ordonnée. Vous pouvez donc voir quand nous utilisons de l'espace entre les éléments touchent les côtés des extrémités, mais il y a de l'espace entre eux. Si vous disiez de l'espace autour, il y aurait également un espacement à l'extérieur de celui-ci. D'accord. C'est donc vraiment un pas mieux, mais ce n'est pas tout à fait ce que nous recherchons. Bon, donc maintenant, nous devons ajouter une autre propriété. Nous voulons lui donner une largeur restreinte afin qu'elle puisse être coupée et ne pas prendre toute la largeur de l'écran. Et nous allons lui donner une largeur de 500 pixels. Maintenant. Frappé ensemble, il commence à ressembler davantage au site Web original. D'accord ? Maintenant, ce que nous voulons faire, c'est que nous voulons placer un peu de place entre l' image principale et ces gars. Nous allons donc utiliser la propriété margin ici. Maintenant, le fonctionnement de la propriété margin est que vous pouvez lui donner de une à quatre entrées. D'accord ? Donc, si nous devions dire dix pixels, cela mettrait une marge ou un espace de dix pixels en haut. En bas et sur les côtés, on ne peut vraiment dire que c'est sur le dessus et sur le côté. Si nous devions placer une deuxième propriété, comme cinq pixels, cela signifie qu'il y aurait dix pixels d'espace en haut et en bas, puis cinq pixels à gauche. Et le tarif. Si nous en mettons un autre comme cinq pixels ici, il s'agit de dix pixels en haut, cinq pixels à gauche et à droite, et de cinq pixels en bas. Et puis la quatrième propriété, si nous mettons quelque chose d'autre comme trois pixels, alors ce serait dix pixels en haut, cinq pixels à droite, cinq pixels sur le côté poumon de trois pixels inférieur. Cela semble donc très déroutant, mais permettez-moi de l'expliquer d'une manière assez simple. D'accord. Permettez-moi de remonter mon tableau blanc pour que je puisse l'expliquer un peu mieux. Nous avons donc une boîte ici, puis nous avons un peu d'espacement ici. Un peu d'espacement ici, ici et ici. Lorsque vous saisirez des mesures. Ou voyons voir. Quand nous entrons. En mettant des entrées dans la propriété margin, c'est ainsi que cela fonctionne. Commencez toujours par le haut et allez dans le sens contraire des aiguilles d'une montre. Donc, si nous disons dix pixels, nous commençons par le haut. Et parce qu'il n'y a qu'une seule valeur, elle s'applique à tout. D'accord ? Si nous en mettons un autre que le premier, c'est dix pixels. Le second est de cinq pixels. Et cela s'applique aux deux côtés. Et puis le bas est de dix pixels peuvent essentiellement en haut et en bas sont notre première valeur , puis les côtés de la même valeur. Si nous ajoutons une autre valeur , la partie supérieure est de dix pixels. Les côtés sont de cinq pixels et le bas est de trois pixels. Vous ne pouvez donc jamais simplement bouger dans le sens des aiguilles d'une montre. D'accord ? Ensuite, si nous mettons un de plus que le haut est dix, la droite est cinq, bas est trois, la gauche est un. J'espère que cela aide quelque peu à cela. Mais pour nos besoins, nous allons utiliser quelque chose d'un peu différent. Nous allons donc commencer par une marge de 20 pixels. Laissez-moi vous montrer ce qui s'est passé là-bas. Il place les 20 pixels de chaque côté, mais nous voulons qu'ils soient centrés. Donc, pour notre valeur gauche et droite, nous allons en fait dire auto. Et cela signifie que la hauteur est de 20 pixels, puis les côtés sont simplement divisés pour être automatiquement dans le même espace. Ce que cela signifie dans la pratique, c'est que si nous le redimensionnons, l'espace à gauche et de grands changements, mais les espaces sont les mêmes, n'est-ce pas ? L'espace total change donc, mais ces côtés sont équivalents. Ce que je veux dire, ce que je veux dire que l'auto va nous aider à centrer qu'ils vont bien. Et maintenant, mettons cette propriété de survol dessus. D'accord ? Donc, avec celui-ci, nous voulons le faire sur nos petites images. Donc, ce que nous allons faire, c'est que nous allons en fait la première chose que nous voulons faire, c'est de nous débarrasser des points de balle qui peuvent être présents. On ne peut pas vraiment les voir à cause du noir. Mais si ça, si tout était blanc, c'est parti. Si la page est blanche, vous pouvez voir qu'il y a des puces, nous devons donc nous en débarrasser. Ce que nous allons faire avant d'ajouter les petites images intimes, c'est que nous allons simplement dire pour tous les éléments de liste, nous voulons que le style de liste soit nul. Ce qui signifie que vous pouvez styler vos points de puces de différentes manières et que nous voulons qu'il n'y ait pas de style, donc ne montre rien. D'accord. Revenons maintenant à nos petites images. Nous allons créer une petite image. Côlon, en haut, à droite, comme nous l'avons fait avec le H1. Et lorsque nous le planons dessus, afin d'obtenir cet effet de bulle, nous allons réellement faire quelque chose d'assez simple. Vous pouvez voir les images s'agrandir un peu. Et c'est parce qu'il suffit d'augmenter la largeur. Nous pouvons changer la largeur pour être, faisons 110 pixels, car normalement il ne s'agit que d'un 100. Et vous pouvez voir que c'est très accroché. Quand je mets en évidence , cela change instantanément. Donc, ce que nous voulons faire pour que cela soit un peu plus fluide, c'est une autre transition. Et pour celui-ci, nous allons juste dire aisance et faire 0,2 seconde. D'accord ? C'est donc un peu mieux. Mais il semble qu'il y ait encore du travail à accomplir. C'est donc fluide quand on la souris dessus, mais quand on la souris, c' est un peu trop accrocheur. Ce n'est pas très lisse. Nous voulons donc mettre la propriété Ease Out sur les petites images. C'est sur la petite image elle-même et non sur le survol. Je vais vous montrer pourquoi. Donc, si nous devions le dire, mettez la transition au sujet de la transformation, désolé, de la transition et nous disons Ease Out Peut-être 0,3 seconde. Ce qui se passe, c'est qu'il s'accélère lorsque vous surlignez dessus, mais lorsque vous la souris ou que vous l'utilisez. Alors pourquoi l'avons-nous mis sur la petite image et non pas survolé ? Eh bien, parce que lorsque nous planons, nous voulons que ça s'apaise. Mais quand c'est tout simplement normal, comme sans le vol stationnaire, nous voulons que ce soit plus facile. Maintenant, vous remarquerez quand nous actualiserons la page, Voyons voir. C'est un peu difficile à dire. Mais parfois, les images le sont. là que tu y vas. Vous pouvez voir que l'image fait un peu d'effet de facilité lors du chargement de la page. Et c'est le résultat du fait que nous avons mis ça ici. Mais je pense que c'est bon, je pense que tout va bien. Maintenant, il y a deux autres propriétés que je vais ajouter dans cette vidéo. La première est que lorsque nous survolons ces images, nous voulons qu'elles aient l'air de pouvoir cliquer dessus. Bon, donc je vais mettre mon curseur et dire pointeur. D'accord, on dirait que je peux cliquer sur eux. Une autre chose que vous remarquerez, lorsque la largeur des images s'agrandit, elles ne sont pas centrées ensemble. Vous pouvez voir que tous les sommets sont alignés ici, mais les bas ne sont pas alignés. Nous pouvons donc résoudre ce problème en accédant à notre URL et en ajoutant une propriété appelée align items. Maintenant, contrairement à justifier, contenu, justifier est en quelque sorte un alignement gauche et droit et aligner les éléments. Ou lorsque vous dites une ligne, c'est un alignement vertical. Donc, quand on dit centre ici, il va réaligner toutes les images de manière à ce qu'elles soient toujours centrées afin que le centre des images soit toujours aligné les uns avec les autres. De cette façon, il n'est pas trop gros en bas ou en haut à droite. Jusqu'à ce que nous puissions obtenir cet effet de bulle. Dans la vidéo suivante, nous allons commencer à créer notre barre de navigation. Et ça va être vraiment excitant. Je vous verrai donc dans le prochain. 10. Créer un menu de navigation: Parlons de navigation. C'est notre bar de navigation ici. Permettez-moi de vous expliquer quelques-unes des caractéristiques. Nous avons ici une police différente de la police par défaut, bien qu'il soit difficile de dire qu'il ne s'agit pas de la police par défaut. Nous devons donc ajouter cela. Nous obtiendrons cela à partir des polices Google. Nous devons faire un effet de survol avec les couleurs. Nous devons faire la marge, y avoir un peu d'espacement. Nous allons utiliser certains éléments Flexbox avec lui et les trucs UL, la liste non ordonnée, les choses que nous avons faites avec les images ici. Et nous devons le faire naviguer vers d'autres pages. Commençons donc. La première chose que nous devons faire dans notre code HTML est d' ajouter un élément de navigation. Maintenant, la balise de navigation ne fait pas vraiment grand-chose. Il s'agit plutôt d'une séparation dans notre code pour que la personne qui crée le site Web puisse différencier les différentes parties. C'est l'une de ces normes HTML bizarres qui n'est qu'une chose. Mais nous allons l'utiliser ici pour nous assurer que nous pouvons garder les choses en ligne afin de choses en ligne afin ne pas nous confondre sur l' endroit où se trouve la navigation. Et ici, nous avons besoin d' une autre liste non ordonnée. Et nous avons besoin d'éléments de liste, non ? Nous avons donc les quatre pages. Nous voulons une galerie d'accueil et un contact. Évidemment, vous pouvez le faire comme bon vous semble. Mais c'est exactement ce que nous allons faire pour celui-ci. Nous allons donc créer des balises pour nos liens. Créons une balise ici. Et pour le réf H, nous n'allons pas encore rien mettre. Je vais vous montrer ce que nous allons faire avec ça dans une seconde. Mais entre les balises d'ouverture et de fermeture, nous allons rentrer chez nous. Et maintenant, nous devons le copier plusieurs fois pour pouvoir avoir Gallery, rebondir et contacts. Maintenant, si vous jetez un coup d'œil à ce que cela a créé, vous pouvez le voir ici. Ok, donc c'est intéressant, cela me montre que notre code est probablement dans le mauvais ordre, c'est-à-dire vous pouvez voir notre balise image ici est au-dessus d'eux. Nous devons donc déplacer cela là bas. Et je vais économiser. Et d'accord, maintenant c'est ici. Vous pouvez voir que tout est parfaitement. Je pense que cela signifie que le lien a été visité. Donc, si vous voyez un clignotement non stylisé, il est souvent souligné et il change couleur selon que vous avez cliqué dessus ou non. Ce truc branché, nous voulons nous débarrasser de tout cela pour que nous puissions en faire notre propre chose unique. Bon, maintenant, vous remarquerez quelque chose de très intéressant. Il est déjà espacé. Fondamentalement, comment nous le voulons. Pourquoi est-ce que c'est ? Eh bien, allons jeter un coup d'œil à notre code. D'accord ? Plus tôt, nous précisons que si nous avons une liste non ordonnée, nous voulons qu'il s'agisse d'une flexbox. Nous voulons avoir de l'espace entre les deux. Nous avons une largeur spécifique, une marge spécifique et un alignement des objets. Et comme la navigation est également une liste non ordonnée, tout cela s'applique également. Non seulement cela, mais parce que nous avons ici le LI avec le style de liste nul, cela s'applique également. Nous n'avons donc pas à soucier de nous débarrasser des points de balle. Donc, la moitié de notre travail est déjà terminé et nous n'avons rien eu à faire de plus, ce qui est assez épique. La principale chose que nous devons faire est de changer la police, de se débarrasser des soulignements et de faire fonctionner les liens. Commençons par cette police. Nous allons nous rendre sur Google Fonts. Et nous allons obtenir une police appelée « densité des bateaux à rames ». Je vais chercher ici un vrai bateau à rames. Oui, je ne sais pas qu'il en soit, mais cliquons là-dessus. OK. Vous pouvez donc voir, contrairement à l'autre, il y a beaucoup de styles différents ici, de nombreuses épaisseurs différentes. Nous devrions donc décider de ce que nous voulons parce que nous n'avons pas besoin de quoi que ce soit de fantaisie. On va juste aller avec 400 habituels. Juste le type de police de base standard. Vous pouvez sélectionner plusieurs liaisons qui vous permettront de modifier le poids de la police, ou essentiellement l' audace dans le CSS. Mais nous n'en avons pas vraiment besoin. Nous n'utilisons pas autant de mots sur la page. Nous allons donc sélectionner ce style ici et monter et vous êtes des familles sélectionnées. Et maintenant, nous devons inclure ce lien dans notre code. Alors allons-y et ajoutons. Maintenant, vous remarquerez quelque chose d'intéressant. Une partie du code qu'il a connectée est un pas là où vous avez. Nous avons donc ces deux lignes pour la police précédente que nous avons utilisée, mais elle les a incluses à nouveau. Nous n'avons donc pas vraiment besoin des doublons et nous en débarrassons. Tout ce dont nous avons besoin, c'est de cette spéciale, excusez-moi, de cette spéciale qui spécifie Roboto. Ok, c'est génial. Une ou deux lignes de code en moins. Et maintenant, nous devons copier les règles CSS ou les propriétés qui vont copier cela ici. Et voyons voir. La façon dont je veux le faire est que je pense qu' il serait bon d' avoir un cours sur chacun des éléments de la liste. Donc, ce que nous allons faire, c'est mettre une classe d'objet de navigation. Je vais copier ça. Chacun d'entre eux. Super. Maintenant, nous allons faire un point ou une période pour notre classe et dire « objet de navigation ». Et copiez-le encore une fois. Super. Laissez-moi vous montrer ce qui se passe ici. La famille agricole que nous avons choisie est Roboto. Mais il possède la deuxième propriété, San Serif. Sans serif est une police assez basique. Et la raison pour laquelle il l'inclut, c'est parce que s'il ne peut pas, pour quelque raison que ce soit, Roberto, c'est par défaut d'envoyer Sarah. Donc, si le site Web de Google devait planter et que nous ne pouvions pas trouver la police, cela ne briserait pas tout. Cela semble un peu plus moche, mais c'est par défaut cette réponse. C'est donc ce que cela signifie. Nous allons aller de l'avant et appuyer sur Enregistrer. Et voyons les résultats. Ok, donc la police, je pense que c'est différent. Essayons ça. Je vais appuyer sur Control Slash sur mon clavier ici et il commente cette ligne pour que ce ne soit pas le cas, ce n'est pas un effet. Ok, oui, il y a donc une petite différence entre les polices. J'aime bien, mais on va le faire, on va avoir ça. D'accord ? Et maintenant, ce que nous devons faire c' est de nous débarrasser du violet, des soulignements et de tout. Je vais donc ajouter un autre sélecteur ici, et nous allons appeler cela une gouache au côlon. Il s'agit donc de balise a et de la même manière que le survol que nous avons fait ici, il s' agit de la propriété d' une balise appelée link. Et nous pouvons le coiffer spécifiquement. Nous allons dire décoration textuelle. Aucune. Cela signifie qu'il ne le souligne pas. Similaire à la façon dont nous n' avions aucun style de liste. Ils se sont débarrassés des points de balle. C'est ainsi que le texte est décoré. Pour un lien. Nous ne voulons pas qu'il soit décoré du tout. Nous l'avons mis là. Maintenant, nous en ajoutons un appelé deux-points visités, ce qui signifie qu'il est visité, qui signifie que le lien a été visité précédemment. Et c'est pourquoi il est violet. Et nous ne voulons pas qu'il fasse quoi que ce soit. Encore une fois, nous allons dire décoration de texte. Non. Cela n'a rien fait. OK. Peut-être que cette propriété n' était pas nécessaire. Mais je vais le laisser là au cas où. Mais ce qui peut vraiment changer cela, c'est d' ajouter une couleur blanche. Ok, super. Maintenant, lorsque nous avons visité le lien, ce n'est pas le cas. Il ne devient pas violet, ce qui est génial. Nous avons juste besoin qu'il devienne rouge lorsque nous le surlignons. Donc, ce que nous pouvons faire pour cela, c'est créer une navigation, un pointage des deux-points. Nous l'avons déjà fait et nous disons simplement la couleur rouge. Et encore une fois, nous voulons faire une belle transition pour qu'elle soit fluide. Alors, mettez la transition. Et celui-là dira la facilité d'entrée, de sortie. Et la rosée 0,2 seconde. Maintenant, si on met en évidence ça, c'est un peu sympa. De beaux effets. Super. OK. Nous avons donc tout couvert. Lorsque nous mettons en surbrillance l'élément de navigation. Nous avons le pointeur. Je pense que c'est un pointeur par défaut parce qu'il s'agit d'un lien. Et puis il a plané. Quand on le survole, c'est lu. Tout ce que nous devons faire maintenant, en plus faire fonctionner les liens, c'est de bien espacer. Je vais donc venir ici et juste l'étiquette de navigation, que nous puissions le coiffer spécifiquement. Maintenant, vous remarquerez que je continue de sauter autour ce fichier et d'ajouter des choses à différents endroits. La raison en est que j'aime être organisé et que je peux regrouper les choses ensemble. Vous pouvez donc voir que tous les éléments liés à la navigation sont ensemble, tous les A sont ensemble. Et les ULs, les alliés aiment tout, travaillent ensemble. Le groupe I le groupe est regroupé. C'est donc ce que je fais. Ok, donc vraiment je devrais mentionner que peu importe où dans le dossier vous placez ça. Cela fonctionnera toujours. Pour que je puisse couper ça et le mettre ici. Et ça ne ferait pas de différence, n'est-ce pas ? Il est important que ce soit dans ce dossier. La dernière chose que nous devons faire ici, c'est la marge. D'accord ? Je vais donc mettre de la marge. Maintenant, l'espacement sur le dessus est déjà assez bon. Allons donc avec 0 pour le top. Maintenant, à gauche et à droite, nous n'avons pas vraiment besoin de changer quoi que ce soit parce que nous avons déjà cette belle marge. Alors, oups. Essayons encore 0. Ensuite, pour le bas, eh bien, pour le bas, nous ne ferons que dix pixels. Et là encore, oh oui, oui. Il s'agira donc du haut 0, gauche 0, des dix pixels inférieurs. D'accord ? Vous verrez donc que c'est joli maintenant parce que nous avons des zéros ici et que nous n'utilisons que le bas, il y a en fait une propriété différente que nous pouvons utiliser. Et c'est ce qu'on appelle marge, bas et tout ce que l'on peut juste dire dix pixels. Nous n'avons donc pas besoin d'avoir tout cela ici. Donc je dirai juste dans la marge inférieure de dix pixels. Et voyons comment ça se passe. Voyons à quel point il ressemble à notre autre site Web. Ok, vous pouvez voir qu'ils sont identiques. La seule chose qui reste, c'est la fonctionnalité. Commençons donc à faire ces liens. D'accord ? Nous avons donc nos éléments de référence H ici. Nous devons le relier à quelque chose. Auparavant, nous avons parlé de l' associer à un site Web, mais nous devons le lier à un fichier que nous avons dans notre dossier. Nous allons donc créer une autre page appelée galerie dot HTML. Il s'agit de la page de la galerie qui n' affiche que les quatre autres images. Et la raison pour laquelle j'ai cette page est juste pour montrer les liens vers, excusez-moi de le coiffer. En fait, nous allons simplement appuyer sur Contrôle a et copier tout ce qui s' y trouve et nous débarrasser de ce dont nous n'avons pas besoin. De cette façon, nous n'avons pas à réécrire la plupart des choses. D'accord ? Voyons donc ici, on peut se débarrasser du principal. Eh bien, nous allons nous débarrasser de tout ça pour l'instant et quitter le sommet. De cette façon, les polices et tout fonctionnent toujours. D'accord ? Maintenant, ce que nous voulons faire ici, c'est voir, nous voulons faire une image principale, ce qui signifie que c'est l'image principale. Et sur la page de la galerie, nous voulons l'afficher comme ça encore et encore. Nous allons donc utiliser l' image principale comme classe ici. Et donc, faisons-le. Nous allons créer une balise d'image. Et nous allons juste dire que la source est l'image 1. Et ensuite, je vais copier ça. Passons ça à trois à quatre. Maintenant, nous devons lui donner une classe d'image principale. Voici le problème. Nous l'avons déjà utilisé. Image principale ici en tant que pièce d'identité. Il suffit donc de changer ça en classe. Ensuite, dans notre fichier CSS, nous trouverons l'image principale. Et au lieu d'avoir un signe de livre, il y aura une période. Et maintenant, c'est un cours. Voyons voir, tout se casse, d'accord, c'est bien, c'est bien. Bon, maintenant, ajoutons cette classe d'image. Et je vais copier et coller ça sur chacun d'eux. Maintenant, nous ne pouvons pas encore voir à quoi ressemble la page parce que nous n' avons pas de moyen d'y accéder. Donc, dans notre index.html sur la galerie H ref, nous allons simplement mettre point de galerie HTML. C'est aussi simple que ça. Nous avons touché Save. Je peux aller de l'avant et cliquer ici maintenant. Et ça m'amène à la page de la galerie. Maintenant, vous pouvez voir que ce n'est pas exactement ce que nous voulons. Nous avons besoin d'un peu d'espace entre les choses et nous avons toujours besoin de la barre de navigation en haut. Bon, voici ce que nous allons faire. Je vais vous montrer comment créer des styles en ligne. Par conséquent, un style en ligne est lorsque nous incluons CSS directement dans le fichier HTML. Au lieu de créer un fichier externe comme nous l'avons fait ici. La raison pour laquelle vous voudrez peut-être le faire est si vous avez juste une ou deux choses qui ont besoin d'être coiffées et non pas un tas. En général, je ne recommande pas d'utiliser des styles en ligne. Si vous avez beaucoup de styles en cours, cela encombre simplement le fichier HTML. Mais ici, cela peut être utile. Donc, à l'intérieur du body tag, je vais créer une étiquette de style. Tout ce qui se trouve dans la balise de style est traité comme CSS. Nous allons donc dire IMG pour image parce que nous voulons mettre un espacement entre toutes ces images. Je vais juste mettre une marge inférieure à 50 pixels. De cette façon, il y a un peu d'espace sous chacun d'eux. Ok, ça nous donne ce bel effet, non ? C'est ainsi que vous faites un style en ligne. Maintenant, ce que nous devons faire, c'est finir notre barre de navigation. Nous allons donc créer des liens vers deux des pages. Page d'accueil supplémentaire. Nous allons le lier à index.html. Ainsi, quelle que soit la page sur laquelle vous vous trouvez, si vous cliquez sur Accueil, cela vous amène à cette page principale. Maintenant, dans ces cas, puisque nous ne mettons rien, nous allons juste mettre un signe de livre. Et c'est en quelque sorte un espace réservé. Si vous cliquez sur ces boutons, il vous redirigera simplement vers le fichier index.html. Maintenant que nous avons ceci, nous allons le copier et le coller dans notre galerie sous l'Explorateur. Bon, et maintenant, nous avons notre barre de navigation. Maintenant, vous remarquerez peut-être que nous avons deux problèmes ici où ces gars ne font pas ce qu'ils sont censés faire. Ils sont bleus alors qu'ils devraient être blancs. Voyons donc ce que nous pouvons faire pour y remédier. Je vais aller sur notre objet de navigation ici dans notre CSS et dire qu'il est toujours blanc. Je vais juste lui donner une couleur blanche. Par défaut, il est toujours blanc, peu importe si nous avons cliqué dessus ou non. Mais cela devrait résoudre ce problème. Maintenant, la dernière chose que je veux faire navigation est de faire en sorte que nous puissions cliquer sur cette icône d'exploration et la faire accéder à la page d'accueil. instant, c'est juste un 81. Nous devons donc apporter un peu de modifications. Pour ce faire, nous allons placer le H1 à l'intérieur d'une étiquette. Nous allons donc créer cette balise. Et nous voulons que la référence H soit dans le fichier index.html. C'est donc notre page d'accueil. Maintenant, nous pouvons simplement couper ce texte et le coller à l'intérieur de notre étiquette. Vous pouvez imbriquer des étiquettes comme celle-ci, et nous n'aurons que notre H1 à l'intérieur de l'étiquette a. Maintenant, si nous cliquons dessus, il nous amène à la page d'accueil. Donc, si nous allons à la galerie, nous devrons le copier et le coller dans notre galerie également. Maintenant, si je clique dessus, cela nous ramène à notre page d'accueil. D'accord ? Maintenant, vous pouvez voir que nous sommes sur le point d'être terminé. Les sites Web ont l'air identiques. Je pense qu'il n'y a pas de différences stylistiques entre les deux côtés. La seule chose que nous devons faire est d'ajouter JavaScript pour le rendre interactif, de sorte que lorsque nous cliquons sur ces images, cette partie du site change. Et nous le ferons dans la prochaine vidéo. 11. Rendre votre diaporama interactif ! (JavaScript): Pour finir, nous allons simplement ajouter du JavaScript pour faire sorte que lorsque nous cliquons sur ces images, cela modifie ce qui est affiché comme image principale. Nous n'allons pas utiliser beaucoup de JavaScript. s'agit donc certainement pas d'un cours complet sur JavaScript. Il s'agissait d'un cours principalement axé sur le HTML et le CSS. Mais je vais vous montrer un peu de JavaScript pour que cela fonctionne. Donc, dans notre code in VS, nous devons créer un nouveau fichier. Et nous allons appeler ça une application. En fait, non, désolé, pas une application. Nous allons appeler ça un diaporama. Dois-nous. Json est synonyme de JavaScript. Si vous vous en souvenez, JavaScript est le langage qui rend les choses interactives. Maintenant, pour utiliser notre JavaScript, nous devons insérer une balise de script dans notre code HTML. Nous le ferons en fait sous l'élément body, mais toujours à l'intérieur de l'élément HTML. Nous allons donc dire scénario. Et vous pouvez vous déplacer vers la source. Et nous dirons diaporama dot js, et c'est tout ce que vous devez inclure ici. Maintenant, pourquoi en dessous de l'étiquette du corps ? C'est parce que lorsque tout, eh bien, lorsque nous chargeons le site Web, nous devons charger tout le code HTML et charger le script en dernier. De cette façon, tout fonctionne correctement ensemble. Ce ne serait pas vraiment un problème sur ce site Web. Je ne pense pas que nous ayons déjà eu la balise de script, mais dans de nombreux cas, vous voulez qu'elle soit juste en dessous de la balise body. Nous avons donc ça là-dedans. Maintenant. Permettez-moi de vous montrer les bases de JavaScript. Je ne vais pas vous montrer assez pour trouver comment faire en sorte que cela fonctionne. Javascript est l'un des langages de programmation réels. Html et CSS sont souvent considérés comme des langages non programmables par les gens car ils n'ont pas beaucoup les mêmes fonctionnalités que la plupart des langages. J'aime les appeler langages de programmation parce que ça me permet de me sentir mieux et je trouve qu'ils sont cool. Mais JavaScript est plutôt un langage de programmation traditionnel, ce qui signifie que nous pouvons créer des variables. Une variable, c'est juste un peu, on peut la penser comme une boîte. Et on peut dire que nous allons donner cette boîte et son nom et nous allons y mettre des trucs. Et plus tard, lorsque nous sommes dans une autre partie de notre programme, nous pourrons dire : Oh, allez chercher cette boîte qui portait ce nom sur lequel il y avait quelque chose écrit sur le côté. Nous allons le chercher et nous obtenons tout ce qu'il y a à l'intérieur. J'espère donc que c'est logique. Je vais vous montrer comment cela fonctionne un peu. Pour créer une variable en JavaScript, nous devons utiliser le mot-clé let. Indiquez simplement que vous créez une nouvelle variable. Ensuite, nous lui donnons un nom. Nous voulons essentiellement créer une variable contenant cette image principale. Ensuite, nous allons modifier la source des images afin de les remplacer par les autres images. Nous allons appeler cette image principale. Maintenant, la raison pour laquelle j'ai fait DM en minuscules et majuscule oculaire, c'est parce que c'est ce que nous appelons CamelCase. C'est une norme dans beaucoup de programmeurs, où si vous avez plusieurs mots dans un nom de variable, la première lettre est minuscule et tous les autres mots sont majuscules sur la première lettre. Donc, si je disais l'image principale, cool, nous allons capitaliser cela. Maintenant, je vais mettre ça à la hauteur de quelque chose. C'est la partie où nous mettons quelque chose dans la boîte. Nous devons mettre l' image dans la boîte. D'accord, la façon dont nous faisons cela en HTML c'est que nous allons appeler l'objet document. Le document signifie simplement qu' il s'agit d'un fichier HTML. Nous allons donc dire document. Nous allons accéder à une partie du document. Donc, la façon dont nous faisons cela en JavaScript est de mettre un point. Et maintenant, nous allons le faire, l' une des propriétés du document est qu'il a la capacité d'obtenir un élément basé sur des informations, le donner, de le donner. Nous allons donc dire document point, obtenir élément par ID. C'est assez normal en anglais pour obtenir un élément par ID. Ce que cela signifie, c'est que nous allons lui donner un identifiant et qu'il va récupérer l'élément qui correspond à cet ID. D'accord ? Maintenant, si vous vous en souvenez plus tôt, nous avons changé l' image principale en classe. Donc, pour que cela fonctionne, nous allons en fait ajouter une pièce d'identité. Vous pouvez donc avoir plusieurs classes et ID pour une image ou un objet. Nous allons donc lui donner un identifiant spécial juste ne pas entrer en conflit avec la classe d'images principale. Et donc pour cette idée, nous allons juste dire l'image principale dash JS. Cela va juste nous indiquer que c' est dans le but du JavaScript. C'est pourquoi nous avons besoin de cette carte d'identité , donc nous avons cette idée. Je vais copier ça ici. Et dans notre code, nous avons dit obtenir élément par ID. Maintenant, entre parenthèses, nous allons mettre des guillemets simples et le nom de l'identifiant, puis mettre un point-virgule à la fin. Ce que cela dit, c'est que nous avons une boîte et qu'on appelle l'image principale. Maintenant, nous devons mettre quelque chose à l'intérieur de la boîte. Nous allons donc passer au document, qui n'est que le HTML. Et nous allons dire, Hey, HTML, j'ai besoin d'obtenir l'élément qui a un ID de l'image principale js. Et le code HTML le fait, d'accord. L'image principale id js s'applique à cette image spécifique indiquant l'image principale sur la page. Celui-là. D'accord ? Nous avons donc dit, d'accord, nous avons eu cette image maintenant quand nous la jouons en blocs. J'espère donc que c'est logique. Nous avons l'image et elle est à l'intérieur de notre boîte. Maintenant, quoi ? Nous allons maintenant créer ce qu'on appelle une fonction. Une fonction est quelque chose qui peut être appelée encore et encore lorsque vous faites quelque chose. Dans ce cas, chaque fois que nous cliquons sur l'une des images, nous allons la traiter comme un bouton. Et nous allons appeler cette fonction. Et ce qu'il va faire, c'est que ça dit, oh, vous avez cliqué sur cette image. Eh bien, faisons en sorte que cette image devienne la principale que nous montrons. Pour ce faire, nous écrivons la fonction et nous donnons un nom à la fonction. Nous allons donc simplement dire changer d'image. D'accord. Maintenant, après avoir changé d'image, nous allons mettre ces parenthèses. C'est juste la syntaxe d'une fonction. La syntaxe signifie exactement la façon dont vous l'écrivez. Et ensuite, nous allons mettre les crochets bouclés. Voici donc à quoi ressemble une fonction en JavaScript. Mettons-le de l'intérieur. Ce que nous devons faire, c'est d' obtenir l'image principale que nous avons maintenant enregistrée en tant que variable. On m'a dit : OK, va chercher cette boîte. Et nous allons faire quelque chose avec ce qu'il y a à l'intérieur de la boîte. Et nous le faisons en appuyant sur point, comme nous l'avons fait avec get élément by ID. Nous disons donc image principale. Maintenant, nous allons dire définir l'attribut à quelque chose. Si vous vous souvenez, un attribut en HTML, est-ce qu'il y a des éléments tels que la classe H, ref , ID, Alt, toutes ces choses qui s'insèrent dans les balises d'ouverture et ont certaines propriétés. attribut. Nous voulons donc définir l'attribut source, l'image principale ici. Nous voulons que l'attribut source soit identique à l' image sur laquelle nous avons cliqué. D'accord ? Comment pouvons-nous faire cela ? Eh bien, à l'intérieur de définir un attribut, on peut mettre deux choses. Premièrement, nous devons placer l' attribut que nous voulons définir. Bien que entre guillemets, nous allons mettre SRC pour source. Et après cela, nous avons mis une virgule. Et maintenant, nous devons mettre la nouvelle image en place, mais nous n'avons pas encore de moyen de l'obtenir. Alors, voyons ça. Dans notre index.html, nous devons trouver un moyen pour que lorsque nous cliquons sur une image, elle appelle la fonction et lui indique quelle est la source de cette image. Nous allons donc ajouter de nouveaux attributs et cela se rapporte à JavaScript. C'est ce qu'on appelle OnClick. C'est donc assez simple. Lorsque vous cliquez sur quelque chose, c'est le cas, il exécute une fonction. Nous disons onclick. Nous devons exécuter la fonction Change Image. Maintenant, quelque chose de génial que nous pouvons faire en JavaScript, c'est que lorsque nous appelons une fonction, nous pouvons lui transmettre un argument, ce qui signifie que nous pouvons dire, ici, je vais changer l'image, et voici l'image que je veux. à changer. Nous lui donnons autre chose, quelque chose avec lequel travailler. Nous allons donc lui donner quelque chose à travailler. Donc, à l'intérieur du changement d'image, nous allons mettre des guillemets et nous allons dire Image un point JPEG. Donc, quand on dit changer l'image, on va dire, d'accord, voici ce que nous allons vous donner. Nous allons vous donner Image1 point JPEG. C'est ce que la fonction utilisera. Je vais donc copier cela dans chacun de ces éléments de liste. Et nous allons changer celui-ci en, pour changer celui-ci par trois. Et celui-là aussi. Donc, chaque fois que nous disons que nous cliquons sur l'image trois, il est dit : Ok, modifiez la fonction de modification de l'image. Et nous allons lui donner une image JPG à trois points. Alors maintenant, comment implémenter cela dans le JavaScript lui-même ? Donc, ce que nous pouvons faire, c'est à l'intérieur de la fonction Change Image entre ces parenthèses, nous pouvons simplement donner un nom à une variable. Nous allons donc simplement dire image. Cela signifie essentiellement que nous allons passer la fonction quelque chose et que nous allons appeler cette image. Ce n'est donc pas comme une variable normale comme celle-ci. C'est plutôt comme si nous pouvions appeler la fonction et lui donner ce que nous voulons. Et ça va juste appeler cette chose une image. Maintenant, nous pouvons coller cette image ici et nous assurer que vous obtiendrez ce point-virgule. Ce que cela a fait, c'est qu'il a dit, OK, eh bien, si nous choisissons l'Image trois, alors nous disons, OK, Change Image et donnez-lui cette chaîne de texte, image trois points JPG. Et ça dit, ok, cette chaîne de texte, on va appeler cette image. Et maintenant, lorsque nous appelons l'attribut set, nous allons coller cette chaîne de texte là-dedans, remplacer l'image par cette chaîne de texte. Ce qu'il fait, c' est que cet attribut source est égal à cette chaîne de texte. Et c'est tout ce que nous devons faire pour aller de l'avant et cliquer sur Enregistrer. Maintenant, si nous allons sur le site Web, où qu'il se trouve, vous verrez que chaque fois que nous cliquons sur une image, elle modifie l'image qui s'y trouve. Parce qu'il est dit obtenir l'image, désolé, il est dit créer une boîte appelée image principale. Pour trouver l'élément qui a l'image principale point js, qui est cette image d'ensemble. Et il est dit : OK, chaque fois que nous cliquons sur une petite image, puis changez la grande image, définissez son attribut de source pour être la nouvelle source d'image. Donc, si nous cliquons sur l'image pour, elle envoie l'image à la source de l'image à l'image. C'est tout le JavaScript que nous allons utiliser dans ce cours. Comme je l'ai dit, nous n'allons pas entrer dans la complexité d' un diaporama temporel automatique dans ce cours. Mais c'est certainement quelque chose que vous pourriez trouver en ligne. C'est donc le produit fini. Maintenant, dans la vidéo suivante, nous allons parler du projet de classe et en quelque sorte conclure les choses. Je vous verrai dans cette fois-ci. 12. Projet final et conclusion: Avant de terminer ce cours, je veux que vous fassiez une dernière chose pour votre projet final. Je veux que vous utilisiez les compétences que vous avez apprises dans ce cours pour créer quelque chose qui vous appartient. Pourquoi créer quelque chose, peut-être un site Web de portefeuille ou quelque chose pour votre entreprise, ou simplement quelque chose pour vous amuser. Il n'est pas nécessaire que ce soit compliqué. Cela peut être très simple, mais il peut être le vôtre. Vous pouvez le créer à partir de zéro avec les compétences que vous avez acquises dans ce cours. Une façon dont j'aime aborder moi-même des projets créatifs amusants est d'écrire ce que je veux créer. Soit je vais le dessiner sur un tableau blanc ou sur un bout de papier. Je vais juste penser à à quoi je veux que le site Web ressemble. Ensuite, je trouve quelles compétences j'ai besoin d' apprendre pour que cela ressemble à cela. Je vais donc apprendre quelles balises HTML j'aurai besoin, quel CSS j'aurai besoin pour le coiffer correctement comme je le veux. Ensuite, je vais apprendre de quel JavaScript j'ai besoin pour obtenir la fonctionnalité que je voulais. Je recommande donc de le faire. Utilisez les ressources que j'ai liées dans la description du cours pour en savoir plus sur HTML, CSS et JavaScript. Maintenant, j'ai deux autres choses pour vous. Donc, si vous avez apprécié ce cours, allez voir mes autres cours Skillshare dès maintenant, j'en ai deux autres. La première concerne la manipulation DOM JavaScript, qui est essentiellement ce que nous avons fait dans ce cours. Un peu là où vous manipulez le HTML et le CSS avec JavaScript, c'est une compétence très utile. Le deuxième cours est l'apprentissage d'Angular, qui est un framework JavaScript. Un framework est essentiellement une version étendue de JavaScript qui vous offre plus de fonctionnalités, plus de fonctionnalités et facilite les choses compliquées. Je vous recommande donc vivement de les consulter si vous voulez rendre votre site Web plus expressif, plus dynamique, ce sont de très bonnes compétences à posséder. La deuxième chose est que si vous voulez voir plus de tutoriels technologiques gratuitement, si vous voulez en savoir plus sur la programmation gratuite, allez voir ma chaîne YouTube youtube.com slash Taylor English. Vous pouvez y voir une foule de vidéos que j'ai posées pour toutes sortes de questions que vous pourriez avoir ou des choses qui pourraient vous intéresser. OK ? À part ça, si la musique vous intéresse pour quelque raison que ce soit, vous pouvez aller me voir sur Spotify. Je vais également relier cela dans la description du cours. Je fais un piano solos et j'espère faire plus de piano et peut-être de la musique techno à l'avenir. Donc, si tu veux aller voir ça, c'est génial. Mais je voulais simplement vous remercier beaucoup d'avoir suivi ce cours jusqu'à la fin et d'avoir appris ces compétences incroyables. Parce que je sais que ce que vous avez appris va vraiment bénir votre vie et celle de ceux que vous aidez. Merci donc d' avoir suivi ce cours et j'espère vous revoir bientôt. Je vous souhaite le meilleur.