Développement Web frontend moderne : HTML, CSS, JavaScript, Sass et Typescript

1. Introduction: Bonjour et bienvenue dans mon nouveau cours développement Web frontal moderne. Je suis Christopher Dodd. Je suis l'un des meilleurs professeurs sur skillshare.com. En 2018, publié son tout premier cours Skillshare, Understanding Web Development, qui est devenu l'un des cours les plus regardés catégorie développement Web de Skillshare. Bien que les principes fondamentaux que j'ai partagés en classe soient toujours d' actualité, les langages, les outils et les technologies du Web continuent d'évoluer. HTML, le CSS et JavaScript restent les principaux langages frontaux, mais des compilateurs tels que Sass et TypeScript sont aujourd'hui apparus et ont gagné en popularité, transformant la façon dont le CSS et le JavaScript sont écrits. Les frameworks JavaScript sont également devenus très populaires avec des frameworks et des bibliothèques tels que React, Vue et Angular. D'ailleurs, si certains de ces noms ne vous sont pas familiers, ne vous inquiétez pas, nous en parlerons dans le cours. Dans cet article, nous allons adopter une vision plus moderne du développement Web frontal, en nous penchant sur certains des outils les plus populaires utilisés aujourd'hui. Nous apprendrons à écrire des pages Web en HTML, les styliser avec CSS et Sass, et à introduire l'interactivité et la récupération de données via JavaScript et TypeScript. Si vous souhaitez avoir un aperçu du fonctionnement réel du développement Web frontal moderne, continuez à regarder et je vous verrai de plus près. 2. Développement Web de Frontend vs Backend: Le concept le plus important à comprendre dans le développement Web est probablement la différence entre le front-end et le back-end. Nous en avons parlé dans Understanding Web Development, mais c'est un concept tellement important que je voulais le rafraîchir ici. En termes simples, le front-end est tout code assemblé dans votre navigateur Web, c'est-à-dire le programme que vous utilisez pour naviguer sur le Web. Le code principal est essentiellement tout le reste. Si nous revenons un peu en arrière au moment où le Web a commencé, sites Web n'étaient que des pages d'informations. Ce style de site Web, juste une page statique composée principalement de texte avec peut-être quelques images, était la norme. Pas de style sophistiqué et interactivité minimale. En gros, les seules interactions que nous avons eues étaient des hyperliens, c'est-à-dire des parties des textes surlignées en bleu avec un trait plein qui, une fois cliqué, nous redirigeaient vers une autre URL. Comment cela pourrait-il se produire ? De la même manière, cela se fait aujourd'hui avec ce que l'on appelle le langage de balisage hypertexte, mieux connu sous le nom d'acronyme HTML, qui est fourni au navigateur pour structurer le contenu basé sur du texte et des images. C'est ici que nous pouvons commencer à voir la distinction entre le front-end et le back-end. Lorsque nous atteignons l'adresse de ce site Web, nous indiquons à un serveur quel contenu nous proposer, et ce contenu revient du serveur sous forme de code HTML. Ce code HTML est ensuite lu par le navigateur et affiché sur nos écrans comme nous le voyons ici. À l'aide de n'importe quel navigateur moderne, nous pouvons ouvrir un autre panneau pour afficher le code brut, généralement une grande partie du contenu textuel contenu dans ces éléments appelés balises HTML. De nos jours, le front-end est souvent beaucoup plus complexe. Les sites Web sont beaucoup plus fluides et offrent beaucoup d'interactivité. Dans certains cas, vous exécutez un programme informatique complet dans votre navigateur, et c'est ce que l' on appelle des applications Web. sont des exemples courants Facebook et Google Sheets en sont des exemples courants. Si nous désactivons JavaScript dans notre navigateur, vous pouvez constater que ces applications cessent de fonctionner. Ce qui donne du style et de l'interactivité à votre site Web sont respectivement le CSS et le JavaScript. Le CSS est l'abréviation de feuilles de style en cascade et est superposé au code HTML pour transformer complètement l'apparence du code HTML standard. JavaScript fournit ensuite toute l'interactivité en plus de quelques éléments de base du HTML. En gros, toute interactivité en dehors des hyperliens et des champs de formulaire tels que les cases à cocher, les boutons radio et les listes déroulantes nécessite JavaScript pour fonctionner. Tout comme le HTML, CSS et le JavaScript sont exécutés dans le navigateur et font donc partie du frontend. Pour rappel, le front-end est essentiellement tout ce qui se passe dans votre navigateur. Comparons maintenant cela avec le backend, qui peut être infiniment plus complexe. Le backend d'un site Web est ce qui est exécuté sur le serveur et couvre toute programmation effectuée en arrière-plan afin de fournir le code HTML, CSS et JavaScript appropriés au navigateur. Le backend est généralement chargé d'interagir avec les bases de données, déterminer si l'utilisateur est autorisé à accéder à certaines informations, puis de transmettre ces données au navigateur parmi le code frontal HTML, CSS et JavaScript nécessaire . Pour le démontrer, interagissons avec l'une des pages les plus visitées sur Internet, google.com. Comme vous pouvez le voir ici, google.com est chargé dans mon navigateur Web, Google Chrome. Je préfère Google Chrome et c'est ce que je vais utiliser pour ce cours. Je le recommande aux développeurs, c'est un très bon navigateur Web en raison des outils de développement dont il dispose. Mais, bien sûr, si vous n'aimez pas Google, vous n' aimerez pas Google Chrome, ce que je comprends parfaitement. Quel que soit le navigateur Web que vous souhaitez utiliser pour ce cours, c'est bien, cependant, j'utiliserai Google Chrome tout au long de ce cours. La raison pour laquelle je l'ai chargé en mode navigation privée, vous pouvez le voir ici, c'est pour ne pas être connecté automatiquement. Je veux juste vous montrer l'état déconnecté , puis lorsque nous commencerons à parler de backend, je vous montrerai la version connectée. Ici, vous pouvez voir qu'il reconnaît grâce au stockage de session ou aux cookies stockés dans notre navigateur, que je ne suis pas connecté actuellement Je peux donc cliquer ici pour « me connecter ». Je vais simplement cliquer sur « Non merci » ici. Commençons à interagir avec notre code frontal ici. Maintenant, si vous vous souvenez de ce que je viens de dire, le serveur fournit du HTML, du CSS , du JavaScript au navigateur, et le navigateur assemble le tout. Ce code HTML, JavaScript et CSS sont tous du code frontal. Comme il est intégré dans le navigateur, nous pouvons réellement voir tout le code brut. Ce que je vais faire, c'est appuyer sur Option Command I sur un Mac afin de faire apparaître les outils de développement. C'est ce qu'on appelle les DevTools, et si je clique dessus, je peux voir tous les différents panneaux ces outils de développement. Voici la console JavaScript, que nous examinerons plus tard. Ici, je veux cliquer sur « Éléments » et je vais fermer cette partie ici. En haut, vous pouvez voir tout le code HTML et en bas , vous pouvez voir tout le CSS qui donne un style à cette page. Maintenant que tout cela se passe dans notre navigateur, nous pouvons le modifier à la volée. Ce que je peux faire, c'est cliquer ici, puis passer souris sur différents éléments la page pour les voir dans le code. Maintenant, si je clique sur l'un d'entre eux, cliquons sur ce bouton, vous pouvez voir que ce code est en fait ce qui détermine ce bouton ici même. Comme vous pouvez le voir sur la balise HTML, il y a beaucoup de choses qui se passent ici. Évidemment, ce n'est pas un exemple basique, il s'agit de google.com. Mais ce que je veux que vous remarquiez ici, c'est que dans ce champ de valeur, nous avons Google Search, qui se rapporte au texte qui apparaît tout au long du bouton. Ce que je peux faire ici, c'est que je peux le modifier. Ainsi, au lieu de Google Search, je peux simplement le changer en Recherche, et vous pouvez voir les modifications du bouton. Ici, dans le CSS, je peux effectivement supprimer certains attributs. Si vous voyez ici, ce style s'applique à ces deux boutons Si je passe la souris dessus, vous pouvez voir qu'il s'applique à ces deux boutons. Je peux me débarrasser du rayon de bordure. Je pourrais faire quelque chose comme changer la couleur du texte en chocolat comme ça et comme vous pouvez le constater, l'état de survol est un peu différent. Mais s'il n' est pas survolé, au moins, la couleur du texte sera chocolat. cette image, il y a deux manières de procéder je peux cliquer dessus puis cliquer sur l'élément, ou je peux cliquer dessus avec le bouton droit de la souris et cliquer sur « Inspecter », ce qui est ma méthode préférée Vous me verrez probablement le faire plus souvent en classe. Vous verrez que cette balise img ici, qui est une balise d'image en HTML, est ce qui rend cette image ici. Comme vous pouvez le voir ici, il y a un src et si je devais cliquer avec le bouton droit ici et « Ouvrir dans un nouvel onglet », vous pouvez voir que nous avons le fichier image réel de Google ici. Il s'agit évidemment de google.com. Ils ont plein d' autres trucs dingues ici. Ils ont tous ces codes étranges ici qui se trouvent dans l' attribut class ici. Mais ce que j' essaie de vous faire ici, c'est que tout le code frontal, tout le code HTML, le CSS et le JavaScript. Il est plus difficile d'interagir avec le JavaScript. Mais si je rentre dans la tête, je peux effectuer une recherche ici et ensuite je peux utiliser put.js, qui représente un fichier JavaScript et puis peut-être qu'il y a beaucoup de code ici. Peut-être que je peux trouver un fichier JavaScript externe, n'apparaît pas vraiment. Mais ici, vous pouvez voir qu'à l'intérieur de ces balises de script, que nous utilisons pour insérer du code JavaScript, il y a du code JavaScript, nous pouvons copier ou simplement regarder pour voir ce qui se passe sur la page. Mais l' exemple de JavaScript est beaucoup plus difficile avec le HTML et le CSS. Il est beaucoup plus facile de déterminer ce qui se passe , car vous avez ce panneau, qui affiche tous les styles qui s'appliquent à cette balise d'image et vous pouvez accéder à la balise d'image elle-même. Si je clique ici pour le calculer, vous pouvez commencer à voir certains des styles calculés et si nous cliquons ici, nous pouvons voir où cela se trouve, de sorte que la police d'Ariel est en fait définie sur l'ensemble du corps du document, qui est essentiellement le document entier. Si je clique dessus, vous pouvez voir toutes les polices changer par défaut, je crois que c'est Times New Roman ou quelque chose comme ça. Ou nous pouvons changer la couleur du corps par défaut en quelque chose d'autre. Mais cela ne remplacera pas les endroits où nous nous sommes concentrés sur des éléments spécifiques. Cela ne remplacera pas ces couleurs ou ces couleurs. Mais il s'agit de la spécificité du CSS à un concept plus avancé. que je veux dire, c'est que lorsque nous sommes allés sur google.com, nous avons reçu le code frontal de notre navigateur et notre navigateur rassemble ici même. Toute l'interactivité qui se produit maintenant après le chargement de la page se fait sur le front-end. C'est le code HTML qui donne la structure de la page et qui place les éléments sur la page. C'est le CSS qui détermine l'apparence, la mise en page et c'est le JavaScript qui nous fournira toutes les fonctionnalités. Voyons si nous le pouvons. Si je clique dessus, un panneau s'ouvre ici. Il est possible que ce soit uniquement du CSS, mais il est fort probable que cela provienne de JavaScript. Si je clique ici, sur « Rechercher par image  », vous pouvez voir qu'un panneau s'ouvre ici, puis je peux cliquer ici, « Charger un fichier », depuis mon système de fichiers. L'interactivité se produit sur le front-end sans que se produit sur le front-end nous rechargions la page. Maintenant, une chose que vous remarquerez, c'est que lorsque j'actualise la page, ces modifications ont disparu. Ce qui est intéressant, mais c'est évidemment logique. Je peux revenir ici et le modifier pour simplement effectuer une nouvelle recherche. Mais bien sûr, Google ne nous autorisera pas à modifier son site Web pour tout le monde. Chaque fois que vous recevez du code d'un serveur vers votre navigateur, vous pouvez le modifier. Mais bien sûr, cela ne sera pas enregistré le serveur Google actuel et modifié pour tout le monde. Cela ne se produit que dans votre version que vous avez extraite du serveur au moment où vous avez visité l'adresse. Si je rafraîchis à nouveau ici, il sera à nouveau extrait du serveur et maintenant vous pouvez voir qu'il passe soudainement en mode sombre et qu'il est également déterminé que je suis en train de l'enregistrer en Australie. C'est un peu plus de magie de la part de Google. Mais maintenant, je vais ouvrir Google dans une nouvelle fenêtre, une fenêtre non incognito. Ici, vous pouvez voir que nous avons une expérience similaire, mais la différence est que vous pouvez voir que je suis actuellement connecté. Vous pouvez voir mon nom, mon e-mail, qui sont masqués pour des raisons de confidentialité. C'est mon e-mail standard. Vous pouvez me contacter sur mon adresse e-mail professionnelle, bien sûr, mais pas sur mon adresse personnelle, veuillez respecter cela. Mais ici, vous pouvez voir mon nom et ma photo et d' où viennent-ils ? De toute évidence, cela provient d'une base de données et ces données me concernent spécifiquement. Parce que je suis connecté, en d'autres termes, je suis autorisé à accéder à ces données, j'ai maintenant ma photo de profil, nom et mon e-mail sur cette page. Cela vient du backend et de toutes ces opérations et éléments que je peux consulter et modifier dans le navigateur. Des éléments tels que l'autorisation, la saisie de données, détermination des données à diffuser, tout cela relève du backend. Parce que si cela était fait dès le départ, ce serait un véritable cauchemar en matière de confidentialité. Vous ne voulez pas que je puisse accéder à votre compte Google ou au compte Google de quelqu'un d'autre. Le compte Google de chacun doit être distinct. Comme vous pouvez le constater, cela provient du backend et c'est dans le backend que se produit le véritable changement permanent pour une application comme celle-ci. Le fait est que nous avons notre code frontal. Nous pouvons entrer ici. Nous pouvons le modifier autant que nous le souhaitons. Je pourrais même remplacer ma photo de profil ici par une autre image. Comme vous pouvez le voir ici, je peux en fait accéder directement à l'image qui s'ouvre dans un nouvel onglet. Je peux en fait accéder directement à l'image. Je pourrais simplement remplacer cette URL ici dans le code HTML par une autre image, et cela mettrait à jour l'image. Je peux changer de nom. Voyons voir. Si je vais ici. Cela va me montrer tous mes comptes. Si je le fais glisser dessus pour que vous puissiez voir qu'il est bien imbriqué. Je pourrais même changer mon nom en Michael Jackson, par exemple. Alors si je clique ici, je suis maintenant Michael Jackson. Je peux modifier tout ce code frontal, mais bien sûr, cela ne modifiera pas le backend. Le backend est ce qui nous fournit le HTML, le CSS et le JavaScript. Chaque fois que nous adressons une requête au serveur, actualisons ici, et que je clique dessus , je redeviens Christopher Dodd, car il récupère les données de l'utilisateur connecté depuis le backend de Google , puis les intègre au code HTML, au CSS, au JavaScript, pour créer l'expérience frontale, qui est ensuite intégrée dans votre navigateur. J'espère qu'à travers cet exemple, vous pourrez voir cela fonctionner dans le monde réel, la distinction entre front-end et backend. J'aime utiliser cet exemple parce que je pense qu'il montre vraiment la distinction entre les deux. Comme nous pouvons le voir ici, il n'y a aucun code de base ici. Je ne peux pas accéder directement à la base de données. Bien entendu, ce serait un énorme cauchemar en matière de sécurité. Le backend contient tout cela, tous les détails de mon compte, des opérations plus complexes. La seule chose qui ressort du front-end est la structure de la page, le style de la page et toute interactivité qui doit se produire sans recharger la page. Vous pouvez voir ici que je peux ouvrir ce panneau et que certains des styles ici sont modifiés JavaScript le fait pour nous, car nous ne rechargeons pas réellement la page. Nous bénéficions d'une certaine interactivité frontale. Je peux l'ouvrir et accéder à mes applications. Je vais en rester là, les gars. Dans la vidéo suivante, nous allons en fait écrire code HTML, puis nous allons utiliser du CSS, du JavaScript, puis certains des outils de prétraitement qui trouvent au-dessus de ces langages. Je te verrai dans la prochaine vidéo. 3. HTML: Comme nous l'avons appris dans la dernière vidéo, HTML est le langage de balisage standard pour le Web. Langage de balisage selon l'encyclopédie Britannica, qui signifie système de codage de texte standard, composé d'un ensemble de symboles insérés dans un document texte pour contrôler sa structure, mise en forme ou la relation entre ses parties. Les symboles de balisage peuvent être interprétés par un périphérique, un ordinateur, une imprimante, un navigateur, etc., afin de contrôler l'apparence d'un document lorsqu'il est imprimé ou affiché sur un moniteur. Un document annoté contient donc deux types de texte. Texte à afficher et langage de balisage utilisé pour l'afficher. Je pense que c'est une assez bonne description. En HTML, comme dans les autres langages de balisage, nous avons des balises, puis le contenu de la balise entre elles. Cette balise, qui se trouve ici avec le signe moins que et le signe plus que, représente une balise HTML standard. Dans la plupart des cas, cependant, des textes suivront. Ensuite, cette balise HTML standard avec une barre oblique après le signe moins que indique qu'il s'agit de la fin du contenu de cet élément HTML particulier. Nous pouvons également imbriquer des éléments dans d'autres éléments et vous le verrez tout le temps dans le code HTML. Il s'agit d'un système dans lequel les éléments sont conçus pour être placés dans d'autres éléments afin créer une structure arborescente nommée à juste titre l'arbre du document. Nous pouvons visualiser n'importe quelle structure HTML sous forme d'arbre en utilisant un outil tel que ce Live DOM Viewer. Mais au lieu d' approfondir une théorie, écrivons du code HTML et voyons comment il fonctionne en action. L'éditeur de code que je vais utiliser pour cours d' aujourd'hui s'appelle Visual Studio Code. Il est très populaire car il possède pratiquement toutes les fonctionnalités d' un éditeur de code payant entièrement gratuit de Microsoft. Beaucoup de personnes l'utilisent, y compris moi-même. Je ne vois aucune raison d'utiliser un autre éditeur de code. Mais bien sûr, si, pour une raison quelconque, vous souhaitez créer cette classe dans un autre éditeur de code, vous pouvez le faire. Certaines instructions seront légèrement différentes, mais la plupart du temps, vous pouvez utiliser n'importe quel éditeur de code que vous souhaitez suivre. Si Visual Studio Code n' encore installé, recherchez-le simplement sur Google. Comme vous pouvez le constater, Visual Studio Code est développé par Microsoft, date de sortie initiale 2015. Il existe depuis un certain temps, mais c'est au cours des 3 à 5 dernières années qu'il est devenu très populaire. Ici, vous pouvez voir qu'il a été détecté que j'utilise un Mac Je peux donc simplement cliquer ici pour télécharger la version appropriée à mon système d'exploitation. Ce que je vais faire, c'est revenir à Visual Studio Code. En fait, je vais passer à la fenêtre de mon Finder ici et je vais créer un nouveau projet pour le cours d'aujourd'hui. Je vais simplement l'appeler Modern Web Development. Ensuite, à partir de là, je peux, comme indiqué ici, ouvrir un fichier ou un dossier à l'aide de ce raccourci. Je vais donc simplement utiliser le raccourci, puis naviguer dans ce dossier de code et ouvrir ce dossier. Nous avons maintenant notre projet vide. Je mettrai à jour le code de Visual Studio plus tard. Et ici, je peux soit cliquer dessus soit cliquer avec le bouton droit sur « Nouveau fichier » et je vais créer un fichier index.html. Il y a une raison pour laquelle je l'ai appelé index.html. L'index signifie généralement qu'il s'agit la page d'accueil ou du fichier racine d'une adresse, puis le extension.html sert à indiquer de quel fichier il s'agit. Cela est important parce que lorsque nous exécutons un serveur, il recherche le fichier d'index lorsque nous sommes sur la route racine ou l'URL racine. Permettez-moi de le démontrer très rapidement. Permettez-moi de saisir du code HTML juste pour commencer , puis nous y reviendrons. Nous allons juste faire Hello World entre quelques balises h1. Je vais appuyer sur « Enregistrer » là-dessus. La méthode recommandée pour le charger dans votre navigateur pour commencer est si nous allons simplement sur Google Chrome et que j'ouvre le Finder, nous pouvons littéralement simplement faire glisser ce fichier HTML dans Google Chrome et il le chargera. Et voilà, nous avons notre rubrique « Bonjour tout le monde ». Dans ce cas, peu importe le nom que nous donnons à notre fichier. Je pourrais le renommer en page.html. Si je clique dessus, une erreur se produira car le chemin a changé, mais si je le change ici en page.html, tout ira bien. Mais si nous devions faire quelque chose comme gérer un serveur, nous avons ce bouton sur lequel cliquer pour exécuter un serveur en direct. Il s'agit d'une extension. Si nous passons aux extensions, vous pouvez voir les extensions que j'ai installées. Il s'appelle Live Server de Ritwick Dey. Si vous souhaitez l'installer, nous l' utiliserons probablement plus tard dans le cours. Si nous l'avons fait et que nous avons cliqué sur « Go Live », nous obtenons toujours page.html. Mais si nous allons à la racine, cette adresse, vous verrez qu'elle ne se charge pas. Si nous voulons que la page se charge à la racine de notre adresse, nous devons nous assurer qu'elle s'appelle index. Si je clique sur « Enregistrer » dessus, rafraîchissez ici, vous pouvez voir qu' il n' y a aucune spécification quant au nom de la page car, avec index.html, elle se chargera à la racine de l'adresse. Comme nous gérons un serveur ici, nous avons une adresse IP et un port. Je ne veux pas trop m' attarder sur ce sujet ici. Je ne veux pas t'enliser dans la théorie. Passons en fait à du HTML. Je vais simplement me débarrasser de ce serveur. Revenons à ce que nous avions auparavant, l'exécuter à partir du système de fichiers. Comme vous pouvez le voir ici, il est indiqué que vous consultez un fichier local ou partagé et nous avons ici notre document HTML. Ce que je vais faire, c'est fermer tout ça. Essayons de mettre les deux sur le même écran, comme ça. Alors débarrassons-nous de cela, enregistrons, actualisons ici et vous verrez que nous n'avons plus rien maintenant. Commençons par du HTML. Je vais fermer l'explorateur ici, augmenter la taille ici, que ce soit plus facile à voir. Nous pouvons en fait obtenir du contenu HTML standard en tapant simplement du code HTML dans Visual Studio Code, puis je peux obtenir ce code standard, appelé code standard. Si je dézoome, tu peux voir. Ne faisons pas cela pour commencer, car nous sommes en train d'apprendre le HTML en ce moment. Ce dont nous aurons besoin, c'est de deux choses. Nous allons avoir besoin d'une étiquette sur la tête et d'une étiquette corporelle. ces deux étiquettes, nous aurons besoin d' une étiquette de fermeture, car nous allons y imbriquer des objets. Ouvrons un bandeau. Vous pouvez voir que Visual Studio Code nous aide grâce saisie semi-automatique pratique et nous donne la référence depuis MDM. Nous y voilà. Si j'appuie dessus, cela crée automatiquement la balise de fermeture pour moi, qui, comme nous l'avons vu plus tôt, est exactement la même, mais cette barre oblique précède le mot. Je vais entrer dedans et appuyer sur « Entrée » et cela s'ouvrira bien formaté avec une mise en retrait ici. C'est juste du formatage, afin que le code soit plus facile à lire. Ensuite, je vais créer le corps et j'obtiens la même chose. Si je clique sur « Enter », cela nous fournira une belle indentation ici. Si nous voulons que quelque chose apparaisse sur la page, nous devons le mettre dans nos étiquettes corporelles. Si je remettais ce que nous avions avant. Faisons-le sans le h1. Je vais juste dire bonjour à tout le monde, juste du contenu textuel de base, rafraîchissez ici, vous verrez qu'il apparaît. L'en-tête est responsable de tout ce qui est plus méta par rapport au document. Nous parlons du titre du document, références à des fichiers CSS que nous pourrions importer, d'informations de référencement, etc. Des éléments qui n' apparaissent pas sur la page, mais qui sont tout de même importants pour le fichier HTML. L' exemple le plus courant ici est le titre. Je peux créer cette balise de titre et , entre la balise de titre d'ouverture et de fermeture, insérons un titre. Vous pouvez l'appeler comme vous voulez, ma première page Web. Si je clique sur « Enregistrer » dessus, je veux que vous remarquiez que dans l'onglet, il y a juste le nom du fichier. Eh bien, maintenant, si nous actualisons, vous verrez que cela va apparaître comme ma première page Web. C'est donc pour l'utilisateur, mais aussi pour les moteurs de recherche Google. Tout ce qui insère ou intègre la page sur un autre site Web. si vous partagiez Par exemple, si vous partagiez cette page sur Facebook, vous communiquez maintenant au document et au Web le nom de la page. Pour l'instant, c'est tout ce que je vais faire pour le headtag. Passons au corps. Comme vous l'avez déjà vu, j'ai créé un H1. Un H1 est un titre de section, alors exécutons-le, puis je cliquerai sur « Actualiser » ici, et comme vous pouvez le voir, nous obtenons un style prêt à l'emploi. Ce qu'est un H1, c'est un titre de haut niveau, donc il va jusqu'à H6, je crois. Oui, ici vous pouvez voir jusqu'à H6. Si nous ne l' avons pas défini dans notre CSS, nous obtiendrons un style par défaut le H1 étant le plus gros, , le H1 étant le plus gros, et si nous devions avoir un H6 et un set, appelons-le simplement un titre de sixième niveau. Rafraîchissez-vous ici. Vous pouvez voir que c'est probablement encore plus petit que si nous saisissions du texte normal. Oui, c'est encore plus petit que les textes ordinaires, ce qui est un peu bizarre, mais vous comprenez le point. Il y a tout le chemin depuis H2, titre de deuxième niveau, comme vous pouvez le voir, et prêt à l'emploi, il est doté d'un style de base. Mais il est important de noter ici que vous souhaitez utiliser les bons titres, même en dehors du style, car ce n'est qu' un signe de bonne mise en forme pour Google. Google va en fait scanner une page Web et déterminer si elle est correctement structurée Vous devez donc toujours utiliser correctement ces balises de titre. Si vous rédigez un document, vous avez votre titre supérieur et si vous vouliez créer un titre en dessous, ce serait le titre 2, et si vous vouliez créer un titre en dessous, ce serait le titre 3. Utilisez toujours le bon titre, même si vous travaillez avec des styles différents. H1-H6 est une étiquette très courante. Je vais me débarrasser de ce H6 ici même. Au lieu du texte normal, je vais vous montrer une autre balise populaire appelée balise de paragraphe. Dans Visual Studio Code, je peux simplement taper Lorem, appuyer sur « Tab » et Lorem ipsum sera inséré. Si je clique sur « Enregistrer » dessus, rafraîchissez la page ici, vous verrez que nous obtenons ce paragraphe. Maintenant, ce qu'il est important de comprendre en HTML, c'est qu'à moins de le modifier, nous obtenons un style prêt à l'emploi avec le HTML. Permettez-moi de l'ouvrir et je pourrai ensuite vous le montrer dans les DevTools. Si je clique sur « Option Command I » sur un Mac. Nous pouvons maintenant voir le code de sortie ici. C'est exactement la même chose que ce que nous avons ici, mais maintenant nous pouvons le voir apparaître dans le navigateur et nous pouvons réellement interagir avec lui. Nous pouvons réellement entrer et modifier des mots comme nous l'avons fait dans l'exemple de Google et nous pouvons fermer et développer des balises comme celle-ci. Mais nous pouvons également voir les styles calculés. Si nous passons la souris sur cette balise P ici, vous pouvez voir l'orange apparaître au-dessus et en dessous du paragraphe. Je ne peux pas passer mon curseur dessus en même temps que je l'affiche. Mais vous pouvez voir sur la gauche que vous avez P, cela vous indique ses dimensions, puis il vous montre un espace orange au-dessus et en dessous qui est en fait rembourrage. Nous pouvons le vérifier en accédant Computed ici et en regardant ce que l'on appelle le modèle en boîte. Vous pouvez voir que nous y sommes. En fait, ce n'est pas du rembourrage, c'est corrigé, c'est de la marge. Les marges sont un peu différentes. Nous n'aborderons pas le modèle de boîte dans cette classe en particulier, mais je l'aborderai dans ma classe HTML et CSS ici sur Skillshare, afin que vous puissiez consulter celle-ci. Mais comme vous pouvez le voir ici, nous avons une certaine marge par défaut. Si nous passons à la deuxième rubrique, nous pouvons voir que nous avons également une certaine marge par défaut. Mais nous avons également d'autres paramètres par défaut, comme le fait que la taille de police soit 50 % plus grande et que le style d'affichage soit en mode bloc. Nous aborderons les styles plus tard. Mais je veux juste indiquer ici que lorsque nous écrivons du HTML sans CSS, nous obtenons du CSS gratuitement. Nous recevons du CSS par défaut. Ici, dans notre H1, vous pouvez voir que nous avons une taille de police de 2 em, soit une unité. De toute évidence, c'est une moitié de plus sur le H2. Mais tout cela est entièrement modifiable avec le CSS, ce ne sont que des valeurs par défaut dans le HTML. Ici, vous pouvez accéder aux styles et voir la feuille de style de l' agent utilisateur, qui ressemble à la feuille de style standard. Cela peut changer en fonction du navigateur que vous consultez. Mais vous pouvez également accéder à Computed ici, et ce bouton vous indiquera d'où cela vient. Je pense que le poids de la police est également audacieux et que c'est une différence. Mais juste pour aller un peu plus loin, nous pouvons le modifier pour réduire le poids de la police. Ce sera toujours un H1, mais il n'a tout simplement pas ce style par défaut H1. Il est donc important de le savoir. Passons en revue certaines des autres balises courantes que vous allez voir en HTML. Comme je l'ai mentionné dans les vidéos précédentes, l' une des plus courantes est la balise A, qui est le lien hypertexte. C'est juste un A. Nous avons notre dernière étiquette ici. Nous voulons mettre cela l'autre côté du texte, nous voulons un hyperlien. Si je clique sur « Enregistrer », actualisez ici, nous devrions généralement obtenir un style par défaut. Mais je pense que c'est parce que nous n'avons pas encore de href que nous devons réellement l'intégrer, que nous devons réellement l'intégrer, et ce sera notre premier attribut. Nous pouvons ajouter des attributs à la balise d'ouverture, et non à la balise de fermeture, la balise d'ouverture et, comme vous pouvez le voir ici, href contient l'URL ou le fragment vers lequel pointe le lien hypertexte. C'est ce que nous recherchons. Si je l'ouvre, peu importe ce que j'y mets. Mettons simplement un hash qui est l'espace réservé habituel, puis je clique sur « Enregistrer », actualisez ici, vous verrez maintenant que j'obtiens le style par défaut pour un lien hypertexte. Nous changeons notre curseur. Les textes apparaissent en bleu et soulignés. C'est très old school. Ce style est généralement remplacé par de nombreux sites Web, mais c'est le style classique d'un lien hypertexte. Je viens d'ouvrir à nouveau les DevTools ici et je vais juste les mettre ici. Je pense que nous pouvons examiner les trois en même temps. Comme vous pouvez le voir ici, comme je l'ai mentionné, la couleur est le lien Webkit, qui est une variable, et notre curseur sera un pointeur et nous allons le souligner. Vous pouvez le voir ici, ou si nous passons à Computed, généralement de la couleur réelle calculée il s'agit généralement de la couleur réelle calculée et du style du pointeur du curseur. Encore une fois, nous pouvons entrer ici, ce que nous ferons plus tard, et changer cela pour autre chose. Cursor, on peut faire un réticule par exemple. Lorsque vous avez un lien, vous pouvez passer à ce curseur en forme de croix ici. Nous pouvons régler cela comme nous le voulons avec le CSS. Le fait est que nous avons un style par défaut prêt à l'emploi. Maintenant, avant de créer ce fichier appelé page.html, revenons en arrière et mettons celui-ci dans page.html et soyons vraiment paresseux. Réintroduisons simplement Hello World sans aucune balise HTML. Mais je veux juste vous montrer ici que nous pouvons créer un lien vers cette page ici et ensuite, si je rafraîchis ici, je clique dessus, vous verrez que c'est un peu serré. Mais vous pouvez voir ici que cela nous dirigera vers page.html. Si je l'étends complètement, revenons ici et peut-être que nous mettrons un lien et le renverrons à index.html. Rentre chez toi. Maintenant, si je rafraîchis ici et que je clique sur « Go Home », cela nous ramènera à index.html. Nous pouvons maintenant établir un lien entre deux fichiers. Je vais supprimer page.html, c'était juste pour indiquer un lien hypertexte. Nous allons simplement le supprimer. Déplace ça dans la corbeille. Ce sont toutes des choses très basiques, les gars, si vous êtes trop avancé pour cela, n'hésitez pas à passer à l'étape suivante. Mais nous allons maintenant aborder d'autres balises HTML. Comme je l' ai mentionné avant cette vidéo, nous pouvons également ajouter une image et nous avons vu que dans l'exemple de Google, il s'agissait simplement d'une balise IMG et celle-ci d'une balise à fermeture automatique. Nous n'avons pas besoin d'une balise de fermeture pour cela, car tout ce que nous avons à faire au minimum est de lui donner l'adresse de l'image que nous voulons montrer, et nous le faisons via l'attribut SRC, puis entre ces guillemets doubles, nous insérons le lien vers une image. Il s'agit simplement d'une image de substitution, puis je vais simplement fermer en utilisant le signe inférieur. Il s'agit du signe supérieur Il vous suffit donc de le mettre à la fin et vous obtenez une balise HTML bien formée. Allons-y, rafraîchissez ici et vous pouvez voir qu'il faut un peu de temps pour que l'image soit chargée à partir de cette source externe. Elle est maintenant mise en cache, donc elle ne se chargera pas à nouveau. Mais maintenant, vous pouvez voir que nous avons notre image d'espace réservé ici. Si nous inspectons cela, vous verrez que nous avons, non, aucune marge. Fermons celui-ci ici. Permettez-moi de structurer ce document un peu différemment. Nous avons, ajoutons simplement un paragraphe de Lorem Ipsum. Nous allons le mettre là. Permettez-moi de développer cela. Nous allons placer l'image ici sous le titre du deuxième niveau. Je vais juste appeler ce texte avec image. Cliquez sur « Enregistrer » dessus, actualisez ici. Vous pouvez voir maintenant que nous avons cette section ici. Je vais ajouter une balise supplémentaire à hr, qui est une règle horizontale que je pense qu'elle représente, et elle créera simplement une ligne entre les éléments de contenu. Enregistrez, actualisez ici, vous verrez que cela crée cette ligne. Ensuite, je vais un autre paragraphe de texte ici, ajouter un autre paragraphe de texte ici, puis j'ajouterai quelque chose juste pour illustrer un guillemet. Il s'agit principalement d'une balise sémantique, mais mise entre guillemets. Ce que je veux dire par sémantique c' est qu'il n'y a pas beaucoup de style, donc c'est principalement une question de dénomination. Je peux citer ici une citation : « Un homme sans voiture ne va pas très loin ». L'une de mes citations préférées. Comme vous pouvez le voir ici, il a exactement la même apparence, mais juste avec un peu d'indentation. Si je devais ouvrir à nouveau mes outils de développement, faire défiler la page vers le bas, cliquer avec le bouton droit de la souris ici, vous verrez que nous avons juste vous verrez que nous avons juste un attribut appelé margin-block-start, qui lui donne cette marge à gauche de 40 pixels. Ensuite, vous avez ces 16 pixels en haut. En fait, vous avez également 40 pixels sur la droite, donc c'est ce qui lui donne cette fonctionnalité indentée ici ou cet aspect indenté, puis nous allons simplement mettre un autre paragraphe à la fin, actualiser ici et vous pouvez voir. Créons une nouvelle section ici. Créez un autre h2 ici. Appelons ce paragraphe et cette liste. Maintenant, je vais vous montrer une structure HTML courante ici. Nous pouvons ouvrir une liste ordonnée ou une liste non ordonnée. La liste non ordonnée est généralement plus courante Je vais donc aller en haut, qui signifie liste non ordonnée, l'ouvrir, puis nous créons une balise LI imbriquée pour tous les éléments de la liste. Premier élément, nous le verrons sur notre écran dans un deuxième, deuxième et un troisième élément. Si je clique sur « Enregistrer » ici, nous avons en fait oublié de le mettre dans un paragraphe ici. Encore une fois, encore un peu de Lorem ipsum. Cliquez sur « Enregistrer » dessus, actualisez la page ici, et comme vous pouvez le voir, nous avons notre liste ici. Si je devais inspecter à nouveau, ce que je ne ferai pas cette fois parce que je pense que vous avez compris, il y aura un certain style qui lui donnera ce point et cette indentation. Automatiquement, il y a également un certain style sur l'UL. Si nous voulions créer une liste ordonnée qui ne servirait qu'à la numéroter, nous pouvons remplacer le u par un o. Actualisez ici, nous pouvons remplacer le u par un o. Actualisez ici, et vous pouvez voir si nous ajoutions un quatrième élément, il s'affichera automatiquement sous la forme de quatre. Sauvegardez cela, je vais le déplacer ici maintenant, le rafraîchir ici, et le quatrième élément aura automatiquement un quatre devant. Enfin, je vais vous montrer quelques champs de formulaire, qui constituent la plus grande fonctionnalité prête à l' emploi que vous puissiez obtenir avec le HTML. Créons, je vais simplement appeler ce paragraphe par une forme, puis j'ajouterai un peu de Lorem ipsum ici. Mais après le paragraphe de Lorem ipsum, je vais ajouter un formulaire. Désormais, les formulaires fonctionnent : nous pouvons envoyer les informations que nous avons définies ici à une adresse spécifique, et nous le faisons via l'attribut action. Ici, si j'insère des entrées entre les deux et que je soumets ce formulaire, les données seront envoyées à une URL particulière. C'est ainsi que vous utilisez habituellement les formulaires. Mais pour l'instant, je vais juste vous montrer les entrées réelles elles-mêmes. Le premier que je vais vous montrer est un texte. Ce sont des étiquettes à fermeture automatique. Nous n'avons pas besoin de mettre un terme à tout cela. Je vais juste mettre le type de texte d'entrée et c'est suffisant pour le faire fonctionner, en gros. Si je rafraîchis la page, vous pouvez voir que nous avons cette boîte qui offre maintenant une certaine interactivité. Je peux y mettre ce que je veux , bonjour tout le monde. J'ai cette boîte de texte modifiable. Je peux également mettre une valeur ici, donc quand il se charge, il y a déjà du texte dedans. Et voilà. Mais bien sûr, c'est une entrée, donc je peux la modifier. Je pourrais aussi, en me débarrassant de cette valeur ici, la remplacer par un champ numérique, qui aura essentiellement le même aspect si je rafraîchis ici. Mais maintenant, vous pouvez voir ces flèches vers le haut et vers le bas. Je suis en train de taper des caractères ici, cela ne fonctionne pas. Je dois saisir un chiffre. Il n'acceptera qu'un chiffre, puis je pourrai monter et descendre. C'est un champ numérique. La première chose que nous pouvons faire est d'actualiser les cases ici, et vous pouvez voir que je peux cliquer dessus pour l'activer et le désactiver. De toute évidence, cela n'a pas vraiment de sens. Habituellement, nous utilisons une étiquette. Je peux créer une étiquette, mettre la case à cocher dans l'étiquette, puis écrire du texte ici. Disons que c'est comme un formulaire dans lequel vous acceptez quelque chose. Je vais juste dire que je suis d'accord. Ensuite, si je clique sur l'étiquette , la case sera également cochée. Passons à la création de boutons radio. Maintenant, les boutons radio sont un peu plus complexes car nous devons tous les nommer savoir qu' ils sont liés. Je vais l'appeler Radio 1 et, que devons-nous dire ici Option 1, je vais simplement l'appeler Option 1. Nous allons en avoir besoin de plusieurs. Je vais copier-coller. En fait, zoomons un peu en arrière, afin de tout voir ici. Option 2. Nous voulons que cela reste sous le nom de Radio 1, donc elles sont liées. Je vais cliquer sur « Enregistrer », actualiser ici. Maintenant, avec les radios, la différence entre cette case et les cases à cocher est que si j' sélectionne une puis que j'en sélectionne une autre, cela supprime la sélection de la première. Il le fait parce qu' ils font partie du même groupe. Si je devais les créer ou les dupliquer, et que nous les appelions Radio 2 dans le champ de nom, elles seraient liées entre elles. Si je fais partie de ce premier groupe et que je sélectionne ici, cela supprimera la sélection de l'autre radio du groupe. Si je passe ici, il s' agit d'un groupe distinct, donc il ne sera pas supprimé du premier, à moins, bien sûr, j'aie oublié de le modifier, et maintenant nous avons le même groupe. Mais alors nous devrions écrire cette option 4. très basiques, mais qui vous donnent juste un aperçu de certains composants courants du HTML. Nous avons également une zone de texte, qui est assez basique. Il s'agit en fait d'une balise comportant une balise de fermeture, et le contenu réservé que nous pouvons placer dans la zone de texte est celui que nous avons placé entre les deux balises. Mettons un peu de Lorem ipsum dans une zone de texte. Comme vous pouvez le voir ici, nous pouvons en fait agrandir cette boîte, ce qui est intéressant. Nous devrons généralement faire un peu plus de formatage à ce sujet, mais vous pouvez voir ici que nous avons essentiellement du Lorem ipsum dans un champ de texte multiligne. Il est également redimensionnable. Nous pouvons commencer par un certain contenu, commencer par le Lorem ipsum, puis le modifier. C'est la zone de texte. Enfin, celui que je vais vous montrer est select, c'est ainsi que nous créons une liste déroulante. Nous avons notre choix et, à l'intérieur, nous voulions des options de nidification. Encore une fois, je vais passer à l'option 1, coller un doublon, à option 2 et à l'option 3 ici. Celui actuellement sélectionné sera le premier par défaut. Si je rafraîchis ici, vous pouvez voir que nous avons une liste déroulante avec la première option sélectionnée automatiquement. Ça sort de l'écran. Permettez-moi d'en supprimer une partie. Allons-y. Enregistrez, rafraîchissez ici. Si je clique ici, vous pouvez voir que nous pouvons sélectionner différentes options dans cette liste déroulante. Si nous voulons sélectionner une option différente de la première, nous pouvons mettre un attribut optionnel ici, juste sélectionné, c'est tout. Actualisez et vous pouvez voir option 2 est désormais sélectionnée par défaut, mais nous pouvons la modifier ici. C'est ce que j'entends par interactivité sans JavaScript, c'est standard en HTML, et il s'agit d'une version très Web 1.0 du développement Web. Permettez-moi d'expliquer cette déclaration un peu plus en détail. Web 1.0 est essentiellement la première version du Web, qui ressemblait beaucoup à celle-ci. C'était juste une mise en page verticale avec juste des titres, des paragraphes, des formulaires et des listes, tout ce que nous avons fait dans cette vidéo. C'était très basique. Il n'y avait pas beaucoup de style. Au fil du temps, il y a maintenant le terme Web 2.0, qui parle du Web actuel en dehors de toutes les activités liées à la blockchain , qui porte désormais le label Web 3.0. Le Web 2.0, dans lequel nous nous trouvons actuellement, est davantage constitué de mises en page bidimensionnelles avec beaucoup plus d'interactivité fournie par JavaScript. Dans le Web 1.0, seuls sites Web affichaient des informations. Tout ce dont vous aviez besoin était ce contenu sémantique, comme un titre de premier niveau , un paragraphe, puis un formulaire pour accepter certaines données. Des articles très basiques qui présentaient également un style prêt à l' emploi, comme nous l'avons déjà vu lorsque nous les avons inspectés, tous les styles standard. Il s'agit en grande partie d'un développement Web à un stade précoce. Comme vous le savez, vous ne voyez pas vraiment de nombreux sites Web qui ressemblent à cela actuellement, mais c'est l'aspect standard du HTML sans aucun style. Dans la vidéo suivante, nous allons modifier le style de notre page Web et parler du CSS. Le CSS est évidemment un sujet très vaste, mais nous allons juste en faire un bref aperçu afin que vous puissiez comprendre comment nous pouvons réellement styliser ce que nous avons créé dans cette vidéo et tirer parti de ce que nous avons appris sur le HTML. Je te verrai dans la prochaine vidéo. 4. Avertissement rapide: Bonjour à tous. Je voulais juste ajouter une vidéo supplémentaire à titre petit avertissement, car nous venons de parler du HTML, qui est assez basique, et nous avons abordé une grande partie de ce que vous pouvez faire avec le HTML. n'y en a pas beaucoup, il y a juste une imbrication de balises dans d'autres balises, ce n'est pas trop compliqué. Mais au fur et à mesure que nous commencerons à nous intéresser au CSS, au JavaScript et aux autres concepts, cela va devenir beaucoup plus complexe très rapidement. Et bon nombre de ces sujets pourraient faire l'objet d'un cours à part entière. En fait, certains d'entre eux le sont, et je ferai référence à ces autres cours au fur et à mesure du reste du cours. Mais je voulais juste ajouter cette clause , car je donne des cours de Skillshare depuis assez longtemps pour connaître certaines des critiques que je pourrais recevoir dans les critiques. Je voulais juste m' assurer qu'il s'agit d'un cours pour tous les niveaux. Au début, nous abordons les bases, nous abordons le HTML, nous parlons de quelques CSS de base, mais vous remarquerez peut-être que la complexité augmente lorsque nous commençons à nous familiariser avec Sass, Tailwind, JavaScript, en particulier TypeScript, puis que nous passons aux frameworks JavaScript, notamment à l'extraction d' informations à partir d'API. Dans l' ordre dans lequel ils apparaissent, voici quelques détails supplémentaires qui abordent manière générale les sujets que nous allons aborder pour le reste de la classe. CSS, nous allons parler de mises en page parce que j'ai l' impression que les mises en page sont la chose la plus complexe en CSS. Si vous souhaitez que la couleur d'un texte particulier soit rouge, vous pouvez définir la couleur rouge. Ce n'est pas trop compliqué à comprendre, espérons-le, mais les mises en page sont un tout nouveau concept. Nous allons parler de Flexbox, nous allons parler de la grille CSS. Mais sachez simplement qu'il existe de nombreux styles différents dans le CSS. Si vous souhaitez approfondir ce sujet, il existe un cours sur Skillshare que j'ai créé et intitulé Web Development Fundamentals, HTML et CSS. Après la leçon de CSS, nous parlerons de Sass, puis nous aborderons également quelque chose appelé Tailwind CSS plus tard dans le cours. Comme je l'ai écrit ici, vous devrez peut-être acquérir une certaine expérience avec le CSS afin de comprendre les avantages de ces outils supplémentaires. Comme je le dirai tout au long de ce cours, le HTML, le CSS et le JavaScript sont les seuls langages frontaux exécutés dans le navigateur, et ce sont les seuls langages essentiels à apprendre. Mais bien sûr, nous avons tous ces autres outils comme Sass, comme Tailwind CSS, TypeScript, Vue. Ce sont ceux dont nous allons parler dans ce cours. Ils s'assoient juste au-dessus pour aider les développeurs. Pour en comprendre les avantages, vous aurez peut-être besoin d'une certaine expérience la chose sous-jacente qu' ils essaient de produire. En termes de style, ce serait du CSS, en termes de fonctionnalités, ce serait du JavaScript. Passons à JavaScript, nous n'allons qu'effleurer la surface de cette classe, puis nous allons nous plonger dans TypeScript et Vue. Cela se déplace très rapidement une fois que nous arrivons à la partie JavaScript. Si vous voulez faire une pause une fois la leçon sur JavaScript et approfondir le JavaScript, j'ai un cours complet sur JavaScript, intitulé Web Development Fundamentals JavaScript. Tu peux regarder celui-ci. Encore une fois, afin de comprendre les avantages de TypeScript, que j'ai également expliqués ici, vous aurez besoin d'une certaine expérience avec des projets frontaux plus complexes. Il est en fait difficile de trouver un exemple très basique pour utiliser TypeScript, car les avantages de TypeScript ne se manifestent lorsque vous commencez à travailler sur des projets frontaux plus complexes. Enfin, nous allons examiner Vue.js. Vue.js n'est qu'un exemple de framework frontal réactif. Vous devez être à l'aise avec navigation DOM et les Event Listeners avant de vous plonger plus profondément dans un framework frontal tel que Vue, React, Angular, etc. Si vous voulez en savoir plus sur ces concepts, en particulier, plongez dans les fondamentaux du développement Web JavaScript, mon cours ici sur Skillshare. Juste un rappel, les seuls éléments essentiels du front-end sont le HTML, le CSS et le JavaScript. Tous les autres outils ne sont là que pour aider au développement de ces trois outils. De plus, tout autre outil, abordé ou non dans cette classe, peut gagner et perdre en popularité. Le paysage change constamment et vous pouvez utiliser ces outils à votre guise. Les seuls éléments essentiels tels qu'ils sont écrits ici sont le HTML, le CSS et le JavaScript. Je voulais donc simplement ajouter cette vidéo d'avertissement, juste pour répondre à toutes les préoccupations possibles que je peux avoir concernant rapidité avec laquelle nous avançons pour le reste du cours. Si vous êtes bloqué sur une certaine scène et que vous souhaitez en savoir plus à ce sujet, vous pouvez suivre un autre cours sur ma chaîne Skillshare ici et découvrir plusieurs de ces sujets en profondeur. Sinon, vous pouvez consulter d' autres didacticiels ou simplement ignorer complètement cette leçon. S'il ne s'agit pas de la leçon HTML, CSS et JavaScript n'hésitez pas à l'ignorer complètement. Le but de ce cours est de vous donner un aperçu de certains des outils les plus populaires utilisés aujourd'hui, afin que vous puissiez ensuite choisir votre propre entreprise, comme le cours d'origine, sur la compréhension du développement Web. Je voulais donc juste que ce soit clair avant de passer à autre chose. Sans plus tarder, passons au reste de la classe. 5. CSS: Dans cette vidéo, nous allons présenter le CSS. CSS peut être un cours en soi, c'est pourquoi j'ai un cours Skillshare dédié au HTML et au CSS. Pour cette vidéo, nous allons simplement aborder les bases et leur application au HTML, en nous basant sur cet exemple que nous avons partagé dans la dernière vidéo. Maintenant, je vous ai montré deux manières de charger notre code HTML. Nous pouvons le faire via le système de fichiers tel que Search ou via un serveur. je vais passer à la diffusion Dans cette vidéo, je vais passer à la diffusion via un serveur. L'un des principaux avantages de cette méthode est de ne pas avoir à actualiser à chaque fois. Ainsi, si je crée une modification ici, je dois appuyer sur Enregistrer sur ce document, puis actualiser ce document. Pour voir le changement, nous pouvons facilement éliminer cette étape en exécutant notre serveur Live, qui, comme je vous l'ai montré dans la dernière vidéo, si j'ouvre mes extensions ici, Live Server de Ritwick Dey. Si vous souhaitez l'installer, il vous suffit de taper Live Server ici , de le rechercher, il s'affichera, de cliquer dessus, cliquer dessus, puis de cliquer sur Installer. Des extensions super faciles à installer sur Visual Studio Code. Je vais fermer cet onglet, puis je cliquerai ici pour passer en ligne. Ça va l'ouvrir. Ici, vous pouvez voir qu'il y a index.html à la fin. Nous n'en avons même pas besoin, nous pouvons le supprimer et il saura ce qu'est la page Web car l'index représente l'adresse racine d'un site Web. Allons-y et démontrons-le maintenant. Si nous entrons ici, et que je dois appeler cette deuxième option au lieu de l'option 2, et je clique sur Enregistrer. Vous pouvez voir que nous n'avons pas besoin de le rafraîchir ici, car il est doté d'un rechargement à chaud, vraiment cool et pratique pour le développement. Maintenant, introduisons un fichier CSS. Nous pouvons en fait créer quelque chose appelé une balise de style ici et y mettre du CSS et cela s'appliquera à la page sur laquelle il se trouve. Mais faisons-le de la manière la plus propre, qui consiste à placer notre CSS dans un fichier différent. Je vais ouvrir Explorer ici, créer un nouveau fichier et l'appeler styles.css. Vous pouvez l'appeler comme vous le souhaitez tant qu'il s'agit fichier got.css à la fin, car cela indiquera à Visual Studio Code et au navigateur Web qu'il s'agit d'un fichier CSS. Nous voulons maintenant lier ce fichier CSS à notre document HTML et nous pouvons le faire dans la balise head. Je vais créer un lien avec un attribut rel avec la valeur de feuille de style, qui indiquera à la page que nous introduisons une feuille de style, puis href, qui est le chemin d'accès à la feuille de style. Comme ils se trouvent tous les deux dans le même répertoire l'un à côté de l'autre, il suffit de taper styles.css, le nom du fichier, puis de cliquer sur Enregistrer dessus. Afin de vérifier si cela fonctionne, allons-y et écrivons notre premier style. Ce que nous pouvons faire ici, c'est effectuer une réinitialisation. Vous voyez maintenant que nous avons des marges et rembourrage qui proviennent automatiquement du code HTML. Ce que nous pouvons faire, c'est ajouter cet astérisque ici, c'est ce que l'on appelle Wildcard Selectors. Ensuite, on peut mettre du rembourrage, y mettre trop de D. En rembourrage, nous pouvons mettre à zéro et marge, nous pouvons régler à zéro par défaut sur tous les éléments. Comme vous pouvez le voir ici, nous pouvons certainement constater que notre lien avec la feuille de style a fonctionné ici, car cela s'applique désormais. Si je suis allé ici et que j'ai inspecté ma balise h1, vous pouvez voir que notre style par défaut a été remplacé par notre astérisque sélectionné ici. Il semble que ce soient toutes des marges et non des marges, mais si je devais cocher cette case ici, je pourrais l'activer et la désactiver. L'autre chose que nous pouvons faire ici est d'ajouter nos propres styles directement dans le navigateur via les Chrome DevTools. Je peux entrer ici et me laisser tout régler sur la couleur bleue. Cet exemple n'est pas très pratique , mais comme vous pouvez le voir ici, nous pouvons en fait changer la couleur et tester des choses dans notre navigateur. Maintenant, si je rafraîchis la page ici, cela ne sera pas sauvegardé dans notre document, mais nous pouvons expérimenter différents CSS la volée dans notre navigateur. Nous devons juste nous assurer que si c'est le cas, disons simplement que nous avons fait en sorte que tout soit en bleu, alors nous devrons nous assurer pouvoir simplement récupérer ce copier-coller. Nous devrons simplement nous assurer de le mettre dans notre feuille de style et de l'enregistrer, puis il sera transmis au navigateur. Cela ne fonctionne que dans un sens, pas l'inverse. Si nous créons des modifications ici, cela ne sera pas enregistré ici. Je voulais juste le noter. En fait, je vais supprimer cela et parler principaux concepts du CSS et du HTML. Ici, vous pouvez voir tout s' empiler sur lui-même. Vous avez le h1 et il n'y a plus de contenu après, c' est une sorte de disposition verticale. Mais bien sûr, nous avons quelques exceptions ici. Nous avons, si je devais intégrer une partie de cela dans une balise de lien, une balise et mettre un hachage ici comme espace réservé, vous pouvez voir que cela se trouve sur ce que l'on appelle en ligne. Si je regarde ici pour le calculer, vous pouvez voir que le style d'affichage est intégré, mais pour le reste, le style d'affichage est par défaut en blocs, seuls quelques éléments du HTML par défaut sont intégrés, mais il existe en fait plusieurs types d'affichage différents. Nous pouvons faire du réseau, nous pouvons faire du Flexbox. Ce sont les types d'affichage CSS les plus modernes, et ils sont aujourd'hui beaucoup utilisés dans le développement Web moderne. Parlons-en. Comme je l'ai mentionné, le Web 2.0 est plutôt une mise en page bidimensionnelle. Ce que je vais faire, c'est le supprimer. Commençons par un élément de base commun pour créer des mises en page en HTML , à savoir la balise div. Nous pouvons lire ici que l'élément div n' a aucune signification particulière. Elle représente simplement ses enfants. Il s'agit d'une balise très large qui possède par défaut un style d'affichage de type bloc. Je vais mettre Lorem Ipsum dans ma première division et encore une fois, Lorem Ipsum dans ma deuxième division ici. Je vais appuyer sur Enregistrer. Comme vous pouvez le voir ici, c'est un peu difficile à dire, mais ce sont des blocs d'affichage. Si nous regardons ici, affichez le bloc, mais il n'y a tout simplement pas de marge par défaut. Mais si je prolonge cela, vous pouvez voir que l'un se superpose à l'autre. Faisons quelque chose comme entrer ici et définir un style. Je peux en fait cibler tout cela en mettant simplement div ici, en ouvrant des crochets pour y mettre nos styles. Donnons à toutes nos divs une bordure d' un pixel solide afin de pouvoir voir leur séparation. Ici, vous pouvez voir que nous avons deux divs et, par défaut, ce sont des blocs d'affichage, ce qui signifie qu'ils s'empilent l'un sur l'autre. Maintenant, si je devais entrer ici et définir un type d'affichage différent. Faisons l'affichage en ligne. Maintenant, vous pouvez voir que si je prolonge cela, ils ne sont pas contenus dans deux blocs, alors que j'essaie maintenant de s'asseoir en ligne l'un par rapport à l'autre. Ensuite, le troisième type courant en ligne n'est pas si courant. Nous pouvons en fait passer au blocage en ligne. Comme vous pouvez le voir ici, ils s'empilent les uns sur les autres. Ajoutez ici une largeur maximale de 300. Économisez, ils s'empileront les uns sur les autres moins qu'il n'y ait suffisamment d'espace pour qu'ils puissent être placés côte à côte. Si je reviens ici, en ligne, vous pouvez voir ce que nous avons. Le bloc en ligne est comme un bloc, mais les blocs finissent par se placer côte à côte s' il y a suffisamment d'espace. Si je réduis cette fenêtre, vous pouvez voir qu'elles recommencent à s' empiler les unes sur les autres. Supprimons cela et essayons de créer une disposition à deux colonnes. Je veux avoir un élément pour la barre latérale. Créez une barre latérale ici, puis une pour le contenu principal. Maintenant, si je clique simplement sur Enregistrer, encore une fois, afficher le bloc par défaut, l'un se trouve au-dessus de l'autre. En fait, allons-y. Afin de différencier ces deux divs parce que nous voulons les styliser séparément, nous pouvons utiliser un identifiant ou une classe. L'ID est réservé un seul élément, donc si je devais entrer ici, je pourrais créer une barre latérale d' attributs d'ID. Si je fais cela, je ne peux pas donner d'identifiant de barre latérale à aucun autre élément, sinon les choses commenceront à se casser. Ici, je peux faire un cours comme alternative et l'appeler Main. La grande différence entre class et ID est qu'avec class, je pourrais avoir un autre div appelé Main. Si je devais copier et coller ça, je pourrais avoir un autre div appelé Main et ce serait bien. Alors que je ne pouvais pas avoir deux divs avec le même identifiant. C'est la différence entre l'identifiant et la classe. Lorsque nous développons des expériences frontales, nous utilisons la plupart du temps des classes, même si nous ne nous attendons à les utiliser qu'une seule fois. La classe fonctionne bien dans la plupart des situations. Je vais appeler cette barre latérale mais en fait, avant de le faire, je vais simplement vous montrer comment nous ciblons un identifiant dans notre feuille de style ici. Nous utilisons le hachage pour une barre latérale d'identification. Ensuite, nous mettrions nos styles ici, et cela ne ciblerait que l'élément ayant l'ID de la barre latérale. Pour Main, ce que nous allons faire c'est qu'il y a une classe de main. Nous utilisons un point, donc .main, puis nous ciblons maintenant tous les éléments qui ont pour classe Main. Je vais juste suivre ces deux cours, alors vas-y. Barre latérale de classe. Allons ici et mettons un point ici, parce que maintenant, en classe, et mettons-les l'un à côté de l'autre. Permettez-moi de revenir en arrière, je veux voir ces bordures pour que nous puissions les voir facilement, une bordure d'un pixel plein, ils puissent voir et maintenant, ce que nous allons faire, c'est la barre latérale, je ne veux pas être plus grande que, faisons-en une largeur de 300 pixels. Ensuite, ce que je peux faire, c'est lui donner une plus grande largeur de 500 pixels, vous verrez qu'ils s'empilent toujours les uns sur les autres. Allons-y et, pour les deux, faisons en sorte que celui-ci s'affiche en bloc en ligne, mettant à jour son comportement par défaut de bloc d'affichage. Maintenant, comme vous pouvez le voir, ils s' empilent encore les uns sur les autres, probablement parce que je n'ai pas laissé assez d'espace. Je vais faire 400 pour la zone principale. Bien entendu, cela dépend de la largeur de votre navigateur. Si je l'étend ici, vous pouvez voir qu'ils s' empilent côte Faisons 200 et 400 et maintenant vous pouvez voir que la barre latérale se trouve sur la gauche et le contenu principal sur la droite. Maintenant, ce que je veux faire, c'est placer la barre latérale au ras coins et la raison pour laquelle ce n'est pas actuellement, c'est que si nous regardons Nous avons donc ce panneau ici, des coins et la raison pour laquelle ce n'est pas le cas actuellement, c'est que si nous regardons. Nous avons donc ce panneau ici, si je le pose et que je regarde la balise body ici, regarde calculé, il y a en fait une marge par défaut de huit pixels. Comme vous pouvez le voir ici , marge inférieure huit , marge gauche huit, marge droite huit, marge supérieure huit. Allons-y et je vais cibler l'ensemble du corps. Aucun point ni aucun hachage ne le précèdent , car il cible un élément, puis je vais simplement supprimer cette marge par défaut, donc je vais simplement dire marge zéro. Ensuite, vous pouvez voir la marge autour de tout le corps, le document entier est maintenant supprimé. Nous utilisons maintenant des largeurs de pixels, ce qui n'est pas très réactif car la hauteur ou les dimensions de la fenêtre d' affichage, comme dans la fenêtre sur laquelle nous examinons cette page, peuvent être modifiées. Ce que je veux, c'est que cette barre latérale soit aussi haute que l'espace disponible. Donc, ce que je peux faire, c'est insérer un attribut de hauteur ici et utiliser une unité appelée hauteur de la fenêtre, et ce nombre avant la hauteur de la fenêtre est le pourcentage de la hauteur de la fenêtre que je souhaite utiliser. Je veux utiliser l'espace total disponible, je vais appuyer sur « Enregistrer » et maintenant, comme vous pouvez le voir, la barre latérale est maintenant pleine hauteur et c'est donc sur toute la hauteur de la fenêtre que nous la regardons. Si je devais fermer cette fenêtre, cela augmenterait la taille de notre fenêtre et, comme vous pouvez le voir, elle descendrait complètement, c'est ce que nous attendons de notre barre latérale. Ensuite, nous pouvons aussi le faire ici, c'est un peu plus délicat avec les blocs en ligne, mais je peux en fait utiliser quelque chose appelé calc pour faire une expression mathématique. Je peux en fait faire l'autre unité de largeur de fenêtre. Je peux saisir la largeur de la fenêtre d'affichage et supprimer les 200 dont nous avons besoin pour la barre latérale. Cliquez sur « Enregistrer » dessus et comme vous pouvez le voir, cela ne fonctionne pas vraiment. Nous devrons l'affiner un peu, peut-être le réduire de 250, 210 et c'est là blocage en ligne devient un peu délicat. Ensuite, si nous y allons, vous pouvez voir qu'elle continuera s'étendre jusqu'à la fin, largeur de 100 % dans la fenêtre d' affichage moins 250. Comme vous pouvez le voir ici, il effectue ce calcul pour chaque taille d'écran. Comme je l'ai mentionné, le blocage en ligne est un peu délicat et il n'est pas vraiment utilisé dans le développement Web moderne Le bloc en ligne est une vieille école. Beaucoup de personnes utilisent maintenant Flexbox ou Grid, alors voyons comment nous procéderions dans Flexbox. Ici, nous n'avons pas besoin de placer un bloc d'affichage en ligne sur les éléments individuels. Je vais plutôt entrer dans l'index ici, et je vais créer un div, qui va entourer ces éléments pour créer la mise en page. Je vais appeler cette page conteneur, nous pouvons mettre un tiret ici pour séparer les mots, puis je vais le couper et le coller notre conteneur de pages. Ce conteneur de pages est ce qui va nous donner la mise en page, il nous suffit donc de le styliser. Nous allons entrer ici dans le conteneur de pages, vous allez le placer au-dessus de la barre latérale principale et de l'ordre, et je vais définir le style d'affichage, c'est le parent de ces deux à fléchir. Je vais appuyer sur « Enregistrer » là-dessus. Il suffit d'activer Display Flex pour afficher automatiquement le contenu côte à côte et flexible sur nos écrans. Si nous supprimions ces largeurs, ce que je vais faire maintenant en appuyant sur « Enregistrer », vous verrez toujours que nous les obtiendrons côte à côte, mais il ne sait pas quelle quantité d' espace disponible utiliser. Ce que nous pouvons faire à l'intérieur de la barre latérale, c'est fléchir 1 et à l'intérieur de la barre principale également, je veux utiliser la flexion 1. Nous pouvons avoir un itinéraire Flex 1, le Flex Grow le plus spécifique. C'est, comme il est dit ici, le facteur de croissance. Cela dépend des autres éléments contenus dans ce conteneur. Mais si je clique sur « Enregistrer », vous verrez maintenant que nous obtenons une mise en page réactive à deux colonnes. Si je devais déplacer cela, vous pouvez le voir maintenant, car croissance est réglée sur un sur les deux, elles auront toutes les deux la même largeur et elles augmenteront toutes les deux jusqu'à atteindre l'espace disponible, donc chacune d'elles en aura la moitié. Mais nous pouvons modifier le ratio ici, ce que je vais faire et je veux que la barre latérale ait trois fois moins de largeur, donc je vais diviser la barre principale par trois. Ensuite, comme vous pouvez le voir ici, lorsque j' augmenterai, la section principale s' agrandira trois fois plus que la barre latérale, comme vous pouvez le voir ici. Mais nous voulons donner à cette barre latérale une largeur minimale, car elle va contenir du contenu Je vais donc ajouter ce que l'on appelle une base flexible et je veux qu'elle corresponde à ce que nous avions auparavant, 300 pixels. Je lui donne un indicateur indiquant que je veux qu'il soit de 300 pixels Vous pouvez voir ici qu' il l'étend maintenant et ensuite je peux régler le facteur de rétrécissement Je vais lui dire zéro, ce qui signifie qu'il ne diminuera jamais en dessous de 300 pixels, 300 pixels, c'est un peu trop grand, donc 150, c'est la moitié. Ensuite, lorsque je peux résumer ces trois attributs en un seul attribut, je peux simplement passer à Flex, le premier à grandir, le second à réduire et le dernier à Flex Basic. Je peux les remplacer tous les trois par celui-ci. ce que je vais faire. Cliquez sur « Enregistrer » dessus. Vous voyez, nous obtenons le même résultat. Maintenant, si je clique ici, il devrait y en avoir 150, ce qui, comme vous pouvez le voir, est un peu plus que 150 et c'est parce que le facteur de flexion est toujours un. Je vais me rendre ici et changer les choses jusqu'à zéro, ce qui fera en sorte qu'il ne soit jamais supérieur ou inférieur à 150. En fait, il y en a 152 ici . Si je le calcule, vous pouvez voir que c'est parce que nous avons une bordure de chaque côté, donc si nous voulions qu'elle soit exactement 150, nous devrions supprimer la bordure, ce que je suppose que nous pouvons faire maintenant. Je vais me débarrasser de cette bordure autour des développeurs, appuyer sur « Enregistrer  », et ensuite, si nous regardons la barre latérale, il y en aura 150. Maintenant, pour différencier la barre latérale de la section principale, donnons-lui une couleur de fond et nous allons simplement rendre la couleur d'arrière-plan beige. Vous pouvez voir que nous avons notre barre latérale, elle ne sera jamais inférieure ou supérieure à 150, puis la zone de contenu principale s'étendra à l'espace disponible. Il se trouvera à côté de cela dans ce conteneur de pages. J'espère que cela a du sens avec Flexbox. C'est un moyen vraiment agréable, réactif et flexible pour nous de créer des mises en page bidimensionnelles. Mais il existe en fait une méthode plus récente de mise en page en CSS, à savoir le type d'affichage de la grille, qui n'était pas disponible dans tous les navigateurs il y a quelques années, mais si nous le vérifions aujourd'hui. Si nous effectuons une recherche, si je peux utiliser Google et cliquer sur ce premier lien, nous pouvons réellement voir le taux d' adoption d'une fonctionnalité. Nous allons passer au réseau. disposition en grille CSS, vous pouvez voir qu'elle est largement adoptée, qu'elle est prise en charge par Chrome depuis 2017, Firefox l'est depuis 2017, mais elle ressemble à ceci, donc oui, elle est bien prise en charge. Si vous regardez ici, il est essentiellement pris en charge par 96,25 % des utilisateurs du monde entier, il est donc prêt pour la plupart des cas d'utilisation. Avec toutes ces fonctionnalités modernes qui sortiront, vous voudrez peut-être les comparer à Flexbox. Vous avez obtenu le modèle flexible, 99,05 % de tous les navigateurs s'y sont adaptés. Ce sont quelques-unes des versions les plus récentes, mais la grille CSS est sortie depuis un certain temps, comme vous pouvez le constater, Chrome la supportait déjà depuis de nombreuses années, vous devriez donc être plutôt gentil avec la grille d'affichage. Afin de démontrer la grille d'affichage, je vais créer un autre div ici et appeler cet en-tête, afin que nous puissions placer un en-tête qui se trouve sur notre barre latérale et notre contenu principal. Maintenant, comme vous pouvez le voir, parce que je l'ai placé dans ce conteneur de pages qui est actuellement configuré pour Flex, et il va tous les avoir sur la même ligne. Si je voulais activer le rap, je peux saisir Flex Wrap Wrap, puis si l'un d'entre eux devait devenir trop grand, disons simplement que nous voulions notre en-tête cible ici. Disons que je voulais faire en sorte que l'en-tête ait la largeur, la moitié de l'écran, que vous pouvez voir puis disons que nous avions une base flexible composée de la moitié de l'écran et un rétrécissement flexible, donc il ne sera pas inférieur à la moitié de la largeur de l'écran, soit zéro, alors vous pouvez voir qu'il sera imposé sur une nouvelle ligne, mais dans la plupart des cas, lorsque nous faisons quelque chose comme ça, tout sera empilé sur une seule rangée. Quoi qu'il en soit, c'est Flex-box. Passons à Flex-Box Passons maintenant à grille et nous aurons maintenant un style de grille. Cela va donc s'empiler les uns sur les autres, car nous n'avons pas encore défini la disposition de notre grille Nous l'avons donc défini sur le parent. Je vais me débarrasser de ces attributs de la boîte flexible et de la hauteur ici pour me débarrasser de la largeur 50. Maintenant, nous avons nos trois divs ici. Formatons-les en créant notre modèle de colonne, afin de créer notre div, créer des colonnes de modèles de grille, et nous le faisons via des fractions. Je vais créer une colonne similaire à celle que nous avions auparavant, une colonne d'une fraction, puis la seconde de trois fractions Cliquez sur Enregistrer et comme vous pouvez le voir, nous avons maintenant le même système qu'auparavant, où la première colonne est trois fois plus petite que la deuxième colonne. Si je clique ici, vous pouvez réellement voir la grille, donc si je clique sur le conteneur de page, où se trouve la grille d'affichage, nous pouvons réellement regarder les lignes de notre grille. Mais le problème ici est que notre section d'en-tête que nous voulons étendre à la barre latérale et à la barre principale se trouve dans cette première colonne, puis elle passe à la division suivante, qui passe à la colonne suivante, puis la troisième division s'enroule et entre dans cette même première colonne. n'est pas ce que nous voulons, alors nous allons entrer ici et taper début de la colonne de la grille et nous voulons que cela commence à la première ligne de la grille. Si nous revenons ici, la première ligne lorsqu'elle apparaît, est la première ligne de la grille, droite se trouve la deuxième ligne de la grille puis de l'autre côté se trouve la troisième ligne de la grille. Je veux que ça commence à une ligne, puis que nous puissions aller à la fin de la colonne de la grille et que nous puissions le terminer sur la troisième ligne de la grille si je clique sur Enregistrer dessus. Vous pouvez maintenant voir que l'en-tête s' étend sur les deux colonnes, ce que nous voulons. Nous pouvons en fait mettre de l'ordre, nous pouvons les combiner en un seul attribut appelé colonne de grille, puis nous pouvons faire une barre oblique trois pour démontrer la même chose qui résume essentiellement les deux attributs que nous avions auparavant, le début de la colonne de la grille et la fin de la colonne Nous l'avons placé dans un seul attribut séparé ici par une barre oblique. Nous sommes maintenant confrontés au même problème avant ou pas, mais à la même situation : nous avons défini la deuxième colonne pour qu' mais à la même situation nous avons défini la deuxième colonne elle soit trois fois plus grande que la première, ce qui signifie que lorsque nous augmentons la largeur de la fenêtre, le contenu de la barre latérale augmente trois fois moins. Pour cette première colonne, je vais l'intégrer dans une valeur min-max, ce qui me permet de définir une plage de tailles Je vais donc faire le minimum automatiquement et le maximum 150 pixels sauf cela et maintenant vous pouvez voir que la première colonne ne dépassera jamais 150. Maintenant, ce que je peux également faire, c'est mettre un style ici pour l'écart de la grille, et cela créera un espace entre les éléments de la grille. Nous allons ajouter un espace entre les colonnes et les lignes, donc si nous allons ici, vous pouvez voir maintenant que nous avons cette zone violette qui nous montre l'écart entre les colonnes et les lignes. Une autre chose que nous avons ici est le conteneur de pages a la largeur minimale En gros, nous voulons que cette largeur et cette hauteur soient de 100 % pour couvrir l'espace disponible Comme vous pouvez le voir ici, maintenant, le conteneur de pages couvre tout l'espace. Mais maintenant, vous pouvez voir que l' en-tête est tout simplement trop grand Nous allons donc placer des lignes dans un modèle de grille et placer des lignes pour la première ligne, 150 pour l'en-tête, puis la seconde. Faisons 1 fr, voyons comment cela fonctionne, je pense que 150, c'est trop haut, alors faisons 50, et c'est parti. La première ligne sera 50, puis la seconde sera composée de tout le reste. Maintenant, vous pouvez en voir l'avantage, c'est que nous avons maintenant la barre latérale qui prolonge le couloir vers le bas de la page, et juste pour rendre l' en-tête très évident, donnons-lui également une couleur d' arrière-plan. ne sera pas la plus sexy, mais faisons-en une belle couleur de fond, disons gris foncé, appuyez sur Enregistrer dessus. Vous pouvez maintenant voir que nous avons notre en-tête dans la rangée supérieure, notre barre latérale et notre contenu principal. Maintenant, j'aime bien cet espace entre la barre latérale et le contenu principal, mais je veux que cet en-tête soit aligné sur la barre latérale. Donc, au lieu d'un écart de grille, c'est un espace entre les colonnes et maintenant vous pouvez voir qu'il n'y a pas d'espace entre les lignes, mais qu'il y a un espace entre les colonnes, vous pouvez le voir. En utilisant ces styles, nous pouvons créer une jolie petite disposition en grille et si je devais cliquer dessus, vous pouvez voir qu'elle répond et fonctionne quelle que soit la taille de la fenêtre de notre navigateur. Comme vous pouvez le voir ici, notre mise en page bidimensionnelle commence maintenant à prendre forme. Encore une fois, il y a tellement de choses que nous pourrions couvrir avec du CSS, nous pourrions colorer certains éléments, ajouter des bordures, ajouter un rayon de bordure, modifier la taille de la police, la famille de polices, évidemment toutes ces choses évidentes, mais ce qui est peut-être moins évident et plus Web 2.0, ce sont ces éléments de mise en page. Les éléments de mise en page sont très importants et fondamentaux pour créer des mises en page et ils sont moins évidents que de simplement dire je veux que le texte soit d'une certaine couleur. Tout le monde peut comprendre que la configuration de mises en page réactives est la partie la plus délicate du HTML et du CSS et c'est sur cela que je me suis concentré dans cette vidéo. Nous pouvons simplement la rechercher sur Google si nous voulons quelque chose de spécifique, par exemple, mettre cette police en gras, comment s'y prendre ? C'est assez simple, mais ce sont les choses les plus compliquées. Comme vous pouvez le constater, cette leçon est très différente la leçon précédente où nous avions simplement ce contenu stylisé de base superposé dans un format d' information de base Nous commençons maintenant à créer des mises en page avec CSS et à nous orienter davantage vers cet espace Web 2.0. Mais en parlant de développement Web moderne, il est très important pour nous de nous assurer que notre site Web s'affiche parfaitement sur mobile. Il donc évident que de nombreuses personnes utilisent des sites Web sur leur téléphone de nos jours Il est donc essentiel d'avoir une bonne mise en page mobile. Il est toujours préférable de s'assurer que notre site Web est réactif et fonctionne correctement sur n'importe quel appareil par défaut, mais il est parfois nécessaire de créer un style spécifique pour une largeur d'écran spécifique. Laissez-moi vous montrer comment procéder dès maintenant Je ne voulais pas le fermer, je veux juste le mettre de côté. Laisse-moi le déplacer ici. Si nous cliquons sur cette petite icône ici, nous pouvons basculer entre la barre d'outils de l'appareil. Nous pouvons maintenant accéder à différents appareils ici. Passons à l'iPhone Pro 12. Nous pouvons également cliquer ici pour afficher différentes tailles d'écran, nous pouvons créer une tablette de 768 pixels de large, un grand mobile, un mobile moyen et un petit mobile de 320 pixels de large, ce que je crois que presque personne n' a de nos jours, de toute façon. Ici, nous pouvons voir que tout est juste zoomé, donc ce n'est pas le meilleur. Ce que je veux faire ici, c'est ajouter une balise méta spéciale dans notre tête. Je vais juste le coller dedans. Jetons-y un coup d'œil. En fait, remarquez simplement ce que j'ai fait après avoir cliqué sur « Enregistrer ». Vous pouvez constater qu'il a maintenant un peu plus zoomé et qu'il est plus adapté à nos mises en page mobiles ou à notre fenêtre d'affichage mobile. En gros, la balise est une méta avec le nom de l'attribut viewport et ce contenu à droite, largeur est égale à la largeur du tiret de l'appareil, échelle initiale 1. Maintenant, c'est la norme. Je ne l'ai pas dactylographié. Je l'ai simplement copié et collé parce que vous le mettez simplement dans n'importe quel document HTML et vous obtiendrez cette fonctionnalité. C'est très basique. Vous n'avez pas besoin d'entrer dans les détails sur la façon d'écrire ceci. Vous pouvez simplement copier et coller ceci et cela fonctionnera. Nous sommes ici maintenant dans notre version mobile, et vous pouvez voir que tout est pareil ici. Nous voudrions peut-être réduire la barre latérale sur mobile, mais dans ce cas, nous aurons besoin de tout l'espace possible. Supprimons complètement cette barre latérale sur mobile. Nous le faisons en CSS en utilisant une requête multimédia. Nous commençons par un symbole at, saisissons un média, puis nous devons ouvrir les crochets et spécifier une largeur minimale ou maximale. Une idée fausse que vous pourriez avoir ici est que vous pourriez penser que j'ai inséré quelque chose comme un appareil, puis que j'ai inséré iPhone, puis que je l' applique à tous les iPhones. Mais en fait, ce n'est pas comme ça. Nous devons en fait spécifier une largeur. Nous devons déterminer à quel point de rupture nous voulons que ce changement se produise. Maintenant, comme vous pouvez le voir, nous pouvons voir ces différents appareils et leurs largeurs. Mais un modèle courant consiste à changer la mise en page sur la tablette. Le point de rupture standard de la tablette est de 768. Mais nous pouvons déterminer le point de rupture comme bon nous semble. Nous pouvons même sortir du mode réactif ici et simplement réduire notre fenêtre, tester, lire ce qui s'y trouve, puis écrire quelques requêtes multimédia. Il n'est pas toujours nécessaire que ce soit pour mobile. Mais ici, ce que nous pouvons faire, c'est créer une largeur maximale de 768 pixels, ouvrir des crochets, et maintenant nous insérons du CSS normal qui ne s'appliquera que lorsque la largeur de la fenêtre d'affichage est de 768 ou moins. Permettez-moi d'entrer dans le vif du sujet, d'ouvrir un sélecteur de classe pour la barre latérale, et je vais définir le style d'affichage sur aucun. Cliquez sur « Enregistrer » dessus. Vous pouvez maintenant voir que la barre latérale a disparu. Si je devais l'ouvrir, même si je ne suis pas en mode réactif, largeur de mon écran serait inférieure à 768 en ce moment. Si je le fais glisser au-delà de 768, vous verrez la barre latérale revenir. Ce style ne s'applique qu' à ce que nous lui avons défini. Aujourd'hui, le Web est encouragé à développer d' abord le mobile. Nous pouvons faire le contraire de ce que nous venons de faire ici. Tout dépend de la façon dont tu veux le faire. Définissez la largeur minimale de 768. Cela signifie que nous écrivons ici notre style par défaut, en supposant que c'est mobile, puis que nous écrivons nos styles de bureau ici. Cela signifie que par défaut, nous ne voulons pas que cela s'affiche. Ensuite, une fois qu'il atteint 768, nous voulons qu'il affiche le bloc. Si je clique sur « Enregistrer » ici, nous obtiendrons le même résultat. Si je l'étends au-delà de 768, nous aurons à nouveau la barre latérale. C'est ce que l'on appelle le développement axé sur le mobile, où vous écrivez le CSS, en supposant qu'il sera affiché sur un mobile, puis vous rédigez vos requêtes multimédia pour ordinateur de bureau. En fait, je préfère le faire dans la plupart des cas dans l' autre sens. J'aime d'abord travailler sur un ordinateur de bureau puis créer des styles pour un mobile, pour revenir à ma méthode préférée. Vous pouvez maintenant voir sur ordinateur que nous avons les styles habituels, mais une fois qu'il est inférieur à 768, ces styles commencent à apparaître. Ce n'est qu'un exemple très simple. Nous pouvons également dire, par exemple, si nous voulions quelque chose sur tablette, qui aura une apparence différente de celle du mobile. Disons simplement que notre plus gros mobile que nous prenons en charge, disons 425, peut en fait être mis entre crochets, mis à la fin. On peut dire une largeur minimale de 425 et une largeur maximale de 768. Au lieu de n'en afficher aucun sur la bordure, en fait, laissez-moi le remplacer par 4-5. Il y a un certain chevauchement ici, donc je vais faire 426. Si c'est à 425, cela s'appliquera. Mais s'il monte à 426, cela s'appliquera étant donné qu'il est inférieur à 768. Changeons simplement. Que devons-nous faire avec la barre latérale ? Épargnons ici. Regardez notre vue sur tablette. Créons simplement la barre latérale. En fait, au lieu de la barre latérale, nous allons simplement entrer dans le conteneur de pages, monter ici et récupérer ceci. Calculons la largeur maximale de la première colonne. Disons 50 sur la taille de l'écran. Maintenant, vous pouvez voir que c'est probablement un peu trop bas. Peut-être que j'en arriverai à 100. Ensuite, vous pouvez voir que si la taille de l'écran est supérieure à 768, nous aurons une première colonne qui ne dépassera pas 150. Mais une fois que nous serons en dessous de 768, nous voudrons que ce soit un maximum de 100. Vous pouvez voir ici que cela apparaît maintenant dans nos outils de développement. Ensuite, si nous passons à moins de 425, donc je vais faire défiler la page jusqu'à 425, vous pouvez voir que cela ne s'applique plus. La barre latérale, si nous cliquons ici, n'en affiche car cette requête multimédia est maintenant en vigueur. C'est ainsi que nous créons des styles distincts pour différents appareils. Cela se fait en fonction de la largeur de l'écran. Peu importe que vous utilisiez un appareil ou un navigateur normal et que vous le mettiez à jour de cette manière, nous pouvons même effectuer des requêtes réactives pour des écrans géants. Permettez-moi d'ouvrir ceci et nous pourrons passer à un grand ordinateur portable de 1440 pixels. Si je vais ici, nous pouvons accéder à un écran 4K et examiner les styles sur un écran 4K. Peut-être voulons-nous donner au conteneur de pages une largeur maximale pour quelque chose. Nous pouvons en fait affecter n'importe quelle plage de largeurs d' écran ou de largeur de fenêtre sur laquelle la page Web est affichée. Ce n'est pas seulement pour le mobile, mais pour le mobile, c'est ainsi que nous le ciblerions. Nous déterminerions la largeur maximale des téléphones que nous souhaitons prendre en charge, puis nous y appliquons un style distinct. Je voulais ajouter le SaaS dans cette vidéo, mais il semblerait que nous parlions de ce sujet depuis un bon moment. Je vais séparer la discussion sur le SaaS et aborder cette question dans la prochaine leçon. Le SaaS est un préprocesseur du CSS, il est donc très pertinent pour ce que nous faisons ici. Ça nous facilite un peu la vie. Si le SaaS vous intéresse, cliquez sur la vidéo suivante. Sinon, vous pouvez passer à JavaScript. 6. Sass: Dans cette leçon, nous allons parler de Sass, qui signifie des feuilles de style syntaxiquement géniales. Il s'agit d'un langage de script préprocesseur qui est interprété ou compilé dans des feuilles de style en cascade, appelées CSS. Maintenant, cela vous est probablement passé par dessus la tête. En gros, Sass, comme nous en avons parlé dans les vidéos précédentes, il n'y a que trois choses le recharger dans le navigateur ou le navigateur interprète son code HTML, CSS et JavaScript. D'où vient Sass ? Sass est en fait un CSS doté super pouvoirs, mais pour l'exécuter dans notre navigateur, nous devons le compiler en CSS, et c' est là que la partie préprocesseur entre en jeu. Ce que nous allons faire, c'est suivre ce processus maintenant et développer notre application ou notre page Web un peu plus notre application ou notre page Web avec Sass. Je vais faire glisser mon navigateur ici, lancer ça ici. En fait, je pourrais étendre cela ici pour la partie installation de cette vidéo. Dans le code VS, nous pouvons accéder à notre panneau Extensions ici et charger quelque chose appelé le compilateur Live Sass de Glen Marks. Encore une fois, si vous ne l'avez pas encore installé, il vous suffit de rechercher dans le champ de recherche ci-dessus, compilateur Live Sass, puis vous le trouverez ici, puis vous cliquez simplement sur « Installer ». Pour moi, je l'ai déjà installé, donc il dit désactiver ou désinstaller. En gros, c'est le moyen le plus simple de commencer à compiler Sass dans le code VS. Juste pour que vous le sachiez, il existe de nombreuses méthodes et de nombreux outils pour compiler Sass. C'est le moyen le plus simple, car nous pouvons le faire sans aucune configuration supplémentaire. Tout ce que nous avons à faire est d'installer cette extension spéciale , puis cette extension spéciale , puis nous pouvons aller ici. Le bouton n'apparaît pas encore car nous devons en fait créer une feuille de style, mais nous pouvons aller ici et créer un styles.scss. Vous pouvez maintenant voir le logo de Sass apparaître et si je clique sur « Entrée », vous pouvez voir qu'il démarre et maintenant nous avons ce bouton pour compilation en direct de Sass ou SCSS en CSS. Techniquement, c'est du SCSS et Sass est un peu différent, mais SCSS est meilleur à mon avis car le CSS est rétrocompatible avec SCSS. Ce que je veux dire par là, c'est que je vais vous le montrer tout de suite. Je vais récupérer tout ce code, le couper du fichier styles.css, coller dans style.scss. En fait, je l'ai mal orthographié, c' est censé être styles.scss. Comme vous pouvez le voir ici, celui-ci est désormais vide. Si nous allons ici, nous avons perdu tous nos styles, mais ce que nous pouvons faire ici, c'est cliquer sur ce bouton pour Watch Sass. Maintenant, notre fichier styles.css est rerempli et, en fonction nos paramètres dans le compilateur Live Sass, vous pouvez voir que des attributs supplémentaires ont été ajoutés. Je pense que dans ce cas, il ne s'agit que d'un attribut supplémentaire et d'une petite référence à une carte source ici. Vous pouvez voir que nous avons une carte source qui nous aide à retracer code depuis le code compilé jusqu'au préprocesseur ici. Comme vous pouvez le voir ici, notre CSS a traité et nous avons maintenant tous nos styles. Maintenant, la dernière vidéo a été un peu plus longue que prévu. J' allais en fait intégrer d' autres fonctionnalités à notre petite application Web ici. Faisons-le, puis refactorisons avec SCSS. Je vais l'écrire ici. Ce compilateur Sass live surveillera tout changement ici , puis il sera mis à jour. En fait, je vais l'éteindre pour le moment. Les boutons s'allument. Je dois déplacer ça. Cliquez sur « Regarder », supprimez-en pour l'instant, puis je supprimerai tout cela pour le moment. J'ai pris un peu trop d' avance là-dessus. En fait, développons cela un peu plus avec du CSS. Je veux créer un menu de barre latérale dans ma barre latérale, donc je vais l'ouvrir. Ce que je vais faire est une convention similaire à ce que l'on appelle BEM, Block Element Modifier. En gros, c'est juste une convention sur la façon dont je nomme les classes. Celui-ci, comme il se trouve dans une barre latérale, je peux accéder à la barre latérale et si vous vous demandez ce que c'est, c'est Emmett, donc je peux faire point, puis le nom de la classe appuyer sur Tab et cela créera un div avec ce nom de classe. Je vais appeler cette barre latérale menu. Ensuite, vous pouvez voir que nous avons un div, mais disons simplement que nous voulons que ce soit une liste pour que je puisse la modifier, mettre le nom de l'élément devant celui-ci, puis appuyer sur « Tab », et maintenant nous obtenons une liste non ordonnée avec la classe du menu latéral. Ensuite, nous pouvons entrer ici et ouvrir quelques balises de liste. En fait, nous voulons des liens ici, alors mettons-en quelques liens. Je vais mettre le lien 1 , puis le copier. Lien 2, lien 3, renommez ici. Nous allons maintenant avoir un menu de barre latérale ici et, bien sûr, je ne veux pas le style standard des liens et des listes. Dans ce cas, cela peut être pratique dans le contenu principal, mais ici, nous essayons de créer un menu, je dois donc inverser la tendance. Je vais y aller avant les requêtes multimédia et je vais taper dans le menu de la barre latérale. Si nous regardons ici et que nous les inspectons, nous pouvons voir quels styles sont réellement générés automatiquement pour ces éléments. Je vais aborder cette question. Ici, nous pouvons voir notre menu de barre latérale et vous pouvez voir le type de style de liste. Si nous devions entrer ici, testons-le d'abord dans ce navigateur, listons, styles, types, puis vous pouvez voir ici que nous pouvons modifier ces éléments ici. Nous ne pouvons rien faire. Nous pouvons supprimer ces points. Permettez-moi de le copier et de le coller ici, et puis nous obtenons également rembourrage de 40 pixels à partir de la gauche. Je vais également supprimer cela, en appuyant sur la gauche : 0. Nous y voilà. Je veux toujours un certain niveau de rembourrage, donc je vais faire un réglage général du rembourrage. Juste dans cette section, je vais en faire 10 pixels. Si nous regardons le menu de la barre latérale, nous pouvons voir qu'il contient 10 pixels de rembourrage. Tout le contenu du menu de la barre latérale aura taille de 10 pixels en essayant, mais nous avons aussi une certaine marge en haut et en bas, il semblerait. Je vais donc entrer dans le vif du sujet, je vais regarder le calcul ici. Nous avons environ 16 pixels de marge en haut et en bas. Je vais supprimer les marges en mettant la marge zéro et le tour est joué. Maintenant, je veux me débarrasser du style de la balise de lien. La façon dont je peux le faire en CSS est commencer par sélectionner le menu de la barre latérale et si je mets un espace, je peux y sélectionner des enfants . Je vais sélectionner les éléments de la liste qui s'y trouvent, mais dans ces éléments de liste se trouvent des balises, ce qui me permet d'y effectuer deux niveaux d'imbrication. Je vais rechercher les balises de lien dans une balise d'élément de liste dans cet élément de menu de la barre latérale. Ensuite, ce que je vais faire, c'est de faire à nouveau référence à ce que nous voyons dans un navigateur ici, en regardant vers le bas. Souligner la décoration du texte, retirons-le. Décoration de texte. Aucune. Nous voulons absolument que le curseur reste pointeur pour indiquer qu' il s'agit d'un lien, comme vous pouvez le voir ici. Nous voulons que la couleur soit, faisons en sorte qu' elle soit noire pour le moment. Je vais appuyer sur « Enregistrer » là-dessus et comme vous pouvez le voir, ils ont l'air beaucoup plus normaux maintenant. Nous voudrions peut-être leur montrer un peu plus clairement qu'ils sont cliquables. Ce que nous pouvons faire, c'est ajouter une pseudo-classe ici. Encore une fois, je vous présente un tas de nouveaux CSS dans cette vidéo, mais encore une fois, si vous voulez approfondir le HTML et le CSS, vous pouvez consulter mon autre cours. Mais ici, c'est ce qu' on appelle une pseudo-classe. J'ai mis deux points ici, puis je mets le pointeur de la souris. Ce que nous pouvons faire , c'est peut-être ramener cette décoration de texte, mais uniquement en survolant. Je vais souligner le texte pour décorer le texte , puis vous verrez que nous pouvons voir que les liens sont ou que nous indiquons à l'utilisateur qu' il s'agit de liens en modifiant le curseur et en le soulignant. Cool, créons également un menu d'en-tête. Je vais monter ici et au lieu d'un en-tête, je vais faire exactement la même chose. Je vais créer un UL avec une classe de menu d'en-tête, allez ici et copions ceci ici. Sauvegardez ça. Nous allons donner style légèrement différent à celui-ci. Sous en-tête, je vais créer un ensemble de règles pour le menu d'en-tête. Encore une fois, supprimez le type de style de liste, et ce que je veux faire, c'est affiche pas sur lui-même. Je veux qu'il s'affiche sur l'écran. Ce que je vais faire, c'est Display Flex. Vous y voilà. Maintenant qu'ils sont côte à côte , mais qu'ils sont trop proches, je vais donc faire un écart de colonne de 10 pixels. Voilà, ils sont séparés. Ensuite, je vais utiliser cet autre attribut dans Flexbox appelé justify content center et qui placera les liens au centre. là que tu peux le voir. Formatons ensuite ces liens. Encore une fois, nous pouvons faire exactement la même chose que la dernière fois. menu d'en-tête UL LI. En fait, pas l'UL, car nous sommes déjà dans un UL. Ensuite, nous allons régler la décoration du texte zéro et qu'allons-nous faire pour la couleur ? Encore une fois noire, disons, et peut-être que nous ferons la même pseudo-classe. Je vais simplement copier cela en mettant la pseudo-classe à la fin du survol , puis nous pourrons personnaliser notre état de survol , la décoration du texte et le souligner. C'est ce que nous allons faire. Je vais appuyer sur « Enregistrer » là-dessus. Nous pouvons maintenant voir que nous avons notre menu dans notre en-tête et notre menu dans notre barre latérale. Ce que nous avons fait ici, c'est que vous pouvez voir que nous avons fait quelques imbrications. Nous avons quelques couleurs. Ce que nous pouvons faire dans Sass, c'est transformer notre nidification. Le compilateur Live Sass a été désactivé. Je vais l'ouvrir. Ce que nous allons faire, c'est copier tout cela. Je vais me diriger vers styles.css, coller ici, puis nous voulons nous assurer que toutes les modifications que nous apporterons ici seront répercutées dans styles.css. Ne l'activez pas et vous aurez donc votre CSS copié ici. Sinon, cela remplacera ce que vous avez écrit ici. Ensuite, je cliquerai sur « Watch Sass ». Il est en train de regarder. Et comme CSS est rétrocompatible avec le SCSS, tout fonctionne normalement. Maintenant, laissez-moi vous montrer certains des avantages de l'utilisation de Sass. Si nous allons ici, nous ne regarderons plus le fichier styles.css. C'est juste pour le navigateur maintenant. Nous allons travailler dans styles.css. Ce que nous pouvons faire ici, c'est travailler sur notre nidification. Maintenant, comme vous pouvez le voir ici, nous nous répétons. Nous avons le menu d'en-tête trois fois et nous avons li et deux fois ici. Ce que nous pouvons faire, c'est le saisir, le couper, le coller dans les règles de notre menu d'en-tête définies ici, puis je corrigerai l'indentation ici. Comme nous copions d'un menu d'en-tête à l' autre, nous pouvons utiliser le symbole « et| » une fois que nous l'avons intégré. Nous y voilà. Nous pouvons faire « et ». Maintenant, cliquez sur « Enregistrer » et vous pouvez voir maintenant que nous obtenons le même résultat dans notre fichier styles.css. Si je regarde ici le menu d'en-tête li a et la, je le passe ici. Ils sont séparés dans notre fichier styles.css, ce dont nous avons besoin pour notre CSS, mais les voici ensemble. En fait, nous n'avons même pas besoin de la fin dans ce cas. Nous pouvons simplement procéder ainsi et l' imbrication ici est implicite en la plaçant dans l'ensemble de règles. Mais nous pouvons pousser cette nidification encore plus loin. Vous pouvez voir ici que li et a se répètent. Nous pouvons en fait prendre cette partie et l'imbriquer à l'intérieur en y insérant le bout. La fin prend simplement le parent et applique ensuite toute sélection supplémentaire à celui-ci. Nous avons un menu d'en-tête, puis nous allons appliquer ces styles aux balises de liens dans les balises de liste menu d'en-tête afin que vous puissiez voir comment l'imbrication commence à se dérouler ici. Tout fonctionne de la même manière maintenant, et ce que nous pouvons faire pour aller encore plus loin, c'est utiliser le symbole at pour créer un nom de classe lui-même. Découvrez comment nous avons un en-tête et un menu d'en-tête. Ils contiennent tous les deux un en-tête. Ce que nous pouvons faire, c'est le saisir , le couper, puis à l'intérieur, nous pouvons faire un « et » pour représenter l'en-tête à points , puis nous pouvons ajouter un menu en tableau de bord et nous obtenons exactement le même résultat. Si nous regardons le CSS, vous pouvez voir que nous obtenons le même résultat qu'avant. En-tête, menu d'en-tête, menu d' en-tête et survol du menu d'en-tête. Il l'étend au CSS nécessaire, mais dans notre éditeur de code, nous pouvons utiliser cette imbrication insensée au CSS nécessaire, mais dans notre éditeur de code, . Personnellement, je trouve cela pratique lorsque je crée des noms de classe qui vont plus loin. Par exemple, nous pourrions lui donner un nom de classe pour le lien du menu d' en-tête. Comme vous pouvez le constater, nous redoublons à chaque fois sur les mots qui le précèdent. Je trouve cela très pratique de pouvoir utiliser le symbole « et », l'esperluette ici, pour faire référence à la partie précédente et tout imbriquer sémantiquement. Désormais, tous nos styles d'en-tête sont regroupés dans cet ensemble de règles. Ensuite, bien sûr, nous avons tous ces ensembles de règles imbriqués. Nous pouvons faire la même chose pour le menu de la barre latérale. Je vais le faire de l'extérieur vers l'intérieur, je vais saisir cette pièce, qui est la seule qui soit différente de celle-ci. Découpez cette partie, puis placez un « et » pour le survol. Maintenant, nous pouvons simplement déterminer l'état de survol avec les autres styles de l'état standard. Et puis, bien sûr, la différence entre ce sélecteur et ce sélecteur réside dans le li a. Nous pouvons donc simplement le saisir, Nous pouvons donc simplement le saisir, l' imbriquer ici, et puis la dernière étape, nous pouvons saisir la partie qui est différente d'ici à ici, à savoir le menu tiret. Prends ça, vas-y, ajoute le « et ». Débarrasse-toi de ça. Maintenant, si nous cliquons sur Enregistrer, regardez notre résultat. Nous obtenons exactement le même résultat. Je dirais que pour moi, le plus grand avantage de Sass est cette fonctionnalité d'imbrication. Nous avons maintenant tout le code d'en-tête dans un seul ensemble de règles. Nous avons regroupé tous nos codes de barre latérale dans un seul ensemble de règles. Cela peut prêter à confusion lorsque vous essayez de rechercher dans la base de code. Il y a quelques inconvénients. Par exemple, si je clique dessus et que j'entre dans un nouveau projet et que je veux trouver ici , je vais dans le fichier Sass pour le modifier. Je ne peux pas le rechercher comme ça, alors que je pourrais le faire en CSS. Je vais devoir trouver le menu de la barre latérale. Où est-il ? Il n'est pas là non plus. C'est là que les choses commencent à devenir un peu plus difficiles en matière de recherche, mais sinon, j'aime beaucoup cette approche d' imbrication. L'autre fonctionnalité que nous pouvons utiliser dans SCSS concerne les variables. Je peux aller ici et définir des variables. Disons simplement la couleur de l'en-tête , puis qu' avons-nous pour la couleur de l'en-tête ? Gris foncé, puis nous allons créer une couleur de barre latérale. Évidemment, si nous ne l'utilisons qu'à un seul endroit, ce n'est pas très pratique, mais c'est peut-être comme si nous pouvions stocker les couleurs de marque ici. Des trucs comme la couleur des boutons et des trucs comme ça. Des composants que nous allons utiliser régulièrement. On fait du beige ici. Ensuite, au lieu du gris foncé, nous mettrions la variable et toute couleur stockée dans la couleur de l' en-tête s'appliquerait ici. Toute couleur stockée dans la couleur de la barre latérale passerait simplement ici. Si je clique sur « Enregistrer » dessus, vous verrez que nous obtenons le même résultat. Et nous avons toujours du CSS standard dans notre fichier CSS ici. Si vous regardez ici, il n'y a pas de variables, il n'y a pas d'imbrication dans SCSS. Il s'agit uniquement de code SCSS. Cela nous permet de travailler plus facilement avec CSS et nous offre des fonctionnalités supplémentaires. Mais il est très important de noter ici que le CSS compilé, la partie réellement lue par le navigateur, ne sera pas Sass. Il existe d'autres fonctionnalités dans SCSS. Nous pouvons créer des fonctions des requêtes multimédia personnalisées et tout ce genre de choses, mais je ne veux pas être trop complexe dans cette vidéo et dans ce cours. Si vous voulez approfondir Sass, j'ai un cours sur Sass ici sur Skillshare. Cliquez dessus si vous souhaitez en savoir plus. La principale chose que je voulais faire passer ici, c'est ce que fait Sass. L'idée qui sous-tend un préprocesseur, que nous pouvons créer notre propre langage qui se compile dans l'une des trois langues auxquelles le frontend le navigateur répond et nous pouvons également configurer notre environnement de développement avec un outil tel que le compilateur Live Sass pour compiler ce code personnalisé, ce code qui nous facilite la vie en tant que développeur en CSS. Cela étant dit, passons du style pour le moment à l' interactivité. Parlons de JavaScript. 7. Javascript: Dans cette vidéo, nous allons parler de JavaScript. Javascript est ce qui donne de l'interactivité à nos pages Web sur le front-end. J'ai déjà parlé de JavaScript sur cette chaîne de partage de compétences. La plus grande critique que j'ai reçue lors de mes précédentes formations sur JavaScript est qu'elles ne sont pas assez pratiques Dans cette vidéo, je vais donc choisir un exemple assez pratique et réaliste. Je vais ajouter un tiroir latéral à cette page Web, et nous allons avoir un bouton pour ouvrir le tiroir et un bouton pour le fermer. C'est un exemple assez courant dans le monde réel et assez simple. Le codage ne devrait pas prendre trop de temps. Ce que je vais faire, c'est entrer dans index.html. Ici, j'ai déjà fermé le fichier SCSS pour le moment, et je peux le fermer. Cela ne veut pas dire qu'il ne fonctionne plus. Comme vous pouvez le voir ici, cela continue de nous regarder, mais cela ne nous gênera tout simplement pas autant. Je pourrais continuer à développer cela pendant un petit moment. Ici, dans le contenu principal, nous avons évidemment rempli la section d'en-tête et la section de la barre latérale, mais nous n'avons rien mis dans le contenu principal, alors allons-y maintenant. Donnons un titre à notre page, et je dirais simplement haut niveau. En fait, je vais appeler cette page le titre. Ensuite, en dessous, je vais le mettre dans le paragraphe juste pour que cela paraisse réaliste. Ensuite, vous pouvez voir que nous avons un titre de page avec un texte de paragraphe en dessous. Alors là, je vais mettre un bouton. Dans ce bouton, je vais écrire Ouvrir le tiroir. Comme vous pouvez le constater, nous avons dès le départ notre style de bouton par défaut . Si je le survole, vous pouvez voir les couleurs changer. Il s'agit d'un élément de bouton par défaut issu du code HTML. Maintenant, nous allons avoir deux boutons sur notre page Web. Afin de les différencier et de m'assurer que notre ciblage est bien précis, je vais leur donner un identifiant de bouton ouvert. Maintenant, notre tiroir n'existe pas encore, il va donc falloir le créer. Je vais entrer dans le vif du sujet, je vais le faire glisser à nouveau, et je vais créer un nouveau div avec la classe de tiroir. À l'intérieur du tiroir, je vais créer un autre bouton et je vais lui donner un identifiant de bouton de fermeture du tiroir. Ce bouton permet de fermer le tiroir. Ensuite, à l'intérieur des balises des boutons d'ouverture et de fermeture, je vais insérer le texte correspondant, qui est simplement Fermer le tiroir. Ensuite, si vous regardez de plus près, vous pouvez voir que nous avons un div tombe dans notre grille maintenant parce qu'il se trouve dans le conteneur de pages. Nous ne le voulons pas. Nous allons donc le déplacer en dehors du conteneur de pages, et vous pouvez maintenant voir qu'il se trouve toujours en bas, car nous ne lui avons pas encore donné de style. La première chose que nous voulons faire, c'est de le faire dans nos outils de développement, afin que vous puissiez voir cela se produire à la volée. Si j'appuie sur ce bouton ici, une sélection sera créée pour cette classe. Ici, je vais écrire position : absolue. Cela nous permettra de le placer en dehors de la mise en page normale et au-dessus du contenu, ce que nous voulons pour notre tiroir. Je vais maintenant positionner cela de manière explicite. Je vais le faire à zéro pixel en partant du haut et à zéro pixel en partant de la droite. Ensuite, nous voulons lui donner une largeur la moitié de la largeur de la fenêtre d'affichage. Actuellement, nous ne pouvons pas le voir car il n'y a pas de couleur d'arrière-plan différente. Donnons-lui simplement une couleur de fond noire. Nous souhaitons également qu'il étende toute la hauteur de la page. Je vais créer une hauteur de 100 % de la hauteur de la fenêtre d'affichage. Maintenant, vous pouvez commencer à voir notre tiroir se former. Je vais mettre du rembourrage ici pour que le bouton ne soit pas aligné sur le côté. Assurez-vous ensuite de ne pas actualiser la page, car elle n'a pas encore été enregistrée dans notre document Je vais donc copier les styles que nous venons de configurer. Accédez à notre fichier styles.scss. Assurez-vous de ne pas accéder au fichier styles.css si vous utilisez toujours compilateur Live Sass ou si vous prévoyez de l'exécuter à l'avenir, car cela annulerait ces modifications. Passons ensuite à la section «  Avant les requêtes multimédia », copiez-collez dans nos styles de tiroir, juste ici. L'indentation est un peu décalée, mais comme vous pouvez le voir lorsque nous cliquons sur Enregistrer, elle compile, actualise notre serveur live et, comme vous pouvez le voir , notre tiroir se trouve au-dessus. Maintenant, nous devons indiquer si le tiroir est ouvert ou fermé. Ce que je vais faire, c'est descendre ici et utiliser aria , une façon d'indiquer l'état d'un élément aux lecteurs d'écran. Les lecteurs d'écran sont un outil que les personnes malvoyantes utilisent pour faire lire des sites Web. Il est utile d'utiliser cet attribut, car il permet à ces personnes d'accéder au site Web. Nous allons définir aria-hidden sur true ici pour indiquer au lecteur d'écran que cet élément est actuellement masqué. Ensuite, il ne nous reste plus qu' à entrer dans notre CSS et à écrire une règle de style qui reflète cela. Nous ciblons un élément avec un certain attribut via ces crochets, puis nous mettons simplement l'attribut avec sa valeur entre ces crochets. Pour passer au côté de la page, je vais corriger la valeur négative à 100 %. La raison pour laquelle je le déplace hors de l'écran plutôt que de le masquer avec l'affichage : aucune, c'est parce que nous ne pouvons pas ajouter images-clés entre l'activation et désactivation si nous voulons animer le tiroir pour l'ouvrir et le fermer. Au lieu d'afficher : aucun, ce que je vais faire, c'est corriger le négatif à 100 %. Par conséquent, nous ne pourrons pas le voir sur la page à moins, bien sûr, l'utilisateur ne fasse ce que je suis en train de faire, c' est-à-dire faire défiler la page horizontalement. Évidemment, ce n'est pas sympa, alors je vais passer en revue nos styles pour le body tag et définir overflow-x sur hidden. Cela pourrait poser problème à l'avenir si nous voulions faire défiler la page horizontalement pour une raison quelconque, mais pour l'instant, ce hack fonctionnera. À partir de maintenant, tout ce que nous avons à faire pour ouvrir ce tiroir est de remplacer l'attribut aria-hidden par un autre attribut que true, car il n'est que juste négatif à 100 %. Si l'attribut est vrai, par défaut, il sera correctement égal à 0. Je dois également mettre le style ici pour la transition, afin que nous puissions animer le bon attribut. Nous allons lui donner une durée d'une demi-seconde, et la courbe de vitesse, nous allons la régler pour qu'elle soit et la courbe de vitesse, facile à saisir. Maintenant que nous avons ces paramètres, je peux mettre à jour cette valeur via les outils de développement en la modifiant manuellement. Dans l'onglet Éléments, je peux le faire passer de vrai à faux, puis vous pouvez voir que le tiroir s'animera. Si je le repasse à vrai, il s'animera. Bien entendu, les utilisateurs ne vont pas accéder aux outils de développement pour modifier cela Nous avons donc besoin de JavaScript pour fournir cette interactivité sur le front end aux utilisateurs finaux. Créons maintenant notre fichier JavaScript. Je vais étendre cette fenêtre. Au lieu de travailler côte à côte pour le moment, ouvrons notre explorateur de fichiers ici et créons un nouveau fichier nommé scripts.js. La partie scripts n' est pas essentielle. Nous pouvons l'appeler comme bon nous semble, à condition de le nommer avec l'extension of.js, essentielle pour les fichiers JavaScript. Ensuite, nous devons lier ce fichier de script externe dans notre code HTML. Si nous descendons ici, mettons-le avant le body tag de fermeture. Nous pouvons créer une balise de script. Dans la balise de script, nous pouvons placer le JavaScript littéralement ici, mais au lieu de cela, nous allons simplement le lier à une feuille de style externe qui est celle que nous venons de créer. Je vais juste taper le chemin vers ce fichier qui, comme il se trouve dans le même dossier ici, nous pouvons simplement écrire scripts.js. Pour vérifier qu'il s'agit bien d'un lien correct, ajoutons un simple journal de console. Cela ne fait qu'envoyer un message à la console. Cette commande est très pratique pour le débogage, mais pour l'instant, nous allons simplement afficher les mots Hello World. Si je retourne dans mon navigateur , que je le rafraîchis, puis que je passe à la console, vous pouvez voir les mots Hello World apparaître. Si je rafraîchis à nouveau, vous pouvez voir qu'une fois la page chargée , elle chargera ce texte Hello World. Cela permet de vérifier que le script est bien lié, et nous pouvons donc commencer à créer notre JavaScript. Comme mentionné, nous allons utiliser notre JavaScript pour ouvrir le tiroir Nous avons donc besoin d'un écouteur d'événements sur le bouton. Ensuite, cet auditeur d'événements ciblera ce tiroir , puis changera la droite à zéro grâce à cette aria cachée. Si je me trompe, il s'ouvrira et nous placerons un autre écouteur d'événements dessus pour fermer le tiroir. Allons-y et ciblons le premier élément, ce bouton Ouvrir le tiroir. Rafraîchissez-vous ici. Fermez le tiroir. Pour ce faire, nous commençons par l'objet du document. Ensuite, dans les objets du document , nous avons quelques options Nous pouvons utiliser QuerySelector, une méthode fourre-tout dans laquelle nous pouvons placer un sélecteur CSS et récupérer le premier élément correspondant à ce sélecteur. C'est la même chose que dans nos styles. Si nous devions cibler notre barre latérale, nous pouvons le faire comme ça. Dans ce cas, nous ciblons ce bouton spécifique qui possède un identifiant afin pouvoir y placer le hachage et le cibler ainsi. Ou nous pouvons utiliser la méthode getElementById, puis nous pouvons saisir l'ID. Nous avons maintenant sélectionné l' élément. Ce que nous pouvons faire, c'est ajouter ici une autre méthode appelée addEventListener. Le premier argument est de savoir ce que nous allons écouter. Nous allons écouter l'événement de clic. Ensuite, la seconde est la fonction que nous voulons exécuter. Je vais le faire à l' ancienne, comme ça. Ensuite, ici, juste pour vérifier que cet écouteur d'événements est correctement configuré, je vais juste créer un journal de console. Comme je l'ai dit, les journaux de console sont très pratiques pour le débogage et l'exécution d'un processus volumineux. Ce processus est un peu plus petit, mais nous pouvons vérifier que l'écouteur d'événements fonctionne via ce fichier console.log. Ici, si je clique sur « Ouvrir le tiroir », vous pouvez voir dans la console clic apparaît et si je continue à cliquer dessus, le chiffre à côté du clic augmente. C'est ce qui se passe lorsque vous enregistrez valeurs dupliquées sur la console. C'est bien. Nous savons que nous sélectionnons correctement l'élément et nous sommes en mesure d'associer un code à l'événement de clic. Maintenant, je vais entrer ici et cibler le tiroir. Pour cela, je vais utiliser QuerySelector. Il y en a un autre appelé QuerySelectorAll et celui-ci sert à créer un tableau d' éléments au cas où vous voudriez en sélectionner plusieurs. Nous voulons simplement sélectionner le premier qui correspond notre sélecteur CSS et qui sera tiroir. Ensuite, ce que nous voulons faire, c'est exécuter la méthode setAttribute et comme il s'agit d'un bouton pour l'ouvrir, nous allons définir l' attribut aria-hidden sur false, afin qu'il ne soit pas masqué. Si je clique sur « Enregistrer », reviens ici, clique sur « Ouvrir le tiroir », et vous pouvez voir que cela ouvre le tiroir et si nous regardons dans les coulisses le code du tiroir, vous pouvez voir ici que aria-hidden est vrai. Regardez ce qui arrive à aria-hidden lorsque je clique sur ce bouton. Comme vous pouvez le voir, cela met à jour notre code HTML et le rend faux. Cool. Il suffit de suivre à nouveau exactement le même processus avec le bouton Fermer. Je vais entrer ici. Au lieu du bouton Ouvrir, bouton de fermeture du tiroir et au lieu de faux, vrai, mais nous pouvons recycler tout le reste du code. Rafraîchissez-vous ici, ouvrez le tiroir, fermez le tiroir, fermez le tiroir et c'est aussi simple que cela. Maintenant, il s'agit d'un tout petit projet et je le diffuse localement, donc il ne se trouve pas sur Internet. Tout se charge très rapidement, mais à l'avenir, si vous souhaitez placer cela dans un environnement de production, il est préférable d'attendre que tous les éléments de la page soient chargés avant de commencer à charger ces écouteurs d'événements car il est possible que vous essayiez d' attacher un écouteur d'événements avant que le JavaScript ne puisse trouver cet élément. Par souci d'exhaustivité, je vais ajouter un autre écouteur d'événements qui enveloppera l'ensemble de notre code JavaScript. Celui-ci est placé sur l'objet du document. Nous allons ajouter un écouteur d'événements pour cet événement appelé DOMContentLoaded, comme vous pouvez le voir ici. Cela ne dit pas grand-chose, mais en gros, DOMContentLoaded, c'est lorsque, comme mentionné, le contenu du DOM est chargé, donc le contenu de la page est chargé. Je vais récupérer tout ça et le déplacer là-dedans. Cela garantira simplement que tout le contenu est chargé avant d'essayer de joindre ces écouteurs d'événements car nous obtiendrons une erreur si nous ne parvenons pas à trouver un élément avec cet identifiant. Pour résoudre ce problème de chronométrage, nous allons ajouter un écouteur d' événements supplémentaire ici. Voici un exemple assez simple, mais assez courant, et j'espère que vous êtes d'accord. Exemple pratique d' utilisation de JavaScript pour créer interactivité sur votre page tout en ouvrant et fermant un autre élément à l'écran. Bien sûr, nous aimerions y mettre du contenu, peut-être un peu de navigation, peut-être que dans le cas d' un site Web de commerce électronique, vous pourriez avoir votre carte de shopping ici, tout ce que vous voulez vraiment, mais maintenant nous avons au moins la possibilité d'ouvrir et de fermer ce tiroir en utilisant JavaScript. Si vous voulez approfondir le JavaScript, j'ai évidemment mes autres cours ici sur Skillshare. Vous pouvez regarder le cours JavaScript Web Development Fundamentals pour un cours approfondi sur JavaScript. Sinon, nous allons maintenant passer à autre chose et parler de TypeScript, dont le concept est similaire à celui de SAS est un langage de script préprocesseur, sauf que cette fois c'est pour JavaScript. Nous verrons cela dans la prochaine vidéo. 8. Typescript: Dans cette vidéo, nous allons apprendre ou au moins présenter TypeScript. TypeScript est un concept similaire à SASS par rapport au CSS. Le CSS est évidemment ce qui est exécuté dans votre navigateur. JavaScript est également ce qui est exécuté dans votre navigateur, mais SASS est quelque chose que nous pouvons utiliser pour compiler en CSS afin de nous aider en tant que développeurs, même pour TypeScript. Il s'agit d'un script distinct qui est un sur-ensemble de JavaScript. Nous pouvons mettre du JavaScript dans TypeScript et cela fonctionnera comme nous l'avons fait avec SASS, mais la différence, c'est qu'avec JavaScript, c'est un langage de programmation. Il est différent du CSS en ce sens que le CSS est simplement une feuille de style. Les fonctionnalités qui rendent TypeScript intéressant sont très différentes de celles de SCSS ou SASS. Comme il est mentionné ici, il s'agit d'un sur-ensemble syntaxique strict de JavaScript qui ajoute typage statique facultatif au langage. C'est très programmeur E. Si vous êtes un débutant à écouter ça, cela pourrait vous passer par-dessus la tête. Si vous voulez sauter cette leçon, n'hésitez pas à le faire, mais je voulais l'ajouter car elle est utilisée dans le développement Web frontal moderne. Il est devenu très populaire ces dernières années et beaucoup de gens l'utilisent. Pour moi, il m'a même fallu un certain temps pour comprendre les avantages de l'utilisation de TypeScript, mais à la fin de cette leçon, j'espère vous aurez compris à quoi sert TypeScript et si vous voulez réellement l'utiliser. Que ce soit votre introduction à TypeScript. Si vous ne souhaitez pas l'utiliser, ce n' est pas essentiel, sauf si vous travaillez avec une équipe de développement particulière qui l'utilise. Si vous souhaitez en savoir plus sur TypeScript, le site Web se trouve ici, le premier lien de site Web qui apparaît sur Google. Maintenant, pour utiliser TypeScript, vous aurez besoin de Node et de NPM. Si vous ne savez pas ce que c'est, vous pouvez vous rendre sur nodejs.org. Nodejs est un environnement d' exécution JavaScript multiplateforme open source . Tout ce que Node est essentiellement, c'est la possibilité d'exécuter JavaScript, un langage conçu pour les navigateurs Web sur votre ordinateur, sur un serveur, afin que vous puissiez l'utiliser. Ensuite, NPM, qui signifie Node Package Manager, que vous pouvez trouver sur npmjs.com est essentiellement un gestionnaire de packages. Nous sommes en mesure d'installer différents packages créés par des utilisateurs. Vous pouvez les rechercher ici. Vous pouvez considérer ces packages comme différents modules, différents codes prédéfinis créés d'autres personnes et que nous pouvons installer dans notre projet et globalement dans notre système. Pour vérifier que node est installé, vous pouvez exécuter node -v. Ensuite, pour vérifier que NPM est installé, vous pouvez exécuter npm -v, puis vous pouvez exécuter tsc --version pour voir la version de TypeScript que vous possédez. Si TypeScript n'est pas installé, vous verrez qu'il indique command not found : tsc. Ensuite, ce que vous voulez faire est d'exécuter npm install -g typescript, et cela installera TypeScript globalement sur votre ordinateur. Ce que vous venez de regarder était une vidéo préenregistrée parce que je l'ai déjà fait, assurez-vous que node et NPM sont installés. Ensuite, si TypeScript n'est pas installé, suivez les commandes que je viens de mentionner. Je vais fermer ça et je vais le fermer. Une fois celui-ci installé, nous pouvons réellement créer notre premier fichier TypeScript. En fait, avant cela, nous devons créer un fichier tsconfig.json ici, qui n'est que notre fichier de configuration TypeScript. Ici, vous pouvez voir que c'est dans ce format appelé JSON, qui n'est qu'un moyen de stocker des données. Permettez-moi de corriger l'indentation ici. Vous pouvez voir que nous avons ouvert cet objet. Nous avons ajouté cet objet d'options du compilateur, puis nous avons ajouté es5 pour cible, commonjs pour le module et défini la carte source sur true. Comme vous pouvez le voir dans ces commentaires, j'ai essayé d'expliquer ce que fait chacun d'entre eux. La première définit la version cible de JavaScript vers laquelle nous souhaitons compiler. La seconde définit le style du module. Ensuite, en définissant la carte source sur true, c' est-à-dire qu' au moment où nous transpirons notre TypeScript, elle générera également un fichier de carte et ce fichier mappe le fichier JavaScript transpilé au fichier TypeScript d'origine, permettant ainsi de reconstruire le code TypeScript d'origine lors du débogage. Comme je l'ai dit, cela devient un peu technique et de haut niveau, mais nous verrons cela fonctionner très bientôt. Ce que nous pouvons maintenant faire avec notre fichier de configuration TypeScript c'est exécuter la commande TSC, qui signifie TypeScript compile, mais bien sûr, nous avons d' abord besoin d'un fichier TypeScript. Ce que je vais faire est exactement comme nous l'avons fait avec styles.css. Renommez-le simplement en ts et cela devient maintenant un fichier TypeScript. N'oubliez pas que TypeScript est un sur-ensemble de JavaScript, il est donc rétrocompatible. Nous pouvons simplement mettre du JavaScript pur dans un fichier TypeScript et cela devrait fonctionner. Alors ouvrons un terminal. Je vais passer à ici pour faire le terminal, puis lançons simplement tsc pour la compilation TypeScript. Vous pouvez maintenant voir que notre fichier script.js et notre fichier scripts.js.map ont été créés. Si je regarde à l'intérieur, vous verrez que c'est exactement la même chose, à part peut-être que certains espaces sont effacés et puis ce commentaire qui mappe ce fichier à la carte source, ce qui, comme je l'ai dit, lorsque nous avons configuré le fichier tsconfig, nous permet de mapper le fichier JavaScript au fichier TypeScript d'origine ce qui nous aide débogage. Ne vous inquiétez pas trop pour la carte. Nous allons travailler avec ce fichier et, bien sûr, nous allons continuer à charger le même fichier de sortie scripts.js, qui ressemble actuellement à notre fichier TypeScript, mais c'est parce que nous ne l' avons pas réellement modifié pour qu'il soit plus TypeScript E. Maintenant, la raison pour laquelle il s'appelle TypeScript est que nous pouvons être plus précis ici dans TypeScript en définissant quels objets sont de quels types, car en JavaScript, le type d'objet est très vague, il n'est donc pas souvent clair de quel type il s'agit. Nous pouvons en fait spécifier certains objets sous la forme de certains types. Faisons-le en fait maintenant. Comme vous pouvez le voir ici, je ne cesse de faire référence à des objets similaires. J'ai référencé le tiroir deux fois, puis j'ai fait référence au bouton d' ouverture du tiroir et au bouton de fermeture du tiroir. Déplaçons-les dans leurs propres variables. En fait, déplaçons-les en constantes. Il existe deux manières de définir une valeur, alors qu'il existe en fait la variable d'origine en JavaScript, mais maintenant nous préférons utiliser const ou let. Disons si nous nous attendons à ce que la valeur change plus tard. Mais lorsque nous ciblons des éléments spécifiques du DOM, nous ne nous attendons pas à ce que cela change. Nous créons simplement une référence à cet élément. Si je peux apprendre à épeler correctement, je peux simplement le copier et le coller. Je peux le saisir et le régler pour ouvrir le bouton en utilisant le boîtier Pascal, puis je peux cibler le bouton de fermeture en le saisissant ici. Nous sommes simplement en train de refactoriser notre code ici. Évidemment, ce code fonctionne, mais nous ne faisons que le rendre un peu plus agréable. N'oubliez pas que TypeScript et SASS sont destinés à l' expérience du développeur, et non à l'utilisateur final, et celui-ci est donc le tiroir. Je vais juste appeler ça le tiroir. Ensuite, nous avons toutes nos références là-haut. Maintenant, ce que je peux faire, c'est refactoriser cela, remplacer l'endroit où cela apparaît dans le code par ce nom de variable ou ce nom de constante. Je vais entrer ici, je vais ouvrir le bouton. Nous allons également ajouter l'écouteur d' événements. Cela devient simplement un tiroir. Cela devient CloseButton dans le cas de Pascal, CloseButton, puis à nouveau le tiroir. Nous pouvons simplement le remplacer par un tiroir. Maintenant, si nous survolons OpenButton, vous pouvez voir qu'il est écrit HTMLElement. C'est le genre. Si nous passons la souris ici, HTMLElement puis voici Element. Nous pouvons être plus précis et commencer à écrire du TypeScript ici en disant as et en devenant plus précis. Le bouton d'ouverture du tiroir est en fait un élément de bouton HTML. Nous pourrions entrer ici et taper ceci : HTMLButtonElement. Maintenant, si nous passons la souris ici, vous verrez que le type est désormais plus spécifique. Au lieu de HTMLElement, il est désormais défini sur HTMLButtonElement. Si le type n'a pas été détecté automatiquement, nous pouvons le spécifier ici en tant que ButtonElement. Alors celui-ci est juste Element. Ici, nous pouvons dire HTMLDivElement. Maintenant, notre code sait exactement de quel type d'élément il s'agit, mais ce n'est pas particulièrement pratique pour l'instant. Il m'a été difficile de trouver un exemple vraiment pratique mais simple d'utilisation de TypeScript avec ce que nous avons construit jusqu'à présent, mais j'ai trouvé un moyen d' intégrer une fonction ici, et je vais appeler cette fonction ToggleDrawer. En fonction de l' état du tiroir, il va s'ouvrir ou se fermer et nous pouvons créer un bouton si nous souhaitons qui s'ouvre et se ferme à la fois avec cette méthode. Je vais créer la fonction d'une nouvelle manière scolaire et je vais mettre ici une variable pour spécifier si nous voulons qu'elle soit ouverte ou non. Je vais l'appeler IWantItOpen , puis j'utiliserai la syntaxe des flèches pour créer la fonction. Nous avons maintenant une fonction avec un seul argument. Ici, je vais faire une simple question. Je dirais que si IWantItOpen, nous allons définir l'attribut aria-hidden sur le tiroir sur false. Sinon, nous allons le définir sur true. Maintenant, si je clique sur Enregistrer et que je passe la souris dessus, vous pouvez voir qu'après IWantItOpen, cela indique n'importe lequel. Ici, il est indiqué que le paramètre IWantItOpen a implicitement un type quelconque, mais qu'un meilleur type peut être déduit de son utilisation. Au lieu que le paramètre soit de n'importe quel type, nous pouvons spécifier le type dont nous avons besoin. Évidemment, en l'utilisant comme booléen ici, je vais donc mettre deux points ici et dire booléen. Pour ceux d'entre vous qui ne sont pas aussi avancés en programmation, booléen signifie simplement une valeur vraie ou fausse. Maintenant, nous nous assurons que lorsque nous exécutons cette méthode, nous avons certainement un argument booléen qui passe par la méthode. Ce que je vais faire ici , c'est en cliquant sur OpenButton Je vais exécuter cette fonction appelée ToggleDrawer, et nous voulons qu'elle soit ouverte dans cette instance Je vais donc transmettre la valeur true, et aucune erreur n'apparaîtra. C'est bien. Ensuite, en dessous, je vais mettre ToggleDrawer false. J'ai tout bien écrit ici, donc rien ne s'affiche mal. Si je compile le TypeScript, et vous pouvez le voir ici, il se compile en JavaScript. Ensuite, je peux l'ouvrir et le fermer. Nous obtenons exactement le même résultat. Pourquoi utiliserions-nous TypeScript ? Disons simplement que nous n'utilisions pas TypeScript et que j'ai accidentellement saisi, disons simplement une chaîne ici. S'il s'agissait d'un fichier JavaScript, nous ne ferions pas passer ces lignes sinueuses car nous n' aurions pas spécifié que l'argument doit être un booléen. Prenons simplement ceci et je vais le mettre directement dans scripts.js ici. Alors, bien sûr, nous ne pouvons pas écrire cela parce que nous ne sommes plus dans TypeScript. Je vais simplement supprimer tout ce code TypeScript et laisser le code JavaScript. Je vais appuyer sur Enregistrer. Nous avons toujours celui-ci ici. Nous avons mis à jour notre fichier scripts.js et nous y avons placé la valeur de chaîne true et la valeur de chaîne false. Cela pourrait nous sembler bien. Si nous actualisons la page ici, cliquez sur « Ouvrir le tiroir », elle l'ouvrira, mais ne la fermera pas. Pourquoi ça ? C'est intéressant. Si nous accédons à notre console, il n'y aura aucune erreur, car du point de vue de JavaScript, nous n'avons rien fait de mal. C'est ce que je veux dire par langage grossièrement dactylographié. Ce n'est pas du JavaScript très strict Vous pouvez donc créer ces bogues sans erreur Vous ne savez donc pas quel est le problème ni comment le résoudre. Le problème ici est que nous recherchons un booléen ici si ifWantItOpen. La vérité est que l'une ou l'autre de ces affirmations apparaîtra comme vraie car ce ne sont pas toutes deux des chaînes vides. Si je vais ici et suppose que c' est toujours vrai, alors ce journal de console devrait fonctionner. Je dois juste dire que IWantItOpen est vrai. Si je clique dessus sur Enregistrer, allez ici et regardons notre console. Si je clique sur « Ouvrir le tiroir », IWantItOpen est vrai, oui, assez bien. Mais si nous cliquons sur Fermer le tiroir, cela indique toujours que IWantItOpen est vrai. Cela est dû à quelque chose en JavaScript appelé valeurs véridiques. Une chaîne non vide est une valeur véridique, elle est donc vraie même si le contenu du texte est faux. Bien sûr, c'est un petit bogue qui peut être difficile à déchiffrer en JavaScript, mais si nous utilisions TypeScript, vous pouvez voir ici que nous obtenons ces lignes ondulées rouges. Il indique qu'un argument de type chaîne n'est pas assignable au paramètre de type booléen. Il a été spécifié qu'il doit s'agir d'un booléen ici à côté de notre argument, donc il n'attend qu' un booléen et nous aurons donc une erreur avant même de lancer la compilation. Ensuite, si je clique sur tsc, vous pouvez voir que cela ne nous permettra même pas de compiler parce que erreurs sont détectées avant même que nous n'arrivions au résultat final, avant même de passer à la production. C'est bien. Nous préférons capturer nos erreurs au début notre développement plutôt que de les voir apparaître et de devoir ensuite résoudre le bogue. C'est l'avantage de TypeScript. Comme vous pouvez le constater, cela ne nous permettra pas de le compiler tant que nous n'aurons pas résolu ce problème. Nous écoutons simplement le message d'erreur dans TypeScript, puis nous le remettons en booléens. Nous avons éliminé toutes les lignes ondulées. Exécutons à nouveau tsc. Génial. Il n'y a pas eu d'erreur. Si je lance à nouveau ma page Web, vous pouvez voir que tout fonctionne à nouveau correctement. Et voilà. C'est TypeScript. C'est tout ce que je vais aborder aujourd'hui. TypeScript, encore une fois, c'est l'un de ces sujets sur lesquels vous pourriez créer un cours de quatre heures créer un cours de quatre heures. Il s'agit plutôt du programme E, donc pas vraiment pour les débutants, mais si vous le voyez utilisé dans un projet, vous savez au moins à quoi il sert. il s'agit vraiment d'un outil de développement Web frontal moderne nos jours, il s'agit vraiment d'un outil de développement Web frontal moderne, même si c'est un peu plus difficile à comprendre. Je voulais l'inclure afin que vous puissiez voir certains des outils que nous utilisons dans le développement Web frontal en action. est là que se trouve probablement l'une des leçons les plus avancées, probablement la plus avancée de cette classe. Je m'en sors très rapidement. Félicitations si vous continuez à suivre le rythme. Je vais le laisser là pour TypeScript. Passons aux frameworks JavaScript dans la vidéo suivante. 9. Cadres Javascript: Dans cette vidéo, nous allons parler des frameworks frontaux. J'ai actuellement l' état de JavaScript. Il s'agit d'une enquête annuelle. J'ai le site Web correspondant sur mon écran, et nous parlerons de certains des frameworks frontaux JavaScript les plus populaires qui ne font qu'un tout et nous parlerons de certains des JavaScript les plus populaires petit peu. Mais avant d'entrer dans le vif du sujet, je voudrais prendre du recul et discuter de jQuery. jQuery était la bibliothèque JavaScript dont j'ai parlé dans mon premier cours Skillshare intitulé Understanding Web Development, et jQuery était très populaire à cette époque, en 2018 et avant, car ce que l'on appelle un JavaScript Vanilla, c' est-à-dire un JavaScript sans bibliothèque ni framework, n'était pas aussi avancé qu'aujourd'hui. Comme vous l'avez vu dans la vidéo que nous venons avec TypeScript et JavaScript, nous avons pu faire tout cela sans jQuery, et nous sommes maintenant en mesure d'exécuter de nombreuses fonctions que jQuery nous a permis de faire dans les versions les plus modernes de JavaScript. jQuery est devenu de plus en plus obsolète, mais ce n'est pas le seul facteur. Il y a un autre facteur, que nous entrons plus en plus dans le monde des applications Web, où les sites Web ressemblent de plus en plus à des programmes exécutés dans votre navigateur et de moins en moins sites Web dotés de fonctionnalités minimales. Si vous avez de l'expérience avec jQuery ou si j'ai déjà suivi le cours, vous saurez comment fonctionne jQuery. C'est très similaire à ce que nous avons fait ici où nous avons saisi différents éléments. Nous leur avons ajouté des auditeurs d'événements, puis si certains événements étaient déclenchés, nous en déclenchions d'autres. Nous pouvons tout faire en travaillant avec le DOM, alias le Document Object Model, qui comprend essentiellement tous les éléments de notre document HTML. Nous pouvons les modifier à l'aide de jQuery, mais maintenant presque aussi facilement via Vanilla JS. Vanilla, encore une fois, signifie qu'il n'est attaché à aucune bibliothèque ou framework. C'est juste du pur JavaScript. JavaScript, en tant que langage lui-même a rattrapé son retard en termes de fonctionnalités. Mais pour les tâches où nous gérons l'état, exemple lorsque nous introduisons des données sur le front end puis que nous les manipulons sur le front end en temps réel, nous commençons à bénéficier d'une sorte de framework frontal. Je sais que cela semble très conceptuel et théorique pour le moment, mais vous verrez en construisant quelque chose dans Vue dans cette leçon, à quel point il est logique d'utiliser un framework frontal. Avant cela, examinons certains des frameworks et bibliothèques frontaux les plus populaires utilisés aujourd'hui. Ici, selon l'enquête, vous pouvez voir lesquels sont populaires, lesquels sont en baisse, lesquels sont en hausse au moment où vous regarderez cette enquête 2022 ne sera peut-être pas la plus récente. Revenez donc sur l'état du site Web JavaScript et vous pourrez voir quels frameworks sont toujours populaires, deviennent moins populaires, gagnent en popularité. Mais les trois principaux sont React, Vue et Angular, comme indiqué ici. Mais comme vous pouvez le constater, Angular a vraiment perdu en popularité, et celui-ci appelé Preact, que je n'ai jamais utilisé auparavant, est plus populaire qu'Angular à première vue. Ember était quelque chose qui était populaire à l' époque, mais qui continue de décliner. Svelte est devenu très populaire. Il y en a de nouveaux qui apparaissent tout le temps. C'est vraiment dingue. Il y en a trop pour en parler. Mais ceux qui existent depuis un certain temps, React, Vue et Angular, sont toujours très populaires. De toute évidence, Vue a légèrement diminué, mais React a également légèrement diminué , mais c'est parce que la concurrence s'est intensifiée et qu'il y en a de nouvelles, mais les trois principales étaient React, Vue et Angular. Maintenant, la majeure partie de mon expérience se fait avec Vue JS Je pense qu'il est facile de démarrer avec Vue et c'est celui que j'utilise le plus. Dans cette vidéo, je vais montrer ce que fait un framework frontal dans Vue, mais les mêmes concepts d'utilisation d' un framework frontal devraient s'appliquer à React, Angular ou à l'un de ces autres frameworks frontaux. Avant de créer une certaine interactivité frontale avec Vue, examinons un exemple concret. Voici un site Web de commerce électronique que j'ai aidé à créer, et Vue est utilisé dans de nombreux endroits ici. Si nous entrons dans une page de collection, examinons la collection de vieilles bottes. Si nous faisons défiler la page vers le bas, vous pouvez voir que nous avons ces filtres ici. Nous pouvons filtrer par hommes, femmes ou enfants, et ce filtre est ajouté ici, et tout cela sans recharger la page. Nous avons ici beaucoup d' interactivité frontale. Il s'agit en fait d'utiliser une API et de fouiller dans les données dorsales. Mais comme vous pouvez le voir ici, aucun produit ne se trouve dans ces fourchettes de prix, et nous pouvons filtrer par couleur, ce qui nous fournit une interactivité frontale. Nous avons ici notre état, qui est l'état des filtres de collection, et je peux mettre à jour l'état à la volée et la page y répondra. La même chose peut être dite si nous examinons un produit en particulier. Vous pouvez voir ici la sélection des variantes. Ici, il n'y a pas grand-chose qui change lorsque nous changeons de variante, mais comme vous pouvez le voir ici, la taille 7, il n'en reste qu'une. Si nous passons à la version 7.5, cela détermine automatiquement le niveau de stock et nous indique une baisse de stock. Certains d'entre eux ont plusieurs variantes, je pense que c'est le noir ici. Nous pouvons charger de manière plus dynamique ici. Voilà, celui de Kununurra, je pense qu'il a de multiples dimensions. Vous pouvez voir ici que si nous sélectionnons certaines options et trouvons une variante qui n'existe pas, elle indiquera « désolé, n' est pas disponible » et nous masquera le bouton Ajouter au panier. Mais si nous en sélectionnons un qui est disponible, nous avons un panier ici, et ce panier est également Vue. Nous pouvons mettre à jour le nombre d'articles dans ce panier, puis le sous-total ici et le sous-total ici augmentent, et nous pouvons même supprimer complètement cet élément sans recharger la page. Vous pouvez voir que certaines fonctionnalités de l'application sont disponibles sur notre page d'accueil. C'est un grand pas en avant par rapport au Web 1.0, qui ne fait qu'afficher des informations sur la page. Créons en fait une fonctionnalité de type similaire ici. Refactorisons le code du tiroir , puis ajoutons autre chose. Pour le tiroir, retirons ce bouton du contenu principal et mettons-le peut-être dans le menu de la barre latérale. Voyons voir. Tiroirs ouverts, tiroir fermé. OK, cool, puis remplaçons cette page par une page produit. Soyez indulgent, je vais créer une division de produit et à l'intérieur de cette division de produit, je vais avoir deux colonnes, une pour les informations sur le produit, puis une pour l'image, et nous allons commencer par la statique. Je vais prendre quelques images et les insérer dans notre dossier ici. Le produit en question sera une chaussure Nous avons donc du blanc à rayures noires et la deuxième variante sera le noir à rayures blanches opposé Ce sont deux images WebP. Je vais revenir ici et commençons par le noir à rayures blanches. Je vais y mettre cette image, puis je mettrai les informations sur le produit pour cette chaussure, qui est une chaussure Nike. Il s'agit d'une Nike Air Force 107. Je crois que le nom Air Force est composé de deux mots. Ensuite, je vais créer un div avec la classe de prix ici. Je vais mettre le prix de 170€ en dessous. Je vais mettre une liste déroulante pour sélectionner la variante que nous voulons. Nous l'avons fait dans la vidéo sur HTML. On peut le mettre dans l'option, noir avec bande blanche. La seule chose que nous n'avons pas faite dernière fois, c'est de définir une valeur pour cela. La valeur est que ce sera noir avec une bande blanche. voilà, puis la deuxième valeur sera l'inverse. Blanc avec bande noire et puis ici, blanc avec bande noire. Je vais appuyer sur « Enregistrer » là-dessus. Regardons à quoi cela ressemble dans notre navigateur. Comme vous pouvez le voir ici, l'image est gigantesque et il faut y apporter un certain style . Revenons en arrière. Nous utilisons toujours SAS ici. Allez dans le fichier styles.css, et allons-y avant les requêtes multimédia. Ce n'est pas censé être ici, c'est uniquement censé figurer sur le CSS de sortie. Je vais m'en débarrasser, puis nous pourrons ajouter les styles des produits, et comme nous utilisons SAS, nous pouvons utiliser tous les outils d' imbrication à notre disposition. Ce que je vais faire, c'est ne pas trop parler mon schéma de pensée avec ces styles, car nous avons déjà parlé du CSS, mais je vais simplement ajouter quelques styles ici pour nous aider à démarrer, car dans cette leçon, nous allons essayer d'en savoir plus sur Vue. Je vais configurer le produit pour qu'il affiche grille, puis nos colonnes de modèle seront 1FR, une, donc deux colonnes de taille égale. Je vais faire en sorte que la largeur maximale de cette zone soit de 100 %. Parfois, les limites de l'image peuvent sortir de son contenant, nous voulons donc éviter cela. Je vais ajouter un peu de rembourrage à toute cette zone, 20 pixels de rembourrage, puis un espace de 20 pixels entre ces deux colonnes. Ensuite, comme nous utilisons SA, je peux simplement imbriquer l' image qui se trouve à l'intérieur du div avec des produits et je peux également modifier cela. Encore une fois, nous voulons que la largeur maximale soit de 100 %, et je ne pense pas que nous ayons besoin de spécifier le début et la fin. Si je vais ici, ce n'est pas grave. Cela devrait fonctionner. Je ne sais pas pourquoi c'est le cas. Ça fonctionne un peu mal ici. Laisse-moi le charger à nouveau. Nous y voilà. Nous y voilà. Nous pouvons toujours ouvrir notre tiroir ou consulter la page de notre produit et y voir notre image. Je pense qu'il est plus logique d'avoir l' image sur le côté gauche. Je vais le déplacer. Image sur la gauche, puis informations sur le produit sur la droite. Vous pouvez voir ici que lorsque nous modifions notre liste déroulante, rien ne se passe car, bien sûr, nous devons mettre à jour l'image, le prix si nécessaire, et toute autre information lorsque nous mettons à jour ici. Maintenant, essayons d'abord cela dans Vanilla JavaScript et voyons comment cela fonctionne. Cette fois, je ne vais pas le mettre dans les scripts ici. Ce que je vais faire, c'est le mettre en ligne pour que nous puissions le voir sur la même page. Allez en dessous ici, sous les produits, et saisissez le script. Avant d'écrire des récepteurs d'événements destinés à interagir sur la page, je vais créer un tableau de variance Je vais donc dire product_variants. Je ne pense pas que nous en ayons besoin pour le moment. Donne-nous un peu plus d' espace. C'est sympa. Ensuite, je vais ouvrir un tableau, et ce sera un tableau d'objets. Passons aux premiers attributs. Ainsi, chaque variante aura un identifiant associé à un identifiant d'un style. Ce sera juste ce qui se trouve dans ce champ de valeur, donc le premier sera noir avec des rayures blanches ou plutôt une bande blanche au singulier. L'image va être liée à l'adresse de l'image. Avec la bande noire à rayures blanches, nous y sommes. Copiez simplement cette adresse, puis le prix de 170€. Je vais copier cet objet, créer la deuxième variante à partir de cela. L'identifiant sera deux, puis au lieu du noir avec une bande blanche, blanc avec une bande noire. Ensuite, faisons en sorte que le prix soit légèrement différent afin que nous puissions apporter un autre changement sur la page. Mais en réalité, ils sont tous les deux au même prix sur le site Web de Nike. Nous pouvons maintenant commencer à écrire à nos auditeurs d'événements. Comme je vous l'ai déjà montré, je veux m'assurer que les éléments de la page ont d'abord été chargés Je vais donc ajouter un écouteur d'événements pour contenu DOM de cet événement chargé, puis ouvrir une fonction ici. Maintenant, cela ne fonctionnera que lorsque tout sera chargé sur la page . Dans ce cas, je vais cibler cette sélection ici. Donnons-lui une classe, une classe de produits, sélectionnons des variantes. Appelons-le comme ça. Je vais descendre ici. Des documents. En fait, séparons-les. Vous pouvez le voir ici. Il y a une sélection ici que nous ciblons. Documents, sélecteur de requêtes, puis nous pouvons le cibler par cette classe. N'oubliez pas que nous mettons le point dedans en premier pour indiquer la classe, la sélection de la variante. Cela nous donnera l' élément de sélection, qui est la liste déroulante, puis nous allons ajouter un écouteur d'événements pour l'événement de changement. Lorsque cela aura changé, nous écrirons ici une fonction. Je vais fermer ça. En fait, nous voulons récupérer l'élément à l'origine du changement, afin de pouvoir le faire en insérant un argument ici, puis en le déconnectant. Avant de prendre davantage d' avance, vérifions-nous simplement que cela fonctionne. Je vais être capable de trouver les cibles actuelles de l'événement, c'est-à-dire l'élément sur lequel l'événement s'est déclenché. Ouvrons notre console, puis si je change cela, vous verrez que nous recevons le code HTML pour le retour de sélection. Ce que je vais faire, c'est enchaîner la valeur ici, appuyer sur « Enregistrer » pour actualiser, et ici vous pouvez voir que la valeur est blanche avec une bande noire. Lorsque je sélectionne le noir avec une bande blanche, nous récupérons la valeur. Maintenant, ce que nous pouvons faire, c'est commenter cela et renvoyer l'objet à partir de cette variance maintenant que nous savons lequel nous essayons de sélectionner. Tout d'abord, je vais stocker cette valeur en tant que constante, donc je vais dire que le style sélectionné constant est égal à la valeur qui en ressort. Ensuite, je vais sélectionner la variante du produit en utilisant une méthode de recherche. Ce que nous pouvons faire, c'est cibler l'ensemble du tableau ici, puis nous pouvons trouver un élément spécifique dans le tableau en utilisant find. Cela peut sembler un peu bizarre mais dans la fonction ici, nous pouvons passer en revue chacune des variations Je vais donc taper une variante, nommez-la. Ensuite, nous mettons ici la condition après le retour de l'objet variant que nous souhaitons renvoyer. Renvoie le style de variante, qui est l'attribut que nous essayons de faire correspondre au style actuellement sélectionné. Passons maintenant au journal de la console pour voir si cet objet revient avec succès. Actualisation de la variante du produit ici. Maintenant, si je passe ici, vous pouvez voir que nous avons récupéré l'objet dans son intégralité. Nous pouvons utiliser cet objet pour mettre à jour les différents éléments de notre page produit. Ensuite, il suffit de spécifier partout où nous voulons que cela change. Nous devons sélectionner tous les différents éléments et mettre à jour manuellement leurs attributs. Regardons l'image, nous allons donc passer au document, sélecteur de requêtes, puis nous allons créer des produits, des images. Nous utilisons un sélecteur CSS pour le trouver ici, puis nous mettrons à jour ce fichier, le SRC, en fonction de la nouvelle variante de produit que nous avons sélectionnée, et nous trouverons l'attribut Image correspondant. Ensuite, nous allons mettre à jour le prix, qui est, je pense, le seul autre jusqu'à ce que nous commencions à ajouter plus de prix au produit, puis pour celui-ci, nous devons simplement modifier le prix en points de la variante HTML interne du produit pour obtenir le prix de l'objet. Très bien, cliquez sur « Enregistrer », actualisez, et maintenant vous pouvez voir quand l' événement de modification est déclenché, nous déterminons l'objet qui contient toutes les informations, puis nous échangeons manuellement le code HTML interne de cet élément et le SRC de cet élément pour modifier l'image qui s'aligne sur l'objet nouvellement sélectionné. Maintenant, si l'on prend un exemple simple comme celui-ci, il n'y a que deux points sur lesquels nous modifions des informations. Vous pouvez parfaitement utiliser le JavaScript Vanilla ici. Mais le problème que nous avons ici est pas vraiment un, mais c'est quelque chose qui peut être amélioré, c'est que nous devons le spécifier. Cela commence par un certain SRC, avec une certaine image, et cela commence par une certaine option sélectionnée, un certain prix, puis à chaque sélection, nous devons trouver la variante dans la liste ici, ce qui est très bien. Mais ensuite, nous devons mettre à jour manuellement tous les éléments. Il n'y en a que deux ici, donc ce n'est pas grave. Mais lorsque nous commençons à avoir un projet plus important, qu'il y a une description du produit, peut-être différentes variantes, des données qui se nourrissent des autres données, cela peut devenir ingérable. C'est pourquoi nous avons quelque chose comme un framework frontal. Nous disposons d'un framework frontal pour de multiples raisons, mais l'une des principales est la réactivité. Maintenant, pour comprendre cela, nous allons devoir le voir en action. La façon dont je vais procéder maintenant est de refactoriser ce code dans Vue. Parlons maintenant de Vue. Vue est l'un des trois frameworks frontaux populaires que j'ai mentionnés au début de la vidéo. React Vue et Angular, et Vue est le framework frontal avec lequel j'ai le plus d'expérience Je vais donc utiliser Vue comme exemple pour cette vidéo. Vue est également très facile à configurer et à intégrer à n'importe quel projet sur le Web. Que vous utilisiez la CLI pour créer une application complète basée sur Vue ou que vous l'introduisiez simplement dans certaines pages. Vue est assez flexible, donc j'aime l'utiliser et je pense que c'est un bon choix pour cette vidéo. Si vous souhaitez en savoir plus à ce sujet, vous pouvez vous rendre sur Vue js.org. Vous pouvez l'installer de différentes manières, mais nous allons utiliser la méthode CDN. CDN, qui signifie réseau de diffusion de contenu. Nous pouvons essentiellement importer le script à partir d'une source externe, puis commencer à l'utiliser dans n'importe quel fichier HTML. ce que je vais faire, je ne vais pas utiliser celui-ci ici. Si nous revenons ici, je vais maintenant commenter cela car nous allons le faire dans Vue. Avant la balise de script, je vais insérer notre référence à la dernière version de développement de Vue, c'est ce que nous obtiendrons à partir d'ici, https://umpkg.com/vue@next. Ensuite, ce que nous allons faire, c'est créer notre application Vue. Nous avons besoin d'un objet d'options, je vais donc l'appeler options. Ce sera un objet et c'est là que nous avons défini tous nos paramètres pour l'application Vue, puis ici je vais écrire Vue Creates App. Le premier et le seul argument sera ces options, cet objet qui contient les options. Ensuite, je vais enchaîner une méthode de montage par points, puis nous devons déterminer où nous allons la monter. Passons à cette zone principale et exécutons l' application dans cette division. Je pense que nous sommes déjà dans la division, alors sortons. Voici le div complet de la section principale, donc je vais le copier et le coller ou le couper et le coller en dessous. Nous voulons la garder en dehors de la division que nous ciblons, et appelons-la Vue App. Ensuite, nous pouvons aller ici monter l'application Hash Vue. À l'intérieur de ces options, nous pouvons stocker des données Nous le faisons donc en ajoutant une méthode, puis cette méthode renvoie un objet, puis nous pouvons placer cet objet dans nos variantes de produit. Nous pouvons simplement copier ces deux objets et les ajouter ici. Ils sont actuellement commentés, donc je vais simplement supprimer ces commentaires Nous avons maintenant des données sur notre instance Vue, ce tableau de variantes de produits, qui contient le tableau de toutes les différentes variantes de produits. Après ce tableau, je veux stocker la variante actuellement sélectionnée. Je vais juste le faire via le style actuel, et nous allons le définir par défaut, qui est noir avec bande blanche. Il s'agit de nos données, de la sélection actuelle, puis des deux objets qui constituent nos variantes. Il peut très bien s'agir de plusieurs objets, ce n'est qu'un exemple de base. Maintenant, tout ce que nous allons faire, en dehors de cette méthode de données , c'est insérer quelque chose appelé calculé. Ouvrez un objet dans Computed, et voici où nous insérons les propriétés calculées. Les propriétés calculées sont des propriétés réactives, essentiellement toutes les données que nous utilisons dans l'instance Vue pour les créer. Si ces données sont mises à jour, ces champs calculés sont également mis à jour. C'est l'endroit idéal pour placer nos variantes actuelles, qui seront stockées ici en tant que méthode. Avec les variantes calculées, nous voulons simplement renvoyer une valeur unique. Mais une seule valeur peut dépendre d'autres données que nous avons dans notre application Vue. Tout comme nous l'avons fait ici où nous avons trouvé une variante de cette gamme de variantes de produits, nous allons faire la même chose ici, mais nous allons le faire à la manière ES6, donc de manière plus moderne. Ce que nous allons faire, c'est procéder ainsi, ce qui nous donnera accès à l'instance Vue, nous pourrons ensuite explorer les données, puis nous allons dire productvariants.find, puis la version courte de ce que nous avions ici, variantes où le style des variantes est égal au style actuel, mais nous devons dire this.currentstyle. Nous y voilà. Cela devrait suffire. Maintenant que nous avons défini ces options, uniquement les deux variables présentes dans nos données et la propriété calculée, nous pouvons désormais mettre à jour notre code HTML dans cette application Vue avec des attributs Vue spéciaux, ce qui garantira que toutes les données dans notre code HTML sont à jour. Ici, afin de rendre cela dynamique, je vais remplacer le src par deux points, puis nous y ajouterons les données de la variante actuelle. Je vais dire currentvariant.image. Ici, pour le prix, je vais le supprimer et ajouter un attribut appelé v-html, et nous voulons le définir sur le prix actuel de la variante. Maintenant, ici, nous n'avons plus besoin de cette classe, nous suffit d'ajouter l'attribut spécial Vue du modèle V. Toutes les valeurs que nous définissons ici seront directement intégrées aux données stockées dans notre application Vue Nous allons donc obtenir les données du style actuel pour modéliser la sélection ici. Je vais appuyer sur « Enregistrer » là-dessus. Maintenant, actualisons et passons à notre page ici, et voyons si cela fonctionne. Nous passons à autre chose, et vous pouvez maintenant voir que le prix change et que l' image change, et tout cela se fait de manière dynamique. En fait, si vous avez installé Vue DevTools, donc si je vais ici, je pense que je dois rouvrir mes DevTools ici. Vous pouvez voir qu'il y a un onglet pour Vue. J'ai installé Vue DevTools et vous pouvez voir ici une représentation en direct des données de l'ordinateur. Vous pouvez voir ici que la variante actuellement sélectionnée est la variante numéro 2, ce qui correspond au style actuel de blanc à bande noire, et vous pouvez voir ici les données brutes des variantes de produits. Si je viens de changer cela, vous pouvez voir les changements de style actuels et donc, la variante actuelle. Maintenant, nous ajoutons variables ici pour le src, pour le prix, pour le prix, et cela se met à jour lorsque nous mettons à jour notre style actuel, qui est maintenant lié à tout ce que nous sélectionnons ici. Nous n'avons qu'à effectuer une petite configuration de base, et nous obtenons maintenant cette réactivité automatique. Vous pensez peut-être que cela a pris autant de code que nous en avons fait ici et autant de temps à configurer. Mais lorsque l'application devient de plus en plus complexe, la réactivité devient encore plus importante. Si nous devions ajouter, disons simplement une description dans chacune de ces descriptions, et nous dirons qu'il s'agit d'une chaussure noire à rayures blanches, puis nous modifierons la description ici pour qu'il s' agisse d'une chaussure blanche à rayures noires. Maintenant, nous pouvons facilement entrer ici, créer un nouveau div, insérer du v-HTML, puis récupérer la description à partir de la variante actuelle. Ajoutez cela ici. Maintenant, si nous actualisons cette page et que nous le modifions, nous modifierons davantage de données à l'écran. De toute évidence, ce n'est pas parfaitement configuré, le style n'est pas incroyable. Mais comme vous pouvez le constater, lorsque nous commençons à stocker plus de données, plus d'informations sur notre page ici, le composant de réactivité de Vue devient très pratique. J'espère que vous pouvez constater que, évidemment, plus le projet devient complexe, plus il bénéficie de Vue. Mais comme vous pouvez le constater, il s'agit ici d'un paradigme différent. En ajoutant ces valeurs dynamiques l'aide de ces attributs Vue dans notre code HTML, vous éviterez de devoir exécuter ces écouteurs d' événements, puis de mettre à jour manuellement le contenu à l'aide de Vanilla JavaScript, que nous avions ici. Voici un exemple de framework frontal sous la forme de Vue et la façon dont la réactivité est utile. Encore une fois, si vous ne voulez pas l' utiliser ou si vous ne le comprenez pas, vous n'êtes pas obligé de le faire. Il s' agit d'une fonctionnalité facultative, mais très populaire dans le développement Web frontal, en particulier lorsque vous commencez à créer sites Web et des applications Web super interactifs. Mais bien sûr, ce n'est pas obligatoire, vous pouvez toujours utiliser Vanilla JavaScript comme nous l'avons fait plus tôt dans cette vidéo si vous le souhaitez. Si vous n'en ressentez pas le besoin ou si vous n'en voyez pas l'avantage, hésitez pas à l'ignorer. Croyez-moi quand je dis cela, si vous commencez à vous lancer dans projets plus complexes avec beaucoup d'interactivité, vous commencez à valoriser quelque chose comme une Vue ou une réaction lorsque vous commencez à vous retrouver dans ces situations. 10. Tailwind CSS: Dans cette vidéo, nous allons parler de Tailwind CSS, un framework CSS open source. La principale caractéristique de cette bibliothèque, comme indiqué ici est que, contrairement à d'autres frameworks CSS comme Bootstrap, elle ne fournit pas de série de classes prédéfinies pour des éléments tels que des boutons et des tableaux. Nous avons parlé de Bootstrap comprendre le développement Web. Il était très populaire à l' époque et l'est toujours, mais le truc avec Bootstrap, c'est quand vous l'utilisez sur des sites Web. Ils ont tous l'air de se ressembler. Tailwind n'est pas comme ça en comparaison. Au lieu d'une bibliothèque de composants, il s'agit d'un ensemble d'utilitaires, et ces utilitaires nous permettent d'écrire moins de CSS et d'utiliser ces utilitaires à la place. Vous comprendrez ce que je veux dire dans une seconde. Jetons un coup d'œil au site Web et leur site Web est plutôt bon, comme vous pouvez le voir ici. Vous pouvez le voir se dérouler en temps réel ici. Au lieu d'écrire du CSS, vous pouvez simplement ajouter classes spéciales Tailwind dans le div, puis il le mettra à jour à la volée. Vous pouvez voir ici que nous mettons à jour les textes, nous mettons à jour la mise en page. Tout se passe sans passer par le CSS et vous pouvez voir ici que nous pouvons même effectuer des requêtes multimédia à partir du code HTML. Nous pouvons modifier les attributs en fonction de la largeur de l'écran à partir du code HTML. Personnellement, je ne suis pas très fan de l' ajout d' autant de classes dans un seul élément. Vous pouvez commencer à voir que le code HTML commence à devenir un peu compliqué lorsque vous l'utilisez, mais ce que vous pouvez faire pour y remédier , c'est créer vos propres classes , puis les appliquer dans une classe , puis les remplacer ici par une classe unique. C'est ce que je vais également vous montrer dans cette vidéo. Ici, vous pouvez en savoir plus à ce sujet. Voyons de quoi d'autre ils parlent. Oui, comme je l'ai dit, il ne s'agit pas de composants particuliers , mais de classes utilitaires Vous pouvez donc créer vos propres composants ici, mais utiliser ces classes utilitaires qui ont également des définitions définies Vous verrez donc que cela nous oblige à nous adapter à une certaine grille. Eh bien, cela ne nous force pas, mais nous encourage à adopter des tailles différentes, ce qui nous aide également à créer un design plus cohérent. C'est bien si vous ne comprenez pas le design, vous pouvez simplement faire des suppositions à portée de vue. Il est également livré avec des combinaisons de couleurs, donc je pense avoir vu quelque chose à propos des combinaisons de couleurs ici. L'un d'eux s'appelle Slate. C'est en fait une très belle page d'accueil. Vous pouvez voir ici text-slate-500, vous pouvez donc utiliser ces combinaisons de couleurs. L'un d'eux s'appelle ardoise. Vous pouvez voir des exemples sur la page d'accueil, mais vous devez consulter la documentation. Nous y voilà. Nous pouvons entrer dans des documents, combinaisons de couleurs ou des couleurs de décoration de texte. Comment entrer dans les combinaisons de couleurs si je tape en ardoise ? Parfois, la documentation est un peu difficile à rechercher. Nous y voilà. Sous Personnalisation, vous pouvez accéder à Couleurs et vous pouvez voir ici que nous avons ces palettes de couleurs qui sont intéressantes. Ainsi, si nous choisissons une palette de couleurs, nous pouvons choisir de créer notre application dans ces différentes nuances de cette couleur. Quoi qu'il en soit, nous verrons tout cela en pratique très prochainement Nous devons donc créer un projet Node pour cela. Nous pouvons utiliser un CDN, mais ce n'est pas aussi simple que ce que nous venons de faire avec Vue. Vous avez vu ici qu'au lieu d' installer le package Vue, nous avons simplement pris vue stocké sur le serveur de quelqu'un d'autre et l'avons introduit ici. Pour cela, nous allons intégrer le code Tailwind, et l'avantage est que nous ne dépendons pas d'un serveur externe, en particulier lorsque nous exécutons tant de choses différentes à la fois. Si nous ajoutons le fait de faire trop de requêtes externes pour récupérer des bibliothèques, cela ralentira notre application et pourrait entraîner son échec Nous allons donc créer un projet de nœud ici. L'avantage d'en faire un projet de nœud est que nous pouvons commencer à installer modules de nœuds dont nous avons déjà parlé lorsque nous avons examiné npm et que nous pouvons commencer à les utiliser dans notre code. Il est installé avec le répertoire et c'est un système standardisé qui nous évite d'avoir à appeler du code externe ou le code est stocké dans notre propre projet. Faisons-le tout de suite. Je vais ouvrir un terminal appuyant sur « Shift Control Backtick ». Je vais ouvrir un nouveau terminal ici , puis je vais exécuter npm init. Avant de faire cela, nous devons à nouveau vérifier que npm est installé. Oui, nous le faisons. Nous pouvons maintenant faire npm init. Cela fonctionne donc nous pouvons écrire ce que nous voulons dans chacune de ces options, mais je vais juste appuyer sur « Enter ». Nous n'avons pas besoin de spécifier d'informations particulières ici , puis nous allons obtenir un fichier package.json. Par défaut, le nom sera quel que soit le nom du dossier. La version par défaut sera 1.0.0. La description sera vide, comme vous pouvez le voir ici pour toutes les autres valeurs par défaut. L'un des avantages de disposer de ces fichiers package.json est de pouvoir configurer ici nos propres scripts qui permettront de gérer le processus de génération de Tailwind, mais l'essentiel de ce package.json est de stocker la liste des packages dépendants dont nous avons besoin pour exécuter cette application ou cette page Web en particulier. Très bien, alors sans plus tarder, installons les vents arrière. Je vais écrire npm install. Je vais mettre l'indicateur D qui va l'installer en tant que dépendance de développement , puis je vais mettre tailwindcss qui est le nom du package. Je vais appuyer sur « Entrée » là-dessus, et maintenant l'installation va se faire, et quand il s'installera deux choses vont se produire. Nous allons obtenir ce nouveau dossier appelé node_modules, puis dans notre fichier package.json , vous pouvez voir que nous avons la version 3.2.7 de tailwindcss qui est probablement la dernière version au moment de l'enregistrement. Nous allons l'avoir dans nos devDependencies et tout le code dont nous avons besoin pour cette version de tailwind.css sera avons besoin pour cette version de tailwind.css stocké dans notre dossier node_modules. Dans ce dossier, si nous y allons, vous pouvez y voir des tonnes et des tonnes de packages différents, y compris tailwind.css, et la raison pour laquelle il y a tous ces autres packages ici est qu'il existe une arborescence de dépendances Tailwindcss peut donc dépendre d'autres modules qui ont également leurs propres dépendances Ainsi, toutes les dépendances descendent, tous les packages obtiennent installé dans vos modules de nœud. Si nous accédons au fichier package.json de tailwinds, que vous pouvez voir ici, regardez toutes les devDependencies ici, et il installera toutes ces devDependencies et leurs devDependencies également, donc c'est à cela que sert le temps de chargement. Chacun de ces packages possède son propre package.json, et ils peuvent donc s'empiler les uns sur les autres . Il s'agit essentiellement du système npm. Lorsque nous publierons notre projet npm sur le Web plus tard dans ce cours, je vous montrerai comment procéder. Nous ignorons complètement ce dossier car ce document enregistre la DevDependency Chaque fois que nous ouvrons ce projet sur un nouvel ordinateur, même s'ils ne possèdent pas le dossier node_modules , ils peuvent facilement le créer en tapant simplement npm install et toutes les devDependencies seront installées. Faisons-le tout de suite. Supprimons complètement ce dossier node_modules, puis je lancerai simplement npm install. Je n'ai pas supprimé le DevDependency du package.json, donc si j'exécute npm install, il réinstallera à nouveau tous les modules du nœud. Nous n'avons pas réellement besoin de suivre ou transmettre cet ensemble de dossiers à qui que ce soit. Nous pouvons simplement transmettre le package.json et toute personne qui exécute nos projets peut simplement exécuter npm install et obtenir les mêmes modules que nous. J'espère que cela vous convient. Cela a du sens pour toi. Maintenant, je vais désactiver le compilateur Live Sass car nous allons maintenant créer notre CSS en utilisant Tailwind. Je ne veux pas vous embrouiller en combinant Sass et en essayant d' intégrer tout cela. Gardons-les séparés, afin de ne plus travailler avec ce fichier scss et de faire ce que nous allons faire à la place, afin de pouvoir retourner à notre terminal ici. Ce que nous allons faire à la place, c'est créer un fichier input.css et un fichier output.css ici, puis nous devons simplement ajouter ce fichier output.css à notre index ici et passons simplement des styles à la sortie. En gros, je l'ai fait parce que nous allons mettre tout notre code Tailwind ici, puis exécuter la compilation Tailwind, il va entrer dans ce fichier output.css et c'est ce que nous voulons inclure dans notre document HTML. Si je vais ici, vous verrez que nous perdons tout notre style, mais nous allons le reconstruire en fonction du vent arrière, alors allons-y dès maintenant. La façon dont nous pouvons le compiler est de taper npx tailwind -i input.css. Je les ai nommés très simplement pour que vous puissiez voir clairement quels sont le fichier d'entrée et le fichier de sortie, puis l' indicateur -O pour déterminer la sortie qui s'appelle simplement output.css. Si je l'exécute maintenant et que nous examinons output.css, nous n'avons encore rien car j'ai oublié de mettre quelques directives ici. Je vais ajouter une base de vent arrière, donc nous allons ajouter des styles de base, composants de vent arrière et des utilitaires de vent arrière, donc voici du code pour les vents arrière. Réexécutons cette commande. Je peux simplement appuyer sur app puis appuyer sur « Entrée », puis si nous regardons dans output.css, vous pouvez voir maintenant que tout ce CSS passe. Donc, si nous regardons ici, actualisons et l'une des choses que Donc, si nous regardons ici, vous remarquerez propos de tailwindcss, c'est qu'il supprime à peu près tous les styles HTML standard dont nous avons parlé dans les vidéos précédentes. Cela vous donne une configuration vraiment brute, de sorte que même les boutons ne ressemblent en rien à des boutons. La seule chose qui en fait un bouton est le pointeur du curseur, mais sinon, ils ne ressemblent pas du tout à des boutons Nous devons donc les styliser nous-mêmes. Maintenant, comme c'était une commande un peu longue, même si nous l'avons rendue très simple, je vais la déplacer dans un script dans notre package.json, donc je vais créer cette commande tailwind : build. Chaque fois que nous lancerons tailwind:build, cela fonctionnera, mais je veux aussi en créer un autre ici, tailwind:watch, afin de ne pas avoir à exécuter build à chaque fois que nous le faisons. Ce que nous pouvons faire, c'est ajouter à nouveau le même code , puis insérer le drapeau de surveillance ici. Maintenant, dans notre terminal, nous pouvons simplement exécuter npm run, puis exécuter n' importe quel script que nous avons configuré ici, donc tailwind:build le construira une fois ou tailwind:watch avec l'indicateur watch le construira et continuera à attendre d'autres modifications. Si je devais entrer ici et donner au corps une couleur de fond rouge, et que je clique sur Enregistrer dessus, cela serait traité et envoyé dans le fichier de sortie et, comme vous pouvez le voir ici, notre corps est rouge. Nous n'avons pas à exécuter la compilation à chaque fois que nous apportons une modification. Chaque fois que nous apportons une modification, elle est enregistrée et envoyée directement à output.css, et comme nous utilisons un serveur live , elle est automatiquement mise à jour ici. À l'heure actuelle, notre configuration est presque terminée. Nous avons juste besoin d'un fichier supplémentaire dans notre dossier ici. Cela s'appellera tailwind.config.js et je vais juste copier et coller une configuration standard ici. Je vais appuyer sur Enregistrer ce sujet et reprenons notre processus ici. J'ai appuyé sur Control X pour l'éteindre. Redémarrez-le juste pour nous assurer qu'il utilise le bon fichier de configuration. Passez à ici et maintenant, nous devrions être en mesure d'utiliser les utilitaires de notre code HTML. Commençons à reconstruire notre page avec Tailwind. Ici, à l'intérieur du conteneur de pages, nous avions l'habitude d'utiliser ces classes , puis d'entrer dans notre fichier CSS. Nous pouvons toujours le faire, nous pouvons accéder au conteneur de pages ici et reconstruire cette classe avec des classes issues de Tailwind Nous pouvons donc appliquer et ajouter différentes classes Tailwind, et vous pouvez voir ici ce que font ces différentes classes, mais pour l'instant, ne le faisons pas. Mettons cela en ligne, puis je le déplacerai dans les classes un peu plus tard. Passons à l'index ici, et ce que nous devons faire, c'est récupérer cette grille d'affichage. Nous pouvons simplement taper dans la grille et, comme vous pouvez voir ici, elle complète automatiquement la grille, afficher la grille, puis nous pouvons lui donner un espace de 0,5 rem, soit environ 12 pixels. C'est à l'intérieur d'un espace-3. Vous pouvez voir ici, si je le retape, vous pouvez voir que Tailwind nous encourage à utiliser certains incréments, donc zéro à un quart de rem, à un demi-rem, trois quarts de rem, un rem, puis cela augmente par incréments et vous pouvez voir dans le commentaire à côté, à combien de pixels cela équivaut à peu près, donc c'est bien. Cela réduit les choix ce qui permet à moi, en tant que développeur Web frontal, de déterminer plus facilement tant que développeur Web frontal, de déterminer ce qu'il faut mettre ici. Nous pouvons maintenant donner cette grille ici et puis, comme vous pouvez le voir ici, afficher la grille, l'espace devrait être stocké quelque part, peut-être devons-nous l' actualiser ici. Oui, nous devons donc malheureusement actualiser . Je ne sais pas pourquoi. Voyons voir que notre serveur live fonctionne. Oui, ça l'est. C'est intéressant. J'avais juste besoin de les rafraîchir, puis nous devons évidemment reconfigurer nos colonnes de modèles, et malheureusement pour nous, dans notre cas spécifique où, si nous examinons nos styles ici, c'est un peu trop spécifique pour une classe Tailwind standard Nous devons donc utiliser un hack dans Tailwind qui nous permet de définir une valeur arbitraire. Pour ce faire, nous allons faire des colliers en grille et le hack ouvre des crochets, et à partir de là, le premier appel sera réglé sur Minmax Auto 150 ? Nous pouvons définir cela ici, auto, 150 pixels, puis créer un trait de soulignement ici pour la deuxième colonne qui, si nous revenons aux styles, était de 3fr. J'ai mis un espace ici. Voyons voir, on y va. Vous pouvez maintenant voir que nous avons le même style, mais il prend la forme d'une classe de vent arrière. Ensuite, nous passons à l' en-tête et je vais régler le col-start sur 1, le col-end sur 3. C'est alors que nous pouvons commencer à utiliser l' ardoise, la palette de couleurs dont j'ai parlé plus tôt, plutôt que les couleurs aléatoires que nous avons définies en premier sur la liste. Ici, je vais utiliser les centaines de nuances d'ardoise, puis nous allons définir la couleur de fond en fonction de cette couleur. Enregistrez-le, actualisez-le ici, et vous verrez maintenant que l'en-tête a une couleur d'arrière-plan et qu'il s'étend sur toute la largeur de la page sur les deux colonnes. C'est ce que nous voulons. Après le menu d'en-tête ici, je vais mettre flex pour afficher flex list-none pour le style de liste de type none. Je vais mettre p-0 pour un rembourrage nul à la fois sur l'axe vertical et horizontal. Justify-center pour placer le contenu de justification au centre, Gap-3 pour régler l'écart de la grille aux trois quarts de rem et juste pour vous informer , toutes ces classes sont répertoriées dans la documentation. La documentation sur tailwind.css est plutôt bonne. Je vous encourage à y jeter un coup d'œil. Je ne m'attends pas à ce que vous vous souveniez de tout cela et je les ai notés, donc je sais exactement lesquels mettre ici. Mais pour vous, rendez-vous sur tailwindcss.com, la documentation et commencez à en savoir plus à ce sujet. Nous pouvons entrer dans la personnalisation des couleurs et vous pouvez voir ici les différentes combinaisons de couleurs, le code couleur exact pour Slate 50, Slate 100, Slate 700, etc. et tout un tas d' autres informations. Il faut un peu d' apprentissage pour comprendre ce qu'est un cours, mais bien sûr, après suffisamment de pratique, vous commencez à connaître ces choses plus facilement, alors continuons ici. Passons maintenant à la barre latérale, et pour la barre latérale, je vais utiliser bg-slate-200, donc une teinte un peu plus foncée pour le menu de la barre latérale. Je vais faire du pl-3 qui est le rembourrage gauche. Cela va le régler à 0,75 rem, puis je vais définir mes attributs de flexion, donc je vais définir grow pour définir flex grow à un. Je vais mettre shrink-0 pour mettre Flex Shrink à zéro, puis basis-24 qui est à peu près 100, 96, et puis ça devrait être tout. Sauvegardez ça, rafraîchissez-le ici, c'est très joli. Le bouton a maintenant complètement perdu son style. Allons-y et donnons-lui un tas de nouveaux styles px-3 qui lui donneront un rembourrage à gauche et à droite, donc en gros un rembourrage sur l'axe X, puis nous lui donnerons un rembourrage sur l'axe vertical, donc un rembourrage en haut et en bas de deux. Légèrement moins arrondi pour donner un rayon de bordure au bouton pg-slate. Nous utiliserons à nouveau la palette de couleurs ardoise et utiliserons une teinte plus foncée de 600. Nous utiliserons également l'ardoise pour la couleur du texte. dois juste m'assurer qu' il y a suffisamment de contraste ici Je vais donc le régler sur 50, une teinte beaucoup plus claire, puis sur m-1 qui définit la marge à quatre pixels ou 0,25 rem. J'ai cliqué sur Enregistrer là-dessus. Regardons cela, et maintenant nous avons le style du bouton. Maintenant, ici, nous avons cet écart entre les colonnes. n'est pas ce que nous voulons, alors revenons ici. Gap-3, nous voulons que ce soit uniquement une colonne, donc il y a col-gap-1. Parfois, au lieu de parcourir la documentation, vous pouvez vous faire une idée, alors peut-être que nous pouvons faire gap-x. Nous y voilà. L'écart entre les colonnes, c'était quoi trois ? Nous y voilà et nous n'avons plus cet écart entre les lignes, juste entre les colonnes. Passons maintenant au menu de la barre latérale. Lists-None pour aucun style de liste, p-0 pour l'absence de rembourrage puis nous voulons étendre toute la largeur, donc nous allons faire des hauteurs. Voyons quelles sont les options. Nous pouvons les parcourir tous, voir s'il existe une option pour 100 %, h-4. Essayons ça. Enregistrez, rafraîchissez ici. maintenant à des sommets 100 % cool et, comme vous pouvez le voir ici, nous n'avons pas besoin de mettre à jour les styles de liens, car ils sont déjà exempts de tout vent arrière. Si nous voulions rétablir cet état de survol, nous pouvons le faire en utilisant cette classe, puis nous pouvons placer la pseudo-classe ici hover:underlying devrait nous donner la décoration du texte, mais je clique sur Enregistrer pour cela. Jetons un coup d'œil, rafraîchissons-nous. Voilà, donc ça marche. Nous avons juste besoin de le copier pour tous les autres , et c'est parti. Ensuite, ici aussi, je vais créer ce hover:state. Sauvegardez ça. Vous pouvez maintenant voir le hover:state se produire ici. Nous n'avons pas besoin de créer une classe distincte pour cela. Nous pouvons littéralement le mettre sur l'élément lui-même, donc j'apprécie vraiment ce genre de choses. C'est plutôt cool, et juste pour gagner du temps, je vais supprimer cette vue ici, nous n'allons plus en faire dans cette classe. Je vais garder cette section avec la classe principale. Débarrassez-vous de tout ce code d' affichage ici. Revenons à ce que nous faisions avant. Je ne pense pas que nous ayons besoin de mettre des styles spéciaux sur la page principale, mais pour le tiroir, je vais lui donner un fond de 200 ardoises. Nous voulons faire en sorte qu'il soit sur toute la hauteur de l'écran avec un écran H. La position doit être absolue et je peux simplement le faire en tapant un top-0 absolu pour définir les deux premiers pixels nuls. Largeur, je veux que ce soit la moitié de la largeur de la fenêtre d'affichage. Il s'agit d'une valeur arbitraire. Je ne crois pas que Tailwind ait une option pour cela Je vais donc ouvrir des crochets ici, largeur de fenêtre de 50, puis je vais faire right-0 pour définir le bon attribut zéro pixel, puis je vais me faciliter la tâche en mettant simplement la transition complète. Comme vous pouvez le voir ici, il définira plusieurs paramètres ici, mais cela créera essentiellement la transition. nous l'avons déjà vu dans styles.css, nous avons spécifié la transition pour qu'elle ne s'applique qu' au bon attribut, mais nous pouvons tout aussi bien l'appliquer à tous, puis ils les couvriront tous , ce qui me semble logique. Ensuite nous avons notre bouton ici sur lequel nous pouvons simplement copier les mêmes classes que celles que nous avons pour l'autre bouton. Nous y voilà. Posez-le ici, corrigez l'espacement. Ensuite, si je clique sur Enregistrer, actualisons la page ici. Le dessin s' affiche par défaut, si je l'ouvre et que je le regarde. Vous pouvez voir que le tiroir est actuellement réglé à zéro. Nous devons lui donner un style différent si aria-hidden est vrai. Heureusement pour nous, dans Tailwind, il s'agit d'une fonctionnalité dans laquelle vous pouvez simplement utiliser deux points cachés par aria et nous pouvons définir une classe qui ne s' appliquera que si aria-hidden est vraie. Ensuite, je peux utiliser une valeur négative ici à droite pour régler à droite, je pense que c'est plein à 100 %. Si je fais défiler la page vers le bas, vous pouvez le voir en entier. Rafraîchissez ici, le tiroir ne sera pas ouvert par défaut. Ça y est, je peux l' ouvrir et le fermer ici. En fait, cela doit s' étendre sur toute la hauteur. Peut-être devons-nous régler la hauteur de la grille à 100 %. Nous avons oublié de régler la hauteur de la grille à 100 %. Je vais entrer ici, le faire hors réseau et ensuite nous passerons à H4, je pense à 100 %. Jetons-y un coup d'œil. Hauteur, 100 %. Ensuite, nous avons oublié de mettre notre style pour la taille des lignes. Les lignes de notre modèle de grille étaient de 50 pixels, 1 fr. Celui-là va probablement être un peu difficile. Des lignes de grille, puis nous allons mettre une valeur arbitraire ici, 50 pixels, 1fr. Voyons si cela fonctionne. Rafraîchissez-vous ici et voilà, c'est le cas. voilà, 50 pixels, 1fr, c'est ce que nous avions ici. Nous avons maintenant notre barre latérale d'en-tête. Notre tiroir fonctionne et tout a été recréé dans Tailwind. Je veux juste mettre du contenu principal ici, contenu principal afin que nous puissions y mettre ce que nous voulons. Nous avons le contenu principal ici et nous pourrions également y ajouter du rembourrage. Peut-être que ce sera un contenu principal h1, mais encore une fois, des bandes Tailwinds ou ces CSS standard. Le simple fait de lui donner l'élément h1 ne signifie pas nécessairement qu' il sera plus grand. Ce que nous devons faire, c'est spécifier nos classes ici. Nous pouvons faire du texte 5xl et faire une police en gras pour le rendre plus grand et plus gras. Vous pouvez maintenant voir que nous avons un titre plus grand ici. Il n'y a cependant aucune marge, nous devons le spécifier nous-mêmes. Nous y voilà. Faisons simplement my-2 pour lui donner un peu de rembourrage en haut et en bas, et cela devrait nous suffire pour le moment. Tout y fonctionne et nous avons recréé notre mise en page à l'aide du CSS Tailwind. Maintenant, il y a un gros problème pour moi, je ne sais pas, certains comme celui-ci, mais nous avons des attributs ridiculement longs pour les classes ici. Je dois parfois faire défiler la page vers l' autre côté de la page juste pour les voir Je préfère écrire des noms descriptifs dans des classes plutôt que simplement dans des classes utilitaires. Pendant un certain temps, je n'ai pas voulu utiliser Tailwind à cause de cela. J'ai dit que c'était trop compliqué. J'aime écrire de belles classes descriptives comme le conteneur de pages, le menu d'en-tête, comme nous l'avons fait par le passé. Mais il existe en fait un moyen de tirer le meilleur parti des deux mondes et je vais vous le montrer dès maintenant. Si nous entrons dans le CSS de nos entrées, nous pouvons réellement reconstruire notre classe de conteneur de pages avec tous les utilitaires que nous utilisons simplement avec Tailwind. Ce que je vais faire, c'est récupérer toutes les classes que nous avons définies après le conteneur de page. Je ne vais pas supprimer le conteneur de pages. Je vais enregistrer cela et venir ici et je pourrai simplement écrire Apply, puis placer toutes les classes Tailwind après cela. Ensuite, il appliquera tout cela à la classe de conteneur de pages. Si nous actualisons cette page, vous verrez exactement le même résultat, mais maintenant nous n'avons plus vous verrez exactement le même résultat, mais maintenant nous n'avons tout ce bordel dans notre code HTML. Vous pouvez voir ici que tous ces attributs ont été regroupés et placés dans une seule classe, qui, à mon avis, est beaucoup plus propre. Passons maintenant à l'étape suivante et faisons de même pour tout le reste. Pour notre en-tête ici, je vais récupérer ce contenu et créer l'en-tête, appliquer, l'ajouter. Vous y voilà. Ensuite, nous entrerons dans le menu d'en-tête. Prenez tous ces menus d'en-tête, à droite, appliquez. Même processus d'un bout à l'autre. Je prends simplement ces classes utilitaires et je les applique à la barre latérale des classes. Super facile avec la directive appliquée ici. Allons plus loin dans les listes, les boutons. Nous pouvons cibler tous les boutons, nous n'avons donc pas à nous répéter ici pour tous les boutons. Au lieu de cibler une cible de classe ou des boutons, placez apply devant celle-ci. Nous y voilà. Ensuite, je peux supprimer ces classes de ce bouton. Voyons s'il y a des cassures, sauf que je dois juste m' assurer que c'est un bouton. Pas de casse, donc nous avons nos boutons en place maintenant. Nous pouvons le récupérer, le mettre dans le menu latéral, l'appliquer. Alors c'est une bonne question ici aussi, car elle se répète encore et encore. Nous ne voulons pas le faire. Au lieu de cela, nous allons simplement saisir toutes nos balises a dans une liste non ordonnée, puis nous allons les souligner avec le pointeur de la souris. Nous pouvons maintenant tous les supprimer. J'utiliserai la commande D sur un Mac pour les sélectionner tous et je peux simplement les supprimer tous en une seule fois. Ensuite, nous pouvons y aller pour notre h1. Utilisons ces classes sur tous les h1. Entrez ici, h1, appliquez. Allons-y, pour la dernière, pour le tiroir, puis je vais créer la classe pour le tiroir, utiliser Appliquer et maintenant en pour la dernière, pour le tiroir, puis je vais créer la classe pour le tiroir, utiliser Appliquer et maintenant actualisant ici, nous obtenons exactement le même résultat. Mais maintenant, vous pouvez voir que notre code HTML est beaucoup plus propre, et c'est comme ça que je l'aime. Ici, vous pouvez voir que tout est bien nommé. Nous n'essayons pas de déchiffrer toutes ces classes CSS Tailwind qui auraient pu le faire autrement. Si vous regardez ici, maintenant, tout cela ne contient que le CSS d'entrée et je pense que c'est beaucoup plus agréable de l'avoir ici que avoir dans le code HTML réel. C'est ce que je préfère. Je n'ai commencé à me lancer dans Tailwind qu'une fois que j'ai compris que vous pouviez le faire, vous pouviez toujours utiliser des cours. Vous pouvez toujours cibler des éléments, mais vous pouvez également utiliser les classes Tailwind. Certaines des choses que j'aime que vous ayez ces pseudo-classes. Vous l'avez de nouveau ici pour surligner le pointeur et ce qui est fou, c'est que vous pouvez également faire des requêtes multimédia ici. Qu'avons-nous dans notre fichier styles.css Nous n'avions pas affiché la barre latérale sur mobile dans Tailwind, c'est un système axé sur le mobile. Toutes les requêtes multimédia seront d'une largeur minimale. Elles sont donc mobiles par défaut. Nous utilisons ensuite les requêtes multimédia pour affecter la taille des écrans au-delà de certains niveaux. Je vais vous montrer ce que je veux dire par là maintenant. Si nous consultons simplement la documentation CSS de Tailwind et que je recherche un design réactif et que je regarde cette page, vous pouvez voir les préfixes des points d'arrêt. Il faut dire ici que Tailwind CSS est d'abord mobile. Il utilise un système de point d'arrêt axé sur le mobile, ce qui n'est pas ma préférence. Je préfère d'abord utiliser un ordinateur de bureau. Mais j'ai mentionné que de nombreux systèmes modernes privilégient le mobile. Comme vous pouvez le voir ici, si nous utilisons la petite pause, cela affectera tout ce qui se trouve au-dessus de 640. Ensuite, ces points d' arrêt s'étendent jusqu'en 1536. En utilisant cela, allons-y. Tout d'abord, nous voulons créer par défaut, car la valeur par défaut est mobile, nous voulons qu'elle n'en affiche aucune, nous avons donc simplement défini le paramètre masqué. Mais lorsqu'il est trop petit, nous ne voulons pas qu'il soit masqué Nous allons donc le placer en bloc, ce qui le placera en bloc d'affichage. Ce n'est pas exactement la même chose qu'ici parce que c'est 640 et non 425, mais c'est assez proche. Si nous allons ici et que je passe à l'iPhone 12 pro, vous pouvez voir, sans aucune requête multimédia, que nous nous sommes débarrassés de la barre latérale. Par défaut, étant donné que nous sommes d'abord sur mobile, l'affichage est défini sur Aucun. Permettez-moi de revenir à cette voie. Quand nous dépasserons 640, vous pouvez le voir. Je vais donc déplacer cela. Nous sommes passés au-dessus de 640. Vous pouvez voir cette requête multimédia de Tailwind sortir, mais nous n'avons pas besoin de l' écrire nous-mêmes, tout ce que nous avons à écrire dans Tailwind est la classe que nous voulons appliquer après ce point d'arrêt. J'adore le fait que dans Tailwind, si nous l' installons correctement, nous pouvons voir ici le code exact qui passe dans notre CSS. C'est pourquoi il est important de continuer à exécuter, à compiler ici, car chaque fois que nous le créons, il crée le CSS brut nécessaire dans notre fichier de sortie et fait toutes ces choses insensées pour s'assurer qu'il est optimal et qu'il n' utilise que ce dont il a besoin. C'est vraiment génial une fois que vous avez compris la puissance de Tailwind. Mais encore une fois, c'est un outil comme n'importe lequel de ces autres outils. Tout se résume à du HTML, du CSS et du JavaScript. Encore une fois, si vous ne souhaitez pas l'utiliser , c'est totalement facultatif. Je ne fais que vous montrer l'un des outils les plus populaires que les développeurs Web frontaux utilisent de nos jours. Si c'est quelque chose qui vous intéresse, approfondissez vos recherches et apprenez-en plus sur Tailwinds. Je peux même créer un cours sur Tailwind pour vous si vous souhaitez en savoir plus, mais tout est documenté dans la référence ici. Vous n'avez pas nécessairement besoin d'un cours si vous pouvez lire toute cette documentation. Je suis impatient de continuer à utiliser Tailwind et de l'essayer sur des projets plus importants. Personnellement, je l'aime bien. Encore une fois, si vous ne vous sentez pas libre, vous pouvez ignorer cette vidéo. Vous pouvez ne pas l'utiliser. Ce n'est pas un élément essentiel du développement Web frontal, juste un autre outil. Mais cela étant dit, parlons de quelque chose qui pourrait être essentiel à votre projet de développement Web, à savoir la collecte de données à partir d'une API externe. Nous en parlerons dans la prochaine vidéo. 11. Utiliser des API: Dans cette vidéo, nous allons examiner les API. Plus précisément, nous allons examiner un exemple d'API permettant d'introduire fausses données de magasin dans notre petite application ici. Rappelez-vous qu'avant, nous n'avions cette page de produit à titre d'exemple. Je travaille principalement dans le commerce électronique, j'aime donc utiliser ces exemples de magasins de commerce électronique. Dans cette vidéo, nous allons importer des données provenant d' une fausse API de boutique. Cela nous donne de fausses données de magasin. Ensuite, nous pouvons créer une liste de produits sur le front-end avec ces données provenant d'une API. Qu'est-ce qu'une API ? Il signifie simplement interface de programmation d'applications. Si vous recherchez la définition en ligne, il se peut que vous ne sachiez pas ce qu'elle signifie réellement , car elle peut signifier un tas de choses différentes. Dans ce contexte, une API est essentiellement un moyen pour nous de nous connecter à un backend pour récupérer des données. Dans mon premier cours, Understanding Web Development, nous avons adopté une approche moins moderne en écrivant du PHP, en gérant notre propre base de données MySQL et en affichant ce contenu à l'écran via PHP. Mais aujourd'hui, alors que le front-end est devenu plus complexe avec les frameworks frontaux, il est désormais plus courant d'avoir une API et une application frontales distinctes, et de connecter les deux. L'API est essentiellement l'application principale, qui nous fournit les données. Dans ce cas, vous pouvez considérer les API comme une simple source de données à laquelle nous pouvons nous connecter. Pour accéder à ces données, n'avons besoin que d'un point de terminaison d'API, qui est simplement une adresse qui, lorsque nous lui adressons une demande, renvoie des données. Tout comme nous avons fait une demande à ce serveur ici même et qu'il a renvoyé le contenu de notre page, nous pouvons faire une demande à un serveur et récupérer des données brutes. C'est ce que nous allons faire dans cette vidéo. Je vais partager avec vous un exemple simple dans cette leçon. Ouvrons fakeapi.platzi.com. Il s'agit de l'API Platzi Fake Store. Comme indiqué ici, il s'agit d'une API de repos pour votre prototype de site Web de commerce électronique ou d'achat. Nous allons l'utiliser pour générer une liste de produits et les afficher sur notre petite application Web. Vous remarquerez ici que l'API est une API REST. Il s'agit de la forme d'API la plus simple à comprendre. Il existe un autre style d'API plus moderne appelé GraphQL, mais qui nécessite une compréhension du langage de requête de GraphQL. Avec les API REST, tout ce que nous avons à faire est d'atteindre un certain point de terminaison, qui se trouve ici. Il suffit de saisir cette adresse et les données seront renvoyées. Si je le copie et que j'ouvre un autre onglet et que je le colle, vous verrez que nous obtenons une liste complète de données. Avant, vous avez vu que cela s' affichait sous forme de texte brut non formaté, et maintenant c'est ce qu'il fait. C'est parce que j'ai une extension Chrome sur mon navigateur Chrome qui fait cela. Vous pouvez voir les données au format JSON sortir assez bien. Mais si vous ne possédez pas cette extension, vous la verrez apparaître au format brut. Nous pouvons simplement le mettre directement dans notre barre d'adresse comme ça. Cela peut être pratique pour visualiser les données, du moins la structure qui provient de l'API. Mais ce que nous allons faire dans notre application Web, c'est utiliser ce point de terminaison pour insérer ces données dans notre interface, puis interagir avec elles. Ce que je vais faire, c'est évidemment que nous avons une liste de produits ici Je vais créer une petite page de collection sur notre application Web en utilisant Vue et en utilisant cette API. Je vais le garder dans mon bloc-notes, rendre ici, puis passons à notre éditeur de code. Nous parlions de Tailwind dans une vidéo précédente. Laisse-moi fermer ça. Permettez-moi de le transformer à nouveau en Vue. Ce que je vais faire, c'est lui donner un identifiant de l'application Vue afin que nous puissions y associer notre code Vue. Je vais également devoir ramener la référence à Vue via le CDN. Je vais juste ajouter ça. Faisons-le ici. Scripts SRC, puis adresse de la dernière version de développement, qui est unpckg.com/vue @next. Je l'ai mal tapé. J'ai dit scripts au lieu de script. Ensuite, j'en insérerai un autre ici, et nous allons simplement insérer notre code Vue ici. Encore une fois, je vais simplement créer mon objet d'options, lancer l'échafaudage ici. Ensuite, nous allons créer l'application Vue. Créez une application, chargez les options, puis montez-la dans ce div, auquel nous avons attribué l'ID de Vue App. Nous pouvons y aller, Hash Vue App. Si nous cliquons sur « Enregistrer » dessus, actualisons la page ici, nous devrions voir que nous exécutons une version de développement de Vue. Si vous avez installé les DevTools for Vue, si je les ferme et les rouvre, nous pourrons obtenir les Outils de développement Vue ici. Je le recommande vivement. Pour installer Vue DevTools, vous pouvez accéder au Chrome Extension Store et saisir Vue DevTools. Pour une raison ou une autre, le chargement prend beaucoup de temps. Je vais juste taper Vue. Ici, vous pouvez voir que celui que j' utilise est celui-ci, Vue.js devtools de Developer Tools. De retour ici, vous pouvez voir que nous exécutons une application dans cette section, vous pouvez la voir surlignée. Ce que je vais faire, c'est écrire du code que je souhaite exécuter lorsque cette application sera écrire du code que je souhaite montée. Nous pouvons le faire via la méthode du cycle de vie montée. Si je crée simplement une méthode appelée mounted et que je la place dans l'objet options, tout ce que j'écris ici sera affiché à l'écran. Revenons en arrière et copions cette adresse API. Assurez-vous qu'il se trouve dans notre bloc-notes. Ensuite, ce que je vais faire, c'est écrire un simple fetch. Cette méthode est super simple, mais super puissante. Il ne fait qu'exécuter une requête get à l'adresse indiquée dans ce premier argument. Nous allons ensuite enchaîner... puis. Dans ce fichier, je vais insérer ce code, qui traite simplement le JSON et nous permet de le convertir en objet JavaScript à utiliser dans notre application. Ensuite, avec ce JSON renvoyé, pour commencer, je vais simplement le consigner sur la console afin que , lorsque notre application se chargera, nous obtenions les données dans notre console et que nous puissions voir à quoi elles ressemblent. Vous pouvez le voir ici. Je vais me rafraîchir à nouveau. Vous pouvez voir que nous avons 177 objets dans un tableau. Nous pouvons regarder et inspecter l'intérieur de la matrice et voir toutes les différentes données sur les produits que nous avons consultées auparavant en les saisissant simplement dans notre navigateur. Maintenant que nous l'avons sous forme de JavaScript, nous pouvons le charger dans notre application Vue. Je vais cliquer ici. Je vais ajouter quelques données. En suivant ce format, nous allons renvoyer un objet. N'oubliez pas que nous devons mettre notre virgule ici et je vais mettre un tableau appelé products, qui au début sera un tableau vide. Alors ici, ce que je vais faire, c'est parce que l'objet JSON renvoyé est un tableau. Si nous revenons ici, nous pouvons simplement insérer ce tableau dans ce tableau au sein de notre application. Nous devons simplement commencer par faire référence à cette application, qui est l'application que nous examinons actuellement, c'est ainsi que nous collectons les données, puis nous allons simplement attribuer JSON renvoyé à this.products, non à product Voilà. Si je clique sur « Enregistrer » et que je rafraîchis ici, vous verrez qu'il n'y a rien dans la console parce que nous avons supprimé ce journal de console, mais si nous le regardions dans nos DevTools, vous constaterez que ce tableau d' objets a maintenant été chargé ici. Nous pouvons maintenant interagir avec cela dans notre application Vue. Je vais y aller et utiliser réellement ces données. Je vais saisir ici la collection de produits, tout ce que nous voulons. En fait, je vais simplement sauter le titre et créer un div ici avec la classe de collection, et à l'intérieur, je vais commencer une boucle for avec Vue. Je vais créer une fiche produit. Ce sera un div pour chaque produit qui sortira, et je veux que cela fonctionne pour autant de produits qu' il y en a dans la gamme. Nous pouvons utiliser une boucle v-for ici, puis je peux simplement écrire produit dans produits. Nous pouvons l' appeler comme nous voulons, il va simplement extraire un élément individuel de ce tableau qui correspond ici. Je vais cliquer pour en sortir. Ensuite, à l'intérieur, nous voulons une balise image, permettez-moi d'appeler cette image du produit, puis le src, que nous allons extraire de l'objet du produit renvoyé. Si nous regardons en arrière, si nous examinons l'un de ces objets, vous pouvez voir que trois images sont renvoyées, ce qui nous donne un tableau d'images. Nous devons faire un choix ici. Choisissons simplement le premier du tableau, qui sera à la position 0. Ensuite, nous allons simplement passer à product.images, et pour sélectionner la première image du tableau à la position 0, nous y tapons simplement zéro. Alors ici, inscrivons le titre du produit. Ensuite, je vais utiliser v-html pour insérer du code HTML interne basé sur une variable. Je vais opter pour product.title. Si nous revenons à l'objet, vous pouvez voir que nous obtenons une valeur pour le titre qui apparaît ici, puis je cliquerai sur « Enregistrer » dessus. Rafraîchissons-nous ici. Comme vous pouvez le constater, au fur et à mesure que nous chargeons la page, nous adressons une demande à cette API externe et nous introduisons les images et le texte. Laisse-moi me rafraîchir encore une fois. Elle va fonctionner assez rapidement car c'est une application assez basique, mais comme vous pouvez le voir ici, la page se charge en premier. Nous avons l'en-tête et la barre latérale qui se chargent en premier, puis vous pouvez voir les noms apparaître, puis vous pouvez voir les images. Ce qui se passe, c'est que si nous y regardons de plus près, cela se passe trop vite, même pour que l'application Vue puisse le détecter, mais au départ , cette gamme de produits est vide, puis une fois la demande d'API terminée, elle est remplie avec les 177 produits différents. Si je vais ici, nous pouvons voir que l'objet produits est initialement vide et que ce n'est qu'une fois que cela est terminé l'objet produits est initialement vide et que ces produits entrent dans la gamme de produits. Une chose que je veux faire avant de lancer ceci est de m' assurer que le tableau des produits n'est pas vide avant de commencer à essayer de tout afficher. Ce que je veux faire pour rendre cela un peu plus agréable, c'est que lorsque je rafraîchis la page, vous pouvez voir qu'il y a une période pendant laquelle c'est vide. Je veux y mettre un petit indicateur de chargement, donc je vais garder à l'esprit que Vue est réactive, et que si les données changent, la page changera, nous pouvons insérer une simple instruction if ici pour vérifier la longueur du tableau. Comme vous pouvez le voir ici, j'ai mis une balise de modèle ici. Il s'agit d'une balise Vue spéciale dans laquelle nous pouvons insérer de la logique, mais qui ne s' affichera pas réellement sur la page. Je vais mettre une instruction if ici et nous allons y aller si products.length est supérieur à zéro, c'est-à-dire qu'il n'est pas vide, alors nous l'exécuterons , mais s'il est vide , donc l'alternative, je vais juste mettre un v-else. S'il est vide, ce qui sera le cas au chargement de la page, je vais juste mettre un indicateur de chargement super basique ici, en indicateur de chargement super basique ici, cours de chargement... Maintenant, si nous actualisons, vous pouvez voir que pendant une fraction de seconde, le message est en cours de chargement avant d'afficher toutes les données du produit. L'autre chose que je veux faire pour faire le ménage , c' est que nous avons 177 produits qui arrivent, c'est un peu trop. Je vais limiter ce montant. Ce que je peux faire, c'est déplacer ce v-for ici, puis je peux récupérer l'index ainsi que l'objet réel dans cette boucle, et ensuite ce que je peux faire ici, c'est n'afficher une fiche produit que si l'index est, disons, inférieur à quatre. Seuls les quatre premiers éléments apparaîtront maintenant. J'ai cliqué sur « Enregistrer » dessus, actualiser ici, et vous verrez que les quatre premiers éléments apparaissent. Idéalement, nous aimerions réduire le temps de chargement en limitant l' API pour ne nous envoyer que la quantité dont nous avons besoin. Ce 177 est exagéré. Il fonctionne toujours très rapidement, mais si nous parcourons notre documentation ici, il existe peut-être un moyen de limiter les produits. On y va. Obtenez un seul produit, créez un produit. C'est ce que l'on appelle une spécification d'API. Nous pouvons consulter cette page pour apprendre à utiliser l'API. Nous pouvons jeter un œil à la pagination. On y va. Nous pouvons fixer une limite. Allons-y. Nous allons descendre jusqu'ici, puis au bout, nous mettrons ? limite=4. Nous pourrions placer la limite au niveau de l'API. Rafraîchissant. J'en ai toujours 177. Jetons-y un coup d'œil. Peut-être devons-nous également mettre le décalage, donc oui, le décalage à zéro et la limite à 10. Nous pouvons séparer ces paramètres par le symbole de l'esperluette. Je vais actualiser notre application Web ici. Comme vous pouvez le constater, nous n' recevons que quatre depuis l'API, ce qui est mieux car nous ne faisons pas de demande plus longue que nécessaire. Dans cet esprit, nous pouvons même simplement supprimer cette instruction if et nous aurons toujours la même réponse, mais nous pouvons fixer une limite au front-end et au backend. Je veux que cela apparaisse un peu plus stylé, donc je vais copier et coller du CSS. heure actuelle, nous devrions toujours utiliser Tailwind Je vais donc le mettre dans mon fichier d'entrée ici, puis appuyer sur « Enregistrer » dessus. Rafraîchissez-le ici, et vous pouvez voir qu'il apparaît maintenant sous forme de grille. Très bien, maintenant, si je continue à rafraîchir et que vous dites chargement, nous obtenons à chaque fois de nouvelles données depuis l'API, et nous obtenons nos quatre belles cartes. Mais ajoutons-nous à cela et incorporons un peu d'interactivité. Si nous examinons réellement chacun de ces objets, vous pouvez voir que chacun d'eux possède un identifiant. Nous pouvons nous en servir pour identifier chacun d'entre eux. Ce que je vais faire, c'est créer une autre section ici afin que nous puissions cliquer sur l'une d'entre elles et approfondir ses données. Je vais revenir à notre application ici, et dans mes données, sous Produits, je vais ajouter un nouveau champ pour l'identifiant du produit sélectionné. Alors mettons-le à null pour commencer. Ensuite, ce que je vais faire de la même manière nous l'avons fait avec la variance, c' créer un champ calculé et il ne s'agira que du produit sélectionné est créer un champ calculé et il ne s'agira que du produit sélectionné. Il ne fera que déterminer l'objet du produit sélectionné à l'aide de l'identifiant du produit sélectionné. Il examinera les objets des produits, recherchera l'identifiant du produit sélectionné, puis renverra cet objet. Je vais renvoyer ce fichier .products en utilisant à nouveau la méthode de recherche. Ici, nous allons rechercher le produit dont l'identifiant correspond l' identifiant du produit sélectionné dans nos données. Ensuite, nous avons besoin d'une méthode pour définir l'identifiant du produit sélectionné. Je vais entrer ici et créer l'objet d'une méthode. À l'intérieur, nous pouvons créer une méthode appelée set selected product, et nous allons simplement prendre l'argument ID. Ce sera une méthode très simple. Tout ce que cela fera est de prendre l'identifiant transmis et de l'attribuer à cet identifiant de produit .selected. C'est très simple. Maintenant, afin de sélectionner le produit, je vais placer un écouteur d'événements sur chacune de ces fiches produits. La façon dont nous le faisons dans Vue est très simple. Tout ce que nous avons à faire est de mettre un attribut ici. Il commencera par le symbole at et l'attribut sera le nom de l'événement. Il s'agira d'un simple clic. Ensuite, nous disons en gros qu'en un clic, la méthode que nous voulons exécuter est de définir les produits sélectionnés. Ensuite, bien sûr, nous devons envoyer l'identifiant que nous voulons configurer pour ce produit. Je vais développer cela ici. s'agira simplement de l'identifiant du produit que nous sommes en train de parcourir en boucle. Si je clique sur « Enregistrer », nous devons encore créer cette section ici, mais vérifions simplement que tout fonctionne dans Vue DevTool jusqu'à présent. Lorsque nous chargerons le projet pour la première fois, vous verrez que l'ID de produit sélectionné est nul et que, par conséquent, nous avons une valeur indéfinie pour produit sélectionné dans Computed. Mais si je devais cliquer sur l'un d'entre eux, cela ne semble pas fonctionner. Permettez-moi de rafraîchir ici. Vous pouvez voir que, pour une raison ou une autre, elle n'est pas actualisée dans l'application elle-même ici. Mais si je cliquais sur la tomate à soupe, rafraîchissez ici, vous verrez que l'identifiant du produit sélectionné est 38. Comme nous avons un objet dans notre tableau avec cet identifiant, bien sûr, parce que nous l'avons utilisé comme option possible pour l'identifiant de produit sélectionné, nous sommes alors en mesure de calculer l'objet pour le produit sélectionné. Si je clique sur celui-ci et que je l'actualise, nous avons maintenant l'ID de produit sélectionné, 41, et nous récupérons donc l'objet du produit sélectionné. Maintenant, en gardant cela à l'esprit, il ne nous reste plus qu'à créer une autre section en fonction du produit sélectionné. Après cette collection, div ici, assurez-vous de la conserver dans l'application Vue. Sinon, ça ne marchera pas. Nous allons créer un div ici, et faisons un V if. Nous ne voulons pas l' afficher à moins que le produit sélectionné ne contienne des données. S'il s'agit simplement d'un objet vide ou nul, cela renverra la valeur false, donc il n'apparaîtra pas. Ensuite, nous allons lui attribuer une classe de produit. De quoi avons-nous besoin ici Nous aurons l'image et les informations sur le produit. Je vais commencer par l'image ici et charger dynamiquement le SRC, qui sera simplement sélectionné product.images, car n'oubliez pas que chacune d'elles contient plusieurs images. Nous allons simplement récupérer la première image du tableau, puis je vais créer un autre div appelé product info pour le reste des informations. Cela sera formaté sur le côté droit. Ensuite, je vais ajouter h1, nous utilisons toujours Tailwind Nous pouvons donc saisir certaines classes d'utilitaires Tailwinds ici, du texte 5xl, une police , du gras et une marge inférieure d'environ huit pixels, puis nous définirons cela le titre, le produit sélectionné. title. Ensuite, nous descendrons et nous fixerons le prix ici, prix, qui ne sera qu'une division. Ensuite, à l'intérieur de V, HTML, qui définira le code HTML interne en fonction d'une variable, nous placerons ensuite le produit sélectionné. Enfin, la description du produit, que je mettrai simplement en div lorsque vous mettrez une classe pour celui-ci. Mais je vais définir le code HTML interne sur la description du produit sélectionné, qui, selon moi, devrait correspondre à l'API. Jetons-y un coup d'œil. Sélectionnons-en un ici. Actualisation et description. Oui, il y a une description. OK, cool. Je vais encore une fois recopier les mêmes pour ne pas nous enliser là-dessus. Revenons ici, voyons si cela fonctionne. Si je clique dessus, rien ne se passe. Si je le fais glisser et que j'accède à la console, vous pouvez voir que nous avons quelques erreurs : « Impossible de lire les propriétés des images de lecture indéfinies ». Si vous rencontrez des erreurs, il est important de lire les messages d'erreur. Nous essayons de lire des images sur quelque chose qui n'est pas défini. J'ai évidemment commis une petite erreur ici. Laisse-moi regarder le code. Si je fais défiler la page vers le bas, vous pouvez voir que je l'ai mal orthographié. J'ai mis select product.images, j'étais censé taper selected. C'est juste une faute de frappe de ma part. Maintenant, si je clique dessus, vous verrez qu'il n'y a pas d'erreur, et vous verrez que je peux maintenant mettre à jour le produit sélectionné, ce qui mettra à jour cette section ici. Maintenant, le prix ne contient plus le symbole de la devise, donc je vais corriger cela rapidement. Je vais aller ici. Ce que nous pouvons faire, c'est que je peux mettre guillemets simples ici pour mettre une chaîne simple, puis je mettrai un plus après cela pour pouvoir combiner les deux et je cliquerai sur « Enregistrer ». Maintenant, quand je clique dessus, ils auront un signe de dollar devant eux. Nous pouvons importer des données à partir d'une API externe, puis, une fois qu'elles sont dans notre application, nous pouvons bénéficier de la réactivité d' un framework frontal, tel qu'une vue, afin de pouvoir interagir avec ces données. De toute évidence, cela ne correspond pas à l'image. Ce ne sont que des images aléatoires, nous avons des textes aléatoires. Mais tu comprends le point. Si nous connaissons notre code HTML, CSS et JavaScript sur le front-end et que nous savons comment accéder aux API et les intégrer à notre interface, nous pouvons créer une application pleinement fonctionnelle. Alors nous avons tout ce dont nous avons besoin. En tant que développeur Web frontal, avez besoin que d'un accès à une source de données. Vous n'avez pas besoin de créer le backend vous-même En tant que développeur front-end, je préfère avoir à écrire des applications. Je peux me concentrer sur le front-end et créer des expériences utilisateur vraiment intéressantes. Pour conclure cette leçon sur les API, je souhaite simplement vous montrer un autre endroit où nous pouvons vérifier que la demande d'API arrive bien. Si vous rencontrez des problèmes avec les demandes d'API, vous pouvez accéder à l'onglet Réseau, actualiser ici, vous pouvez filtrer par fetch XHR car n'oubliez pas que nous utilisons un fetch ici. Cela vérifiera toutes les API externes auxquelles nous nous connectons. Si je clique dessus, vous pouvez voir le point de terminaison de l'API. Si je le survole, il devrait vous montrer le point de terminaison total de l'API. Ensuite, vous pouvez regarder ici les paramètres qui entrent en ligne de compte. Décalage zéro, limite quatre, puis nous pouvons voir la réponse ici, bien formatée. Il y a quelques endroits où vous pouvez consulter la réponse. Nous pouvons le déconnecter sur console ici, consulter l' onglet Réseau, ou si nous utilisons quelque chose comme Vue, nous pouvons regarder à l'intérieur ici et voir ce qui se trouve notre gamme de produits si nous capturons des données provenant d'une source externe et les insérons dans notre application Vue. Nous pouvons le consulter ici dans notre onglet réseau ou nous pouvons le déconnecter sur console et l' afficher de cette façon également. Mais je voulais juste terminer là-dessus. Vous pouvez voir ici que les données arrivent et que nous pouvons maintenant les utiliser dans notre application. C'est essentiellement tout ce que nous allons aborder dans le cours d'aujourd'hui. Dans la vidéo suivante, je vais vous montrer comment configurer votre projet de classe, puis nous terminerons ce cours. 12. Configuration de projet: Pour votre projet de classe, je souhaite que vous créiez une application Web simple répondant aux exigences suivantes qui utilise une API externe pour afficher les données de manière élégante. Pour vous aider, je vais vous aider à configurer votre environnement de développement et de production. C'est une façon sophistiquée de décrire les projets configurés sur votre ordinateur et les étapes à suivre pour les mettre sur Internet. Tout d'abord, vous allez vouloir créer un dossier pour votre projet. Je vais juste appeler ce projet de développement Web moderne, mais appelez-le comme vous voulez. Dans ce projet, nous allons configurer NPM et git ici. Ce que je vais faire, c'est ouvrir Visual Studio Code. Je vais l'agrandir à la largeur et à la hauteur de votre écran. Ensuite, j'utiliserai le raccourci Command O pour ouvrir notre dossier de code et ouvrir ce projet. Nous avons maintenant un dossier vide ouvert dans Visual Studio Code. Ensuite, je vais ouvrir le terminal, donc contrôler la case retour. Nous avons maintenant un terminal ouvert dans notre application ou dans notre projet. Ce que je vais faire, c'est exécuter git init pour créer un dépôt git vide. Cela nous aidera à gérer les différentes versions de notre code et à diffuser notre code sur Internet. Nous allons utiliser les pages GitHub dans cette vidéo ici, mais vous pouvez le faire par d'autres moyens si vous le souhaitez. GitHub Pages est simplement le moyen le plus simple de le faire. Ensuite, je vais également mettre un init NPM ici. Vous pouvez nommer le projet comme vous le souhaitez. Je vais juste appuyer sur Entrée sur tout pour accepter toutes les valeurs par défaut. Cela va nous donner un package.json. Ensuite, je vais créer un fichier avec le nom de fichier exact de git ignore. Ce fichier fournit une liste de fichiers et de dossiers qui doivent être ignorés lorsque nous transférons notre référentiel. Si vous vous souvenez de la leçon de l' époque où nous avons installé NPM créé un package.json et exécuté NPM install. Il a créé un dossier de modules de nœuds. Dans ce dossier de modules de nœuds, il y avait tous les différents codes pour les différents modules. Ce code ne change jamais. Nous n'avons pas besoin de valider ce code sur GitHub. Nous pouvons simplement, quel que soit l'endroit où nous envoyons notre code, installer les packages répertoriés dans le fichier package.json. Nous n'avons pas réellement besoin du dossier node modules lorsque nous envoyons ce projet ailleurs, nous avons juste besoin du package.json. Je vais supprimer les modules de nœuds lorsqu'ils apparaîtront. Nous ne voulons pas que les modules de nœuds apparaissent dans git. Je vais maintenant ajouter mes fichiers de départ. Je vais créer un fichier index.html. Ici, je vais utiliser ce code standard que j'ai prévisualisé au tout début du cours, créant simplement un document standard HTML5 ici. Je vais cliquer sur la touche Tab jusqu' à ce que le document se trouve entre ces deux balises de titre. Je vais l'appeler comme je veux. Disons qu'il s' agit d'une application à faire, ou de mon premier site Web, ou quelque chose comme ça. Vous pouvez mettre à jour le titre ici. Si vous appuyez à nouveau, vous entrez dans le body tag. Ensuite, je vais créer un dossier pour le CSS. Dans ce dossier, créez un fichier styles.CSS ici. Ensuite, je vais créer un dossier JavaScript. Dans le dossier JavaScript, je vais créer un fichier principal, application ou un fichier index.js. Ça n'a pas vraiment d'importance. Je vais juste l'appeler Main dans ce cas. Ensuite, bien sûr, nous devons lier ces deux fichiers à notre fichier HTML. Ici, je vais créer un lien vers une véritable feuille de style. Ensuite, je mettrai href et je créerai un lien vers le style qui est maintenant imbriqué dans le dossier CSS. Je vais m'assurer de l'ajouter au chemin. Ensuite, à l'intérieur de notre balise body, je vais insérer une balise de script et un attribut SRC. Ici, vous pouvez voir que nous pouvons parcourir le chemin d'accès au fichier main.js. Maintenant que nous avons tous nos éléments de base, le CSS, le JavaScript et le HTML, je vais lancer git add. pour tout ajouter à notre premier commit git, tout ce qui est à l'exception des modules de nœuds, mais nous n'avons pas encore de modules de nœuds. Je vais m'enregistrer ici. Il s'agit de tous nos changements échelonnés. Nous pouvons soit écrire notre message de validation puis appuyer sur Commit ici, soit le faire en ligne de commande, Git commit -m pour le message, et j'appellerai cette validation initiale. Maintenant, tout est engagé. Nous avons juste besoin de créer un dépôt git. Mais d'abord, je veux réellement mettre du contenu sur la page. J'aurais probablement dû le faire avant de m'engager. Mais disons simplement que nous voulons un h1 avec mon premier site Web. Cliquez sur Enregistrer pour cela. Vous pouvez le voir ici, dans notre panneau de contrôle des sources, où vous pouvez vérifier les modifications que nous avons apportées. C'est très pratique pendant le développement. Je le recommande vivement si vous êtes à l'aise, utilisez Git. Mais bien sûr, nous n'avons pas parlé de Git dans ce cours. Si vous souhaitez simplement l'utiliser pour mettre votre site Web en ligne, comme je vous le montre ici, vous pouvez simplement l'utiliser pour cela. Il n'y a aucun problème. Je vais ouvrir une fenêtre ici pour GitHub, puis nous pourrons créer un compte GitHub et créer notre référentiel distant, qui sera la façon dont nous allons publier notre site Web sur Internet. Je ne vais pas suivre toutes les étapes pour créer un compte GitHub. J'ai déjà un compte GitHub. C'est assez courant chez les développeurs, presque tous les développeurs ont un compte GitHub, c'est juste un endroit pour stocker du code en ligne. Une fois votre compte configuré, vous pouvez simplement vous rendre sur GitHub.com slash new pour créer un nouveau référentiel. Je vais dire que c'est mon premier site Web, disons, et je vais le rendre public parce que nous allons le publier sur Internet. Nous n'avons pas besoin d'en ajouter ici, car nous l'avons déjà ajouté à notre projet. Je vais cliquer sur Créer un référentiel et vous pouvez voir ici que nous avons notre référentiel public. Tout ce que j'ai à faire est de récupérer cette partie ici, qui ajoutera l' origine distante à notre projet local. Je vais copier cette commande. Vous pouvez également le voir ici sous la rubrique Publier un référentiel existant pour la ligne de commande. Ensuite, j'irai jusqu'ici. Je vais ajouter cette origine distante. Appuyez sur Entrée. S'il n'y a pas d'erreur, cela aurait dû fonctionner. Je vais ensuite valider cette rubrique, ce que je n'ai pas fait la dernière fois. Je vais le faire via Visual Studio Code cette fois. J'ai ajouté une étiquette de titre. Je vais juste dire que j'ai ajouté un titre. Je vais cliquer avec le bouton droit de la souris, puis cliquer sur Stage Change. Ensuite, il y aura des changements d'étape. Je vais appuyer sur Valider , puis je pourrai cliquer sur ce bouton pour Publier la branche. Je vais cliquer sur Publier, et maintenant nous l'avons transmis à notre source distante. Vous pouvez voir ici mon premier site Web. n'y a rien ici, mais si je rafraîchis maintenant, vous pouvez voir que le code de notre site Web est maintenant sur GitHub. Maintenant, pour en faire un site Web, il suffit d' activer les pages GitHub. Je vais accéder à l'onglet Paramètres ici. Ensuite, je vais passer aux pages consacrées au code et à l'automatisation. Ensuite, je vais cliquer sur « Déployer depuis une branche », puis je vais sélectionner la branche dont nous n'avons qu'une, qui est la branche principale. Je vais appuyer sur « Enregistrer » là-dessus, et maintenant, nous devrions pouvoir aller à cette adresse, qui est votre nom d'utilisateur.github.io. Ouvrez-le dans un nouvel onglet, puis je mettrai barre oblique suivie du nom du référentiel, mon premier site Web. Vous pouvez voir qu'il n'y a pas encore de page. Il est probablement toujours en cours de chargement et nous pouvons vérifier l'état du chargement en accédant à Actions ici. Comme vous pouvez le constater, un flux de travail est en train de se créer ici. Il était en jaune il y a à peine une seconde, mais maintenant il fonctionne. Si nous actualisons cette page, vous verrez mon premier site Web. Le processus de déploiement de notre site Web une fois que nous avons apporté une modification consiste simplement à faire ce que nous venons de faire lorsque nous avons ajouté cette rubrique. Nous ne faisons que créer le changement. Nous avons effectué le changement ici dans notre ligne de commande en exécutant git add. Une fois que c'est ajouté, nous exécutons git commit avec dash m pour le message, ou nous utilisons l'interface utilisateur Visual Studio Code, puis nous cliquons sur ce bouton, puis sur Publier, ou nous pouvons exécuter la commande git push origin, ou nous pouvons exécuter la commande git push origin, qui devrait fonctionner, ou plus précisément, git push origin master. Ajoutons maintenant un package pour vous montrer qu'en action, je vais exécuter clairement ici et exécuter la même commande que celle que nous avions auparavant pour installer Tailwind en tant que dépendance de développement. NPM installe Dash Capital D, tailwindcss. Appuyez sur « Enter » dessus. Comme vous pouvez le constater, nous avons maintenant ajouté un fichier package dash loc.json qui enregistre les versions exactes de toutes les dépendances. Tu n'as pas à t'inquiéter à ce sujet. Tout cela est généré automatiquement pour nous, mais nous voulons le valider. Vous pouvez voir ici que notre package.json a désormais une ligne ajoutée ou trois lignes ajoutées pour les dépendances de développement et que Tailwind a été ajouté. Ensuite, nous avons également ce dossier de modules de nœuds, mais il est en gris, ce qui indique qu'il ne sera pas validé dans git et qu'il n'ira donc pas sur GitHub. Mais comme je l'ai dit, Github remplira automatiquement ce dossier sur le serveur étant donné qu'il sait quelles dépendances installer ici nous reste donc qu'à envoyer le package.json. Ce que je vais faire, c'est copier et coller dans le fichier tailwind.config.js que nous avions auparavant, puis je copierai et collerai dans les scripts que nous avons créés. Ici, Tailwind Colon build et Tailwind Colon Run, et comme vous pouvez le constater, nos chemins sont mis à jour ici. Nous allons rechercher un fichier tailwind.css à traiter et qui sera compilé en styles.css, qui est le fichier que nous avons ici. C'est ce que nous allons faire. Nous allons créer un nouveau fichier ici, appeler tailwind.css et récupérer les utilitaires de base de Tailwind. Ensuite, l'autre concernait les composants de Tailwind, qui, je pense, se situent entre les deux. Nous allons appuyer sur « Enregistrer » dessus, puis exécuter npm, lancer Tailwind build. Nous allons l'exécuter une fois, qui va maintenant mettre à jour notre fichier styles.css avant le code de Tailwind en fonction de ce que nous avons écrit ici et de ce que nous avons inclus dans notre fichier de configuration. Ensuite, si nous cliquons sur Go Live pour démarrer une version locale, nous devrions commencer à voir nos styles HTML par défaut s' effondrer et être remplacés par Tailwind, ce qui n'est pas le cas. Entrons simplement dans notre fichier index.html ici et vérifions que notre balise est correcte. J'ai raté une occasion , une feuille de style. Si je clique sur Enregistrer lors de cette actualisation, vous pouvez voir que le style par défaut pour H1 a maintenant été supprimé car nous utilisons désormais Tailwind et vous pouvez voir ici tous les éléments de Tailwind qui seront publiés. Ce que nous allons faire, c'est lui redonner un peu de style via Tailwind, comme nous le faisions auparavant, avec du texte 5xl, une police de caractères gras, et lui donner une marge inférieure d' environ huit pixels. Je vais appuyer sur « Enregistrer » là-dessus. Cela affecte déjà l' élément et notre projet avec Tailwind est maintenant installé. Maintenant, reprenons le processus de déploiement. Nous avons apporté quelques modifications ici. Vous pouvez voir ici que nous y avons corrigé la balise CSS. Nous avons ajouté certaines classes utilitaires Tailwind. Package/loc.json a été ajouté. Nous avons mis à jour notre fichier package.json. Nous avons ajouté le fichier de configuration Tailwind , puis tous les éléments CSS. Nous pouvons récupérer tout cela et cliquer avec le bouton droit sur « Changements d'étape », ou inversement , indépendamment de éditeur de code que vous utilisez, nous pouvons simplement exécuter git add point pour les ajouter tous en tant que modifications d'étape. Vous y voilà. Il sera mis à jour ici, puis nous pourrons écrire un commit git avec le message indiquant que Tailwind a été ajouté et est maintenant validé. Comme vous pouvez le voir ici, nous pouvons cliquer ici pour le synchroniser avec GitHub. Maintenant, si nous changeons ici, ce sera notre version locale. Il s'agit d'une autre version locale. Je vais fermer celui-ci, puis nous irons ici. Vous pouvez voir dans nos flux que notre application est en cours de déploiement Nous allons donc simplement attendre que cela soit terminé. Cela se produira automatiquement à chaque fois que nous allons sur GitHub, car nous avons configuré les paramètres des pages dans les paramètres ici, et comme vous pouvez le voir, c'est presque là. Nous y voilà. Au bout d'une minute, il est maintenant créé et si nous revenons à l'adresse où se trouve notre site Web, ici même, nous l'actualisons, vous pouvez voir les modifications que nous avons apportées il y a un instant à notre version locale. Comme je l'ai mentionné, lorsque nous allons ici et que nous entrons dans le code ici, vous pouvez voir que le dossier des modules de nœuds ne se trouve pas dans notre GitHub, car lorsque GitHub déploie notre site Web, il installe automatiquement les bons modules de nœuds en fonction de notre fichier package.json ici, qui indique au serveur sur lequel nous le déployons d'installer ce dev dépendance et toute dépendance de développement qui repose sur cette dépendance. Il s'agit d'un exemple de flux de travail que vous pouvez parcourir pour créer votre projet de classe ou tout autre projet futur. Créez un dépôt git, transformez votre projet en projet NPM, créez vos fichiers, travaillez, transférez vers GitHub, puis vous pouvez voir votre résultat ici. Lorsque vous avez terminé et que vous souhaitez partager avec la classe, vous pouvez le faire dans la section des projets de classe. C'est ça. Dans la vidéo suivante, nous conclurons le cours et je vais vous montrer comment vous pouvez approfondir certains des concepts dont nous avons parlé dans le cours d'aujourd'hui. Assurez-vous de cliquer sur la vidéo suivante et terminons ce cours. 13. Conclusion: Félicitations, vous avez terminé ce cours sur le développement Web frontal moderne. Je sais que nous avons abordé une gamme d' outils et de langages dans ce cours, mais je peux vous assurer que vous n'avez pas besoin d' être un expert ces domaines pour vous lancer dans le développement Web frontal. L'objectif de ce cours était de donner un aperçu des outils et des langages utilisés pour créer des expériences frontales sur le Web. Dans ce court cours, nous avons abordé une suite complète de concepts de développement Web frontal qui, pour bien les apprendre , demanderaient encore de nombreuses heures d' apprentissage et de pratique. J'espère que ce cours vous a permis d'avoir une vue d'ensemble de la place de chaque technologie dans le processus de développement Web frontal. Si vous souhaitez approfondir vos connaissances, vous pouvez consulter ma gamme complète de cours sur christhefreelancer.com/courses. Comme toujours, si vous avez des questions ou des préoccupations concernant ce que nous avons abordé dans le cours d'aujourd'hui, laissez un commentaire dans la zone de discussion ci-dessous, et je ferai de mon mieux pour vous indiquer la bonne direction. Comme toujours, merci de m'avoir écouté et j'espère vous revoir lors de certains de mes autres cours.