1. Introduction : Les bases du design web réactif - HTML5 CSS3 Bootstrap: Salut là. Je m'appelle Daniel Scotts. Ensemble, nous allons apprendre à créer des sites web réactifs. Nous construirons des sites Web professionnels modernes qui ont l'air bien sur mobile, tablette et ordinateur de bureau. Nous construirons ensemble pour les sites. Ce site de restaurant simple, ce site de réparation de vélo un peu plus avancé. ce site web de portefeuille responsive, et il y a un site bootstrap pour mon prototype de yogourt société. Maintenant, vous allez apprendre tout ce dont vous avez besoin pour créer un site web, à partir de votre première page, jusqu'au téléchargement sur Internet. Nous allons utiliser l'outil de conception de site Web le plus populaire et étonnamment gratuit au monde appelé Visual Studio Code. Il y a des fichiers d'exercices téléchargeables pour que vous puissiez suivre avec moi et chaque vidéo. A la fin de chaque vidéo aussi, je vais enregistrer où je suis, de sorte qu'au cas où vous vous perdrez ou quelque chose ne va pas, vous pouvez copier vos fichiers, mais mes fichiers, c'est un moyen agréable et facile de vous assurer que vous ne vous perdez pas. Nous allons couvrir toutes les bonnes choses comme la façon de créer votre propre [inaudible] à partir de zéro en utilisant du JavaScript de base et jQuery. Apprenez à travailler avec des images et des icônes réactives, ainsi que des images d'arrière-plan plein écran fantaisie et probablement des dégradés un à plusieurs. Nous apprendrons à créer des polices et à choisir de bonnes polices pour votre site Web. Nous allons apprendre à travailler avec les polices Bootstrap, configurer directement votre propre nom de domaine et l'hébergement et comment le télécharger en direct sur Internet afin que d'autres personnes puissent voir votre site. Tout au long du cours, j' ai mis en place des projets de cours amusants afin que vous puissiez pratiquer tout ce que vous apprenez dans le cours. À la fin de ce cours, vous allez avoir une très bonne compréhension des sujets importants de conception web comme HTML5, CSS3, flexbox, responsive design Bootstrap. Si tout cela semble un peu effrayant et un peu fantaisiste, ne vous inquiétez pas, ce cours s'adresse aux débutants. Vous n'avez pas besoin d'expérience dans le design web. Vous n'avez pas besoin d'avoir codé une seule ligne dans votre vie. Ici, nous allons commencer dès le début et travailler notre chemin étape par étape. Qui suis-je ? Je m'appelle Daniel Scotts et je n'ai pas été designer web depuis environ 15 ans maintenant. Je suis aussi un instructeur primé depuis deux ans d'affilée. Un, un Mx Masters Award lors de la grande conférence Adobe MAX. J' ai aussi des lunettes et un t-shirt cool. Je suis presque sûr que la combinaison de la justice à elle seule devrait me faire qualifier, peut-être. Si vous êtes enfin prêt à vous mettre à niveau, inscrivez-vous pour les plus cool, et construisons ensemble des sites web réactifs. 2. Comment est structuré ce cours de conception de sites web: Salut là, bienvenue au cours. Cette vidéo, je veux parler de la façon dont ce cours est structuré. Donc, il est divisé en cinq parties, commencera au début avec juste une véritable introduction de base au HTML et CSS. Ensuite, nous commencerons notre tout premier projet. Donc phase 1, introduction rapide. La deuxième phase permettra de construire ce site Web. Donc, nous allons prendre une sorte d'introduction HTML et CSS de base et syntoniser ce site ici. Juste agréable simple pour commencer. La troisième chose que nous allons faire est que nous allons créer ce site de cycles de règles. Maintenant, ce site est juste un peu plus avancé. Disons que c'est HTML intermédiaire et CSS. Nous couvrons les bases et le premier, puis nous entrons dans cela un peu plus de détails ici.La troisième partie est que nous allons rendre notre site réactif. Cela signifie juste qu'il va s'ajuster pour les différents navigateurs. Donc, les téléphones mobiles, les tablettes et les sites Web. C' est celui-là. C'est un site de portefeuille, sympa, simple. Vous pouvez voir ici, il s'ajuste pour différentes largeurs de navigateur. Ensuite, la finale du cours est à la recherche d'un cadre.Le cadre que nous allons utiliser dans ce cours est appelé Bootstrap. C' est super populaire et cela signifie simplement que nous pouvons prendre toutes les connaissances que nous connaissons jusqu' à présent et le condenser et l'utiliser très rapidement pour construire des sites. Nous allons présenter des choses comme ce jQuery Slider ici. Les images glissent à travers, il y a ce curseur sur le fond est il facile mobile Nev. C' est un excellent ajout à tous ceux qui construisent des sites Web. Un cadre comme Bootstrap va le faire aller super vite, rendre super professionnel sans que vous ayez à faire tout le levage lourd. J' espère que vous êtes prêt. Il est temps de commencer et de commencer à construire des sites Web. Je te verrai dans le cours. 3. Ce qu'il faut télécharger pour le cours de conception de sites web: D' accord. Parlons de ce que vous devez télécharger et de ce que vous devez installer. Le téléchargement est simple. Il y a des fichiers d'exercice. Il y aura un lien sur la page ici quelque part pour les télécharger, et ils seront tout ce que nous utiliserons, comme des images et des tiques que nous utiliserons tout au long du cours. Téléchargez-les. À l'intérieur du même fichier que vous téléchargez, il y aura quelque chose qui s'appelle les Fichiers Complétés. Il y aura un dossier à l'intérieur. Ce qu'ils sont, c'est à la fin de chaque vidéo, ce que je fais, c'est que je sauve là où je suis à la hauteur. Si vous suivez le long et ne pas obtenir les mêmes résultats, vous pouvez simplement regarder le numéro de la vidéo, puis jeter un oeil aux fichiers remplis et juste correspondre ma version avec votre version et aller. Souvent, c'est peut-être juste une erreur d'orthographe ou de syntaxe, mais vous pouvez comparer la vôtre qui fonctionne ou la mienne qui fonctionne avec la vôtre qui peut ne pas l'être. Ils sont à l'intérieur des fichiers d'exercice et les fichiers terminés sont tout à fait. Une autre chose dont il faut parler est de quoi télécharger. Nous allons tester nos sites Web dans Google Chrome. Assurez-vous de télécharger cela. Google Chrome est de loin le navigateur le plus populaire en ce moment. Téléchargez cela et nous ferons tous nos tests à l'intérieur de cela. C' est comme Firefox, ou Safari, ou Microsoft Edge, ou Internet Explorer, mais c'est le plus populaire. Accédez au site Web de Google Chrome et ils vous montreront comment l'installer. L' autre chose à installer est un éditeur de code. Nous allons utiliser Visual Studio Code. Pourquoi ? Il y a beaucoup d'éditeurs de code différents. Vous n'avez pas besoin spécifiquement de celui-ci, mais vous en aurez besoin pour ce cours particulier. Parce que fondamentalement un site Web est un mélange de HTML, CSS et JavaScript, et vous pouvez utiliser n'importe quel éditeur de code pour le faire. Nous allons utiliser Visual Studio Code, pas Visual Studio. C' est un produit plus gros. Vous avez besoin du code Visual Studio spécifique. C'est gratuit. Il est fabriqué par Microsoft. Juste pour que vous sachiez cependant, je l'utilise principalement parce que c'est le plus populaire en ce moment. Si vous cherchez à travailler après ce cours, vous allez probablement finir dans un studio où ils utilisent Visual Studio Code. Vous devez bien apprendre la même chose. Les techniques et les outils que vous allez apprendre dans ce cours vont appliquer la même chose si vous utilisez un éditeur de code différent. Disons que vous utilisez Atom, ou Sublime, ou Notepad ++. Ils sont tous de bons éditeurs, mais ils finissent par faire la même chose. Les raccourcis sont différents, ils ont différentes façons de travailler, mais la sortie est la même. Donc, ne suez pas si vous apprenez tous ces trucs dans Visual Studio Code et que vous devez aller utiliser un autre éditeur. Tout va s'appliquer adorable. Mais oui, installez Chrome, installez le code Visual Studio. Les deux sont gratuits et je le verrai dans la prochaine vidéo. 4. Créer et tester notre première page web HTML: Salut tout le monde. Cette vidéo, nous allons faire notre toute première page web. Ça ne va pas être vraiment excitant, ça va dire « Hello World », et dans un navigateur, il va vous montrer « Hello World ». Le cours devient beaucoup plus excitant, mais nous devons faire les bases, et cela comprend comment configurer un dossier pour notre site Web, comment créer notre première page HTML, et comment le tester dans un navigateur. Faisons-le. Nous avons donc installé Visual Studio Code, et nous l'avons ouvert devant nous. Maintenant, le vôtre aura l'air légèrement différent du mien. Nous avons cet onglet de bienvenue ouvert en haut, vous pourriez avoir un autre onglet s'ouvre en disant Nouvelles versions de documents ou quelque chose de similaire, et aussi le vôtre pourrait sembler légèrement différent parce que j'utilise un Mac tout au long de ce cours et vous pourriez utiliser un PC. Ne vous inquiétez pas qu'ils travaillent de la même façon. Certains des raccourcis sont légèrement différents, mais nous les couvrirons pendant le cours. Cela peut être un peu intimidant cet écran d'accueil et tous les autres onglets en haut. Donc, juste pour rendre tout clair et facile, fermez tous les onglets le long du haut en frappant cette petite croix ici, cliquez dessus une fois sur tous jusqu'à ce que vous finissiez avec cette belle, propre, application claire. L' autre différence que vous pourriez avoir aussi est le long du côté ici a un tas d'onglets. Cela va être utile, mais pour le moment, si vous cliquez sur le haut une fois, disparaît deux fois, tout est agréable et propre, et allons créer notre premier fichier. Pour créer notre toute première page web, elle doit aller dans un dossier. Il ne peut pas simplement se trouver dans votre dossier de documents ou sur votre bureau, il doit aller dans un dossier et tout pour ce site Web doit aller dans ce même dossier. Donc, pour créer ce dossier, allons dans Fichier et allons à Ouvrir, ce qui est bizarre. Allez dans un fichier, Ouvrir et il est dit, « Quel dossier voulez-vous ouvrir ? » On ne l'a pas encore créé. Attendez. Donc ce que nous faisons est sur un Mac, il y a un bouton Nouveau Dossier sur un PC, c'est légèrement différent, vous cherchez ça, c'est une petite icône Nouveau Dossier [inaudible] jaune avec un petit point d'exclamation dans le coin, et décidez où vous allez le mettre. Pour ce cours, je vais le mettre sur mon bureau. Regardez à quel point mon bureau est propre, je nettoie totalement cela pour ce cours. Mais de toute façon, Desktop, New Folder, comment allons-nous l'appeler ? On va l'appeler Projet 0. Cliquez sur « Créer », et c'est mon dossier. Je suis dans le projet 0, et je vais cliquer sur « OPE"N. Parfois, vous devez le sélectionner, puis cliquer sur « Ouvrir ». Vous savez que c'est juste quand vous êtes au sommet et qu'il est écrit « Bienvenue au projet 0 » en haut. Sur le côté ici, il devrait avoir cette option, Project 0. Il n'y a rien à l'intérieur. Mais ces écrans de bienvenue reviennent. Va-t'en. Donc, nous avons le dossier et tout ce qu'il est sur mon bureau, c'est que j'ai un dossier avec rien dedans. Donc on fait juste un dossier comme ça. Peu importe la façon dont vous créez ce dossier tant qu'il existe, et vous avez pointé VS Code. Maintenant, nous devons créer notre page. Nous allons créer notre toute première page HTML. Allons à Fichier, allons à Nouveau Fichier. On va le sauvegarder, File, Save, et on va le mettre. Eh bien, il devrait automatiquement savoir où aller. Il va dans le projet 0, et celui-ci va s'appeler helloworld.html. Ne lui donnez pas d'espaces, un mot et il doit be.html, nous allons cliquer sur « Enregistrer », et juste ici dans notre éditeur, tapons Hello World. Allons à Fichier, Enregistrer. Je vais arrêter de vous montrer le long chemin. Donc mon Mac, c'est Command S. Sur un PC, c'est Control S. Je vais juste dire Save à partir de maintenant. Maintenant, nous devons trouver comment prévisualiser cette chose parce que nous l'avons fait, vous avez fait un site Web, un tout petit. Mais comment le vérifions-nous ? Nous devons utiliser Google Chrome. Alors allez dans Google Chrome ouvert. J' ai donc ouvert Google Chrome et nous allons aller à Fichier, puis ouvrir le fichier, puis nous allons trouver notre projet 0. C' est sur mon bureau. Il y a là le projet 0, à l'intérieur du Hello World. Avant de cliquer sur Ouvrir, rappelez-vous ce moment, si vous avez déjà fait un site Web avant, n'est pas aussi excitant, cen'est pas aussi excitant, mais si c'est votre tout premier, préparez-vous pour ce moment, ce moment de gloire, prêt ? C' est ça. C'est votre site Web Hello World. Mais regardez autour de vous, souvenez-vous de ce moment. C' est la première chose que vous avez jamais faite. Je me souviens quand j'ai fait mes premiers sites Web, c'était un peu plus excitant. Le monde Hello, le vôtre le sera aussi, et je vais vous montrer le site Web que j'ai fait mon tout premier un peu plus tard. Je pense que si je vous le montre ici, vous pourriez [inaudible] partir. De toute façon. C'était mauvais, mais c'était il y a 20 ans. Donc, nous allons récapituler le processus dans le code VS. Ici, nous allons mettre un point d'exclamation, puis appuyer sur « Fichier », « Enregistrer », je promets de ne pas vous montrer loin, je l'ai fait. Revenez ensuite à Google Chrome et il n'a pas été mis à jour. Donc, chaque fois que vous effectuez une sauvegarde ou apportez une modification dans VS Code, appuyez sur ce petit bouton Actualiser, ou sur le bouton Recharger. Si tu ne peux pas le voir là-haut, ça sera quelque part. Où est Reload ? Je ne sais même pas le long chemin pour Reload il est là. Donc, si vous rechargez, il est là. Point d'exclamation. C'est donc le processus. Faites le codage dans VS Code, vérifiez votre site Web dans Chrome pour vous assurer qu'il fonctionne bien, il n'est pas cassé, et vous faites un peu de danse parce que vous avez fait un site Web, si le vôtre a cassé pendant ce processus. C' est un mauvais départ. C'est bon. Ce qui se passe probablement, c'est que vous oubliez d'ajouter the.html, si cela arrive. Tu viens d'avoir quelque chose qui s'appelle Hello World, pas le HTML. Cela vous arrivera. Tu dis : « Bien sûr que je l'ai fait. J'ai suivi Dan. Plus tard dans ce cours, si vous êtes nouveau, cela vous arrivera. Donc tout ce que tu fais, c'est ici, dans l'un ou l'autre d'entre eux. Cela peut être un peu déroutant, cet explorateur. Cela dit, vous toute la page que vous avez ouverte ici. Cela vous indique tous les fichiers possibles dans votre dossier. Maintenant, le problème avec ça, c'est que vous n'avez qu'un et chacun, donc ils se répètent juste. De toute façon. Vous pouvez double-cliquer dessus ici. Non. Vous pouvez cliquer avec le bouton droit de la souris et aller à celui qui dit Renommer, et pour dire que c'était missing.html ou que vous l'avez mal orthographié, il suffit de le taper, appuyez sur Retour. Ensuite, allez tester ce fichier dans Chrome, et ça ira. Ce n'est pas vraiment Web Design. C' est le début. Passons à la vidéo suivante où nous commençons réellement à faire du HTML approprié et du CSS approprié. 5. Qu'est-ce que HTML5 et CSS3 dans la conception de sites web ?: Salut là. Cette vidéo est tout sur l'apprentissage des fondamentaux absolus de ce qu'est HTML, par rapport à ce qu'est CSS. Vous pouvez ignorer cela si vous avez une compréhension de base. Nous allons faire des choses vraiment simples ici, nous allons ajouter des balises HTML. Cela ressemblera à ça, et ensuite nous allons les bloquer en utilisant CSS, et cela ressemblera à, ici nous allons. Oh, c'est mieux, pas pire. Mais tu as l'idée ? Nous allons faire du HTML, puis le rendre joli en utilisant CSS. Sautons dans la vidéo, et apprenons comment. Pour commencer, nous allons d'abord taper notre code HTML. Donc, ce mot « Bonjour monde », n' est pas HTML, c'est juste un vieux texte que nous avons tapé, supprimez-le. Lorsque nous écrivons du HTML, nous devons suivre une syntaxe. Nous allons donc mettre quelque chose appelé un titre, et dans ce cas la rubrique 1, la rubrique la plus importante sur un site Web, et un HTML utilise l'abréviation de h1. Maintenant, nous ne pouvons pas simplement taper h1, nous devons l'envelopper entre crochets. Ouvrez donc les supports d'angle, <h1> puis fermez les supports d'angle. Vous pouvez le voir ici, il a fait quelques choses. Nous avons tapé notre, nous mettons les crochets de chaque côté, et vous remarquerez que le code VS, automatiquement mis dans cette balise de fermeture supplémentaire. C' est ainsi que le HTML fonctionne. C' est une étiquette d'emballage. C' est une étiquette qui va autour du début, et de la fin et tout au milieu. C' est mon cap, en direction d'un même. Tant qu'il y a d'un côté, l'autre côté l'enroulé dans des crochets d'angle, la fermeture, vous remarquerez a cette barre oblique avant, et cela indique au navigateur que c'est mon titre. Sauvegardez-le, vérifions-le dans Google Chrome. Vous pouvez voir là, rafraîchir. J' ai ma rubrique 1, c'est grand, c'est audacieux, c'est Times New Roman, c'est noir. Il s'agit d'un paramètre par défaut pour un titre 1. Ajoutons quelques autres balises HTML. Ici, on va revenir. Je vais taper des crochets d'angle, les fermer, vous verrez qu'il met dans la syntaxe supplémentaire. Si ce n'est pas le cas, pour une raison quelconque, vous pouvez simplement le taper. Donc je vais commencer à taper, il veut vraiment aider. Merci, code VS. Écrivons juste la rubrique 2. Ce sont quelques balises HTML de base brutes. Un autre très commun est une balise p, donc les crochets d'angle , fermez-le, et est le corps du texte. Vous n'en aurez probablement qu'un sur votre page, mais vous aurez beaucoup de textes de paragraphe différents car c'est le corps du texte. Enregistrez-le, vérifiez dans notre navigateur. Vous pouvez voir qu'il s'agit du style par défaut pour ces trois balises. Pour remplacer le style, c'est pourquoi CSS entre en jeu. Donc, ce que nous devons faire est notre HTML est comme des choses sur la page, et notre CSS est le style de ces choses dans la page. Pour que cela fonctionne, mettons quelques retours en haut ici, et le type de balise appelé style. Fermez-le, et encore une fois il met dans la balise de fermeture, et ce que je viens de faire là, c'est que j'ai mis quelques retours. retours ne signifient rien dans le code, vous pouvez en avoir un million. Il ne s'affichera pas sur la page. J' utilise juste beaucoup de retours quand je coiffe des choses juste pour obtenir une rupture visuelle de différentes parties plutôt que d'essayer de les entasser tous ensemble. Parce que ce que vous remarquerez ici, c'est que si je supprime ça, je parle juste de ça. Sur la même ligne, si je l'enregistre, vous remarquerez ici dans Chrome, c'est exactement la même chose. Donc, peu importe si vous mettez des retours ici un non, sauf que, il semble difficile de travailler sur. Dans cette balise de style, c'est là que va aller notre CSS. CSS a un type de syntaxe différent, alors que HTML avait un angle de fermeture entre crochets, et une barre oblique vers l'avant. Le CSS, vous faites des choses comme ça. Tu dis : « Je veux le h1. » C' est ce qu'on appelle le sélecteur. Je sélectionne le h1. Ensuite, vous le mettez dans un espace, puis mettez dans les crochets bouclés plutôt que les crochets d'angle. Je vais mettre un retour sur mes supports bouclés, juste pour le séparer, pas pour une raison autre que cela semble un peu plus facile à communiquer avec vous. Ici, je vais faire un peu de style h1, et nous allons commencer par la couleur. On doit l'épeler à la façon américaine. Couleur, et après cela, c'est la propriété, donc sélecteur, je sélectionne le h1, je veux y ajouter la couleur de la propriété. Il doit se terminer par un deux-points, puis vous choisissez une couleur, c'est par défaut, je vais juste mettre un espace et taper rouge, et à la fin de CSS, nous devons avoir un point-virgule. accolades, deux-points, point-virgule, c'est la syntaxe à peu près pour tous nos CSS assez simple. Sauvez-le, et voyons si cela fonctionne. [ inaudible] dans le navigateur et actualisez. Regardez que h1 est stylé. Maintenant je sais que ce n'est pas une énorme somme que nous faisons ici, mais je suis excité. Je suis excité pour toi. Je me souviens avoir appris ça quand j'étais en révélation. Faisons autre chose. Je vais faire un retour ici. Nous allons regrouper CSS. Nous voulons faire quelques choses au h1, tant qu'il est dans ces accolades, nous pouvons taper quelque chose comme la police. Je vais mettre en style police. Vous pouvez voir ce code veut vraiment vous aider à suggérer choses suspendues comme la taille, le style, l'affichage. Je vais utiliser le style. J' utilise ma souris maintenant au lieu de la taper. C' est juste l'une des petites choses utiles que vous pouvez faire avec code VS ou vous pouvez utiliser vos touches fléchées sur votre clavier. Vous pouvez voir la petite ligne bleue bouger, je peux aller là-bas et, je retourne sur mon clavier. On en a presque tout, donc on a notre propriété. Il y a le deux-points, nous avons notre valeur réelle, qui est en italique. Ce qui se passe à la fin, tu l'as, point-virgule. Allons frapper sauver, voyons ce qu'il fait. Allons rafraîchir. C' est italique et rouge et c'est un h1. Brillant. Donc je vais dire un exercice de classe maintenant. Je veux que vous modifiez ce h1 pour être une taille de police de 100 pixels, ou px. J' aimerais que vous l'arrêtiez maintenant, allez appuyer sur le bouton et je veux que vous voyez si vous pouvez le faire. Taille de police à 100 pixels, donnez-lui un coup de main, je vais vous donner un coup de main dans une seconde. Pause, vas-y. Vous avez peut-être fait une pause ou non. Vous pouvez ou non l'avoir fait fonctionner. Voyons si tu m'as suivi. Donc, la taille de la police, ici nous allons, aller à deux-points, puis mettre un 100, et ce que les gens oublient souvent, c'est que vous avez besoin du px. Nous utilisons des pixels lorsque nous avons affaire à des polices en ce moment, et ce qui se passe à la fin, point-virgule. Sauvez-le, retournez ici, rafraîchissez, géant h1. Allons composer le h2 ensemble, et ensuite je vais faire un autre petit exercice. Donc h1, maintenant je mets quelques retours ici, accolades, et vous pouvez les séparer en utilisant ces sélecteurs. Les crochets bouclés, et tout va au milieu que vous voulez faire à ce sélecteur particulier. Dans ce cas, nous allons faire une couleur de bleu, point-virgule, et nous allons faire une taille de police de 50 pixels. Donnez ça maintenant, et je vais voir un exercice verbal. Je veux que tu essaies de faire le tag p. Tout seul, je veux que vous le rendiez vert, et j'aime que vous ayez une taille de police de 20 pixels ? Donnez-lui une pause maintenant, voyez comment vous allez et faites une pause. Comment ça s'est passé ? J'espère que vous avez bien fait, suivons ensemble. P tag, accolades, couleur verte. Il y a quelques verts différents. Vert-jaune, c'est mon point-virgule, et nous allons mettre une taille de police de 20 pixels. Poste virgule, sauvegardez, revenez ici, rafraîchissez. Regarde tout ça. De bonnes choses. C' est juste une introduction à ce qu'est HTML, et à quoi ressemble la syntaxe. Ce sont ces gars ici, et leur style. Nous parlons de sélecteurs, j'utilise les mots de rente ici, que cela devienne un peu plus naturel pour vous. Sélecteur, c'est la propriété, c'est la valeur de cette propriété. C' est la base des sites Web. On va juste développer ça. On va construire des boîtes pour y mettre. Nous allons commencer à faire des bits et des morceaux interactifs, mais oui, c'est les principes fondamentaux du HTML et du CSS. Sautons dans la prochaine vidéo. 6. Qu'est-ce que la balise head vs body vs html dans une page de conception Web ?: Très bien, il est temps de faire un vrai site web. Le moment où nous avons mis quelques balises HTML et quelques CSS de base, mais ce n'est pas tout ce dont nous avons besoin. Nous avons besoin d'autres morceaux comme le type de doc, le tag tête, le body tag. Dans cette vidéo, nous allons trouver comment les ajouter rapidement et ce qu'ils font tous. La première chose est que cette page que nous avons faite, ce helloworld HTML est qu'il a les bases dedans, mais il manque un morceau d'éléments pour en faire une page Web officielle. Fermons ça et regardons ça. Fermez-le, faisons une nouvelle page, donc fichier nouveau, et sauvegardons, et celui-ci s'appellera compréhension. Mettons un trait d'union et mettons-nous en bodyhtmlhead. Assurez-vous à la fin de vous add.HTML. A la fin de l'été, il ne sait pas ce que vous faites. L' autre chose à remarquer à ce stade est que vous ne pouvez pas utiliser d'espaces ou vous ne devriez pas utiliser d'espaces. Vous devez utiliser des traits d'union ou des traits de soulignement, peu importe lequel. J' utilise des traits d'union et touchons sauver. Lorsque vous nommez des choses, essayez de ne pas utiliser des choses comme $ signes ou esperluette. Il suffit d'utiliser des chiffres et des lettres. Pour en faire une page web officielle, il faut quelques choses. Il a besoin de savoir que nous avons affaire à une page HTML donc c'est quelque chose appelé le DOCTYPE. c' est un DOCTYPE de HTML, alors nous devons établir qu'il s'agit d'un document HTML qui se définit dans la langue de l'anglais. Ok clore ça et il y a probablement cinq ou six autres lignes qu'il faut ajouter pour rendre cette chose officielle. On ne dactylographie pas ça. Il y avait un raccourci facile parce que c'est une chose si cohérente et répétable que tout le monde a besoin de faire, code Vs utilise quelque chose appelé emmet, ne vous inquiétez pas que emmet le mot, mais c'est un peu de code qui laisse entendre que vous aide vraiment à aller vite. Au lieu de taper toutes les choses dont nous avons besoin pour faire une page web officielle, nous tapons un point d'exclamation et nous appuyons sur retour sur le clavier. C' est tous les trucs officiels dont nous avons besoin pour faire cette page HTML légitime, il y a notre DOCTYPE, il y a la langue anglaise. Ensuite, il a quelque chose appelé la tête et le corps, et puis tout est enveloppé dans cette balise HTML. Maintenant que sont toutes ces choses ? Le doctype nous dit juste que c'est HTML. Celui-ci ici, si je clique ici, HTML, vous verrez qu'il y a un wrapper correspondant à la fin ici, et si tout le site est à l'intérieur de cette balise HTML. Comme nous avions le h1 plus tôt rappelez-vous que nous avions h1, et il y avait un début et une fermeture et tout à l'intérieur était le h1. C' est la même chose avec toutes les balises HTML. Tout cela est HTML. Merci beaucoup. Pas très excitant balise HTML, vous n'allez pas traiter beaucoup avec elle du tout. Ces deux autres étiquettes à l'intérieur d'ici, vous le ferez, il y a la tête, il y a le corps, donc l'étiquette de tête, je vais mettre quelques retours dedans, rappelez-vous, retours qui signifient n'importe quoi juste pour qu'on puisse segmenter plus on est l'apprentissage. La tête a une ouverture et la fermeture et tout à l'intérieur d'ici est des choses que le navigateur a besoin de travailler, donc Chrome a besoin des choses, mais l'utilisateur ne le voit pas. Si nous sauvegardons ce fichier, nous sauterons à Chrome, nous allons aller au fichier, nous allons ouvrir le fichier, et nous allons trouver ce nouveau, comprendre corps HTML tête. Vous remarquerez qu'il n'y a rien sur la page, donc c'est le corps tout ce blanc carré en bas, c'est le corps. La tête est des choses que le navigateur absorbe mais ne vous montre pas, vous pouvez voir qu'il y a beaucoup de choses qui ne montrent tout simplement pas. Je vais m'occuper de tous ces trucs plus tard, mais les bases ici, celui-ci ici les personnages, juste dire que nous utilisons le clavier latin, ABC123. Nous parlerons de ces choses plus tard, responsive design a besoin de cela, quelques problèmes avec Microsoft Edge, qu'il doit être compatible avec les choses, le titre du document ferait dans la toute prochaine vidéo. Mais c'est tout ce dont le navigateur a besoin que nous n'avons pas vraiment besoin sans l'utilisateur, notre public n'a pas besoin de voir, ce que le public a besoin de dire est tout dans le corps. D' accord. J'ai mis quelques retours ici, charges à beaucoup retient cela. Ok, mais dans le corps, c'est là qu'on ajoute des trucs. Ajoutons un h1, donc nous allons taper des crochets d'angle h1 fermer et ici est bonjour Dan, ou votre nom. On va le sauver. Tout dans le navigateur de tête n'a pas enregistré, tout dans le corps est effectivement vu par l'utilisateur. Jetons un coup d'oeil dans notre navigateur, allons rafraîchir, et là c'est le nom. Allez, donc HTML, tout est à l'intérieur de leur tête. Ce que le navigateur a besoin pour fonctionner, le corps est le truc que l'utilisateur voit. Ce sont nos trois principaux tags. Maintenant, faisons quelques choses. Regardons l'étiquette de tête. Rappelez-vous, nous voulons styler ce h1. Où va le style ? On ne le met pas dans le corps. D' accord. On ne le met pas entre le corps caché. Ça va dans le côté de la tête, ok. Après le titre, mettez dans un retour, alors nous pouvons le mettre dans notre style. Rappelez-vous, ouvrez les crochets, fermez-le et revenez entre les deux. Tout entre ces deux balises est le CSS, et un CSS peut aller dans la tête ok. Nous ne voulons pas vraiment que ce code apparaisse sur la page. Nous voulons juste que cela affecte les choses qui sont dans le corps, donc nous disons, souvenez-vous des balises géniales, h1, accolades, et nous disons que nous allons en faire la couleur de couleur aléatoire de cette liste. Verger sombre là nous allons, parce qu'à la fin, point-virgule, sauvez-le, regardons un peu dans le navigateur. Navigateur rafraîchir, verger noir impressionnant, regardez-le. D' accord. Tête, des trucs qui vont sur la page. Je l'ai dit 10 à 20 fois maintenant, mais vous comprenez l'idée. Des choses comme ça peuvent aller dans la tête, mais ce que les gens voient est dans le corps. Maintenant quelques choses que je veux expliquer avant de passer à autre chose, c'est que je saute entre ces deux-là, comme comment a-t-il fait ça ? Sur un Mac et vous pouvez maintenir la touche de commande enfoncée et appuyer sur Tab, et ces petites choses s'ouvrent, ok, et vous pouvez continuer à appuyer sur Tab pour se déplacer à travers eux. Sur un PC, c'est Tab de contrôle, et vous pouvez basculer entre eux aussi en appuyant simplement sur eux, afin de contrôler Tab , contrôle Tab. Vous n'avez pas besoin de le faire, et ce que vous pourriez faire est juste de l'avoir ici, faire un redimensionnement de fenêtre, sorte que vous pouvez voir un d' un côté, l'un de l'autre, et c'est beaucoup plus facile de travailler comme ça pour vous. Une autre chose que je veux faire avant de passer à autre chose, je vais complètement supprimer ça, c'est que, je ne veux pas que tu reviennes en arrière, comment vais-je me souvenir de toutes ces choses ? Parce que disons que je veux faire de ce Hello Dan, souligné. La chose cool sur Internet et en particulier HTML, est, une charge de ressources. Je veux que cela soit souligné, eh bien, qu'est-ce que c'est ? Est-ce que je vais ici et commence à taper soulignement ? Ça ne semble pas marcher. Ok, disons que je vais à Chrome. Ok, je vais l'ouvrir à nouveau. Je vais faire une nouvelle boîte de recherche, je vais dire code HTML ou CSS pour souligner. Nous allons le faire tout au long du cours parce que je ne suis pas là pour vous enseigner chaque bit de syntaxe. Je te veux, je t'apprends à pêcher. D' accord. Jetons un coup d'oeil. J' ai demandé le code pour sous-jacent, va être trois endroits principaux que vous utiliserez dans vos concepteurs web les plus utilisés. Il y a quelque chose qui s'appelle W3Schools.com. C' est une très bonne ressource, trucs CSS qui a un site étonnant brillant Chris qualia. Il y en a un autre qui apparaît assez souvent et il n'apparaît pas moins, mais il s'appelle débordement de pile. Ce sont trois principaux à écrire et dire oui, sont les endroits incontournables. Jetons un coup d'oeil, voir vous voyez une déclaration texte. Vous pouvez voir ici en utilisant un h1, il y a une ligne au-dessus, et ce n'est pas ce que je veux sur la ligne, donc au lieu de se souvenir d'eux, vous pouvez soit copier ceci, juste en le copiant lorsque ma commande clavier C ou sur un Mac ou un contrôle C sur un PC, et retourner dans le code VS, et je vais juste le coller, enregistrer, ok, puis sauter à notre navigateur, prévisualiser, et c'est souligné. Parce qu'il y aura beaucoup de ça si tu es genre, mec, ai-je besoin d'écrire tout ça ? C' est beaucoup de fois que nous n'aimons pas. Je ne me souviens pas quelle est la syntaxe, donc vous pouvez aller la trouver. Ok, parce qu'il faut la décoration est une façon bizarre de discuter de sous-jacents. Mais après un certain temps, vous apprendrez des choses que vous faites assez régulièrement. Texte, décoration, au-dessus de la ligne. Je n'ai jamais utilisé ça de ma vie. Rafraîchir. Regarde si bien que, tu peux le faire. D' accord, ça va être tout pour cette vidéo. Allons dans la prochaine. Nous commençons à parler du méta titre que nous ignorons. 7. À quoi servent le titre et la description dans l'en-tête d'une page Web ?: Hé, là. Cette vidéo, nous allons apprendre quel est le titre dans votre étiquette de tête et nous allons regarder ce qu'est une description. La version très courte est dans les résultats de recherche Google. C' est le titre, c'est la description. Nous devons éditer à chaque page et nous allons entrer maintenant, vous montrer comment modifier. Quels sont les avantages et les inconvénients, ce que vous devriez faire ou ne devriez pas faire. Commençons. D'accord. Commençons par la balise title. Cela est ajouté au haut de chaque page et à la tête, j'allais éditer le automatiquement par VSCode. Qu'est-ce que c'est ? C' est une façon de décrire ce qui est sur la page. Ce document ici est juste un détenteur de place. Vous pouvez taper n'importe quoi ici et vous remarquerez que tout ce n'est pas vraiment un langage de code. Vous pouvez écrire des esperluettes et vous pouvez écrire des parenthèses et toutes sortes de choses, cela pourrait être tout ce que vous voulez écrire ici. Mais tu ne veux pas que ce soit quelque chose. Disons que c'est un genre de pensée qui décrit vraiment cette page. C' est l'apprentissage des balises de description HTML et de titre et cela va vraiment décrire la page que j'essaie de construire ici. Maintenant, si je l'enregistre et je vais sur Chrome, voyons où il apparaît. Chrome, c'est le document sur lequel je travaille. Vous pouvez voir le mot document qui était auparavant avant de le remplacer. Si on touche rafraichir, tu peux voir que c'est là que ça finit. C' est votre étiquette de titre et finit dans l'onglet, mais ce n'est pas si excitant. Ce qui est vraiment important et est où cela est utilisé par Google et un résultat de recherche. Rappelez-vous, nous avons fait la recherche plus tôt pour un soulignement en HTML. On a fait cette recherche, on a vu ces morceaux de texte bleu ici ? Ces morceaux de texte bleu représentent le texte total. Et si vous écrivez il apparaîtra dans cette petite liste. Vous pouvez imaginer si vous le soulevez comme document. Tout d'abord, le document mot, Google ne va tout simplement pas lister votre page parce qu'il est trop vague et il y a probablement un million de pages en ligne avec le document frappant. Vous devez le rendre unique pour chaque page, ce qui est un peu douloureux. Voir nous avons 20 pages sur votre site Web, vous avez besoin de 20 étiquettes de titre différentes pour chaque page et il doit vraiment décrire ce qu'il y a dans cette page. Il s'agit d'environ 50 caractères et vous pouvez voir que certains d'entre eux deviennent un peu plus longs, certains d'entre eux sont plus courts mais sont vraiment concis et exacts sur ce qui est dans la page. Ne l'appelez pas comme une page d'accueil. Si c'était moi pour mon site, vous savez que le mien est appelé tutoriels de conception web par Daniel Scott. Ce serait une bonne étiquette de titre de page d'accueil pour moi. C' est le titre. L' autre balise que vous devez ajouter et elle n'est pas là par défaut. Un très commun juste en dessous est d'ajouter la description. Quelle est la description avant de le faire ? C'est ce morceau. Qu' il y a le titre, qu'il n'y a que l'adresse de votre site Web. Cette chose sur laquelle tu as le contrôle. Vous pouvez dire à Google ce qu'il faut mettre dans cette description. Parfois, il l'ignore, mais la plupart du temps il ne le fera pas, il la listera ici. C' est un peu plus de marketing qu'il ne l'est. Comme celui-ci ici être vraiment concis, vraiment bons mots clés, qui décrivent vraiment ce que vous faites. Ici, c'est comme si on ne le savait pas quand on fait un résultat, qu'on cherche. Nous vérifions cela pour nous assurer que vous êtes dans le bon ballpark, puis vous l'utilisez juste pour confirmer que vous obtenez plus dans les détails et juste vérifier que vous êtes dans le bon type de zone. C' est là qu'il y a plus de marketing qu'il ne l'est, disons le codage. En bas ici, ajoutons la méta description. Par défaut, ce n'est pas là parce que vous ne pouvez pas survivre sans titre, mais vous pouvez survivre sans description mais à mon avis, vous devriez certainement éditer. C' est là que c'est une syntaxe laide mais vous la tapez une fois avec moi maintenant et plus tard, vous pouvez juste revenir et copier et coller celui-ci. Il s'appelle le nom de l'émetteur et vous devez ajouter toute cette syntaxe. J' utilise juste les raccourcis qui apparaissent via VSCode, mais vous avez besoin de nom, égal et vous avez besoin des guillemets et ici, celui-ci s'appelle description. Il doit être orthographié exactement comme ça et nous avons besoin du nom comme description et le contenu sera ce que vous voulez que cette description soit. C' est là que tu peux mettre. Ici, vous voulez environ entre 120 caractères ou 150 personnages.Un cent vingt est ce qui va vraiment apparaître dans les résultats mobiles et 150 sur le bureau. Vous pouvez voir ici, celui-là a reçu un gros morceau. Alors que celui-ci a été coupé assez petit [inaudible] va obtenir une très petite description méta. Parfois aussi bien, peu importe combien de temps vous le faites, Google va couper. Assurez-vous que toutes vos bonnes choses sont au début de ce paragraphe. Il suffit de le faire un et de le faire environ 120 caractères. Maintenant, la seule chose pour cela est en quelque sorte de soulever un bon point. Vous pouvez voir cette petite racine, celle-ci est rouge. Si j'enregistre ceci et affichons la page, actualisons-la. C' est devenu un peu fou. C' est comme, eh bien, c'était dans l'étiquette de tête, s'il s' affichait ici dans le corps. C' est parce qu'on a oublié de fermer cette méta-description alors je dis que nous, moi. Il a une ouverture là, il vous donne tous avoir ceci à l'angle de fermeture des crochets. La fin ici les crochets d'angle de fermeture, vous verrez le rouge disparaît et de retour ici, rafraîchir, est de retour à la normale. Si vous avez des trucs rouges, mauvais et vous souvent vous remarquerez la différence lorsque vous entrez dans la prévisualisation dans Chrome, il va vous montrer tout va aller foin. C' est le meta titre, meta description. Copiez et collez cela dans un bloc-notes pour avoir un outil pratique lorsque vous le faites la prochaine fois, sorte que vous n'ayez pas à le taper à chaque fois. Vraiment essentiel aux pages. Passons à la prochaine vidéo. 8. Quel éditeur de code dois-je utiliser ? VS Code Sublime Dreamweaver Atom Brackets: Parlons éditeurs de code. Nous avons utilisé le code VS jusqu'à présent et nous allons continuer pour ce cours. Pourquoi ? Parce que c'est le plus populaire et surtout parce que c'est le plus à la mode. Il y a quelques bizarreries qui le rendent génial, mais il y a des gens là-bas qui soutiennent que Sublime Text est le meilleur, ou Brackets est, ou Dreamweaver est, ou Atom, ou Notepad Plus. Il y a beaucoup de rédacteurs différents. Jetons dans cette vidéo et juste vous donner un court à travers quelques-uns d'entre eux. Montre-toi juste ce que tu dois chercher et ce qui est important. Allons là-dedans. Nous avons utilisé Visual Studio Code pour notre éditeur de texte. Maintenant, nous aurions pu faire ce cours dans n'importe quel programme de montage. Maintenant, nous utilisons seulement le code VS dans ce cas parce que le code VS est le plus populaire. Mes cours précédents, j'ai utilisé Dreamweaver parce que je passe souvent ma vie dans le monde Adobe, mais je suppose que ce que je voulais vous montrer très rapidement était d'abord comment ces éditeurs sont vraiment utiles, mais souvent peut être très à la mode. Si j'avais fait ce cours il y a un an ou deux ans, il aurait probablement été dans ce cours appelé Sublime Text parce qu'il était le plus populaire à l'époque. Avant cela, il y avait des choses comme Komodo et avant cela, il y avait Notepad Plus. Il y a beaucoup de rédacteurs différents, mais nous finissons tous au même endroit en faisant la même chose. Les gens s'habitent à certaines des bizarreries. J' ai téléchargé et installé Sublime Text juste pour vous montrer, si vous commencez dans Sublime, c'est beaucoup plus propre. Si je veux le mettre dans tout mon document, des trucs pour HTML, dans ce cas, au lieu du point d'exclamation et de l'onglet, c'est HTML dans un onglet. Vous pouvez voir que nous arrivons à un endroit très similaire. Il n'a pas autant dans le type de document, juste les vraies bases, mais nous finissons au même endroit. Nous descendons ici et nous tapons h1, et nous commençons à taper. Regardons les parenthèses. Brackets est un autre populaire. onglet Point d'exclamation fonctionne de la même manière que dans VS Code. Ils n'ont pas tous les bits et pièces que nous voulons dans le code VS. Ils ont décidé d'une option minimale réelle. Dreamweaver aussi, grand éditeur de code. Si nous passons à Fichier Nouveau, ils ne le font pas automatiquement. Si vous dites que vous voulez une page HTML, vous dites HTML5, cliquez sur « Créer ». Vous pouvez voir, il met tous les morceaux dont vous avez besoin pour commencer. La raison pour laquelle je vous montre ceci est, si vous cherchez du travail après cela, donc vous commencez à travailler avec différents développeurs et qu'ils utilisent différents éditeurs, ils ont leurs propres avantages et bizarreries, mais nous créons le la même chose. La façon dont je le fais comme quand je concevais ce cours, j'essayais de déterminer lequel utiliser. Stack Overflow, J'ai mentionné que plus tôt, ils font une enquête des développeurs à la fin de l'année. C' est 2019 maintenant, et c'est le sondage de l'an dernier. Je viens de passer par et vous pouvez voir ici, en bas de la page, les résultats de Visual Studio Code sont de loin les plus populaires. Vous pouvez voir Visual Studio est la grande version de ce, Notepad Plus, Sublime Text, Atom, je pensais que c'était beaucoup plus élevé. Il y a juste des gens qui aiment leurs propres éditeurs, mais contrairement à quelque chose comme Photoshop, où il n'y a qu'un seul produit et un ou deux concurrents, il y a beaucoup d'éditeurs de code différents. Certains d'entre eux assez généraux, comme celui qu'on utilise. Certains d'entre eux beaucoup plus spécifiques pour, disons, PHP ou Xcode. Mais de toute façon, j'ai pensé une petite vidéo expliquant différents éditeurs. Si vous voulez passer à autre chose ou que vous attendez à utiliser autre chose, vous pouvez utiliser ce que vous apprenez dans ce cours dans un autre éditeur. Passons à la vidéo suivante. 9. Comment ajouter une structure à votre site web à l'aide des balises Div: Salut là. Cette vidéo, nous allons construire une boîte jaune, puis une boîte rose, nous allons essayer au moins. Nous allons apprendre à le faire en utilisant quelque chose appelé une balise div. C' est une division de l'espace et ça nous donne les boîtes dans lesquelles nous pouvons placer notre site Web à l'intérieur. Allons-y et apprenons-le. Pour commencer, fermons les autres documents sur lesquels nous travaillons. On ne les utilisera plus. Nous allons en créer un nouveau juste pour séparer tout de nos différents éléments d'apprentissage. Nouveau fichier, sauvegardons-le. Appelons celui-ci divtags.html. N' oubliez pas le html. Nous allons ajouter toute cette étiquette de tête, bonté en mettant un point d'exclamation, appuyant sur Retour, mais c'est un peu de morceaux, nous nous assurons de mettre à jour le titre aux tags, nous mettons dans la description, mais nous ne sommes pas en ce moment parce que c'est un projet jetable juste pour apprendre ce qu'est la balise div. La balise div va sur le corps parce que je veux que les gens le voient. Qu' est-ce qu'on veut qu'il ressemble ? Dans vos fichiers d'exercice, il y a un dossier appelé Wireframes et celui-ci s'appelle HTML. Div 1. Je vais ouvrir ça. Sans raison, je l'ai dessiné sur mon cahier, alors j'ai oublié que je te le montrerais. C' est ce que je fais quand je suis le cadrage de fil, ce n'est pas un filaire particulièrement bon ou passionnant. On veut une boîte jaune et on veut une boîte en dessous. Première boîte, deuxième boîte. C' est ce qu'on va faire. Pour éditer, nous ajoutons une balise appelée div. Je vais faire de l'espace ici dans mon corps, je vais me taper dessus pour aucune raison autre que ça a l'air sympa, nous allons mettre une balise div. La balise Div commence par des crochets d'angle, des crochets de fermeture div. C' est très intelligent et met dans une clôture de cette étiquette et tout ce qui est à l'intérieur de ça va être ma place. Présentons ce que nous avons fait jusqu'à présent. Laisse le sauver. Accédez à Google Chrome. Allons à Fichier, allons à Ouvrir. Où est ce fichier ouvert, mettons-en un. Il y a ma nouvelle balise div, cliquez sur Ouvrir et allez au titre, mais il n'y a rien ici sur la page. Une balise div sans CSS est invisible. C' est là, mais on ne l'a pas stylé. Ce qu'on doit faire, c'est lui dire de faire des trucs comme être jaune et de lui donner une taille. Nous le faisons avec notre CSS, nous le faisons dans le tag head. Souviens-toi avant que la tête ne ferme, je vais taper. Tu te souviens de ce qui monte en haut ? Tu te souviens, style. Style, et fermez-le, mais on se retournera. Je vais mettre tous mes styles ici, je vais me taper juste parce que ça a l'air sympa. J' utilise juste ma touche de tabulation. Qu' est-ce qu'on va faire ? Nous devons styler la div. Rappelez-vous que nous avions H1 avant. Nous allons styler cette div et que se passe-t-il ensuite ? Braces bouclés, parfaits, puis coiffons, donnons-lui une couleur. Maintenant, quand vous coiffez du texte, c'est toujours simplement appelé couleur. Lorsque vous essayez de faire une couleur d'arrière-plan, vous devez aller à l'arrière-plan complet. Là, il est que vous pouvez voir la couleur de fond. De quelle couleur on va utiliser ? Je vais mettre en jaune. Rappelez-vous ce qui se passe à la fin, point-virgule, sauvez-le. Prévisualisons-le dans le navigateur. Rien n'apparaît car pour le moment, cette balise div est jaune, mais elle n'a pas de dimensions. Soit il a besoin d'une hauteur, soit il faut des trucs dedans. À l'intérieur de cette div, je vais taper des trucs dedans. Si je fais cela, enregistrez-le, retournez à mon navigateur maintenant. Au moins maintenant avec du texte force cette balise div ouvrir un peu bavard pour que je puisse le voir. Il ne sait pas à quel point il est grand, il me montre juste assez pour presser le texte et il se répand à travers. Donnons-lui une hauteur et une largeur. Ici, mettons-nous juste une balise p plutôt que juste un vieux texte. Nous allons mettre des textes corporels, rappelons le paragraphe pour p, et mettons juste dans la première boîte. Sauvez-le, et nous allons le styliser. Ici, la balise div est jaune. Je vais mettre un retour après et donnons-lui une largeur et une hauteur. Largeur, je vais lui donner 600 par 400. Nous allons aller 600 pixels pour la largeur mais doit avoir px et vous devez avoir le point-virgule et la hauteur. La même chose, c'était 400. Je l'ai écrit. Maintenant, nous avons sauvé ça. Allons dans mon Google Chrome. Appuyez sur Rafraîchir. C' est ma structure. Cela pourrait être votre navigation, plutôt grande navigation, mais ils pourraient être au milieu de votre site Web ou de votre pied de page. C' est un beau gros cube que nous pouvons commencer à mettre des choses comme h1s ou p tags. Fondamentalement, votre site est composé de bits structurels, ces balises div et des éléments de texte et des images qui y entrent et des vidéos, mais les balises div sont la structure. Maintenant, ce que nous voulons faire, c'est que nous voulons mettre dans cette deuxième boîte en bas. Dans le code VS, je vais en bas ici, faire un deuxième div. Copions le premier. Laissez-nous gagner du temps, copiez. Chaque fois que vous copiez, assurez-vous de saisir l'ouverture et la fermeture. C' est facile de savoir où se trouve la fermeture. Si vous cliquez dessus, il le met en surbrillance ici pour enregistrer votre curseur clignotant et comme la tête ici, il y a la fermeture. Je dois m'assurer de prendre tout ça, de le copier. J' utilise juste la copie d'édition et je vais coller. Le tabbing est un peu bizarre, et parce que j'ai le TOC sur ça, je vais rendre tout ça agréable. La première boîte et la deuxième boîte, enregistrez-le. Prévisualisons-le dans un navigateur. Aperçu. On a une deuxième boîte. La dernière chose que nous voulons faire, c'est que nous voulons en faire une couleur. On veut le rendre aussi rose. Sur le code VS, nous allons monter ici, et c'est là que nous rencontrons notre premier problème. Nous stylisons cette chose appelée une balise HTML, cette div. Le problème avec cela est que ce div apparaît deux fois, mais nous ne pouvons le colorer qu'une fois. Encore une fois, je vais apprendre dans la vidéo suivante ce qu'est quelque chose appelé une classe CSS. Il nous permet d'attaquer individuellement cette boîte de poing plutôt que la deuxième boîte et de les coiffer différemment. Mais pour le moment, nous avons mis notre étiquette div. C' est génial. Maintenant, nous avons besoin de deux types différents de tags div qui ont des tailles différentes et des couleurs différentes, et nous allons apprendre à le faire avec une classe CSS dans la toute prochaine vidéo. 10. Qu'est-ce qu'une classe CSS ? Comment colorer un arrière-plan avec elle ?: Salut, cette vidéo est tout au sujet d'un sélecteur de classe. Cela va nous permettre de le faire, où nous stylisons la boîte jaune différemment de la boîte rose. Nous faisons la même chose avec cette balise p, rendra une balise p différente de l'autre et c'est le travail d'un sélecteur de classe CSS. Permet de sauter maintenant et d'apprendre à le faire fonctionner. Voici notre CSS, cette chose s'appelle ici un sélecteur de type, il sélectionne tous les types div. Le problème est assez générique parce que chaque type qui se trouve être un div, faites-le les choses à cela. C' est pourquoi nous avons un sélecteur de classe. Ce qu'on veut faire, c'est de ranger tout ça, remettre mes retours dans mon onglet. Au lieu de décider de l'ancien div sur chaque page de la même chose, créons ce qu'on appelle un sélecteur de classe. Tout cela signifie que je peux être unique, je peux juste dire, je vais créer une classe, pour savoir que c'est une classe et pas comme ce sélecteur de type que nous venons de faire. Vous mettez un arrêt complet à l'avant dans votre CSS. Je suis un cours, quel cours ? Je vais lui donner un nom, tu peux l'appeler comme tu veux, ça on va appeler la box1. Alors, comme le reste du CSS que nous avons fait, c'est la même chose. Braces bouclés ou tournez, puis nous le coiffons. Ce petit arrêt complet au début signifie que je suis un cours. Qu' est-ce qu'on va faire à ce cours ? On va dire que c'est une couleur de fond jaune. Nous appelons, nous allons avoir une largeur et une hauteur avec 600px par hauteur de 400px. On a la box1. Maintenant, il n'y a aucun moyen de les connecter encore. Ça dit : « Hey, box1 soit jaune. » Mais ici, c'est comme : « Eh bien, je ne sais pas à quoi vous appliquez ça. » Ce que vous faites est que vous quittez le div et ce que vous faites est ensuite de mettre un espace et de taper dans la classe de mots. Vous pouvez voir VS Code veut vraiment aider. Si vous le dactylographiez, assurez-vous de mettre un égal et les guillemets. Donc, nous avons une classe div. Ce que nous voulons faire, c'est appliquer la case 1. Maintenant, c'est attaché. Les différences sont juste pour s'assurer que lorsque vous le stylisez ici dans votre CSS, vous devez utiliser l'arrêt complet pour dire, « Je suis une classe ». Ici, vous devez être un peu plus long. Donc tu dis que la classe est égale et que tu ne mets pas ce point là-dedans, ça ne marchera pas. Version longue de classe, version courte. Maintenant, j'espère que nous économisons. Nous allons à notre navigateur, nous réinitialisons et la première boîte sait maintenant que c'est jaune et il sait que c'est 600 par 400. Cette boîte n'a aucune idée de ce qu'elle doit être, alors disons-le. Comme je l'ai dit avant de faire un deuxième cours, vous êtes prêt ? Alors .box2, mettre dans des accolades et nous allons lui dire, « Nous allons toujours le faire. » C'est dingue. Mais nous voulons que celui-ci ne soit pas jaune, nous voulons que ce soit cette couleur rose. Ce n'est pas une couleur, d'être rose. Sauvez-le, la mauvaise taille et la mauvaise hauteur, 400 par 250. J' ai juste inventé ces tailles, tu peux taper tout ce que tu veux, 400 par 250, sauver. Maintenant, ça ne va pas marcher. Pourquoi cela ne fonctionne-t-il pas ? Vérifions, actualisons juste pour confirmer qu'il ne fonctionne pas. C' est parce qu'on ne l'a pas appliquée. On l'a stylisé, maintenant on doit l'appliquer ici. Après le mot div, tapez dans la classe. Vous pouvez le voir de la façon dont je travaille, je vais travailler un peu plus court pendant que nous travaillons. Vous pouvez commencer à écrire et toute la syntaxe si vous voulez mais vous remarquerez que moi, l'espace a frappé C. C'est tout ce que j'ai fait et je vais juste appuyer sur Retour sur mon clavier ou sur la touche Entrée et il remplit toute cette belle syntaxe. Je tape dans la box2, appuyez sur Enregistrer. Maintenant, j'espère rafraîchir. On est là. Nous avons une première boîte et une seconde boîte et ils nous ressemblent vaguement. Cool. Nous avons appris ce qu'était un sélecteur de type. Vous n'avez pas besoin de vous souvenir de ce nom, mais un sélecteur de classe pour CSS est quelque chose que nous allons faire un zillion de dans cette classe et c'est une façon de cibler individuellement ceci. Au lieu de la case 1, il peut s'agir d'en-tête et il peut s'agir de navigation, et il peut s'agir de contenu principal. Nous arrivons à les coiffer, les colorer et les dimensionner. Allons un peu plus loin et ajoutons un peu de style et regardons un sélecteur de classe, mais dans un contexte différent. Retour dans VS Code ici, j'ai deux balises p et ils ont l'air exactement le même dans le navigateur. Disons que je veux faire de celui-ci une couleur différente et une taille différente. Au lieu de coiffer la balise p comme nous l'avons fait plus tôt, rappelez-vous que nous avons fait tous les h1s. Mais le problème est que chaque h1 sur chaque page. Alors que celui-là, je veux juste que ce petit gars unique dans la première boîte fasse quelque chose. Ici sous box1 ou box2, je vais mettre dans une autre classe, rappelez-vous a un arrêt complet et je vais appeler ceci lorsque mon texte de surbrillance. Vous devez mettre un espace dedans puis vous devez mettre vos accolades. Braces bouclés à côté de votre clé p. Alors on va dire que j'aimerais que tu sois une couleur. La couleur d'arrière-plan pour la couleur d'arrière-plan, il fait une couleur basse régulière si vous voulez style texte. Disons que je veux en faire l'une des couleurs folles sont partis ici. Je vais rendre ce gris sombre. Ils l'épelent dans les deux sens, regardez ça, cool. Mettons dans notre point-virgule. Faisons la taille de la police à quelque chose de vraiment grand pour que nous puissions juste le voir facilement. Je l'ai gardé, maintenant je dois l'appliquer, et c'est la même chose. Je peux dire que vous comme une balise p, mais aussi une classe pour le texte, j'ai trouvé le mien dans le texte, mettre en évidence le texte. Sauvegardons ça. Vérifions, je me rafraîchis. C' est plus grand et c'est le gris. Vous stylisez les sélecteurs de type pour faire de gros traits généraux. Ensuite, vous faites de petites choses spécifiques en utilisant des classes et vous les appliquez à des petits morceaux individuels, vous pouvez l'utiliser deux fois, il n'y a aucune raison pour laquelle nous ne pouvons pas vous dire, mon ami a aussi une classe de texte en surbrillance et cela s'appliquera à tous les deux, espérons-le. Il ne l'a pas fait. Tu es comme tu vois pourquoi ? Je n'ai aucune idée de pourquoi. Maintenant, je prétends que j'ai mis ça exprès, mais c'est toujours mon problème. Vous n'êtes peut-être pas aussi grammaticalement que moi, mais je trouve très difficile de taper ce truc, quand je ne fais pas de tutoriels, j'essaie de vous impressionner avec ma vitesse de frappe, je copie et colle tout. Copier et coller. C' est douloureusement lent, mais ça contourne mon problème de taper le mauvais mot et ensuite essayer de le réparer, ne pas travailler sur ce que c'était, c' est juste à cause de fautes de frappe. Supprimons ceci et je vais vous montrer d'autres astuces pour vous en assurer. Oui, vous pouvez suivre ou corriger toutes les erreurs. Le moyen le plus simple est de comparer avec le fichier que je fais. Disons que vous avez fait la même chose, mais cela ne fonctionne pas pour une raison quelconque. Se trouve dans vos fichiers d'exercice que vous avez téléchargés. Vous trouverez dans ce dossier quelque chose appelé les Fichiers Terminés. Alors, je me suis zippé. C' était la cinquième vidéo que j'ai faite cette sixième vidéo. Si vous regardez cette vidéo, c'est probablement ce que vous faites. Sur la boîte vidéo, vous trouverez, laissez-moi finir cette vidéo ici, vous trouverez un dossier ici appelé étain. Tu peux ouvrir ça, faisons-en un. J' ai double-cliqué dessus, l'ai ouvert et il y a les choses sur lesquelles on travaille. Vous pouvez simplement ouvrir cela dans le code VS. Alors allez au dossier ouvert et comparez le vôtre contre le mien. Je le ferai tout au long du cours. C' est l'une des façons de vérifier votre code. Les autres choses à noter, ou je suppose de vérifier, et ce sont les choses que je trouve que mes élèves rencontrent quand j' enseigne des cours en direct, c'est que les gens oublient l'arrêt complet. Pour identifier une classe ou ils commencent à ajouter le point de classe ici. Ce que tu ne veux pas. Celui qui attire toujours les gens est qu'ils supprimeront accidentellement l'un d'entre eux avec les accolades. Parce que celui-là s'ouvre et qu'il ne se ferme pas, ça flippe, n'est-ce pas ? Vous pouvez voir qu'il a changé un peu la couleur de mise en évidence, mais il manque juste. Souvent, vous pouvez passer par, je vais cliquer sur ce premier crochet et vous pouvez voir qu'il est mis en surbrillance, le fermant. Si je clique sur celui-ci, il ne cliquerait pas dessus parce qu'il ne sait pas où se trouve la fin. Il ne mettra pas en évidence son pote. Maintenant, remettons son pote, il est là. Maintenant, si vous cliquez sur eux, ils se connectent juste les uns aux autres, là nous allons. Les autres choses sont des gens qui oublient de mettre des deux-points et des points-virgules, juste des problèmes de syntaxe de base, des fautes d'orthographe de base comme je le fais tout le temps. Nous ferons un peu plus de vérification des erreurs plus tard, nous allons installer quelques plugins pour VS Code pour nous aider avec ces erreurs de syntaxe. Mais pour le moment, ce sont les bases et ce sera tout pour cette vidéo. Passons à la prochaine. 11. Comment imbriquer des divs les uns dans les autres en HTML et CSS ?: Salut là. Cette vidéo, nous allons parler de l'imbrication des tags div. Ce que cela signifie, c'est que nous allons finir par faire ça où nous avons notre boîte originale jaune et rose et nous y mettons d'autres boîtes. C' est ce qu'on appelle l'imbrication. Ce n'est pas si chic. Vous pouvez voir ici les boîtes à l'intérieur des boîtes, elles finissent par ressembler à ça. En fin de compte, nous allons mettre des textes dans une boîte, qui est à l'intérieur de boîtes. Faisons ça maintenant. Je vais vous montrer en VS Code. Allons-y. Ce que nous faisons est dans votre dossier Wireframes dans vos fichiers d'exercice, nous cherchons à faire celui-ci ici, HTML, div 2. Donc les mêmes boîtes, nous utiliserons la même chose que nous avons créée jusqu'à présent. On va mettre deux boîtes à l'intérieur, une boîte grise et une boîte violette. Ce sont les hauteurs. Voyons comment le faire. Dans VS Code, nous allons faire ce qu'on appelle l'imbrication. Ça veut juste dire qu'on va mettre des divs à l'intérieur des divs. Donc, nous avons un div ici et un second div ici. Travaillons sur le premier, qui va être notre gris, un 100 par 300. Où est-ce que ça va ? Ça dépend de l'endroit où tu le veux, je suppose. On a ce texte ici, on ne veut plus vraiment. C' était juste, je suppose que j'ai mis ce texte p là pour vous montrer comment nous pourrions mettre en évidence et décider de la boîte avec du contenu dessus. Supprimons cela pour le moment juste pour le rendre agréable et propre et clair. Donc, ce que nous allons faire est de mettre un div dire, juste ce que ce texte p était. Donc, si on va entre crochets, div. Maintenant, nous ne allons pas faire de div en classe de crédit ici et puis revenir et le nommer. On va tout faire en une seule fois. Donc, au lieu de le fermer ici, maintenant, va annuler ça. Je vais mettre en cours avant d'en finir. Alors je vais l'appeler la case 3. Alors je vais le fermer. Juste pour gagner du temps, plutôt que de revenir et de le faire plus tard. Je vais mettre, est-ce que je mets quelque chose dedans ? Non, je vais juste le laisser vide. Mais rappelez-vous que c'est là qu'il irait à l'intérieur de cette div. Laisse-le vide. Alors sauvez-le. Il n'apparaîtra pas encore. Rafraîchir. Le texte a disparu et la balise div est là, mais je ne peux pas le voir. Donc, nous devons le styliser. Nous n'avons plus besoin de ça, parce que je me suis débarrassé de ça. Je vais appeler ça, point, souviens-toi de la case 3, accolades et on va voler tout ça, et on va choisir le gris, ce qui est un sort dans les deux sens. Je suis rattrapé avec ça à chaque fois. Gris et gris, je ne sais pas pourquoi je trouve ça incroyable. C' est le même gris. Il suffit d'épeler de différentes manières. Celle-ci était d'une largeur de 100 et d'une hauteur de 300. On y va. Eh bien, 3000. Ça ne va pas marcher, sauve-le. Vérifions ça. Voyons si on l'a fait marcher. Rafraîchir. Regarde ça. Souvent, lorsque vous créez un site Web, vous allez créer un arrière-plan de site Web global, un grand conteneur, et à l'intérieur de ce conteneur, vous imbriquez beaucoup de balises div différentes comme l'en-tête, et la navigation, et les images, et le carrousel, et toutes ces choses. C' est l'imbrication. Faisons-le avec la deuxième boîte. Je veux juste vous montrer quelques choses, si vous ne l'obtenez pas au bon endroit, alors supprimons cette balise p d'ici. C' est là que ça devrait aller. Mais disons qu'on le fait juste à l'extérieur d'ici. Alors allons-y, crochets d'angle, div, espace, classe, Retour. Celle-ci s'appellera la case 4. Fermez-le avec le support d'angle, économisons. En haut, je vais copier et coller le tout. Vraiment paresseux. Boîte pleine. Celui-ci était violet, et il était 120 sur 350. En fait, c'était 350 par 120. Hauteur de 120. Jetons ça un coup d'oeil. Prévisualiser dans le navigateur. Impressionnant. Pas génial, c'est au mauvais endroit. Donc, si vous l'obtenez au mauvais endroit, c'est vraiment simple dans le code à aller, en fait vous coupez et vous collez. Je vais l'aligner donc ça a l'air sympa et tout aligné. Appuyez sur Enregistrer et actualisez maintenant. Il devrait être là-dedans. Impressionnant. Si je veux, disons un h2 à l'intérieur de ce texte violet, je pourrais juste le mettre ici. n'y a rien de mal à taper h2, Iln'y a rien de mal à taper h2,à le fermer et à le taper ici, et à frapper deux, et c'est parfaitement grammaticalement et syntaxiquement, je doute que ce soit un mot, correct. Alors donnons-lui un aperçu. Il est là-dedans. Ce que j'aime faire pour que tout soit bien, c'est mettre des retours entre tout cela pour vraiment exposer l'imbrication, donc je sais qu'il y a une balise de corps, à l'intérieur de cela est une boîte. À l'intérieur, il y a une boîte trois. Vous pouvez voir l'indentation disant avec cette case deux et à l'intérieur de celle-ci est case quatre et l'intérieur de la case quatre est h2. Est-ce que ça a du sens ? Donc nous allons prendre le coup de cette division de l'espace tag div et mettre des boîtes à l'intérieur des boîtes. Passons à la prochaine vidéo où nous sommes assis un projet de classe. L'heure des devoirs. 12. Projet de cours 01 - Balises Div: Il a dit ses devoirs dans la dernière vidéo ? Je l'ai fait. Mais pensez à cela plus comme un moyen génial de vous obtenir une meilleure compétence. Je mettrai des projets tout au long du cours. Vous y trouverez les détails. Je vais faire une petite vidéo comme celle-ci pour l'expliquer, mais aussi dans vos fichiers d'exercices, il y aura un dossier appelé Projets de classe, il y aura un document mot là-dedans, et c'est à ça que ça ressemble. Nous sommes à la classe Projet 01. Donc nous allons travailler sur ce que vous devez faire, et je continuerai à ajouter à cela pendant que nous suivrons le cours. Si vous n'avez pas Microsoft Word, vous ne pouvez pas ouvrir ce document et beaucoup d'autres programmes. Si vous êtes vraiment coincé, essayez Google Docs, vous pouvez l'utiliser pour ouvrir un document Word. Quoi qu'il en soit, qu'est-ce que tu as à faire ? Vous devez créer deux sites Web distincts. Donc, ce que je fais est, dans le code VS , fermer tout, l'enregistrer et faire un nouveau document. Donc vous allez en faire un nouveau, le premier s'appellera le projet de classe 1A. Ces deux parties, il y a 1A et 1B. Le premier, et c'est ça. Je veux que tu fasses ça. Je vous ai donné un peu de détails, donc le nom de celui-ci, sont les boîtes, et vous pouvez le voir dans ce visuel ici. La prochaine chose que je veux que vous fassiez, les boîtes vertes à l'intérieur de la boîte bleue, etc. Les tailles sont ici parce que mon écriture n'est pas génial. Il y a des versions plus grandes de ceci, vous pouvez soit le rendre plus grand ici sur Word ou dans vos fichiers d'exercice je vais mettre une copie d'entre eux dans Wireframes et c'est Div 3, voici, et Div 4. Donc ce sont les deux choses que vous allez faire. Celle-ci est assez facile, on l'a déjà fait. Celui-ci est un peu une balle courbe. Parce que je veux que tu penses aux tags Div, et à leur fonctionnement. Alors celle-là, regardons la seconde, la différence est que nous avons deux boîtes à l'intérieur de l'autre, c'est facile, boîte jaune, boîte grise. Mais je veux que tu le mettes en deux h1. Il y en a un dans cette boîte jaune. Mettez du texte, ce n'est pas forcément ce que j'ai écrit ici, mais du texte dans celui-ci, puis un autre h1 ici. Comment tu le fais sortir ? C' est à l'extérieur de la boîte jaune, mais à l'intérieur de la boîte grise. Donc je veux que tu joues avec ça. Une fois que vous l'avez fait, dites que vous construisez tout dans Visual Studio Code, que je vais prévisualiser dans Chrome, et prendre une capture d'écran. Maintenant, sur un Mac, vous maintenez la commande shift 4 enfoncée, et vous pouvez faire glisser une boîte autour d'elle, cliquer maintenez et faites glisser, ce qui vous donne une capture d'écran. Il devrait le mettre sur votre bureau. Vous devez voir mon ici, et je veux que vous partagiez ça avec moi. Sur un PC, c'est différent. Vous avez le bouton d'impression d'écran sur votre clavier, vous devrez peut-être vérifier que la façon de le faire sur votre version de Windows. C' est différent sur beaucoup de différentes versions de Microsoft Windows et je ne suis pas à jour avec toutes ces versions. Donc, il suffit de vérifier comment vous faites une capture d'écran, je pense qu'il est juste d'imprimer l'écran sur votre clavier et ensuite vous pouvez le coller. Mais la raison est que je veux que tu le partages pour moi parce que je veux te tenir responsable de ces choses. Je veux que vous me prouviez que vous l'avez fait, et tout ce que vous avez à faire est de le partager dans les commentaires ici, disant simplement : « Je l'ai fait. » Si vous rencontrez des problèmes, déposez-le dans les commentaires. Ce que j'aimerais que vous fassiez, parce que nous sommes à un stade assez simple, si vous rencontrez un problème, et que vous êtes comme, je ne peux pas faire fonctionner celui-ci, poster vos questions dans les commentaires et demander de l'aide. Pour les personnes qui suivent ce cours qui le font avec succès, je veux inculquer un peu d'aide à tout le monde. Donc, si vous êtes là, et que vous affichez le vôtre, et vous l'avez fait et vous êtes genre, « Oui, je l'ai fait », allez là-bas et si quelqu'un a un problème, et ils disent, « Le mien ne fonctionne pas à cause de ces x, y et z », vous pouvez aidez-les. Expliquez ce que vous avez fait pour que ça marche. Obtenez ce morceau de texte en dehors de cette balise. Je veux inculquer ça dans le groupe pour que nous ne comptions pas tous sur moi pour commencer à travailler sur le code de tout le monde. J' aimerais que vous aidiez les autres pour que vous l'appreniez mieux. Tu sais ce que je veux dire. Où postes-tu ces choses ? Vous avez pris deux captures d'écran, et votre doc Microsoft l'explique. Il dit, selon le site Web sur lequel vous consultez ceci, vous pourriez avoir une section sur les affectations, il pourrait y avoir un endroit pour le mettre, ou il pourrait simplement y avoir une place dans les commentaires. Il suffit de le coller dans les commentaires. Aussi, comme ceci, ceci, ou ceci, je vais tout faire, dans les médias sociaux. Alors collez-le sur Instagram, étiquez-moi, Twitter, étiquez-moi, groupe Facebook ici, étiquez-moi, juste pour que je puisse voir que vous l'avez fait. Ce que vous devriez faire sur tous ces éléments est d'ajouter un hashtag, j'ai pensé à cela plus tôt. Alors tagez-moi sous le #byolweb, juste pour que je puisse les regrouper tous ensemble, et tous, de sorte que lorsque je le passe en revue, je puisse regarder des trucs Web différents de mes autres cours. Donc Instagram, Twitter sont de bons endroits pour poster des choses visuelles, et sur Facebook, il y a un groupe ici. Il a un nom terrible, donc mieux le lien, il s'appelle le, ce qui s'appelle : Bringer Your Own Laptop Online Group. C' est un groupe, bonjour, où nous partageons beaucoup de choses , le moment il y a beaucoup de trucs web, beaucoup de trucs d'interface utilisateur, beaucoup d'Illustrator, Photoshop, InDesign, un peu d'UI UX, et maintenant nous allons présenter le web avec ce cours. Poster ici, ajouter ce hashtag et dire, « Oui, je l'ai fait, tout est cassé » et j'espère que quelqu'un va vous aider. Je ferai de mon mieux pour y entrer et aider. C' est tes devoirs. Ne le considère pas comme des devoirs. Pensez-y comme devenir plus génial dans le design web. C' est ça ? C'est ça. Projet de classe terminé. Je te verrai dans la prochaine vidéo. 13. Comment créer une feuille de style en cascade distincte en HTML et CSS ?: Salut là. Cette vidéo est tout au sujet de séparer notre feuille de style en sortant tout du HTML, et nous allons le mettre ici dans la tête, et nous allons la supprimer et la mettre dans son propre document et connecter les deux. C' est assez simple. Allons-y et faisons-le. Il est assez simple de créer une feuille de style CSS séparée ou externe. Nous allons travailler avec tout ce que vous avez ouvert de la partie précédente du cours. C' est sympa et ouvert ou vide. Si vous ne pouvez pas voir cela, cliquez sur ce premier petit onglet ici. Si vous ne pouvez rien voir ici, allez dans le fichier, ouvrez et trouvez Project zero. C' est un dossier que nous avons créé et cliquez sur Ouvrir. Vous devriez voir tous les fichiers. Nous allons travailler sur le divtags.html, n'a pas vraiment d'importance lequel. On a celui-là. Ce qu'on a fait, c'est qu'on a à moitié triché, alors on a triché. Nous avons le style, tout le CSS, dans l'en-tête du HTML. Cela fonctionne, il n'y a rien de mal, sauf que c'est un peu douloureux si nous avons 20 pages, disons que nous avons 2 000 pages, chaque page a une case 1. Nous devons écrire la case 1 sur toutes nos 2 000 pages distinctes. Si on voulait le changer, tu ne le ferais pas. Si le client revient en arrière et dit : « Pouvez-vous le faire régulièrement ? » Comme non, il y a 2 000 pages que j'ai besoin d'ouvrir et de changer. Ce que nous voulons faire, c'est le mettre dans une feuille séparée. Maintenant, 2 000 pages peuvent référencer cette feuille CSS. Ok, donc nous pouvons le changer une fois sur cette feuille CSS et le HTML va tous chercher cette feuille et nous allons mettre à jour tous joliment en une seule fois. C' est difficile à expliquer, faisons-le en fait. Tout d'abord, ce dont nous avons besoin, c'est d'un document CSS. Il a un dossier, on va au dossier, on va chercher un nouveau fichier. Sauvegardons maintenant. La différence ici, c'est qu'on peut l'appeler tout ce qu'on veut tant qu'il n'y a pas d'espace. Nous allons appeler notre style, mais nous pourrions appeler un style, styles pluriel, et comment s'appelle-t-il d'autre ? Je ne pense pas à d'autres noms génériques. Je peux appeler ça n'importe quoi. Je ne peux penser à rien de tout ça. Nous allons l'appeler style et ça va à be.css. Cliquez sur Enregistrer. Fondamentalement, ce que nous voulons faire est de copier et coller le style de ce document dans ce document. J' ai deux onglets ouverts. De ce document, de quoi avons-nous besoin ? Nous n'avons pas besoin de la balise de style. Cette balise de style est ici juste pour dire au navigateur, « hey, ce n'est pas HTML. » À l'intérieur de la balise de style, tout ici est un CSS, alors saisissons tout. Lorsque vous copiez et collez des choses m'arrive tout le temps comme j'oublie toujours les crochets de fermeture, assurez-vous de les saisir tous, et allons éditer. On va couper. Nous n'avons pas besoin de la balise de style maintenant. Il était juste là pour nous dire où se trouve CSS. Beaucoup plus propre, tout d'abord. Ici, dans style.css, allez juste pour éditer coller. C' est tout ce que vous devez faire dans une feuille de style. Comme nous l'avons appris auparavant, c'est juste dans une feuille séparée. Maintenant, ça ne va pas marcher. Essayons ça. Nous allons apprendre et vous fonctionnez aussi, classer, enregistrer tout. Pourquoi c'est utile ? Est-ce parce que, nous allons faire des modifications au HTML et CSS et c'est super documents. Jetons un coup d'oeil sur mon bureau, et Project zero est tags et il y a le style de CSS. Ces deux types sont séparés. C' était plus facile, partez, sauvez tout. J' apprends le raccourci sur mon Mac, c'est Commande+Maj+3. Qu' est-ce que c'est sur un PC ? Si vous regardez un PC, allez dans le fichier, il devrait l'avoir juste là. Je devine Control+ Alt+S. Alors sauvegardons tout et vérifions dans un navigateur. Retour ici dans Chrome, J'ai déjà des balises DIV ouvertes. Vous devrez peut-être aller à Fichier et ouvrir le fichier. Je vais le rafraîchir et ça va mal se passer. Nous avons déplacé tout le style qu'il y a, les balises DIV qu'ils ont tous effondrés parce que nous avons obtenu le battage médiatique pour eux plus. Ce que nous devons faire, la deuxième partie est que nous avons copié tout cela de là à là. Mais ce document HTML ne sait pas que ce type existe encore. Il ne va pas le trouver automatiquement, alors nous devons le dire. Faisons ça. Sous le titre, il est push-retenue. Le long chemin est le lien de parenthèses et nous allons l'avoir par rapport à la feuille de style. Vous pouvez dire que je n'ai jamais tapé ceci et vous devez le faire ou allez-vous référencer et vous tapez dans le style. Comment on appelle le nôtre ? Nous appelons nos styles pluriels, je ne me souviens pas. Encore une fois, tu dois t'assurer que ça se ferme et que tu dis, mec, je ne m'en souviendrai pas. Tu n'as pas à le faire. Le long chemin est le mauvais chemin. Fermons et nous allons utiliser un code VS pour nous aider. Nous pouvons taper lien, puis faites défiler ici et cliquez sur celui-ci, parce que vous pouvez lier différentes choses. Là où vous pouvez créer un lien vers une icône préférée, vous pouvez lier à JavaScript. Nous cherchons à CSS et il met en laisser des choses pour nous et même met le nom là-dedans. Donc, cela ne va pas automatiquement et comprendre ce que je l'ai appelé, c' est juste la chose par défaut là-dedans. Si vous avez appelé les vôtres styles, vous allez devoir passer par et ajouter les s là. Si vous l'avez appelé, je ne peux pas penser à un autre nom, mais appelons-le chose, vous devrez aller le changer parce qu'ils mettent du style et ils ont juste automatiquement probablement une bonne habitude juste pour refroidir le style. Allons frapper sauver. Sauvegardons tout. Le spectacle a le temps. Vérifions maintenant dans le navigateur. On y va, rafraîchir. Tout fonctionne. Il y a beaucoup de travail, mais je le laisserais. Vous pouvez dire que la raison principale est que tous les documents HTML maintenant que je crée un lien vers cette feuille de style et quand je fais un changement ici, il va passer à travers un site Web de génomes entier facilement parce qu'ils cherchent tous ce fichier. Il le garde également agréable et propre afin que nous puissions garder notre HTML séparé de notre CSS. Cela signifie que c'est joli et bien rangé et ensuite c'est joli et bien rangé. Vous pouvez voir comment CSS, sans le HTML a un langage vraiment propre, l'aimer. Avant de passer à autre chose, je veux juste vous montrer, fermer ça, quelques petites choses à faire avec CSS dans une feuille de style si vous passez au-dessus, disons, ça me dit que c'est un élément pour passer au-dessus de celui-ci, pouvez-vous le voir, c'est juste me dit, c'est la couleur de fond de l'élément. Celui-ci spécifie ici la largeur. Vous ne pouvez pas passer au-dessus de ces choses si vous n'êtes pas sûr de ce qu'ils font ou si vous ouvrez quelqu'un d'autre site que vous aimez, que fait cette chose ? Vous pouvez vous donner une brève explication dans VS Code et aussi quelque chose qui est intégré dans CSS mais pas HTML par défaut est si vous avez des erreurs, disons que je supprime avec un crochet d'ouverture par accident, vous verrez ici il y a un, « hey, vous avez a eu une erreur. » Si je clique dessus, il est dit que dans votre feuille CSS, il y a une erreur inattendue. Comme le problème est, c'est que ce n'est pas si utile. Je n'ai jamais trouvé ces erreurs pour être réellement utiles. Je peux le décoder parce que je l'ai cassé parce qu'il s'attend à une accolade bouclée au début. Vous pouvez voir qu'il y a beaucoup d'erreurs, il y en a quatre. Il n'y en a qu'un. C' est parce qu'il est comme ce filet d'erreurs pour qu' on se casse pour qu'il comprenne le reste. Mais si je le remets, je pourrais embrasser, n'ai pas besoin de la seconde. Tout le problème a disparu. Nous n'avons pas cette fonctionnalité intégrée à VS Code pour HTML pour le moment, si plus tôt sur vous êtes comme, « Hey, n'est pas allé rouge et comme c'était fait. » C' est une option que nous allons ajouter un peu plus tard quand nous commencerons à regarder les extinctions, mais nous devons le faire un peu plus tard dans le cours. Maintenant, si vous voyez des erreurs, ce sont probablement vos parenthèses, vos deux-points ou votre point-virgule, ils sont manquants. Grâce à cela, il le casse, met en toute tranquillité. J' ai beaucoup d'étudiants comme, « Hey, mien ne fonctionne pas dans les cours et dans les vidéos » et est normalement toujours comme une erreur de syntaxe, normalement. L' autre chose que les gens oublient toujours de faire est qu' ils oublient de le connecter dans leur HTML. Ils le font et ils séparent tout et ensuite ils oublient de revenir, redoubler et de relier ça et je vais utiliser, sera juste quelque chose comme ça. Il y a des gens, beaucoup de gens comme moi qui sont comme, ça ne marche pas et je vois très clairement que c'est une erreur d'orthographe. Donc peut-être un peu de copier-coller juste pour s'assurer que la syntaxe est bien orthographiée. Maintenant, je vais mettre un petit projet maintenant. Ce ne sera pas un projet de classe distinct parce qu'il ne sert à rien de me l'envoyer parce que ça va avoir l'air exactement le même. Ce que j'aimerais que vous fassiez, c'est que vous créez deux documents dans le tutoriel précédent, Devoirs précédents. S' il ne l'a pas fait, retournez-y et faites-les. Mais vous avez ces deux documents HTML. J' aimerais que vous les sépariez et que vous ayez des feuilles de style séparées pour les deux. Maintenant, lorsque vous demandez de les imprimer, on peut appeler des styles, mais parce qu'ils vont dans le même dossier, vous ne pouvez pas avoir deux d'entre eux appelés styles. J' ai deux feuilles de style séparées juste pour passer par les motions de copier et de m'assurer que vous obtenez bien. Peut-être appelez celui-ci style1.CSS et appelez celui-ci style2.CSS et voyez si vous pouvez le faire fonctionner. D' accord, c'est tout pour les feuilles de style séparées. Je te verrai dans la prochaine vidéo. 14. Comment créer un index html & style css: Nous sommes sur le projet numéro 1. Le projet 0 est terminé. C' était de s'habituer aux choses, et d'apprendre les bases. Maintenant, on va commencer à faire des trucs. On va construire une structure. C' est notre structure de projet 1. Je l'ai écrit en haut. Nous allons lui faire une structure de balise div de base, alors nous allons y ajouter quelques détails. Ce sont mes trames filaires. Nous allons ajouter un logo, des en-têtes, des boutons, des cartes, et des trucs cool. Finalement, j'espère que ça ressemblera à ça. Ce sera une dernière chose. Je sais exactement, ça ressemblera exactement à ça, parce que je l'ai déjà fait. Mais tout d'abord, dans cette vidéo, nous devons trouver comment créer une page index.html, et comment connect.css ensemble. Nous allons également vous montrer comment séparer les documents comme celui-ci côte à côte. Tu es prêt ? Projet 1 sur le point de commencer. C' est l'heure de notre nouveau site. Nettoyons les choses, et commençons notre nouveau site. Fermons tout dans les codes VS, sans rien ouvrir. Nous avons travaillé dans un dossier appelé projet 0. Nous sommes à la hauteur du projet 1, 0 était un projet jetable. Ce sont des choses que nous venons de tester, comprendre ce que quelques-unes des choses de base, que nous avons dû apprendre jusqu'à présent. Ce que nous devons faire est de créer un nouveau dossier local. Nous l'appelons le dossier local, car il est sur votre ordinateur, pas sur Internet. C' est local, local pour vous au moins. Nous devons créer un nouveau dossier, et créer nos HTML et CSS, leur donner des noms et les lier ensemble. Tout d'abord, passons au fichier, et nous obtiendrons un créer un nouveau dossier. Maintenant, peu importe que vous trouviez cela un peu difficile à y aller, car nous devons ouvrir un dossier, puis créer un nouveau dossier. C'est bizarre. Vous pouvez le faire via votre système d'exploitation. Si vous êtes sous Windows, c'est différent, mais sur un Mac, c'est sur le Finder. Allez sur votre Bureau, puis ici je peux cliquer avec le bouton droit de la souris et dire Nouveau dossier. Peu importe comment vous obtenez ce nouveau dossier, mais nous avons besoin d'un projet 1. Si vous êtes sur un PC, c'est très similaire. Ouvrez Mes documents, recherchez votre bureau, puis cliquez avec le bouton droit de la souris, créez un nouveau dossier. Quoi qu'il en soit, on veut avoir un nouveau dossier, je vais l'ouvrir. Sur mon bureau, déjà là, voici mon nouveau projet de dossier 1. Cliquez sur « Ouvrir ». Rien ne se passe vraiment. Il clignote juste lorsque vous obtenez à nouveau l'écran de bienvenue. Je me souviens quand j'ai commencé à utiliser VS Code, et j'étais comme « Man, c'est déroutant. » Alors débarrassez-vous de ça. Faisons un nouveau document. Fichier, nouveau fichier. Nous allons en créer deux. Nous allons créer un code HTML. Fichier, enregistrez. Maintenant, ce document HTML, nous lui avons donné un nom aléatoire jusqu'à présent comme, divtags.html, ou helloworld.html. Maintenant, pour un site Web, vous avez besoin d'au moins une page, ou au moins une page. Vous avez besoin que votre page d'accueil soit appelée cette chose exacte. Il doit être appelé index.html. Si vous l'avez appelé homepage.html, mettez-le sur Internet et le navigateur irait à votre site, dansawesomewebsite.com, et aller à la recherche d'index, et ne pouvait pas le trouver et chargera une grosse erreur sur votre page. Donc, vous avez besoin d'au moins une page appelée index.html. Utilisez les minuscules ou les majuscules. Pas d'espace, ça doit être exactement ça. Le navigateur va chercher cette page comme première page initiale. Appelez-le index, cliquez dessus, enregistrez-le. Ajoutons du code HTML de base. Toutes nos données meda-data. Rappelez-vous le point d'exclamation, revenez. Donnons-lui un titre. Celui-ci s'appelle le restaurant Adare. [ Rires] Je suis allé jusqu'au restaurant. J' étais proche ? Il n'y a pas de vérification orthographique ici, et je triche aussi. Je regarde mes notes. Je l'ai écrit, je ne savais même pas ce sort. De toute façon. Le restaurant Adare va être mon titre. Nous devons créer et connecter une feuille CSS. Faisons cela en allant dans « Fichier Nouveau ». Allons à « Fichier Enregistrer ». On peut lui donner n'importe quel nom qu'on veut. J' y pensais avant entre les vidéos, j'étais comme il y avait du style. Je l'appelais main tout le temps, main.css. Peu importe ce que vous appelez ça. Le seul problème est que si vous l'appelez style, et que vous êtes un développeur Web, ou concepteur, et que vous créez beaucoup de sites Web, vous allez avoir beaucoup de fichiers sur votre bureau appelé Style. Il est un peu difficile de les trouver quand vous voulez, mais pas si dur. Appelons ça le style. Remember.css. Si tu oublies, comme je le fais tout le temps, c'est du style. Cela ne fonctionne pas mais ici vous pouvez cliquer dessus avec le bouton droit de la souris, le renommer et juste put.css après. Donc, il sait. Maintenant, nous allons connecter les deux. Retour au HTML. Juste en dessous, sous Titre, nous allons mettre le lien, puis cliquer sur CSS et il obtient le bon nom, parce que je lui ai donné le bon nom. Allez-y et appuyez sur « Enregistrer ». Ça devrait marcher. Essayons si ça marche. Mettons le corps ici. Mettons-le dans un h1. Maintenant, je vais vous montrer une façon de travailler légèrement différente. Nous allons ajouter des raccourcis au fur et à mesure. Si vous aimez « Man, je ne suis pas prêt pour les raccourcis. » Il suffit de taper le long chemin. Supports d'angle, h1, fermer. Il fait déjà un petit raccourci, mais je vais vous montrer un raccourci plus court. Je vais juste taper h1 et je retourne. Vous pouvez voir que je n'ai pas eu à mettre les équerres à l'avant. Je vais le faire probablement pour le reste du cours. Seulement parce que je le fais avec une habitude. Vous vous demandez peut-être pourquoi, mais de toute façon. Appelons ça Do I Work. Sauvegardez. Allons à nos styles. Ajoutons un style pour les accolades h1, h1. Nous allons le faire juste changer la couleur comme si sur les colonnes. Couleur. On va lui donner un brun et c'est sorti avec un demi-côlon. Nous allons le sauvegarder et allons le tester dans un navigateur. C' est notre ancienne page sur laquelle nous travaillons. Je vais aller à Ouvrir le fichier. Allons le trouver. Nous ne cherchons pas le projet 0. Maintenant, allez sur mon bureau. Où es-tu sur le bureau ? Projet 1. Voici mon index.html. Hé, voilà mon h1 et il est marron. Maintenant quelques autres choses que je veux vous montrer dans VS Code, c'est cette chose, l'Explorateur. C' est cool une fois que vous l'avez utilisé pendant un certain temps, mais au début, vous êtes comme « C'est un peu déroutant ». Il y a donc deux sections. Je vais ajouter ces petits chevrons ici pour tout attacher. Donc les éditeurs ouverts, je n'ai jamais ouvert. Ce que ça veut dire éditeurs ouverts, c'est un éditeur. Ça me montre que j'ai ouvert ces deux documents. Je ne trouve pas cela utile parce que je peux y voir. Projet cependant, c'est vraiment utile. Ce sera le nom de votre site web. On l'a appelé Projet 1. Mais si vous travailliez sur ce site, vous pourriez l'appeler Ideal Website et ce sera le nom là. Alors voici toutes les différentes pages que vous avez. Ici, si vous finissez dans le projet 1 en créant un tas d'autres pages, disons que nous appelons celui-ci contactez-nous, et nous faisons un tas d'autres pages et faisons juste une de plus. Je triche juste. Tu le remarqueras, tu peux voir ici ? Ça l'ajoute à ce projet, ça va aller. J' ai regardé dans ce dossier et je vois tout là-dedans. Ouvre les éditeurs, il montre juste les deux que j'ai ouverts. Je ne sais pas si c'est utile pour toi. J' ai trouvé ça assez difficile de me faire la tête autour de ce petit explorateur bizarre là-bas. J' ouvre ces gars, ils ne sont rien. Vous verrez les mises à jour. Au lieu d'aller « Fichier », « Ouvrir », vous pouvez simplement double-cliquer sur ceux-ci et il les ouvrira s'ils ne sont pas déjà ouverts. Comme ça. L' autre chose que je veux faire est que j'ai Index et style et je vais basculer entre les deux et vous tournez pour toujours basculer entre les deux. Je vais te montrer un petit tour, pas trop de tours plus tôt. Nous allons devenir plus difficiles à mesure que nous allons, mais celui-ci, c'est bon pour enseigner et pratique pour ce que nous faisons. Si vous cliquez et maintenez l'onglet en haut afin que je vais attraper le mot style, maintenez-le. Arrêtez de le faire glisser, vous pouvez voir ces boîtes semble un peu bizarre. Tu es genre « C'est celle-là ? » Déplace-le vaguement par ici. Pas trop haut, pas trop bas. À propos de là. Vous pouvez voir qu'il prend la moitié qu'il a à propos du gris. C'est la moitié. On y va. Le truc cool à ce sujet maintenant est que je peux voir mon index et mon style, et je n'ai pas à basculer entre les deux. Je peux aller dire que je vais changer ça. Je vais ajouter un onglet h1, h2 qu'en est-il de cela, et ici, vous pouvez voir, regardez, je n'ai pas besoin de partir ou de basculer entre deux onglets. Maintenant, je fais celui-là et une couleur rouge. Maintenant, dans le navigateur, actualisez. [ Rires] Ça ne marche pas du tout. Pourquoi cela ne fonctionne-t-il pas ? Tu as remarqué que tu disais : « Je ne peux pas le voir. » Rouge. Est-ce que je travaille ? Sauvegardez. Je n'ai pas tout sauvé. Voilà, tu y vas. J'ai déjà dit, je rencontre des problèmes. Fichier, Enregistrer tout parce que j'ai enregistré ce côté, mais pas ce côté. Je prétendrai que j'ai fait ça exprès. Mais je ne l'ai pas fait. C' est un joli petit truc d'aide à résoudre. Vous voulez vous en débarrasser, vous pouvez cliquer sur cette petite icône ici. Tu ne peux pas. Il le remet juste. Fermez tout. Fermer, sauvé. Je dois savoir quel bouton cliquer là. Vous pouvez le faire glisser pour être ici aussi. Où est-il ? Voilà, tu y vas. Il peut être en dessous. D'accord. dernière petite chose que je veux vous montrer est que vous passez votre vie à partir du HTML, mettre des choses et à l'installer dans le CCS. Une belle façon de simplement les diviser comme vous pouvez l'être sur l'un de ces, et cliquez sur cette petite icône dans l'extrême droite ici. Donnez-lui un clic. Il les séparera. Ça fait une chose bizarre. Je trouve ce bouton, bien qu'il semble incroyable, je trouve que le moyen le plus simple de le faire est en fait juste de le faire glisser. Donc j'ai ces deux-là. Donc style.css. Si vous cliquez, maintenez et faites glisser le nom ici, vous pouvez simplement le faire glisser ici, vous pouvez voir qu'il fait cette grande boîte grise qui apparaît et c'est un peu aléatoire en termes d'où il finit. Mais ce que nous cherchons est vaguement en haut juste ici, parce que nous voulons cette moitié. Vous pouvez voir. HTML de ce côté, CSS de ce côté. Tu peux le fermer si tu n'aimes pas ça. Je vais le sauver. Ouvre-le. C'est deux onglets séparés, mais je vais le faire glisser. Vous pouvez l'avoir ici aussi, en fonction de vos ordinateurs portables. Je les ai juste mélangés. Mec, je trouve ça dur. [ Rires] Vous pouvez mettre HTML au-dessus de CSS. Je ne le fais jamais comme ça. Je l'ai toujours ici. Ici, nous allons côte à côte jusqu'à vous. Maintenant, je peux entrer ici et dire en fait que je veux un onglet h2 et que diriez-vous de celui-ci. Ici, je peux taper, laisser mon support là, je pourrais taper un h2. Vous pouvez voir que c'est pratique. Couleur, bleu. Sauvegardez. Vérifiez dans le navigateur. Vérification du navigateur, bleu. Joli. Une chose que vous devez faire aussi est que vous devez aller « File », « Save All ». J' ai accidentellement frappé « Enregistrer ». Mon curseur clignote ici. Regardez ceci, si j'ajoute un h3, et des trucs, et ici je commence à travailler et j'ajoute du style mon h3. Encore une couleur. Peu importe. Je le garde et je me dis  : « Rafraîchir, rafraîchir, rafraîchir. » Je l'ai sauvé. Mais à cause de quand j'ai enregistré le CSS, il n'a pas sauvé mon h3. Je peux passer des âges à essayer de résoudre ce problème. Je me dis : « Qu'est-ce qui ne va pas avec le code ? » J' ai passé des âges à essayer de résoudre un problème qui n'existe pas. C' est juste que je sois stupide et que je ne vais pas « Save All » comme raccourci. Si vous avez l'habitude de commander S ou Control S, vous devez apprendre la Command, Alt S comme rasage par défaut. Ou sur un PC est Control Alt. Oui pour tout sauver. Maintenant, regarde, rafraîchis. Oui, facile. Allons dans la prochaine vidéo. En fait. Non, je rentre à la maison pour la journée. J' ai enregistré toute la journée et il est temps de faire une pause. Demain, vous entendrez soit un plus excité et en fonction de la façon dont son bébé dort ou un Dan moins excité en fonction de la quantité de café que j'ai eu entre les vidéos. Mais pour vous, cela n'aura pas d'importance parce que je serai ici dans une seconde avec la prochaine vidéo où nous commençons à regarder les plugins dans le code VS. Je te verrai alors. 15. Testez votre site web en direct à l'aide d'une extension Visual Studio Code: Hé, là. Cette vidéo va faire double objectif ; elle va nous montrer comment installer ce qu'on appelle une extension dans VS Code. Cette extension va nous montrer comment faire des mises à jour en direct dans notre navigateur plutôt que d'aller et de frapper rafraîchir à chaque fois. J' ai installé l'extension, je vais changer la couleur ici au vert. Ça va être vert jaune, et regarde ça changer ici quand j'appuie sur « Sauver ». Je ne frappe pas « Rafraîchir » prêt, il se met à jour naturellement. Je vais vous montrer comment je l'utilise, comment j'ai configuré mon espace de travail, mon espace physique avec mon bureau, dans mon ordinateur portable, et nous allons tout apprendre sur les extinctions dans VS Code. Pour commencer, ouvrez n'importe quel fichier. Eh bien, j'ai notre index.html ouvert, vous pouvez avoir quelque chose ouvert et nous allons aller à l'onglet extensions ici. Il y a un tas d'icônes, c'est la dernière, ou au moins celle-ci avec le carré, avec un carré. Je ne sais pas comment décrire celui-là. Cliquez dessus. D' autre part, il pourrait sembler différent de la mienne légèrement à cause de la largeur de celui-ci. Voir mon curseur, quand je me rapproche de ce bord elle, je peux cliquer sur « Hold », le faire glisser, et éventuellement si je le fais glisser assez grand. Faisons-le simplement glisser assez grand pour que nous puissions voir les icônes. C' est peut-être un peu grand pour vous, mais il nous sera plus facile de déterminer quelle extension nous sommes en train de regarder. Faisons une recherche en haut ici donc je vais mettre en avant-première en direct. Je sais exactement ce que nous allons installer, mais faisons semblant que vous ne le faites pas. Je veux faire un aperçu en direct de mon HTML. Vous faites une recherche ici et vous devrez peut-être continuer à taper quelques choses différentes pour obtenir l'extension que vous voulez. Maintenant, celui que nous allons utiliser est celui ici appelé Live Server. Maintenant, c'est, je suppose que pour être clair comment les extensions sont faites. Donc, les gens étonnants Microsoft ont fait VS Code et partagé cela gratuitement avec nous. Merci, Microsoft. Eh bien, ils l'ont aussi fait et ont dit, « Hey, reste des mondes, nous allons permettre à d'autres personnes de construire des extensions pour le logiciel. » Nous ne le ferons pas pas, pas Microsoft, mais nous laisserons d'autres personnes le faire. C' est une grande chose de se rappeler que nous utilisons le serveur en direct et qu'il a l'impression que c'est une partie du produit, mais ce n'est pas le cas. Si je clique dessus, c'est quelque chose fait par Ritwick Dey. Un jour, il a décidé, je vais construire ce plugin pour m'aider à utiliser le code VS parce qu'il n'est pas intégré par défaut donc il l'a fait, il l'a fait, et d'autres personnes ont commencé à le télécharger. Maintenant, le problème est, c'est qu'ils pourraient être un meilleur Live Server là-bas. Il peut y avoir une autre personne qui en a fait un, et il pourrait ici Live Server Preview. Ça a l'air bien, mais il y a des étoiles inférieures, 3.5. Celui-ci a 5 étoiles et il a un million de téléchargements. C'est comme ça que je le juge. Quand je suis à la recherche d'une extension pour résoudre mon problème et que je la tape, puis je passe par et je dis, « Combien de fois est-ce téléchargé par rapport au nombre d'étoiles qu'il a ? » Alors c'est comme x vecteur. Je les compare tous et je vois qui a le plus d'étoiles, qui a le plus de téléchargements, et puis je choisis celui-là. Je suppose que je veux te le montrer parce que tu regardes ça dans un avenir lointain. Il pourrait être Live Server n'est pas si bon maintenant il a deux étoiles, parce que Ritwick Dey a été frappé par un bus et personne ne s'occupe de cette application. Vous devez faire vos propres choix ici au sujet de celui que vous pourriez utiliser et ceux-ci changeront au fil du temps. On va utiliser celui-ci, et je vous montrerai de l'installer. C' est assez facile, et je clique dessus, il devrait apparaître ici. Un autre petit conseil, c'est mon site n'est pas parti, mais c'est l'extension. dit un peu à ce sujet et je l'ai généralement lu pour m' assurer qu'il fait ce que je devais faire, et il vous indique comment l'installer et « Je suis désolé que je suis occupé maintenant si vous voulez maintenir le projet ». Tu vois que c'est un bon. Il y a une note ici de Ritwick disant : « Je ne vais plus soutenir ce produit cette extension. » Je sais que cela fonctionne parfaitement parce que je l'utilisais aujourd'hui. Mais il va y avoir un moment où ça ne va probablement pas marcher et les étoiles vont tomber. Il dit : « Désolé, je suis occupé. Est-ce que quelqu'un veut s'en occuper ? » Cela est vrai de beaucoup de programmes maintenant beaucoup de logiciels, XD le fait qu'ils permettent d'ajouter des extensions plutôt que les fabricants de logiciels. Ils font juste le noyau et ils laissent les autres faire tous les extras intéressants. Pour l'installer, il est facile de cliquer sur le bouton « Installer ». Ça devrait être au début. Vous pouvez le voir ici qui est votre indication visuelle qu'il fait quelque chose jusqu'à ce qu'il indique Installé et vous pouvez le désinstaller si vous ne l'aimez pas. Vous pouvez courir à travers un couple d'entre eux, les allumer et éteindre. Maintenant, pour ce particulier, je ne pense pas que nous avons besoin de redémarrer le code VS mais beaucoup d'entre eux le feront, ils le diront quelque part ici et si cela ne fonctionne pas, c'est une assez bonne façon de le faire. Si ça ne marche pas, faisons-le de toute façon. Allons à « Code », « Quitter Visual Studio Code », et maintenant je vais le rouvrir et ça va probablement fonctionner. Comment fonctionne ce plug-in particulier ? Si vous lisez la documentation essentiellement, il dit avoir le document ouvert et cliquez sur ce bouton ici. Cliquez sur « Go Live », il lance Google Chrome, et il ne semble pas très différent de l'endroit où nous sommes avant, sauf celui-ci, il va mettre à jour en direct. Nous allons vous montrer ce que je veux dire en le rendant un peu plus petit, et je vais le pousser ici, déplacer ça ici pour que vous puissiez le voir. Fondamentalement, il vous arrête d'appuyer sur le bouton « Actualiser ». Vous pourriez être comme, « Ça ne me dérange pas d'appuyer sur le bouton d' actualisation », et n'installez pas ce plug-in. On n'en a pas besoin, c'est juste pratique, j'aime ça mais si tu dis : « Mec, c'est juste trop de travail et trop d'agitation, ouais, tu peux juste le faire en frappant « Rafraîchir ». Mais je suppose que ce que je veux faire est principalement dans cette vidéo est de vous montrer comment installer d'autres extensions. On en fera un autre dans la prochaine vidéo. Qu'est-ce qui finit par se passer ? Regardez ça avant d'avoir à frapper « Rafraîchir », maintenant est-ce que je travaille ? Oui, je le sais. J' appuie sur « Enregistrer » pouvez-vous voir que j'ai enregistré sur le côté, il se rafraîchit automatiquement ? Je vais vous montrer dans une seconde comment j'utilise cela mais résumons rapidement. Trouvez l'extension, tapez ce que vous voulez faire. Nous allons utiliser FTP plus tard, et nous allons utiliser des indications de code, le trouver, passer par et dire, oh j'ai à peu près la même date limite. Celui-ci en a deux fois plus, mais ces deux ont vraiment de mauvaises critiques. Celui-ci en a moins mais il a des étoiles plus élevées, donc vous prenez une décision basée sur les étoiles par rapport aux téléchargements. Eh bien, celui-ci a l'air bien c'est celui que nous allons utiliser, parce qu'il a 2,3 millions de téléchargements, ce sera différent quand vous le regardez, avec une note d'étoiles élevée. Vous pouvez fermer les extensions en cliquant de nouveau sur votre exploration. Nous allons faire un aperçu ici et ce que j'ai fait est soit d'avoir un côte à côte comme celui-ci, ce qui va fonctionner pour mon vraiment grand écran. Je vais te montrer comment je travaille normalement, et je vais sauter sur mon portable maintenant et je te montrerai. Comment tout le monde c'est moi, pas seulement l'écran de l'ordinateur. Je veux te montrer comment je travaille. Ordinateur portable, grand écran, je les branche pour qu'ils soient connectés. Quand je travaille sur le grand écran ici, j'ai cela en utilisant le code VS, et le code VS je vais lancer le truc du serveur live cool. Alors je le lance, ça va grand. Ce que je fais, c'est que je clique simplement sur « Hold » et je le fais glisser sur cet écran. Je le laisse là tout le temps et c'est comme ça que je fais mon montage. Plus d'entendre dans le code VS, je vais essayer de faire quelque chose pour que vous puissiez voir un changement en direct. H1, je vais dire que la taille de la police sera de 400 pixels massifs. Cliquez sur « Enregistrer » et qui devrait le mettre à jour, il est mis à jour. Hey, donc je suis toujours en train de pirater ici et de le regarder pour s'assurer que les résultats de bon ici, donc je devrais basculer entre les écrans ou basculer entre eux et vous allez avoir un problème supplémentaire pendant vous apprenez parce que vous allez essayer de le faire, mais vous devez aussi regarder la vidéo que je fais. Peut-être que certaines personnes utilisent un iPad ici pour regarder la vidéo et ensuite faire les choses ici. Vous n'avez peut-être pas, vous pourriez avoir un petit ordinateur portable sur lequel vous travaillez et qui va juste être amusant. Vous devez basculer entre les trois vidéos. Mais c'est ça extensions, assurez-vous de vérifier l'évaluation des étoiles par rapport au nombre de fois il a été téléchargé et de faire votre propre choix. Le serveur en direct en ce moment est assez bon, mais il peut ne pas être dans un an parce que personne ne s'en occupe. C'est ça. Nous avons installé notre extension Live Server est à moitié pleine et babling. C' est plus difficile lorsque vous êtes sur la caméra en direct, c'est facile quand vous pouvez éditer lorsque vous faites une diffusion d'écran, il semble beaucoup plus sensible. Plus de promenade, je te verrai dans la prochaine vidéo. Au revoir. 16. Comment vérifier l'absence d'erreurs dans votre code HTML en utilisant VS Code: Hé, là. Ce ne serait pas bien si vous avez fait une faute de frappe ou si vous avez oublié de faire quelque chose ou si vous avez laissé les parenthèses, qu'il y avait effectivement des erreurs qui sont apparues et vous ont dit quelle ligne il y a et comment les réparer. Il y a une telle chose. Il n'est pas installé par défaut, c'est une extinction. Je vais vous montrer comment travailler avec cela ainsi que d'autres façons de vérifier votre code et de demander de l'aide. Allons-y. D' accord. Par défaut, vous avez l'air ticking dans CSS pour une raison quelconque, mais pas en HTML. Vous l'avez peut-être déjà remarqué. Quand je fais quelque chose de mal ici et que j'oublie de mettre un deux-points, ou je mets un deux-points, il y a des choses bizarres qui viennent et ça dit qu'il ne sait pas, il ne s'attend pas à des choses et comment corriger rapidement. Ceux-ci n'ont jamais semblé fonctionner. Aucun des correctifs rapides ne fonctionne, c'est à vous de le réparer. Tu vas juste devoir passer par là et dire, où commence le problème ? Les problèmes commencent ici. Quelque chose juste avant ça ne va pas. Mais c'est utile de savoir que ça commence bizarre. En fait cela supprimé aussi, je vais vous montrer où d'autre il commence. J' ai fini ici, je suppose que c'est comme une petite erreur en bas à gauche ici. Je clique sur ce, c'est deux-points attendu. En fait, c'est utile. Il s'attend à un deux-points, vous pouvez en avoir un. Sur la ligne 3, et ça affecte aussi la ligne 15, alors qu'est-ce qu'ils disent ? Mais la ligne sur notre personnage 15. ligne trois, c'est là, mais maintenant quand vous avez un gros problème sérieux, il devient plus utile quand il y a comme sur la ligne 1000. Sur la ligne 3, c'est un problème et tout le reste, ne vous inquiétez pas jusqu'à ce que vous répariez le premier, car si vous fixez le premier, ils disparaîtront tous. Est une cascade d'erreurs qui sont corrigées par la première. Maintenant, cela ne fonctionne pas en HTML par défaut. Si je mets quelque chose ici qui n'est pas censé être là-dedans et que la chose ne sait pas quoi faire, me dit pas qu'il n'y a rien à faire si j'ai raté la balise de début et que je fais des parties de ça, ça a disparu mais il n'a pas d'erreur de problème. Je ne suis même pas sûr qu'il soit lu par défaut. Je suis presque sûr que c'est à cause de la prise que j'ai installée plus tôt. Allons activer cette vérification d'erreur. Nous allons faire exactement la même chose qu'avant, donc c'est la même chose que d'installer une extinction. Cliquez sur cette icône ici, et je vais le rendre plus grand afin que vous puissiez voir et ce haut ici et supprimer ce qui est là, et je vais dire que je voudrais HTML et erreur. C' est là que ça se fait un peu attraper, parce que tu es comme, comment je l'appelle ? n'y a pas de bonne règle, suffit de commencer à taper et à voir quels résultats apparaissent. Vous pouvez effectuer des recherches Google. En termes de vérification des erreurs, parfois c'est de la chasse à froid ou de la tapisserie avec un L-I-N-T. Tu peux pelucher les choses. J' ai cherché en essayant d'en trouver un, et celui que j'utilise est appelé HTMLHint. Mais même alors c'est vraiment difficile à trouver dans cette liste. Je fais quelques recherches Google et j'ai trouvé celui que je veux. C' est en fait juste un mot, HTMLHint, vous voyez que vous n'avez aucune chance de le trouver. Ok, alors sachez que cette barre de recherche d'extinction est acceptable pour commencer et essayer de trouver des choses. Mais juste sauter à Google et comprendre et juste poser la question, quel est un bon plugin pour cette chose que j'essaie de faire. Vous pouvez voir ici que c'est vraiment populaire. Quatre étoiles fonctionne pour moi, et il y a 0,5 million de téléchargements. Je clique dessus pour jeter un coup d'oeil. Vous lisez ce qu'il fait et comment il fonctionne, et je vais cliquer sur installer, et nous allons attendre, et ça marche. Celui-ci ne dit pas redémarrer, n'est-ce pas ? Non, certains disent redémarrer, beaucoup d'entre eux ne le font plus, ils le font. Mais si cela ne fonctionne pas, vous pouvez l'éteindre et le redémarrer. Faisons en sorte que ça marche. Fermons ce petit onglet, qui me montrait juste un petit aperçu du produit. Allons chercher tous les trois ensembles. Revenons à notre explorateur et rendons cela un peu plus petit. Maintenant, si je fais quelques erreurs, mettez des codes aléatoires où il ne devrait pas y avoir, regardez une petite chose verte et ça me dit qu'il y a un caractère spécial au mauvais endroit. Ça ne me dit pas grand-chose encore, mais au moins je sais où est l'erreur, c'est sur la ligne 13, je peux aller la trouver. En termes de vérification des erreurs, c'est un bon endroit pour commencer. Allumez l'extension, je vais la fermer pour le moment et juste garder un oeil sur cela. Si tu es comme ça, ça ne marche pas. Avant de m'envoyer un e-mail et de dire, hé, ça ne marche pas, vérifiez vos erreurs ici, vous pourriez être en mesure de vous auto-diagnostiquer. Maintenant, une autre chose à faire avant de tendre la main pour voir s'il y a un problème parce que parfois ce n'est pas vraiment un problème. Vous pouvez faire quelque chose ici et changer le code et le vérifier dans votre navigateur, et le navigateur ne s'affiche pas et vous êtes comme si quelque chose ne allait pas. Parfois, probablement une fois sur 50 fois pour moi, ce n'est pas vraiment cassé. Votre code est parfait ici, le navigateur où vous avez été aperçu comme juste tenir sur les anciennes données. Vous pouvez faire quelque chose appelé la mise en cache et il met en cache votre version précédente, de votre site Web, donc quand vous dites que la mise à jour est en cours, je vais utiliser cette autre version mise en cache de votre site Web pour être rapide et intelligent et vous êtes comme, ne soyez pas rapide et intelligent, je veux que vous rechargez à chaque fois, et la façon de le faire, rafraîchir peut fonctionner. Mais il y a une façon réelle de le faire recharger. Si vous avez téléchargé des images ici, souvent le navigateur va, eh bien, si c'est le même nom de la même image, je ne vais pas la mettre à jour parce que c'est la même image avec le même nom. Mais vous avez physiquement changé l'image, donc parfois les choses ne se mettent pas à jour même si elles le devraient. Parler trop longtemps. Montrez-leur comment le faire, puis envoyez une vue et allumez cet ensemble d'outils effrayant. Affichez Developer et cliquez sur Developer Tools. OK, cliquez dessus. Cela ouvre le panneau en bas, le vôtre ne ressemblera pas à la mienne, déplacez ce à quoi il ressemble par défaut. Je vais éteindre ça. Je ne m'en souviens pas, mais parlons de l'essentiel. Ne vous inquiétez pas de ce qui apparaît ici, ce que vous voulez faire est l'option. Maintenant, lorsque vous appuyez sur recharger, vous pouvez cliquer avec le bouton droit et il vous donne ces deux nouvelles options qui n'étaient pas là avant, parce que maintenant vous êtes à la recherche sous le capot en utilisant les outils de développement Chrome. Vous avez cette option, Vider le cache et Recharger dur. Vous oubliez tout ce que vous savez sur mon site Web et le rechargez exactement comme je l'affiche ici dans VS Code. Cela peut parfois, si je fais des problèmes est comme, sûr devrait être juste, pourquoi ne fonctionne-t-il pas ? Tout est parfait. J' y vais, vérifie ça, fais ça, et parfois ça résout et tu es comme peu, au lieu de passer du temps à essayer de comprendre comment c'est cassé. Il n'est pas en fait cassé, juste le navigateur n'a pas mis à jour. D' accord, que pouvez-vous faire d'autre ? Maintenant, vous pouvez totalement poser des questions de ce cours comme il y a des commentaires. J' utilise la section commentaire, j'utilise les médias sociaux comme vous voyez tous les médias sociaux dans les fichiers d'exercices de classe, tendez la main de cette façon. Mais souvent, c'est juste moi pour ce cours, c'est un nouveau cours. Je fais de mon mieux pour répondre aux questions. Parfois, je reçois un peu de retard, c'est le week-end ou en vacances, donc je peux certainement utiliser cela comme une option. Mais vous trouverez aussi des recherches Google, je sais que c'est une chose boiteuse à dire, aller chercher sur Google. Mais ce que vous trouverez, c'est qu'il y a quelques endroits principaux, en fait un endroit principal, il s'appelle Stack Overflow. débordement de pile s'affiche à moins que vous ayez des résultats de recherche. Mais chercher dans ce site, c'est tout simplement incroyable. J' écoute des podcasts du gars a commencé cela, c'est pour les concepteurs et les développeurs. N' importe quoi web, posez une question ici, vous trouverez beaucoup et beaucoup de réponses vraiment utiles et ils sont des réponses curatives d'autres utilisateurs. Ce que vous trouverez probablement, c'est que vous n'avez pas à poser une question. Vous pouvez vous connecter et vous inscrire et poser une question, mais vous constaterez qu'elle a probablement déjà été posée, surtout à notre niveau ici où nous commençons tout juste. Stack Overflow est un site incroyable et vous obtenez une réponse tout de suite, et si vous avez encore des problèmes, laissez-moi une ligne. Les différentes façons dont le site est visualisé, ce cours vidéo est visualisé, utilisez les commentaires ou vous posez le bouton de question et souvent pour résoudre votre problème, j'ai besoin de voir le code, alors compressez-le. Il le compresse dans un petit dossier et l'envoie le long, comme un lien peut-être en utilisant Dropbox. J' ai besoin des fichiers, tu n'as pas à trouver un moyen qui fonctionne pour toi. Parfois, vous l'envoyez un comme un système pour envoyer des choses, Dropbox est un très bon car évidente ses captures d'écran sont vraiment difficiles à modifier votre code. Sinon, je dois commencer à retaper tout le truc et essayer de trouver ce qui s'est mal passé. Maintenant, ma seule chose est si vous posez des questions, disons que vous postez une question, jetez un oeil à travers les autres commentaires ou questions et voyez s'il y en a une à laquelle vous pouvez répondre. Disons que tu trouves ça, pas facile, mais tu as ce concept, être comme man, div tags, l'avoir enfermé et tu vois une question que quelqu'un pose sur les balises div. J' aimerais essayer d'arrêter cet élan où si vous posez une question, vous devez répondre à quelqu'un d'autre, ou au moins vous donner une meilleure opinion ou essayer de le faire, afin que nous puissions obtenir des réponses rapidement. Pour vous, vous trouverez qu'il est super précieux si vous êtes capable de répondre aux questions de quelqu'un d'autre, c'est assez incroyable comme être capable d'articuler cela à quelqu'un d'autre vraiment le conduit à la maison dans votre propre esprit sur ce sujet. En plus, si je suis en vacances à siroter des collisionneurs de cacahuètes, quelqu'un qui a besoin d'aide, mais ne vous inquiétez pas, j'ai un bébé et un enfant de cinq ans. n'y a pas de collision de cacahuètes dans mon proche avenir. Pour récapituler, effectuez votre propre vérification des erreurs en utilisant le HTMLHint, que nous venons d'installer dans Visual Studio Code. Vérifiez que ce n'est pas réellement un problème, en actualisant votre navigateur. Mais n'oubliez pas que vous devez le faire en allant dans la vue et dans Developer et inspecter les outils, KL Developer Tools, puis en cliquant avec le bouton droit de la souris sur le bouton d'actualisation. Stack skills est un endroit incroyable, essayez-le avec moi aussi. Wheez dans les commentaires ou frappez-moi sur les réseaux sociaux. Une dernière chose avant de partir, c'est qu'il pourrait y avoir un, disons qu'il arrive un peu, tout va dans mon CN d'extinction et je serai comme, super, celui-ci fonctionne. On dirait que ça marche. Je l'installe et je ne peux pas le faire fonctionner ou il est cassé. Parfois, vous devez désinstaller les extinctions. Pour ce faire, cliquez sur ce peu bizarre Clear Extension Entrées. cela est effacé, votre recherche disparaît, et elle vous indique exactement ce qui est activé, ce qui est recommandé, je ne trouve jamais cela utile, mais ici, me dit ceux que j'ai activés. Je peux cliquer dessus et dire que le HTML ne fonctionne pas, je vais le désinstaller et essayer un autre. Vous pouvez le désactiver temporairement. Dites que vous êtes comme en fait, est-ce que ça marche, est-ce que ça casse quelque chose d'autre ? Désactivons simplement, puis faisons quelque chose et puis réactivez-le pour voir si cette chose disparaît. Je n'ai jamais eu à faire ça. Souvent, le classement des étoiles corrige cela ou au moins garantit un plug-in ou une extinction décent moitié, et c'est tout. C' est la vérification HTML. Il est activé par défaut pour votre CSS. Continuons maintenant et commençons à construire la structure de notre projet, le restaurant. Je te vois dans la prochaine vidéo. 17. Qu'est-ce que la balise HTML5 header nav section article main footer ?: Hé, là. Cette vidéo est tout sur l'apprentissage de ce que sont les balises de structure HTML5. D' accord. Ils sont des choses comme en-tête et main et pied de page et nav et vous pouvez en quelque sorte voir le assez simple. Ce ne sont que des conteneurs dans lesquels on met des trucs exactement comme un div, sauf qu'on leur donne des noms spéciaux parce qu'ils font des choses spéciales. Plutôt facile à faire. Allons maintenant, apprenons ce qu'ils sont. D'accord. Alors, quels sont ces éléments structurels HTML5. Fondamentalement, HTML4, ce que nous faisions est ce que nous avons fait jusqu'à maintenant, nous faisons juste une balise div se souvenir d'une division de l'espace. C' est une sorte de boîte et on lui donnerait un nom de classe. Ensuite, installez ici maintenant dans notre CSS et cela fonctionne bien. D' accord. Nous avons une boîte en haut pour notre frappe et une boîte pour la navigation et une boîte pour les parties principales, une boîte pour le pied de page et nous avons juste créé tous ces divs avec tous ces noms ici. Donc, ce qu'ils ont décidé en HTML5 est comme, « Hey, nous réutilisons ces choses. Ne serait-il pas agréable d'avoir une balise réelle au lieu d'écrire div égal. » Vous écrivez juste nav. D' accord. À la fin, nous allons fermer le NAV. C' est la même chose que celle-là. Peut-être que c'est la partie principale de notre contenu. D' accord. On l'appellera « principal » et on l'appellera « principal ». D' accord. Épellez-le bien et ici stylisez le mot principal. D' accord. Alors c'est ce que c'est. D' accord. Ils remplacent juste certaines balises div couramment utilisées par des noms préexistants. Maintenant, à part ça, il n'y a pas beaucoup de différence entre les divs et ce genre de noms prédéfinis. Ils sont prêts à partir. Il doit y avoir des options d'accessibilité pour comme les lecteurs d'écran qui pourraient utiliser ce type de balises qui doivent faire un peu plus de recherche et que cela n'est jamais venu dans mon travail. Il va annuler cela parce que je travaille sur ce document. Alors, quelles sont ces étiquettes ? Il y en a quelques principales. D' accord. Il y a toutes sortes de suggestions. Donc je suis w3schools.com et voici un tas de leur genre de nouvelles balises structurelles. D' accord. Ce n'est qu'un couple d'entre eux qui s'habitent. Vous devriez, si vous voulez être comme le meilleur implémentateur HTML5 dans le monde, passer par et les rechercher tous et les utiliser parfaitement. Ce que vous trouverez, c'est que la plupart des gens choisissent les bons et il y a beaucoup de confusion sur certains endroits où vous devriez utiliser certains d'entre eux. Parce que comme les avantages et les inconvénients, eh bien, les avantages sont énormes et pour les ajouter, sauf que c'est juste un peu plus clair, les gens ne les utilisent pas. Donc je suppose que je voulais être honnête à ce sujet pour que nous ne soyons pas certains de ne pas vous dire que vous devez utiliser ces balises. Maintenant, j'ai rendu un peu pratique. Nouveaux fichiers d'exercices, un petit dessin. Pourquoi est-ce que je dessine ça ? Je pourrais utiliser Illustrator. J' ai l'impression que c'est bon si je vais dans les filaires. Si vous allez dans les fichiers filaires et votre dossier d'exercice, j'ai fait ces deux-là. Donc, il y a la structure HTML a et b. Je vais vous montrer deux utilisations vraiment courantes d'entre eux. Donc, au lieu d'imprimer l'en-tête div, nous allons juste utiliser la balise d'en-tête. Le NAV dit ce que je fais normalement. Je lance un site web, cette boîte extérieure, le genre de vert n'a pas de nom. Ils auraient dû juste en mettre un dans un conteneur froid que tout le monde utilise dans la conception web, mais ils ne l'ont pas fait. Donc il n'y a pas de nom pour celle-là dehors. On doit lui donner un nom div. Mais à l'intérieur d'ici, je mets souvent mon en-tête. A l'intérieur de l'en-tête, j'ai mis mon logo ici. n'y a pas de balise HTML spécifique pour le logo, donc vous le mettrez en tant qu'élément séparé. Mais il y a un nav, donc pour le nav et ils souvent en haut à droite. Cette grande section au milieu, je l'appelle la principale. D' accord. Eh bien, je l'appelle le principal. C' est en fait un prédéfini. Vous pouvez le voir par ici. C' est en fait une balise HTML5 prédéfinie. Nous pensons à principal est que l'on ne s'utilise pas très souvent. Je me dis : « Pourquoi n'aurais-tu pas une si bonne explication de ce qu'est cette zone ? » Mais de toute façon et pied de page est vraiment facile. Alors c'est ce que je fais. Je veux vous montrer une autre façon de travailler que je vois beaucoup d'autres sites fait. D' accord. Je suppose que je ne veux pas que vous me suiviez parfaitement parce qu'il y a différentes façons de le faire. Donc encore une fois, la grande chose bleue sont à l'extérieur est n'a pas un nom spécifique. Nous allons lui donner un nom dans une seconde, mais en-tête. Donc, je voulais vous montrer celui-ci aussi parce que le nav n'a pas besoin d'être à l'intérieur de l'en-tête pour fonctionner. Vous pouvez avoir l'en-tête et vous pouvez avoir votre logo et quelques graphiques. Je ne veux pas y aller, mais vous avez donné votre navigation séparément. Votre navigation peut être faite de côté, bien que personne ne le fasse plus. Alors tu as ça, tu as ton pied de page. On en a déjà parlé, et vous avez ces trois. Ceux-ci sont assez communs et de côté est assez facile. Si vous avez un design web où vous avez une barre latérale ou quelque chose. Souvent, c'est comme des articles connexes ou des derniers flux Twitter. Tu peux avoir ça. Vous pouvez le mettre à l'intérieur d'une étiquette div appelée de côté et c'est du raisin clair. Ces deux-là sont vraiment déroutants. C' est ainsi que j'interprète la façon dont il a été exposé. Donc, vous avez un article et il est unique à cette page. Il pourrait s'agir d'un billet de blog qui pourrait l'être. Vous écrivez sur un sujet. Ensuite, dans cet article, vous avez des sections. D' accord. Vous pourriez avoir un type d'article principal, mais vous pourriez avoir quelques puces ou comme peu si une file d'attente ou une sorte de citation de traction, des bits supplémentaires. D' accord. Vous pouvez avoir 10 sections ou deux sections, mais vous avez un article principal. Il y a des arguments sur les sites où cela peut être complètement inverse. Vous avez une section et vous avez des articles dans la section, et vous avez plusieurs articles sur la page. La documentation n'est pas très claire. Je suppose que je voulais partager le peu de clarté parce que vous pourriez arriver à un site Web en étant très délibéré sur l'utilisation d'articles, puis de sections dans les articles. Ensuite, vous arrivez à un autre site et ils ont fait quelque chose mis en œuvre cette section article chose, complètement différent et vous seriez comme, « Huh ». Donc si ça arrive, si tu arrives à ça, moment « Huh ». Ce n'est pas toi, c'est Internet. Mauvaise herbe claire. Mais beaucoup de gens n'utilisent pas le principal. C' est pour ça que je ne l'ai pas inclus ici. D'accord. Nous avons donc appris ce que sont ces types de balises, juste des remplacements pour les divs avec des noms spéciaux. Nous allons aller et commencer à construire notre structure de projet réelle dans la prochaine vidéo. On se voit dans une seconde. 18. Comment ajouter des éléments de structure html5 à votre site web html: Commençons à faire le site. Notre premier projet sera ce restaurant. Nous allons mettre dans la structure pour l'en-tête, le principal et le nav. Ça va ressembler à ça. Ce sera la structure principale que nous construisons dans cette vidéo. En-tête, nav, main, pied de page, facile. Faisons-le, et c'est à ça que ça ressemble et nous le centrerons aussi. C' est le travail de cette vidéo. Commençons à coder. Selon la façon dont vous avez suivi le long, je vais fermer sur tout et ici sauf pour, et j'ouvre mon explorateur. Je suis dans le premier projet. J' ai l'index et le style ouverts. Assurez-vous qu'ils s'ouvrent. Maintenant, dans le style CSS, supprimons tout le code que nous avons jusqu'à présent et nettoyez-le, et même ici. Débarrassons-nous de tout le corps. Donc c'est gentil et propre. Mais si tu étais tendu parce que fou, et qu'on a besoin de beaucoup d'espace. Assurez-vous que votre feuille de style est liée et que le titre, vous avez un titre. N' importe quel titre. Mais je veux aussi faire avant de passer à autre chose, est que je vais fermer sur l'explorateur. Je garde le sens de le faire dans chaque vidéo, mais faisons-le maintenant. Allons voir. Maintenant, je vais probablement juste faire ça. Nous allons aller à Voir l'apparence et C zoom avant. Vous verrez si vous voulez le faire dans un Sasquatch, vous pouvez voir tous les textes ont un peu plus grand. C' est probablement pour aider, principalement pour aider l'éditeur de zoomer. Vous êtes probablement étourdi car nous allons côte à côte, en vérifiant CSS et HTML. Donc fait les tiques pour un peu plus gros. Vous pourriez être la même, vous pourriez être comme, je porte des lunettes et je dois agrandir ce truc. Donc, voir l'apparence et vous pouvez zoomer. Vous réinitialisez, nous sommes prêts à partir. Une fois dans l'esprit, disons que nous nous sommes réveillés, nous avons deux idées, nous avons un café et nous sommes comme, ok, nous devons créer un site web pour cette entreprise de restaurant d'idée. Nous avons créé notre dossier local, qui s'appelle le projet un, et nous avons créé deux fichiers, index et CSS. Nous avons ajouté notre titre, et c'est tout ce que nous avons fait. En fait, nous avons connecté le style.css prêt. La prochaine chose que je veux faire est de commencer à ajouter mes balises de structure HTML5. Maintenant, nous allons travailler sur un diagramme que j'ai dessiné à la main pour vous. C' est dans le projet un sur vos fichiers d'exercices et ça s'appelle celui-ci, cadre métallique P1A. Si tu veux que ça s'ouvre sur ton écran comme moi, on va le mettre là-bas. Juste pour travailler sur les tailles, les couleurs et les trucs, vous n'en avez pas besoin. Je l'ai dessiné quand même. Nous allons avoir besoin de notre premier et le premier est l'en-tête. Au lieu d'écrire div égal nav égal en-tête, nous allons simplement écrire, parce que nous n'avons même plus besoin des crochets d'angle. Rappelez-vous, nous utilisons de nouvelles astuces, donc nous allons taper en-tête. Là, il est là. Mettez le retour pour qu'il y ait un peu d'espace, parce que j'aime l'espace entre les balises et maintenant nous allons le styliser ici dans mon CSS. La différence entre ce que nous faisons maintenant et ce que nous avons fait avant c'est, quand nous écrivons un cours, nous devons mettre, quelle est la chose qui va à l'avant ? Cette période ou l'arrêt complet. Ensuite, nous écrivons en-tête. Mais ce n'est pas une classe, vous savez que c'est une classe parce que rappelez-vous que nous avons écrit ici div égale classe. C'est très clair. Quand ce n'est pas une classe, c'est juste une vieille étiquette, il n'y a pas de classe devant elle. Nous n'avons pas à mettre leurs règles, donc vous ne mettez ce point que si c'est une classe. Celle-là, on n'a pas à le faire. En-tête. Impressionnant. Ensuite, nous mettons nos accolades et nous allons le coiffer. Maintenant comme avant, nous allons ouvrir [inaudible] est sorti pour être une boîte claire. Mais souvent, vous ne lui donneriez pas une couleur de fond et une hauteur comme nous sommes dans ce diagramme que je vous ai montré parce que vous laissez le logo et toutes les tiques combler l'écart. Mais on va mettre la structure en premier. Ensuite, nous allons supprimer des choses comme la hauteur et la couleur de fond. Premier en-tête vers le haut. Vous, mon ami, avez des antécédents. Couleur de trait d'union, vous voilà. On va utiliser du bleu pour celle-là. On va frapper Save. On va y aller et lancer un petit truc cool en direct. En fait, la mienne remonte à la dernière fois. Va en direct. Démarrez la sauvegarde. Là, [inaudible] Grand. Fond bleu. Pourquoi on ne peut pas le voir ? Parce qu'il n'a pas de hauteur. Donc, soit y mettre du contenu, ce que vous feriez normalement, mais parce que nous ne faisons pas de contenu, nous séparons tout cela en vidéos séparées que nous pouvons sortir les connaissances en premier, afin que nous puissions ont une hauteur de 118 pixels. C' est pour ça que j'ai décidé sans raison valable. Maintenant, allons-y et prévisualisons. On y va. Maintenant, j'aime lui donner une largeur parce que la couture sur tout le chemin peut être ce que vous voulez. Mais pour le moment, nous voulons que ce soit sympa. Largeur physique. Quelle largeur devriez-vous faire de votre site Web ? Cette partie de notre parcours, nous lui donnerons une largeur physique. Nous dirons que vous devez avoir une certaine largeur. Plus tard, nous l'obtiendrons pour s'adapter ou répondre. Donc, lorsque nous entrons dans une section sur le design réactif, nous allons l'obtenir pour répondre à différentes tailles. Mais pour le moment, nous allons juste cibler comme un ordinateur portable standard. Fondamentalement, votre largeur peut être n'importe quoi. C' est à vous de décider, ce que vous pensez que la largeur devrait être. Mais tu es nouveau, donc tu as besoin de conseils. Souvent, je vais faire le mien 1024 pixels de large. C' est une largeur de web générique très courante. Comme les ordinateurs portables, par défaut sont environ 1300, donc 1300. Tant que moins que cela, il s'adaptera sur la plupart des écrans. D' autres tailles vraiment communes sont à 960, utilisé un peu parce que c'est, nous allons regarder cela plus tard, mais il est facilement divisible par 12, ce qui n'a aucun sens maintenant, mais cela va la laisser passer. Est les colonnes que nous allons utiliser plus tard. Bootstrap, que nous examinerons plus tard aussi, utilise 992. C' est un cadre que nous examinerons. Mais ne vous inquiétez pas trop. Il peut être maillé clavier. Ça va être assez petit site web celui-là. Mais si je l'ai fait 987, personne ne s'en soucierait, ne casserait pas le navigateur tant qu'il est plus petit qu'un écran d'ordinateur portable, nous allons utiliser 1024. L' autre chose est aussi, tu dois dire 1024. Si vous êtes à la réunion de groupe de conception Web et que vous commencez à parler de 1 024, ils sauront que vous êtes un débutant. Tu dois dire 1024. Sauvegardons-le et vérifions-le. Browser cool, 1024 correspond à mon écran géant, et qui s'adaptera sur les écrans plus petits. Il a une hauteur et son fond est bleu. La chose principale est que nous avons utilisé en-tête au lieu de le nommer un div, en lui donnant une classe, et en le coiffant ici. Le suivant, quelques espaces, je vais taper nav. Donc nav, appuyez sur Retour, l'espace, nous y voilà. Je vais faire la même chose ici. Je ne me souviens pas avoir laissé cette orthèse bouclée là. Je vais taper nav, n'a pas besoin d'un arrêt complet devant lui. Nous allons ajouter une couleur d'arrière-plan. On va tricher parce qu'il a déjà parlé en haut. Couleurs d'arrière-plan, vous allez vous habituer, c'est un très long à taper pour obtenir la bonne suggestion. Est un long groupe de personnages de toute façon. Vérifions notre diagramme. Où est mon petit diagramme, il aura 40 ans de haut. Nous allons utiliser la même largeur, mais nous utilisons la hauteur de 40. Cela arrive un peu. Je le fais et j'oublie de mettre le P attendu. Que se passe-t-il dans le navigateur ? Vérifions juste, n'est pas apparu. Sauvegardez, stocké ici. Pourquoi ? Vous pouvez le voir. Parce que c'est bleu. Allez, ça va être rouge. C' était là tout le temps. Toujours pas ici. Allez sur le navigateur. Il est destiné à faire automatiquement la mise à jour, pourquoi n'est-ce pas ? Tu sais pourquoi. C'est parce que je n'ai pas sauvé ça. J' appuie sur la commande S, c'est Control S sur un PC. Je touche Enregistrer, mais je ne suis que dans ce document. Hors de l'habitude ce matin de la direction commandement Alt S, qui dit les deux côtés, alors il apparaît. Je fais semblant d'écouter que je t'enseigne, mais j'ai foiré. Il y a une navigation, qu'est-ce qu'on a à faire d'autre ? Nous avons la section ici qui va être ma principale et ça va être mon pied de page, 400, 100, regardons ça. Ici, je vais les emmener. Je vais mettre une note, je vais mettre en main, Retour, mettre quelques espaces entre eux pour que vous puissiez voir. En bas, nous allons mettre en pied de page. Maintenant, remarquez que je jouais avec mon curseur. Je viens de mettre mon curseur en face, appuyez sur l'onglet pour que tout s'aligne. Tu n'as pas à faire ça. Je vais y mettre un Retour pour ressembler à tous les autres. Très bien, donc il y a mes sections, ici, je vais tricher, coller ça dedans, celui-là va être principal. Celui-ci va être pied de page. On fait beaucoup de choses une à la fois. Mais souvent, quand vous travaillez, vous allez commencer à le faire un peu plus en vrac en faisant des choses. Donc orange, ne doit pas être les couleurs, comme ça et les couleurs aléatoires ici. Nous examinerons plus de couleurs basées sur le code plus tard, mais j'utilise juste celles qui sont pré-remplies. C' était 400 et 100, je ne m'en souviens pas. Quatre cent mille, c'est. Donc hauteur, 400, et ça fait 100. Au bon endroit alors. Enregistrez tout, puis accédez à votre navigateur. On y va. C' est la structure de base. Maintenant, la grande chose que tu aimes, je veux qu'elle soit centrée. Pourquoi ne le centre-t-il pas ? C' est le suivant. Donc, ce que nous pouvons faire, c'est que nous pourrions essayer centrer chacune de ces boîtes et cela fonctionnerait. Mais ce qui est vraiment commun est de tout envelopper dans un div ou dans un conteneur et de le rendre centré pour que ces gars viennent avec eux. En fait, c'est facile de te montrer. Donc, dans le code VS, nous allons aller ici et dire l'en-tête. Donc pour centrer quelque chose, c'est bizarre. Pour centrer un élément structurel comme celui-ci, il n'y a pas de me rendre centré. Donc c'est un truc. C' est toujours comme si c'était fait de toute façon. Ainsi, vous pouvez mettre dans une marge, qui est l'espace autour de l'extérieur. Mais vous pouvez mettre une marge à gauche et je vais cliquer dessus. Au lieu de le mettre dans une mesure réelle, vous pouvez simplement taper « Auto » et vous assurer que le point-virgule va à la fin. Donc la syntaxe doit être comme ça. Je vais cliquer sur « Sauver ». Ce que cela fait, c'est jeter un coup d'oeil à ce site web. Pouvez-vous voir que je l'ai fait à l'en-tête et c'est parce que la marge est automatique, il essaie juste d'être automatiquement autant qu'il peut être et c'est pourquoi peut être, mais je peux être massive. Donc, c'est énorme, mais pour contrer cela, vous dites : « Je veux une marge à droite. » À la même chose et ils se battent et une manière ou d'une autre magiquement ils finissent au milieu. Donc c'est comme ça que tu centres les choses. Donc nous pourrions le faire pour cela et nous pourrions le faire pour celui-ci aussi. Vous pouvez lentement vous frayer un chemin à travers elle. Il n'y aurait pas de problème technique avec ça sauf que ce soit juste un peu bizarre. Donc je vais attraper tout ça, débarrasser, le sauver. Donc on est de retour ici et je vais mettre tout ça dans un conteneur. Maintenant, il n'y a pas de conteneur comme des balises prédéfinies, nous devons utiliser notre étiquette div old school. Donc du haut ici. Donc, je veux que ce soit avant l'en-tête et je veux qu'il soit proche juste après le pied de page. Donc ici, je vais me pencher une fois et je vais dire, « Je voudrais un div avec une classe de conteneur. » Maintenant j'appelle ça conteneur, tu pourrais l'appeler banane. Tu peux appeler ça tout ce que tu veux. Personne ne l'appelle banane. Juste au cas où les gens appellent ça un wrapper, ça pourrait être une boîte. Nous allons l'appeler conteneur pour que ce serait un très commun est conteneur. Donc style, le problème est qu'il s'ouvre ici, et se ferme juste ici. Donc, il s'ouvre et se ferme tout de suite. J' ai besoin de la fin de ça. Nous avons fait ça en jouant avec notre truc de boîte de tag div plus tôt. C'est la raison pour laquelle on l'a fait. Parce que j'ai besoin de cela, j'ai besoin d'une découpe, prendre tous les petits morceaux et morceaux et après la fin du pied de page, je vais le coller dans. Donc maintenant, si je clique sur ce haut ici, il s'ouvre ici, ferme ces cependant, tous enveloppés. Rangons ça parce que ça a l'air un peu bizarre. On va faire ça. J'ai sélectionné tous ces éléments. Il y a un raccourci sournois pour tout ranger, plutôt que de tout tabuler vous-même, plutôt que de tout tabuler vous-même, est de cliquer avec le bouton droit de la souris et d'aller à celui-ci qui dit, « Sélection de format ». C' est juste une sorte d'indente tout bien. L' autre chose que je pourrais faire pour que ça paraisse un peu plus agréable, c'est que je sais que j'ai mis des retraits, je m'en débarrasse. Donc je vais éclaircir ça pour que ça te soit bien. Pouvez-vous accélérer un peu ça et je vous verrai dans une seconde. D' accord, tu es de retour. Maintenant tu pourrais y aller, ça avait l'air douloureux et ça l'est, mais c'est comme ça que je travaille. J' ai aimé tout pour essayer d'être aussi gentil que possible, et surtout faire des tutoriels parce que c'est agréable pour vous d'être clair sur où tout se trouve et ce qu'il fait. Donc c'est bien et clair maintenant que, c'est à l'intérieur d'un conteneur, parce qu'il est en retrait. Donc tout ce qu'on a à faire ici, c'est qu'on doit dire style le conteneur. Tu dis : « Il fait mal ? » Tu es comme « Certainement ». C' était un vrai test que j'ai mis en place. Donc vous devez, si vous signez un cours, souvenez-vous, la période va en avant et ensuite nous pouvons dire, nous collons que nous ne le faisons pas. Alors, il vaut mieux le refaire. Donc, nous allons faire marge à gauche. On va le faire auto, point-virgule. Même chose, marge droite, auto, point-virgule, sauvez-le. Parce que tous ces boursiers sont à l'intérieur du conteneur, ils ne devraient pas fonctionner. Sauvegardez tout, pas un test. Ça ne marchait pas tous. Conteneur de classe Div. Droite, gauche. n'y a pas d'erreurs ici, j'ai tout sauvegardé. Qu' est-ce qui ne va pas ? Je sais ce que c'est. J' ai donc ajouté une largeur parce que nous faisons cela un peu en arrière. J' ai ajouté la largeur à ces gars internes, le conteneur a besoin d'une largeur. On doit les échanger. Donc, vous avez besoin d'une largeur, pas de fenêtres. Il nous faut une largeur. Je suis plus flusté, largeur de 1 024. Ces gars peuvent se détacher. En fait, ils peuvent rester, regarder. Jetons un coup d'oeil. Donc, le conteneur a maintenant la largeur. Alors maintenant, les marges savent pousser des côtés là-bas. Nous pourrions laisser ceci ici, mais parce que par nature, tags div essaieraient de s'étirer pour remplir l'espace fourni, et nous avons dit que l'espace fourni est conteneur, ces gars n'ont pas besoin d'être dit deux fois, nous y allons, c'est ressemble exactement à la même chose. Maintenant, en termes de flux ici, je veux que le conteneur soit au sommet juste parce que plus tard, quand je reviendrai ici, je cherche quand la feuille CSS devient assez longue, je suis comme d'accord, que les choses au haut sont les choses les plus primordiales. Donc conteneur puis en-tête. Ce sont, je suppose, plus bas dans l'ordre de prélèvement en termes de structure pour le site. Très bien, donc c'est appliquer les balises HTML. Maintenant, dans un précédent, où est-il, celui-ci ici je vous ai montré dans Wireframes, j'ai fait celui-ci appelé structure A, et j'ai mis le nav à l'intérieur de l'en-tête. Donc on va le faire d'abord. Cela signifierait juste couper ça. Mauvais côté, couper et mettre l'en-tête à l'intérieur de celui-ci. Donc ce serait une façon de structurer ce design. Disons que l'autre conception n'a pas utilisé Main, ils ont utilisé la section à la place. Ou la section ouvrir et fermer ils utiliseraient cette section et style ici. Mais rien ne changerait vraiment. J' utilise Main parce que c'est juste la façon dont j'aime le faire, et je suis confus par les sections et les articles. Bon potes, nous avons notre structure de base pour notre site avec des couleurs moches. Commençons à ajouter des choses supplémentaires parce que nous n'avons fait que des textes et des boîtes simples. Nous allons commencer à ajouter des couleurs d'arrière-plan appropriées. Nous allons commencer à ajouter des images, du texte et toutes les choses dans les prochaines vidéos. Je te verrai un peu après le déjeuner. 19. Comment colorer l'arrière-plan d'une page Web à l'aide de la balise html body: Salut là. Dans cette vidéo, nous allons passer de ce vieux fond blanc uni à cette couleur verte toxique. Fondamentalement tout ce que je vais vous montrer comment colorer l'arrière-plan en utilisant votre balise de corps HTML, puis je vais sur un peu d' une tangente pour discuter des couleurs RVB en couleurs hexadécimales et comment utiliser cette petite chose de sélecteur de curseur de couleur. Tout est devant vous dans ce prochain cours. Bon, maintenant nous devons colorer cette partie de fond ici, donc il y a du blanc. On ne peut pas colorer juste le conteneur parce que ce sont des conteneurs juste assis ici au milieu donc on a besoin d'un autre moyen. Imaginez s'il y avait une balise qui s'enroulait, juste autour de tout sur notre page. Regarde ça. Étiquette corporelle. Il est déjà là et c'est la balise que vous stylez pour changer la couleur de fond complète. Maintenant, on pourrait mettre le corps à la fin ici, mais c'est très commun de l'avoir en haut donc corps. Rappelez-vous qu'il n'a pas besoin d'un point ou d'un arrêt complet devant lui. Il suffit de taper corps et nous allons ajouter notre utilisateur d'arrière-plan ralentit le temps vers le bas background-color Il est là. Nous allons choisir une de ces couleurs aléatoires pour le moment. Du corail. Laisse vérifier le corail est, et c'est oui. J'aime bien ça. Cela ne fonctionne pas avec ces couleurs, mais c'est ainsi que vous pouvez changer la couleur de votre arrière-plan. Nous ferons des images d'arrière-plan plus tard dans le cours, mais pour le moment je veux me concentrer un peu sur la couleur parce qu'en utilisant le corail et le rouge, et le rouge indien et le rouge rubis, il y a beaucoup de types différents de noms. Je ne sais pas qui était chargé de nommer ces couleurs, mais c'est ce qu'elles sont. Souvent, ce que nous voulons faire est juste de survoler avec votre souris. Je ne fais rien, je ne clique pas dessus, je passe juste au-dessus. C' est bizarre dans le code VS. Parfois, il s'allume et vous ne pouvez pas le faire allumer même si vous voulez vraiment, alors juste pointer au-dessus, voir ne s'allume pas. Maintenant, il le fera. Ok, et ensuite ici, on peut faire quelques choses. Ce curseur d'extrême droite est la teinte alors faites-le glisser pour l'obtenir grossièrement dans la zone. Dites que nous voulons changer cela et disons vert vif juste parce que nous obtenons dans la gamme vert vif et nous allons voulez-vous un peu plus jaune ? Jaune-vert ? Un peu plus bleu-vert ? Allons chercher le bleu-vert. Ensuite, ici est l'opacité alors comment voir à travers. Pour la couleur d'arrière-plan, vous ne pouvez pas vraiment avoir la clarté ou l'opacité parce qu'il n'y a rien à voir à travers, mais plus tard, cela sera utile et ici, c'est là que ce point finit donc vous cliquez sur le maintenir et le déplacer. Si je monte ici, peu importe quelle teinte est, je vais avoir du blanc, qui est RGB 255 sur tous. Ce que je veux faire, c'est y revenir en planant au-dessus et en retournant ici, en saisissant le vert, obtenant le bleu-vert, puis en cliquant ici et en entrant juste là où je pense que ça devrait être beau et c'est ce que je veux faire. Je choisis une couleur aléatoire pour le moment. Maintenant, il vous suffit de cliquer sur l'arrière-plan ou de déplacer votre souris loin. Vous remarquez que les couleurs ont changé d'être RVB, désolé, d'un nom à ce mélange rouge, vert et bleu et que le mélange vert avec le bleu fait maintenant une couleur verte folle. Sauvegardez-le et essayons-le dans le navigateur. C' est le mauvais endroit. Voilà, voilà mon vert. Une autre façon de faire des couleurs est d'utiliser des couleurs hexadécimales. Je vais supprimer tout ça. Maintenant, c'est pour les gens qui le savent déjà. Disons que vous savez ce qu'est un nombre hexadécimal. Commence par hachage et souvent les gens utilisent du code à trois ou six chiffres. Je vais juste en faire une fausse. Il s'avère que si je frappe ces touches sont aléatoirement sur mon clavier, je reçois un vert donc c'est soit trois ou six chiffres, principalement six chiffres. Où avons-nous eu ces couleurs de là ? Ils sont faits de rouge, vert et bleu. Les deux premiers chiffres rouge, deux deuxième chiffres de vert, deux derniers chiffres bleu. Vous n'avez pas besoin de le savoir, mais, et disons que vous travaillez avec des directives de marque, vous recherchez un client d'entreprise, il peut vous donner ce nombre hexadécimal ou le numéro RVB, et vous pouvez taper celui qui fonctionne pour vous. Pour moi, je travaille à partir de cette maquette ici dans XD, nous allons regarder XD plus tard, mais cette couleur en arrière-plan, j'ai cliqué sur mon nom ici. Ne vous inquiétez pas si vous n'avez jamais utilisé XD et nous en parlerons plus tard dans le cours. Je clique sur cela et vous pouvez voir que c'est me donne mon nombre hexadécimal ou il pourrait aller RGB. Je pourrais taper ça. Tous les différents types de création Web, produits de conception, vous pouvez utiliser Photoshop ou Illustrator tous XD ou Sketch pour concevoir votre site Web, mais vous le construisez en code VS et puis juste comprendre quels codes de couleur vous voulez utiliser. Ok, c'est le code que je veux. Je vais le copier et aller dans le code VS et c'est, mon ami, le genre de gris foncé que je veux. Sauvez-le, navigateur, c'est le gris foncé. Ok, le premier était facile. Nous avons parlé d'ajouter la balise body, puis je suis allé un peu trop longtemps sur les couleurs. J' avais l'impression que c'était le moment de le faire. Peut-être que c'est pour plus tard. Nous le recouvrons au fur et à mesure que nous le traversons si ça se sentait un peu vite. Je suis de retour du déjeuner, j'ai pris un café, ai parcouru des trucs, ralenti là, respire et je te verrai dans la prochaine vidéo. On respire. 20. Comment ajouter une image à un site Web en utilisant le langage HTML ?: Cette vidéo est tout au sujet de l'ajout d'images à votre HTML. C' est assez facile. Sautons maintenant et apprenons à le faire. Pour ajouter notre image, nous allons la mettre dans l'en-tête. En cliquant entre l'en-tête, crochets d' angle mettent la retenue et nous allons utiliser IMG, c'est la version raccourcie de la balise qui décrit une image et appuyez sur « Return » et il met dans toutes les ordures dont nous avons besoin. Donc, la source de l'image, juste où elle est et elle n'est nulle part pour le moment, donc nous devons la mettre à un endroit à l'intérieur de notre dossier local, faisons cela d'abord. Ce que nous allons faire, c'est nous allons sauter à notre détecteur, sur un Mac, ça s'appelle un détecteur, dans votre PC, ça s'appelle une fenêtre, alors trouvez votre panneau de mes documents et sur votre bureau à l'intérieur de votre projet 1, nous avons un index et un style, mais nous devons mettre notre image ici et il est très courant de ne pas se contenter de le jeter avec ces gars. Vous les mettez dans un groupe dans son propre petit dossier appelé images. Nous allons faire un clic droit, je vais faire un nouveau dossier qui est fondamentalement le même sur Mac ou PC et vous pourriez l'appeler IMG ou images. J' appelle ça des images, la moitié du monde l'appelle IMG et l'autre moitié du monde l'appelle des images. J' appelle ça des images, ce n'est pas bon ou mauvais, mais tu dois prendre parti. On a un dossier appelé images, il n'y a rien dedans. Alors allons dans nos fichiers d'exercices, allons au projet 1 et à l'intérieur d'ici, il y a un PNG appelé logo-adare-restaurant, je vais cliquer dessus, je vais le copier. Où est la copie ? J'utilise des raccourcis, vous pouvez dire, puis-je copier ? Là, vous allez, copiez ou commandez C ou contrôlez C sur un PC. Revenons à notre bureau et collez-le dans, bureau, projet 1, images, clic droit coller élément et il y a, donc n'a pas vraiment fait beaucoup, je suppose que cela apporte un très bon point. Tout ce qui se trouve dans ce site Web doit être dans ce dossier appelé projet un. Rappelez-vous, il n'est pas nécessaire de l'appeler projet 1, mais tout doit être à l'intérieur d'ici. Il s'appelle la racine du site Web, donc il doit savoir qu'il s'agit de la base principale et qu'il n'a pas besoin de savoir que le reste de votre ordinateur existe. Juste besoin de savoir que, comme, petit dossier est son propre petit monde et source d'image, donc je vais juste taper im, je viens de commencer à taper im, vous pouvez voir qu'il dit, « Hé, j'ai regardé dans votre dossier racine et j'ai vu ce dossier appelé images. Souhaitez-vous utiliser cela ? » Tu es genre, « je le ferais ». S' il n'apparaît pas, il est probablement cassé et vous devez aller et vous assurer que le dossier images est au bon endroit. Mais si cela ne fonctionne toujours pas, il suffit de le taper dans IMG et alors vous avez besoin d' une barre oblique pour dire que je suis dossier et ce qu'il y a à l'intérieur de ce dossier, il n'y a qu'une chose. C' est assez intelligent, maintenant sauvegardons, sauvegardons tout et nous allons prévisualiser dans un navigateur, il est là, il est aligné à gauche, nous allons le déplacer au milieu, mais c' est comme ça que vous ajoutez une image assez facile. Le texte alt-text est super important lorsque vous ajoutez des images et fondamentalement, alt-text est abrégé pour alternative et cela signifie simplement, si cette image ne s'est pas chargée, quel texte décrirait le mieux cette image ? Ça va être le logo du restaurant Adere, c'est ce qu'on appelle ça ? C' est le restaurant Adere. C' est mon restaurant [inaudible]. Donc, cela décrit une image et pourquoi nous le faisons est pour quelques raisons. Les malvoyants auront un lecteur d'écran qui les lira sur le site, évidemment, si vous ne pouvez pas voir le logo, vous devez être décrit ce qu'il est, donc il doit être un très bon descripteur pour les personnes qui obtiennent lisez votre site Web. L' autre chose est que Google l'utilise pour aider à déterminer ce qu'est votre site. Donc, si vous venez d'acheter le logo, c'est bien, mais vous pourriez aussi bien mettre, pour Adre Restaurant, parce que si quelqu'un cherche Adre Restaurants et votre site Web est très clairement pour Adre Restaurant, cela aide votre classements. Assurez-vous que le texte alt-est vraiment clair ce qu'il est, mais est également très spécifique à votre cible dans notre cas, nous voulons des gens à la recherche de restaurants dans cette ville appelée Adre où je déménage dans quelques semaines, je ne peux pas attendre. Quoi qu'il en soit, ce sera tout pour cette vidéo, nous avons mis dans une image,nous allons nous avons mis dans une image, faire comment créer des images à partir de programmes plus tard dans le cours, nous allons séparer cela, nous allons faire Photoshop et Illustrator et XD, comment faire des images. La seule chose que vous devez savoir si vous les créez maintenant est qu'ils ne devraient pas avoir d'espaces. Si j'ai un espace là, ou du moins dans le fichier que j'ai créé dans mon dossier images, cela ne devrait pas avoir d'espaces. Les mêmes règles que les noms, devraient avoir des traits de soulignement ou des traits d'union ou, peu importe s'il n'y a pas d'espace, assurez-vous juste, pas d'espaces. Maintenant, la prochaine vidéo, allons-y. 21. Comment centrer une image img en HTML à l'aide de CSS: Salut là. Dans cette vidéo, nous allons sortir l'image qui est par défaut glissant vers la gauche et la changer au milieu. C' est facile. Allons-y et faisons-le. D'accord. Nous voulons centrer cette image à l'intérieur de l'en-tête, et la façon la plus simple de le faire dans ce cas est l'en-tête. Jetons un coup d'oeil à notre design. Nous allons centrer tout ce qui est à l'intérieur, parce que c'est la seule chose dans cet en-tête. n'y a rien dans les navigations en dehors de la zone d'en-tête, donc c'est juste une image. C' est sympa et facile. Trouvons le style d'en-tête ici et allons l'aligner au centre et nous allons utiliser l'alignement du texte. Vous êtes comme, pourquoi utilisez-vous le centre d'alignement du texte ? C' est comme ça. centre d'alignement du texte fonctionne très bien pour les horizontales. Je me trompe tout le temps. Horizontal ou vertical, tu vois ce que je veux dire. Au milieu, comme ça. centre d'alignement du texte fonctionne très bien. Essayons ça. Présentons un aperçu dans un navigateur. À l'intérieur de mon en-tête tout est le centre de l'alignement du texte. D'accord. Voilà comment obtenir notre petite image au milieu. Commençons à travailler avec une partie du texte de ce document. Vidéo suivante s'il vous plaît. 22. Comment changer le style de police, la taille et la couleur de h1 p en HTML CSS: Bonjour, collègues concepteurs web. Cette vidéo, on va passer de là à ça. supprimant les arrière-plans, en ajoutant des textes, stylisant les textes, en regardant les familles de polices, nous allons regarder le rembourrage de l'extérieur et du haut, nous allons examiner la différence entre le remplissage et la marge. Wow, beaucoup de choses à faire dans cette vidéo, allons entrer et commencer. Ce que nous voulons le mettre dans notre texte et le faire ressembler à ceci. Ok, c'est dans h1 et puis il y a une étiquette p. Prenons la copie. Je l'ai mis dans vos fichiers d'exercices, alors trouvez vos fichiers d'exercices et dans le Projet 1, il y en a un qui s'appelle Projet 1 Text. Ouvre ça dans quelque chose, et oui, il y a des trucs ici. Ce que nous voulons, c'est, nous allons nous rencontrer, et amène ça d'abord, donc en minuscules juste si vous regardez. Vous pouvez ajouter les majuscules si vous le souhaitez et ensuite nous apporterons cela en une seconde. Sautons dans VS Code. Où est-ce qu'on le veut ? Je veux que ce soit, on saute le nav que tu aimes, hé, allons-y au nav. Nous allons faire les bits faciles d'abord et nous allons passer à mesure que nous construisons nos compétences, donc h1 tab, ou retourner et coller dans ce texte, enregistrer. Jetons un petit coup d'oeil dans le navigateur. C' est là. Allons de la viande. Ajoutons la balise p et saisissons le texte, copiez-le, collez-le dans. Maintenant, cela soulève un bon point. Enregistrez-le et prévisualisez-le, assurez-vous qu'il fonctionne. Où sommes-nous ? On y va. Il est là-dedans. Maintenant, en mode code, cela peut, si vous le voulez ou non et je vais vous montrer quelque chose que je fais, donc le texte s'éteint et voir en bas ici, il y a beaucoup de texte donc vous devez faire défiler. C' est à vous de décider si vous voulez le laisser comme ça, parce que j'ai l'impression que c'est pour et contre avec les deux. Je vais supprimer cela, donc la balise p, je frappe ma « Supprimer la clé » parce que vous y allez. Voilà, tu y vas. C' est sur une seule ligne que tu pourrais aimer ça. Beaucoup de gens et moi inclus, je flippe et je vais vous montrer tous les deux. Je voulais envelopper. Une chose que je veux que vous remarquiez est que chaque nouvelle ligne commence par un nouveau numéro et cela le rend assez clair. Sur la ligne 22, même si c'est assez long, tout est sur la ligne 22, mais si je vais voir et que je l'ai fait ici, bascule le mot wrap. Pouvez-vous voir qu'il ouvre un espace dans la numérotation, parce que c'est généralement toujours la ligne suivante, mais c'est juste une sorte de l'enrouler autour, parce que cela dépend de la largeur de l'espacement. comprends ce que je veux dire ? C'est à vous de voir. Je vais envelopper le mien, mais ça ne vous plaira peut-être pas. Il est plus facile de l'éteindre en cliquant exactement sur ce même bouton. Bon, donc maintenant nous devons coiffer ces deux gars et ajouter un peu de rembourrage parce que, celui-ci est audacieux et il est blanc et ce n'est pas Times New Roman. Nous utilisons arial dans ce cas et vous pouvez voir cette intégration à partir des bords. Alors qu'en ce moment, vous voyez qu'il fonctionne tout le long , et nous devons le centrer. Faisons toutes ces choses. Donc, ici dans mon CSS, h1 et mettre dans des accolades et nous allons le faire, nous allons commencer par la taille de la police. Quand vous le construisez, vous allez passer beaucoup plus de temps à y aller, est-ce 40, ou peut-être 60 et juste tester parce que j'ai déjà fait ce cours pour vous les gars. Je sais déjà que c'est 84 exactement. Essayons dans le navigateur, vous allez entrer dans l'habitude et puis par l'habitude d' essayer de faire tout le style, vous allez entrer, ici vous allez. Maintenant, cela signifie la couleur du blanc et puis vous faites la prochaine chose et puis la prochaine chose sans vérifier et puis vous allez vérifier et quelque chose sera totalement faux et vous n'aurez aucune idée de quelle partie de votre code vous avez réellement cassé. Mon conseil, surtout au début, est de faire une chose, aller la vérifier, puis de revenir ici et de faire autre chose. Ce cas est un grand plaisir avec ça que nous n'avons pas encore fait est la famille de polices. Pensez-y comme changer la police ou le type de ces caractères par défaut. Nous allons utiliser les valeurs par défaut pour le moment, il n'y en a pas beaucoup, mais nous chercherons à étendre cela au fur et à mesure. Ce que je vais utiliser, c'est avec l'antenne. Je vais pour Times New Roman à Arial Helvetica sans empattement. Faisons un point-virgule, sauvez-le. Prévisualisons ça. Au lieu d'être Times New Roman, laissez-moi éteindre ça et je vous montrerai comment je fais ça en une seconde, donc fois que vous possédez avec tous les petits pieds, cela s'appelle une police serif. Il a les petits morceaux pour traîner sur le côté et si je le change en arial, voir pas de petits pieds. C' est un sans-empattement, sans les pieds. J'ai fait quelques choses. L' un d'entre eux serait de commenter dans une seconde. Celui-ci, ça va attendre. Pourquoi un trois polices ? Dis que tu veux de l'Helvetica. Maintenant, ce que nous faisons ici, c'est que nous utilisons ce qu'on appelle une police par défaut. Ce qui se passe, c'est que tu n'es pas comme mettre de l'antenne dans ce site. Ce qui se passe, c'est, disons que j'ai construit le site et que notre ami Bob charge votre site web. Ce qui se passe, c'est que son navigateur entre et vérifie son système, donc vérifie, l'ordinateur de Bob pour voir s'il a une antenne et le charge. S' il n'a pas d'antenne, il va vérifier l'Helvetica et s'il ne trouve pas Helvetica, il va chercher ça, à chaque ordinateur a au moins sans-serif. C' est comme la police par défaut pour le noyau de la machine. Je suggère Arial mais vous ne l'avez pas, je suggère Helvetica. Si vous ne l'avez pas, je vous conseille d'être san-serif. C' est pourquoi quand vous voyez certains de ces plus longs, nous avons choisi l'avion parce que c'est facile. Mais supprimons tout ce type famille, deux-points, famille, espace que j'ai écrit. Maintenant, le tien n'a peut-être pas fait ça. Je suppose que j'ai sauté ça aussi. Retournons en arrière. Quand je tape dans une famille, au lieu de frapper le deux-points, je clique dessus parce que cela me donne toutes ces suggestions cool. En regardant ces gars, on peut voir « Gill Sans », « Gill Sans MT  », « Calibri », « Trébuchet », il y a beaucoup dans cette liste, non ? Il dit de vérifier l'ordinateur de Bob pour Gill Sans, s'il ne l'a pas, ayez Gill Sans MT. Si elle n'a pas alors mis en Calibri, si elle n'a pas que Trébuchet. Il n'a pas cela, j'abandonne et utilise la taille de police par défaut, sans-serif. Vous remarquerez que certains d'entre eux sont blancs et d'autres ne le sont pas. Certains d'entre eux ont ces petites marques autour d'eux. Certains d'entre eux ne le font pas. Les mots simples n'en ont pas besoin. Les mots ou les polices qui ont deux comme un espace entre les deux ont besoin de ces apostrophes. J' y vais avec des apostrophes, des petites choses délicates. Je vais retourner à Arial, parce que tu pourrais écrire ici. Choisissons un polices plus suggestives. Qu' est-ce qu'on a ? Bande dessinée sans Vous pouvez taper cela là et il se chargera probablement sur la plupart des ordinateurs, car la plupart des ordinateurs ont Comic sans. Mais si ce n'est pas le cas, il aura Gill Sans et ensuite Calibri, tu comprends ce que je veux dire maintenant, non ? Je vais me débarrasser de tout ça et commencer à taper dans l'antenne, m' assurer que le point-virgule va à la fin. C' est ce que ça va faire. L'autre chose que je me suis glissé là-dedans et que je ne voulais pas, j'ai l'impression que ça devrait être plus tard dans le cours, mais nous avons ouvert cette boîte, c'est que j'ai souligné cela et que je voulais tout éteindre à cause du moment, ça marche. C' est Arial. Si je veux désactiver cela, je peux faire un truc sournois, plutôt que de le supprimer et de l'enregistrer puis de le vérifier, vous pouvez en quelque sorte le désactiver momentanément. Fondamentalement vous avez besoin de cette syntaxe. Vous devez mettre une barre oblique en avant. Ceci est pour CSS uniquement. Vous devez mettre une barre oblique en avant, alors vous devez mettre vos astérisques, qui est attaché avec votre huit, touche numéro huit sur votre clavier, et une sorte de l'inverse de cela à la fin. Si vous mettez ça autour de quoi que ce soit, alors avant barre oblique, apostrophe et à la fin, apostrophe. Ce n'est pas une apostrophe. C' est tes astérisques, désolé. Astérisque, barre oblique, peut voir tant qu'il est à l'intérieur de ce petit groupe de caractères, il va l'éteindre, devient vert et le navigateur ne sait plus qu'il existe, et c'est juste une astuce pratique. Mais vous auriez aussi remarqué que c'est super rapide. Il y a un raccourci. Il est un peu tôt pour ces raccourcis, mais nous y sommes déjà. Ce que nous faisons, c'est que nous mettons en évidence le bit que nous voulons éteindre, et nous maintenons enfoncée la touche de commande sur un mac ou la touche de contrôle sur un PC et appuyez sur le bouton barre oblique avant. Sur mon clavier, c'est en bas à droite de mon clavier. Le vôtre peut être ailleurs, essentiellement à la recherche de cette clé, la touche de commande et cliquez dessus et il le ferait automatiquement. C'est très pratique. Mettez en surbrillance, commande barre oblique avant, contrôle barre oblique avant. Continuons et faisons la balise P. Alors P, celui-là, qu'est-ce qu'on fait avec celui-là ? On a fait la taille de la police. Je veux tout ça. Mon cerveau paresseux dit qu'il suffit de le copier. D' accord, mais la taille va être différente. Nous voulons que la taille soit de 18 pixels. Et nous laisserons la couleur et la police. Vérifions ça. Donc c'est maintenant 18 pixels. C' est Arial et c'est blanc. Maintenant, la prochaine chose que je veux vous montrer est que nous pouvons maintenant passer et dire, parce que nous voulons qu'il semble dessiner, pour correspondre à ça, nous voulons tout au milieu. Ce que je pourrais faire, c'est que je peux entrer dans mon code TS et je pourrais dire, nous l'avons fait et celui-ci a beaucoup plus de sens. Texte, alignement, centre, parfait. On a fini pour le H1 et c'est fini. Mais ce n'est pas fait pour le fond, ce n'est pas centré. Ce que nous allons faire à B, parce qu'il s'agit d'être économique avec votre code, faites-le une fois plutôt que de le faire comme dix fois. La même chose, rappelez-vous plus tôt que nous avons fait le conteneur, nous avons fait auto gauche et droite dans la chose qui enveloppe tout, nous allons faire la même chose pour ça. Ce qui enveloppe tout ça, c'est cette étiquette principale. C' est quel mot ? Main. Si je fais la même chose pour ça, dis-moi mon ami, tout ce qui est à l'intérieur de toi sera le centre de l'alignement du texte, ça fera la même chose. Cela n'a pas vraiment d'importance, mais nous recherchons des points de style comme concepteur frontal. Ça marche, c'est centré. Travaillons avec le rembourrage parce que je veux un gros morceau en haut et un gros morceau sur les côtés. Maintenant, nous pouvons le faire à nouveau au type spécifique, mais nous le ferons au conteneur. Eh bien, c'est une marge à cette balise principale. Nous allons faire principal, nous allons faire le rembourrage et nous allons utiliser le rembourrage vers le haut. Ce que je veux que ce soit, j'ai déjà travaillé, c'est 80 pixels. Vérifions ça. Impressionnant. Il y a donc un rembourrage de 80 pixels en haut. Faisons-le pour la gauche et la droite. Rembourrage, à gauche et ce cas, il est de 240 pixels même. Assurez-vous qu'il est point-virgule à la fin et faites de même pour le droit. Joli. Bon, faisons-le un test, voyons si on l'a cassé. Non, rembourrage en haut, rembourrage sur les côtés. Joli. Maintenant, tout au long de ce cours, il y a une sorte de deux façons de mettre des espaces dedans, il y a un rembourrage et une marge, et c'est une très bonne façon de le montrer, la différence entre les deux. Ce que nous allons faire maintenant est principal. On a fait du rembourrage. Faisons la différence. Au lieu de rembourrer le haut, nous ferons la marge supérieure, car cela peut devenir déroutant comme, lequel dois-je utiliser ? Parfois, ça n'a pas d'importance. Nous allons montrer en ce moment parce que cela le rend vraiment clair. J' ai fait marge haut au lieu de rembourrage haut. Regarde ce qui se passe. Ça marche. Le texte est aussi loin de cette boîte rouge qu'il l'était pour le remplissage, sauf la marge est l'extérieur de cette boîte parce que nous avons dit principal être orange. haut de la marge le pousse loin du haut de la boîte, toute l'orangité descend, tandis que le rembourrage est l'intérieur de la boîte, les parties internes. Le texte finira au même endroit, mais le remplissage est l'intérieur de la boîte, donc l'orange. Tu comprends ce que je veux dire ? Jetons un coup d'oeil. Texte au même endroit, mais la zone atteint à l'extérieur. Marge pousse la boîte vers le bas plus un peu plus comme ledit haut de marge et de rembourrage haut pour nous l'espérons clarifier, si vous voulez, j'ai presque expliqué ce droit. On va faire ça quelques fois. Faisons encore 80 pixels. Pour solidifier cette idée, je l'espère. Pouvez-vous voir qu'il y a 80 pixels là sur la marge, et puis il y a 80 pixels supplémentaires ici juste après pour cela. Il y a un peu plus ici parce que cette police ici a un peu dessus par défaut. Ce rembourrage probablement sur le dessus de ce H1 par défaut, qui s'éteindra plus tard, mais pour lui donner une marge principale à l'extérieur, rembourrage à l'intérieur. Ensuite, j'ai aussi dit parfois que cela n'a pas d'importance et peu importe quand vous vous débarrassez de cette couleur de fond parce que nous utilisons seulement cette couleur de fond pour juste une sorte d'identifier ces boîtes. Je ne veux pas d'une grande boîte orange ou d'une boîte bleue, alors ce qu'on va faire est dans ta marge, supprimons ça. Au revoir. Sauvez-le. Jetons un coup d'oeil. C' est ce que je veux. Maintenant, si j'avais une marge ou un rembourrage, vous pouvez voir que ça ne ferait pas de différence. Parce que le texte finirait au même endroit et parce qu' il n'y a pas de couleur d'arrière-plan, vous comprenez ce que je veux dire. Dean, tu l'as dit dix fois maintenant. D'accord. On l'a eu. Si vous ne l'avez pas fait, nous le referons plus tard. Pendant que nous sommes là, nous allons nous débarrasser de l'arrière-plan du logo. Où est l'en-tête ? La couleur d'arrière-plan bleu. Supprimez-le. On y va. La dernière chose avant que je parte, quand j'enseigne cette chose en direct et que j'étais toujours un dans la classe, tu pourrais être cette personne, les gens oublient de mettre le PX et de le sauver et tu es comme, hé, ça ne marche pas, je change dans le chiffres, je me rattrape et ça ne marche pas. C' est juste parce que vous avez le PX parce que ce n'est pas quelque chose de naturel. On y va. N'oublie pas ça. C' est tout pour cette vidéo. Je te verrai dans une seconde dans la prochaine. 23. Comment créer un lien cliquable en html et changer la couleur ?: Bon après-midi. Il est temps de parler des hyperliens, et parfois ils sont appelés h-refs ou des tags. Ce sont des liens cliquables. Comme ça faire une réservation, nous allons modifier et quand je clique dessus, dans ce cas, il va ouvrir un nouvel onglet. Ça va aller sur Google, parce que je n'ai pas un bon endroit où aller, mais c'est ce que nous allons faire. Nous allons en faire un à la fois par lui-même et en ligne avec le texte en haut ici. Allons entrer et travailler sur les moyens du lien hypertexte. Pour ajouter un lien, ce sera ce type qui s'appelle Make Reservation. C' est ce qu'on appelle un lien hypertexte, alors allons dans VS Code. C' est en fait appelé h-ref. Où le veut-on ? Je le veux après mon étiquette p et vous remarquerez que mon emballage est éteint. Il s'éteint à chaque fois que vous fermez le programme, donc entre les vidéos, j'allais rentrer à la maison et ensuite j'ai dit : « Non, je vais faire une autre vidéo ce soir avant de rentrer chez moi. » J' ai fermé le code VS, ai ouvert et l'emballage a disparu. C' est une bonne chose de montrer qu'il a un raccourci assez facile si vous pouvez être dérangé de vous en souvenir. Je vais mettre le mien juste sous le tag p ici et qu'est-ce que c'est ? C' est une étiquette. Si je tape un a et touche Return, ça met tout ce dont nous avons besoin. Il a besoin de référence h et entre les guillemets, comme la plupart des choses ici, est l'endroit où nous mettons le lien que nous voulons qu'il aille. Dans ce cas, je vais utiliser quelque chose dans Yelp. Je vais faire une pause ici et je reviendrai dans une seconde avec un lien. Je suis de retour juste avec un restaurant aléatoire que j'ai trouvé en une journée au hasard. J' y suis allé une fois, j'ai vraiment aimé la nourriture, Neville's Cross. Quoi qu'il en soit, donc j'ai attrapé un lien vers lequel nous allons donc retourner dans le code Visual Studio. Quand quelqu'un clique sur ce bouton, il va aller où ? Vous pourriez taper deux-points HTTP, nous aurions dû juste le faire. Tu as besoin de toutes les ordures. Il est préférable d'avoir tout le courrier indésirable, donc HTTP deux-points barre oblique, barre oblique, point et l'URL, c'est là que ce bouton va aller. Parce que j'ai traversé tous ces tracas et trouvé un lien, je vais le taper même si c'est vraiment grand. Maintenant, pour le moment, ça ne va pas vraiment faire quoi que ce soit. Je vais le sauvegarder, prévisualiser, jetons un coup d'oeil. Ça ne marche pas. Il a besoin d'un peu de texte et le texte entre en tant que balise. Il y a une ouverture et vous pouvez voir les deux petites accolades entre les deux étiquettes h1. Je vais passer entre ces étiquettes et on va faire une réservation, ça marchera. Je l'ai juste tapé et ça pourrait être n'importe quoi, juste du texte comme la balise p, mais parce que vous l'avez enveloppé dans cette balise h-ref, rien ne se passe. Sauvons. Rien ne se passe. Cela soulève un bon point. Tu te souviens, j'ai dit que j'avais fermé le code VS ? J' ai fermé le code VS, mais je n'ai pas fermé cette fenêtre d'aperçu. Tu te souviens du serveur en direct ? Cela soulève un bon point. J'ai supposé que c'était toujours connecté. Je sais que ce n'est pas le cas, mais j'oublie. J' ai fermé Visual Studio Code, l'ai ouvert, et cette connexion s'est rompue entre ces deux-là. Je vais laisser ça dans la vidéo parce que c'est un bon point. Ce que je vais faire, c'est revivre en direct. Il va démarrer une nouvelle page, il y a mon ancienne qui n'est plus connectée, nous la fermons, voici mon Trip Advisor, et maintenant il est connecté. Ici, c'est. Cool. Maintenant, il pourrait être bleu, le mien est violet parce que j'ai déjà été sur ce lien avant. Mais donnez-lui un clic, le charge, et il y a ce charmant conseiller de voyage. C' est comment ajouter une URL. Nous ferons un peu de style dans une seconde aussi. Une chose que vous pourriez vouloir faire est quand vous cliquez dessus, au moment où il clique dessus et il remplace réellement cette page par ceci afin que vous ne puissiez pas vraiment revenir en arrière facilement. Ce que vous faites, c'est qu'il y a une option dans votre h-ref. Ce qu'on pourrait faire, c'est se débarrasser de tout ça. J' ai l'impression que ça a l'air moche. Je suis plus sur le fait de le rendre agréable pour vous, alors nous allons juste mettre dans Google, google dot com. Tout ce que vous devez faire est après le h-ref, donc une balise est la chose que nous utilisons, h-ref en est juste une partie. Après cela, et nous allons ajouter quelque chose appelé cible est vide. En fait, je pense que ça doit être le soulignement en blanc. J' ai besoin que tu vérifie ça. Donnons-lui un aperçu. Essayez de deviner ici rappelez-vous, enregistrez tout, prévisualisez-le dans un navigateur, et allons cliquer et cela fonctionne. Cool. Si vous ajoutez ce trait de soulignement vide, pouvez-vous voir ce qu'il a fait ? Il a laissé cet onglet là et a lancé ce lien dans un onglet propre. Parfois, il est sur la fenêtre, vous ne pouvez pas vraiment contrôler cela, mais si vous ajoutez simplement la cible vide, il peut le faire. Dans ce cas, ce n'est pas ce que je veux, mais ça va être quelque chose que je vais lier dans ces vidéos pour que tu puisses y revenir. Je vais le laisser là-dedans. Vivons-le là-dedans. L' autre chose à noter est que lorsque vous faites des URL, disons que cela veut aller à une autre page sur ce site, souvent vous ne savez pas ce que c'est encore. Vous êtes comme, « Est-ce que ça va être le point HTML de la page À propos de nous ? » Mais vous ne l'avez pas encore, donc ce que les gens ont tendance à faire en tant que développeurs, c'est que vous mettez dans un hachage, près des trois clés. Le symbole de la livre, hash, comment allez-vous l'appeler ? Ce que ça fait, c'est un très bon détenteur de place. Il est clair que c'est un porte-place et si vous le laissez vide, souvent ce qui peut arriver, c'est qu'il peut lancer une erreur. Si vous le laissez, vous ne savez plus si Chrome fait une erreur. Vérifions. Lance juste sur sa propre fenêtre. C'est très bien. Cela fonctionne bien, mais certains navigateurs paniquent s'il n'y a pas de lien là-dedans donc vous mettez un hachage. Je vous l'ai montré parce que c'est très commun à avoir. Vous pourriez obtenir un site Web de modèle de quelqu'un d'autre et ils ont laissé des hachages là-dedans et vous êtes comme, « Qu'est-ce que c'est ? » Ce ne sont que des supports de place de sorte que lorsque le bouton est cliqué, il ne lance pas d'erreur. Cool. On laissera du hash là-dedans. Non, revenons à Google. Maintenant, nous allons styler ceci. Je veux que vous fassiez une pause et que vous fassiez un petit quiz. Comment je styliserais ça ? Pensez-y à travers. Tu n'es pas obligé de le faire. Tu pourrais le faire, ce sera cool. Mais je veux que vous voyez si vous pouvez styler cette chose et la première chose que je veux que vous fassiez est de le rendre blanc parce que c'est violet en ce moment, parfois bleu, si on n'a pas encore cliqué. Je veux que tu fasses ça. Tu as réfléchi ? Ne vous inquiétez pas, c'est seulement pour réfléchir ou tard dans l'après-midi pour moi. C' est l'étiquette a. C'est un par ici. Je vais dire que la couleur, s'il vous plaît, va être blanche. Cela va changer la couleur de celui-ci et aussi nous dirons que je veux que la famille de polices soit la même que le reste, donc je vais taper tout ça. Vous pouvez voir maintenant que je ne vais pas aussi lent que je l'ai fait au début de la classe, vous pouvez réellement ajouter du code assez rapidement en utilisant tous ces petits conseils utiles. Si je vais un peu vite, désolé, mais on l'a fait plusieurs fois maintenant. Jetons un coup d'oeil. Hey, c'est la bonne couleur, c'est la bonne police, et nous allons laisser le soulignement parce que je le veux ici, parce que j'ai l'impression que parfois si ce n'est pas très clairement un bouton cliquable, vous devez laisser le soulignons, mais disons que ce n'est pas et que vous voulez vous en débarrasser. C' est bizarre. C'est ce qu'on appelle la décoration de texte, c'est logique mais c'est aussi bizarre et vous voulez le mettre à zéro. Text-décoration, aucun, se débarrassera du soulignement là-bas. Je veux le soulignement. Je vais laisser ceci dans le code ici pour vous, donc je vais juste le commenter. Je vais le faire un peu plus dans ce cours pour que les choses que je vous ai montrées soient dans les fichiers sauvegardés, mais même si je ne veux pas les utiliser moi-même. Maintenant, l'autre chose à savoir sur ce lien hypertexte, nous l'avons fait comme ses propres balises séparées donc il a fini par traîner en bas ici. Disons que vous voulez faire ce mot comme le mot satisfaisant un lien. Utilisons le mot Adare. Dites que les gens peuvent cliquer dessus et il va à une carte d'Adare. Où est-ce qu'il est ? Je vais juste mettre des espaces juste pour tout effacer. Je ne veux pas qu'il y ait d'espaces, mais je veux que ça soit clair pour toi. Nous allons faire la même chose, une étiquette, qui a un et qui le met là-dedans. Où est-ce que ça va aller ? Je ne sais pas encore. Il va aller au hachage et à l'intérieur des crochets ici, ce que je veux apparaître, je vais saisir ce [inaudible] il va aller à l'intérieur de là. Sauvegardez-le, vérifions-le, et vous pouvez voir qu'il est souligné. On lui a dit quoi faire en termes de l'étiquette a. La balise a fait toujours référence à celle-ci et celle-ci, et elle ajoute le soulignement et c'est dans le texte. Celui-ci est appelé en ligne. Il s'agit d'un h-ref en ligne ou d'une balise ou d'un lien hypertexte. Contient le nom de la même chose. A. Qu'est-ce qu'un signifie ? Je pense que c'est un lien actif, je devrais nana. Mais parce qu'il est placé dans le flux de cette balise p, il va juste couler le long de cela parce qu'il est placé par lui-même en dehors de la balise p. Ça traîne tout seul, donc tu ne sais pas s'ils font quoi que ce soit. Vous avez remarqué les autres espaces ? Ça n'a rien changé. Vous voyez que je viens d'éditer pour le rendre bien rangé, mais je vais le remettre là-dedans. C' est le cours de crash sur les liens hypertexte. Allons dans la prochaine vidéo. 24. Comment ajouter une image d'arrière-plan étirable à un site web: Salut tout le monde. Il est temps de remplacer notre fond gris ennuyeux par notre image de fond passionnante. C' est cool, il a un stretch, s'adapte là, couvre tout le fond, semble soigné. Je ne sais pas ce qu'on mange, mais ça a l'air savoureux. L' ironie est que je suis végétarien, mais la viande a l'air bien, surtout sur ces photos. Quoi qu'il en soit, entrons et travaillons sur la façon de faire l'arrière-plan. Pour ajouter notre image de fond, c'est un peu étrange. La vidéo précédente ou l'une des vidéos précédentes, nous éditons notre image. Nous l'éditons au format HTML et il est apparu en haut de notre document ici, et c'est génial. Le seul problème avec l'édition dans votre HTML est que vous ne pouvez pas avoir des choses au-dessus du dessus, ou du moins pas très facilement. Nous le voulons dans ce contexte, et nous voulons que ce soit plus un effet, plutôt que quelque chose avec lequel vous pouvez interagir, juste se cacher à l'arrière pour que ce soit plus comme un style, disons. Nous éditons dans les styles CSS. Nous le faisons ici dans notre styles.css et nous éditons à, lequel devrions-nous éditer ? Rappelez-vous, notre étiquette qui vient tout le fond que nous avons fait gris, c'est la même étiquette. Le tag body ici que nous faisons gris, nous pouvons laisser gris là et je laisse la couleur de fond là normalement parce que parfois cela prend un peu de temps pour que l'image se charge, donc au moins il y a quelque chose en arrière-plan jusqu'à ce qu'il se charge. La façon dont ils le font, c'est un bien nommé, ça s'appelle « background-image », sympa. Une chose qui n'est pas très claire est ce qu'il faut faire ensuite, et son URL, c'est l'une de ces options là-dedans. URL est une URL d'image d'arrière-plan à l'intérieur de ces crochets, vous tapez où elle va. Ça va être dans les images/, c'est généralement à la barre oblique avant et le CSS dit, « Hey, tu veux dire cette image, le logo ? » Tu es comme, non, pas le logo. Je veux une autre image que j'ai utilisée pour l'arrière-plan. Je l'ai gardé pour toi, c'est dans tes dossiers d'exercice. Vous devez sortir à votre recherche, trouver vos fichiers d'exercice, trouver le projet 1, celui-ci ici appelé arrière-plan, je vais le copier, j'utilise la commande C sur un Mac, le contrôle C sur un PC, bureau, vous êtes va le coller dans ce dossier d'images avec le logo. Maintenant, j'espère que je peux supprimer la barre oblique avant , voilà, taper et ça dit, « Tu veux dire ce type ? » Je suis comme je le fais, d'où le gars. On y va, on va mettre notre point-virgule, on va sauver, et on va voir si ça a fonctionné. Ça pourrait suffire. Vous pourriez être comme fait, passez à autre chose. Mais si tu es comme moi et que tu vois que le moment ne fait pas exactement ce que je veux, tu pourrais l'aimer. Mais pour le moment, je voulais bouger. Si quelqu'un regardant sur un plus petit écran que l'image est encore sainté. C' est une classe CSS très agréable et facile que nous pouvons utiliser. Nous ne sommes pas un attribut de classe, il est appelé arrière-plan, un autre bon, la taille des arrière-plans et il y a celui-ci ici appelé couverture. La couverture de la taille de fond nous permettra de le faire. Donnons-le un coup d'envoi. Redimensionner, sympa. Maintenant, voir n'a pas entendu parler de répétitions natives parce que le rapport de cette chose est un peu bizarre et l'image que nous avons ne correspond pas tout à fait dans l'ici, donc il doit faire quelque chose pour le moment, il le répète. Jetons un coup d'oeil à se débarrasser de la répétition. Ça va être la moitié de [inaudible] réparé. Nous disons arrière-plan, répétez. Contexte Je voudrais m'asseoir à ne pas répéter s'il vous plaît. Impressionnant. C'est bon d'y aller et c'est parti. Parce que les boîtes grises là-bas, vous devez décider à quel point ça vous ennuie. Parce que la prochaine chose que nous devons faire est un peu étrange. Pour que ça marche, ce que vous faites, c'est les corps, l'étiquette avec laquelle nous avons travaillé. Mais il y a une balise globale sur tout HTML cool. Pour que cela disparaisse, vous devez mettre une autre balise juste au-dessus et dire, je voudrais que la balise HTML ait une hauteur de 100 pour cent et cela corrige cela. Je ne sais même pas pourquoi, mais c'est ce qu'on fait. Comme parfois dans le web design, je vais vous l'expliquer et parfois je ne peux pas pour que vous y alliez. Il couvre, il s'adapte, c'est sympa. Une autre chose si vous obtenez un pointilleux est que saint et reste là, mais ce n'est pas tout à fait saint. Tu aimes pourquoi et tu es tout à fait centré ? Vous pouvez vous amuser avec l'arrière-plan. Comment ça s'appelle ? Ligne d'arrière-plan. Si je l'épelle. Alignement d'arrière-plan, non est, position d'arrière-plan. C'est ça. Position d'arrière-plan et nous tapons au centre ; et cela devrait corriger cela. Maintenant, ça va aller du centre, plutôt que de gauche et de droite, j'aime ça. Une chose si vous suivez sur un très petit écran que vous aimez le miel ferait le faire que alors c'est vrai. Je pensais juste qu'ils en eux, comme si vous avez un très petit écran, il va être très difficile d'aimer le faire glisser assez grand pour le faire faire faire tous les bits de redimensionnement. C' est quelque chose à savoir. Je suppose que ce que tu fais, comme si tu pouvais probablement t'en sortir avec presque tout ça disparu. Le problème sera quand quelqu'un comme moi avec un écran géant l'ouvre et s'en va, ce n'est pas beau. Si tu travailles sur un très petit ordinateur portable et que tu l'es, je ne peux même pas goûter à ça. Plus tard, dans le cours, je vais vous montrer comment faire semblant d'être un très grand écran. Je voulais juste ajouter qu'ils ont juste au cas où vous voudriez faire ce travail, mais c'est potentiellement nécessaire. Images de fond faites et saupoudrées. 25. Comment rendre une balise div transparente en utilisant HTML et CSS dans VS Code: Salut tout le monde, nous allons regarder faire voir les choses à travers, normalement appelé encoder comme transparence alpha ou opacité. Tu comprends ce que je veux dire, on va passer de là à là où c'est un peu voir à travers ou beaucoup voir à travers. Je vais vous montrer maintenant comment le faire en CSS. Très bien pour faire la transparence, nous allons le faire à ce nav Actuellement, il est rouge, passons d'abord à une couleur qui devait faire du noir. Donc ça va au VS Code. Trouvons notre navigation. Il y a leur couleur. Je vais taper en noir. Nous n'avions pas vraiment besoin de le faire d'abord, mais assurez-vous de tout enregistrer, de le prévisualiser. Il est là, c'est noir. Nous voulons le rendre un peu transparent. Ok, j'ai mentionné cela plus tôt, mais si vous mettez en surbrillance le mot noir ou cliquez simplement améliorer, un peu difficile pour activer cette chose. Je trouve des hommes, voilà. Finalement, tu pourras faire ce truc. Maintenant, ça n'a pas vraiment d'importance. Tu peux faire un noir ici à la volée. Ce qui finit par se passer est que si vous choisissez une couleur unie, vous obtenez trois options. Rouge, vert et bleu pour le moment, s'ils sont tous réglés à zéro, ça veut dire que tu deviens noir. Vous les mettez tous à, 2,5,5, vous les obtenez tous. Mais crée une couleur blanche. N' a rien à voir avec un long essai, sauf que vous pouvez ajouter une quatrième dimension. Donc ici, si je fais glisser le curseur vers le bas pour dire, je regarde ici, ok, que quand ils voient 0,0,0 et il y a cette nouvelle option d'édition supplémentaire. Pensez-y comme des pourcentages. Si je vais haut, je regarde quand je suis à solide, un disparaît, mais si je descend 0.975, c'est comme 97 pour cent, c'est 50 pour cent, travers et descendre ici, c'est comme 10 pour cent opaque, 10 pour cent opaque, 10 pour cent est mieux explication. Donc je suis 10 pour cent de couleur dessus 50 pour cent de couleur, 90 pour cent signifie que c'est presque complètement noir à nouveau, si j'ai expliqué ça, ok, vous faites glisser vers le haut et ensuite, vous vous arrangerez. Donc je vais avoir le mien environ 30 pour cent. Ok, et vous verrez que c'est là. Donc 0,3 signifie qu'il est 33 pour cent noir. Le pas très sauver, essayons-le. Alors regardez ici vous allez Maintenant si vous êtes vieux Web Design et en utilisant ces nombres hexadécimaux, rappelez-vous ce hachage, nous avons simplement fait le hachage, et je choisis quelques couleurs aléatoires. Vous ne pouvez pas faire de transparence alpha avec ça. Vous devez utiliser ce truc appelé RGBA. Qui a rouge, vert, bleu, et alpha, qui est le voir par EBIT. Voilà comment faire passer certaines choses. Maintenant, nous l'avons fait pour la couleur de fond ici dans notre navigation. Mais vous pourriez le faire avec Type. Vous pouvez faire n'importe quelle couleur que vous avez appliquée aux choses et légèrement opaque ou beaucoup opaque. C' est ça. Je te vois dans la prochaine vidéo. 26. Comment créer une navigation textuelle simple sur un site web en HTML et CSS: Salut là. Cette vidéo, nous allons faire cette navigation de texte simple. En fait, nous allons construire, c'est la maquette que nous allons construire. On va aller jusqu'ici dans cette vidéo de toute façon. C' est juste en haut ici, l'alignement n'est pas encore parfait, mais c'est là, tout est lié. Nous allons apprendre de nouveaux raccourcis en cours de route. Allons-y. Tout d'abord, mettons nos liens. Ici, à l'intérieur de notre navigation, je vais mettre un retour, et je veux mettre combien d'options avons-nous ? Nous avons 1, 2, 3, 4, 5, 6. Je veux six étiquettes. Celui-ci va être un menu assez simple. Nous allons construire probablement quatre dans ce cours entier, texte simple un, fera des boutons dans le prochain projet, puis sera déroulante et cool menus jQuery Burger pour mobile. Nous deviendrons plus fantaisistes et plus fantaisistes au fur et à mesure, mais juste un simple pour commencer. Ce que je veux faire, c'est ajouter mes six liens. Dans Visual Studio Code, je veux taper une balise, retourner. On va mettre du hachage pour qu'il n'aille nulle part. Le premier est à la maison. Maintenant, on peut le faire six fois et c'est très bien. Vous pouvez le copier et le coller et modifier le texte. Je vais vous guider sur un petit raccourci. Je vais essayer d'introduire de petits raccourcis au fur et à mesure que nous avançons. Ils sont juste amusants, ils sont bons, ils sont utiles et je les utilise donc je sais qu'ils sont bons. Ce que nous pouvons faire dans VS Code, c'est que nous pouvons le faire sur une balise en minuscules a, mais je veux trois d'entre eux. On peut utiliser le temps six d'entre eux. Times dans ceci est la touche astérisque. Il est en dessous, souvent combiné avec le numéro huit alors maintenez la touche « Maj » enfoncée et cliquez sur « huit ». Donc un astérisque six signifie que je veux que ces six d'entre eux frappent « Retour » ça. Vous êtes un concepteur web et vous êtes un hardcore et vous codez rapidement. Ce que je veux faire, c'est que je veux mettre un hachage et tout ça. Vous imaginez que s'il y a un raccourci pour faire tout ça, c'est là. C' est un peu lent processus. plupart du temps, vous finissez par travailler sur ces groupes multiples en faisant plusieurs choses tout de même. On peut le faire, on en fera une de plus. Un raccourci de plus et vous pouvez simplement les taper, mais si vous êtes sur un Mac, c'est sous celui-ci ici. C' est le raccourci que vous cherchez. C' est en vue, non c'est en cours de sélection. C' est celui-ci ici, Ajouter le curseur ci-dessous. Sur un Mac, c'est la commande d'option et la flèche vers le bas. Les curseurs ils sont en haut, en bas, à gauche à droite. Sur un PC, il s'agit de la flèche de contrôle Alt vers le bas. Ici où je clignote, alors assurez-vous que le curseur clignote là. Sur mon Mac, je vais maintenir Command, Alt, Command option et appuyer vers le bas, vers le bas, vers le bas, vers le bas, vers le bas, puis je vais taper hachage. Si vous êtes sur un PC, c'est Control Alt down, down, down, down type hash. Je veux m'en débarrasser maintenant parce que je ne veux pas de la maison et tous. Je vais juste cliquer une fois ailleurs. Je clique sur le premier et dans votre texte rappelez-vous dans les fichiers d'exercice est un fichier appelé Projet un texte. Je vais juste copier et coller du tout dans. Copier coller, vous pouvez faire la même chose, si vous pouvez taper, vous pouvez simplement taper tout dans. Tu n'as rien à mettre dedans. Je vais accélérer ça. Très bien, merci éditeur, c'est Jason au fait, je l' appelle éditeur tout le temps, mais il s'appelle Jason et il est génial, merci Jason. Nous sauvegardons tout et nous allons prévisualiser dans le navigateur et, est-ce que cette mise à jour ? Là, il est là. J'ai tout mon texto là-dedans. Ce n'est pas tout à fait correct parce que c'est parce qu'il y a une étiquette et qu'on a stylé l'étiquette a ici. Ces gars, hé, nous sommes pareils, faisons la même chose. Nous allons devoir faire un style spécifique pour ça ressemble à ma maquette ici, mais nous pouvons le faire. La première chose que nous ferons, c'est que nous voulons le centrer. Ce qu'on va faire, c'est qu'on l'a déjà fait. Nous voulons passer par et le centre en utilisant le centre de texte le fera à la navigation, dira tout le texte à l'intérieur de moi, Il va être texte-aligner, centre, demi-deux-points, enregistrer, enregistrer tout aperçu dans un navigateur, qui nous a, en attente pour jouer avec les soulignements à jouer avec, mais ce sera tout pour cette vidéo. Au moins, nous avons mis les navs et nous avons appris quelques raccourcis. D' accord, j'ai le double retour. J' ai fini la vidéo. J'étais comme si je devais le mentionner. Nous avons commencé à faire des raccourcis maintenant. J' avais l'impression que c'était le moment de commencer à en faire quelques basiques. Si vous êtes comme, comment vais-je me souvenir de ces choses ? Ou peut-être que vous avez commencé à les écrire déjà. J' ai créé un dossier dans vos fichiers d' exercices, des fichiers d'exercices, des feuilles de raccourcis ouvrent cela, et nous avons ignoré celui-ci pour le moment. Nous le regarderons plus tard, mais ces deux seront pratiques, code VS regardera d'abord. Il existe un Mac ou un PC en fonction de ce que vous utilisez. Je vais ouvrir mon Mac. Disons que c'est une belle page que vous pouvez imprimer et prendre ensuite votre ordinateur mettre en évidence ceux que vous trouvez utiles, vous ne allez pas vous souvenir d'eux tous, mais celui que nous venons d'utiliser peut voir la sélection multi-curseur, c' est celui que j'utilise pour insérer le curseur ci-dessous. Vous pourriez juste le mettre en évidence maintenant, l'imprimer, mettre en évidence et dire que c'était utile, puis je vais essayer de me rappeler que vous avez pu lire, peut-être plus loin dans le cours que vous pourriez lire et obtenir, alors réaliser que c'était le raccourci, peut être vraiment pratique. Eh bien, celui-ci sauve tout. Si vous ne vous souvenez pas, mettez-la en surbrillance. Très bien, c'est le code VS. L' autre là-dedans s'appelle emmet. Emmet dont nous n'avons pas vraiment parlé, il y a un nom distinct, les raccourcis qu'ils appelaient emmet. Mais pour toi, c'est ceux-là quand on dit que tous les emmet sont des choses comme une étiquette. Si je tape un retour et frappe, emmet fait cela, mais peu importe ce qu'il s'appelle, mais emmet, c' est ce qu'il s'appelle. La même chose avant qu'on ait fait une fois six se souviens-toi. C' est un emmet. on peut voir l'abréviation Emmet là où vous allez. Vous l'avez probablement vu. Ils l'appellent emmet et j'ai fait un petit raccourci. Eh bien, je ne l'ai pas fait. J' ai recueilli ça pour toi. Le problème avec celui-ci, c'est comme 24 pages. Il y a tout ce que vous pourriez faire. Je trouve cette impression utile sur les deux premières pages, parce que le reste d'entre eux, c'est assez difficile. Ils ont mis en évidence les plus importants pour ceux que vous êtes susceptible d'utiliser. Peut-être que vous imprimez les deux premiers. Je trouve vraiment intéressant de regarder ces structures que vous pouvez faire. Nous allons aborder ces derniers plus loin, mais c'est probablement un bon moment pour les imprimer maintenant afin que vous puissiez commencer à griffonner vos nouveaux raccourcis doux dessus. Bon, c'est la fin de la vidéo. On se voit dans la prochaine. 27. Comment créer un style css pour plus d'une balise de classe à la fois - classes composées: Hé tout le monde. Nous allons prendre notre menu dans cette vidéo, qui ressemble actuellement à ceci. Rembourrage de chaque côté, un peu d'espace entre eux, tailles de police. Pour ce faire, nous allons devoir apprendre ce qu'est un sélecteur de composé. C' est plutôt cool, gentil et simple. Cela va nous permettre d'être des concepteurs web plus fantaisistes. Allons entrer et apprenons ce qu'il fait. Sélecteur de composé. Qu' est-ce qu'une classe composée ? C' est juste plus d'un. Nous avons un problème maintenant, parce que ce que je veux faire, c'est que je veux styler ces balises A. Je veux éteindre le soulignement, parce que je ne veux pas qu'il soit ici. Mais j'ai déjà bloqué les étiquettes A. Rappelez-vous tout à l'heure, nous avons dit : « a-tags, nous voulons partir. » Nous avons désactivé cela, parce que nous voulons laisser le soulignement. On a une étiquette qui contrôle deux ou trois choses. Ce que nous pouvons faire, c'est utiliser quelque chose qu'on appelle la spécificité. Cela signifie simplement, il remplacera si vous voulez plus spécifique. Généralement, tous les a-tags le font, mais si je dis le a-tag spécifiquement dans le nav, faites cette autre chose, qui gagnera parce que c'est plus spécifique. Générique, un peu plus spécifique, parce que nous disons les a-tags à l'intérieur du nav. Faisons-le juste ensuite le code Visual Studio. La façon dont vous structurez une classe composée ou un sélecteur composé, composé juste parce qu'il y a deux parties, vous pouvez en avoir plus d'une. On va juste en faire une. Ce qu'on veut dire, c'est que s'il y a un nav, avec un intérieur, on met juste des espaces entre lui. Parce que nous avons affaire à des sélecteurs de balises, le nav et le a, ce n'est pas une classe, nous n'avons pas besoin de l'arrêt complet. Il le fait tout seul, avec des espaces entre eux. S' il y a une balise A à l'intérieur d'un NAV, faites cette autre chose. Ce que nous voulons dire, c'est que décoration de texte est définie sur zéro. Ok, cool. Pot-virgule, fait, sauve. Regardons un peu, n' est-ce pas ? Ça marche, cool. Celui-ci va bien, mais parce que celui-là dit que les étiquettes A sont à l'intérieur du NAV, vous l'avez eu. Sélecteurs de composés. Super-utile. Nous le faisons de cette façon parce que c'est la façon la plus simple et c'est agréable et propre, et clair. Tu aurais pu te débarrasser de ça. Je vais l'envelopper dans ma barre oblique avant de commande, pour le commenter. Ce que j'aurais pu faire est de créer une classe appelée, « no-underline ». J' aimerais vous montrer les deux façons, parce qu'il n'y a rien de mal à cette façon. Ici, je vais dire que la décoration de texte sera pas réglée sur zéro, et ici on peut dire, en fait, j'aimerais, après le « HRF » là-bas, je vais mettre dans un cours appelé « no-underline ». Sauvez-le, et j'espère qu'un seul d'entre eux fonctionnera maintenant. Ils vous y vont. Le problème avec cela est que je dois appliquer cette classe à toutes ces balises, et c'est très bien. Si j'en fais un autre, je dois aller dans leur classe. n'y a pas de vrai problème avec ça. Mais vous pouvez voir l'élégance de ce premier. Est-ce que l'élégance est le mot ? J'ai l'impression que c'est le cas. Impressionnant. Nous avons appris ce qu'est le sélecteur composé et la syntaxe pour cela, les espaces. La prochaine chose que je veux faire est, je veux ranger le rembourrage ici. Centrage dans une boîte. Le centrage horizontal est parfait. Verticalement est très dur, étonnamment dur. Ne me demandez pas pourquoi, mais ça l'est. Plus tard dans le cours, quand on regarde quelque chose appelé flexbox, ça va devenir plus facile. Mais pour le moment, à notre niveau de compétence actuel, c'est super dur. Ce qu'on va faire, c'est faire semblant. On va juste mettre un peu de rembourrage sur le haut et le bas, jusqu'à ce qu'il semble qu'il soit au milieu. La façon la plus simple de le faire, il y a deux façons, mais la façon dont nous allons le faire est, nous allons ajouter un peu de rembourrage à ce nav. Parce qu'en ce moment c'est juste en haut donc nous allons ajouter un peu en haut et un peu en bas et peut-être nous débarrasser de la hauteur. Essayons de montrer ce que je veux dire. Tout d'abord, débarrassons de la hauteur, ça va le rendre un peu plus clair. Voici ma hauteur de navigation. Vous pouvez soit le commenter ou simplement le supprimer, parce que je ne le veux pas. Voir son effondrement, mais si j'ajoute un peu de rembourrage à l'extérieur du nav, ou je pourrais l'ajouter aux a-tags eux-mêmes, n'a pas vraiment d'importance. On va le faire au NAV juste parce que j'en ai envie. et nous allons dire « rembourrage » et nous allons faire « haut de rembourrage ». Je vais faire 14 pixels en haut et le même pour le bas. Il suffit de le copier et de le coller en bas. Impressionnant. Enregistrez-le et nous allons prévisualiser dans un navigateur. Vous pouvez voir qu'on arrive au même point. Il s'est effondré, maintenant il y a du rembourrage qui le pousse dehors. Si on le faisait avec des marges, ça ne fonctionnerait pas correctement. Je viens de mettre ça dans vous, la différence entre les marges de rembourrage. Vous pouvez voir qu'il y a un rembourrage. Il y a 14 pixels au-dessus et au-dessous, parce que si je le manivelle jusqu'à 140, vous pouvez voir qu'il y a beaucoup d'espace là-bas. Mais parce que c'est l'extérieur de la boîte, ça ne fait pas vraiment ce qu'il faut faire. « Annuler », « annuler », « enregistrer », prévisualiser. Joli. Réparons quelques autres choses qui me gênent, comme la taille de la police est un peu grande, et l'espace entre les boutons de menu est minuscule. Nous devons ajuster ça. Sautons dans VS Code. Que devrions-nous faire ? Nous allons le faire au nav comme, parce que je veux en faire une taille de police de 12 pixels. Nous voulons qu'il soit assez petit pour correspondre à mon design ? Jetons un coup d'oeil. Sauvegardez. C'est mieux. Maintenant, faisons de l'espace entre eux tous. Ce qu'on va faire, c'est un peu de rembourrage. Peu importe si c'est un rembourrage ou une marge dans ce cas. « rembourrage » et « gauche ». Je vais mettre 10 pixels, et je vais faire la même chose pour le bon rembourrage. « Droite », 10 pixels. Jetons un coup d'oeil, génial. Pourquoi ai-je fait les deux ? Parce que si je fais ça, ça va être légèrement déséquilibré. Ça va bien paraître, mais ça va être poussé d'un côté, et je suppose que tu ne peux pas vraiment le remarquer là-dessus. Imaginez que nous avons un peu de rembourrage d'un côté, mais pas de l'autre. Sur chacun d'entre eux. Visuellement, il n'a pas l'air différent, mais vous avez un rembourrage de chaque côté maintenant. Je fais souvent ça. Je prends juste mon curseur et clique dessus et fais glisser, pour essayer de le mettre en surbrillance, et ça me donne une idée vague de ce qui se passe. C' est notre navigation de base. N' allez nulle part encore. Nous avons une page d'index, nous devrions créer une page de menu et une page de commande en ligne. Nous n'en avons fait qu'un jusqu'à présent, donc nous utilisons juste ces hachages ou symboles de livre, juste pour les rendre actifs, mais pas vraiment les faire aller nulle part encore. C' est tout pour notre navigation vraiment simple. Passons à la prochaine vidéo. 28. Projet de cours 02 - Bas de page: Surprise, c'est l'heure des devoirs. Vous avez toutes les compétences pour recréer cette photo. Au moment où ça ressemble à ça dans le navigateur, cette chose verte. Ne vous inquiétez pas pour cette grande carte au milieu. On va le faire dans un peu. Je veux que vous vous concentrez sur la carte en bas. Donc tu vas te concentrer sur cette partie. Donc ce que je veux que tu fasses, c'est que tu le fais ressembler à ça. Est-ce que c'est en attente ? C'est une marge ? Comment on l'obtient au centre ? Comment rendre la police plus petite ? Je veux que vous l'enveloppiez dans une balise P et je veux que l'arrière-plan soit noir mais transparent, mais pas aussi transparent que ça. Donc c'est un peu plus sombre. Ce sont les règles. Rappelez-vous dans vos fichiers d'exercices au début des fichiers d'exercices, il y a un appelé projets de classe, et il y a un mot doc ici. C' est ça ici. C'est le projet de classe 2. Alors courez à travers ça. Il y a le balisage que je viens d'expliquer, il n'a pas besoin d'être parfait en pixel. Autre chose ? Ignorez la carte, l'espacement au-dessus et au-dessous du pied de page. Il y a le texte pour ça. Assurez-vous juste qu'il est dans une balise P. Vous pouvez ignorer que les boutons soient corrects. Il suffit de le mettre dans une balise de paragraphe, puis de style. Petit indice, vous allez probablement avoir besoin d'un sélecteur de composé. C' est ce que j'essaye de te faire faire dans ce cas. Couleurs d'arrière-plan transparentes, et c'est tout. Une fois que vous l'avez fait, prenez une capture d'écran assurez-vous que c'est avec moi dans le panneau des affectations. Prends juste une capture d'écran, mets-la là dedans. Selon l'endroit où vous regardez cela, dans les commentaires, dans les missions, et envoyez-le moi sur Instagram. garder honnête. Envoie-le moi et dis : « Ecoute, j'ai eu ce dossier et je l'ai fait sans tricher. » Ce que je veux dire par tricher, c'est ouvrir les fichiers remplis et/ou regarder la vidéo suivante où je vais le parcourir et vous montrer comment le faire. Ça te prouvera que tu peux le faire. Partage-le avec moi. Assurez-vous d'utiliser ce hashtag, #BYOLweb. C' est ça. Va faire tes devoirs. Je te vois dans la prochaine vidéo. 29. Projet de cours 02 - Bas de page COMPLET: Bienvenue de retour. Comment s'est passé les devoirs ? Soit tu es assis là en pensant : « Oui, je l'ai fait. Je suis un web designer. J'ai écrasé ce pied de page et ça a l'air génial. » ou tu es assis là en disant  : « Tu n'es pas aussi bon professeur que tu le crois, Dan. Il s'est mal passé et le site ne fonctionne pas dans mon ordinateur pris feu, » ce qui, d'une façon ou d'une autre, je suis vraiment heureux avec. Parce que c'est le début, tu es nouveau. Si tu l'as sauté, c' est là que je suis en train de trembler le doigt. Tu ne peux pas le voir, mais je suis en train de trembler, secouer mon doigt, de tut, de tut. Tu aurais dû faire tes devoirs. Mais si tu ne l'as pas fait, c'est bon, on est tous là maintenant, voyons comment je le ferais. Il y a deux façons de le faire. Faisons comme je l'ai fait. Si vous avez une bonne solution, c'est parfait. Mais voyons juste. Allons à VS Code, et où avons-nous commencé ? Je me demande où tu as commencé. Je me sens comme, je veux colorer l'arrière-plan d'abord pour une raison quelconque. Allons au pied de page. C'est facile. Débarrassez-vous de cela, et nous pourrions simplement taper en noir, mais nous pourrions juste passer au-dessus de cela et le faire glisser vers le bas dans ce coin inférieur. Je le traîne juste là où il a besoin d'aller, lâcher, puis revenir et juste le traîner vers le bas. Maintenant, je m'assois [inaudible] à environ 80 pour cent, mais que diriez-vous de ça ? Sauvez-le. Aperçu dans le navigateur. Il est peut-être clair à quel point le dos sombre n'a pas vraiment d'importance. Mais on a l'idée, il y a du noir et c'est transparent. Éditons les tics et à l'extérieur d'ici. Trouvons le pied de page. Ajoutons notre balise p. Allons trouver le texte, il est là et collez-le. Génial, sauvez-le, voyez à quoi ça ressemble. C'est là qu'on en est. Cool. Faisons quelques choses. Rendons-le peut-être plus petit et centrons-le horizontalement parce que c'est le plus facile à faire. En fait, vous pouvez simplement styler le pied de page. Vous pourriez dire, je veux que ce soit une taille de police ici dire 10 pixels, ce que vous avez choisi et cela fonctionnerait. La raison pour laquelle j'ai suggéré de faire un sélecteur composé, donc quelque chose comme le pied de page qui a une balise p dedans, est de sorte que si vous avez comme une image à l'intérieur de là aussi, ou dites quelques liens ou beaucoup de choses différentes, vous pouvez soyez vraiment précis à ce sujet. Vous pouvez dire que je veux les textes de paragraphe qui sont à l'intérieur du pied de page. Peu importe comment tu l'as fait tant que ça a fonctionné. Nous allons faire la taille de la police. J'ai fait 10 pixels. Faisons un test à chaque fois. Faisons en sorte que ça marche. Faisons le centre de l'alignement du texte. Comment allez-vous si loin ? Y a-t-il, euh moments ou c'est comme, « Oui, j'ai fait ça, je l'ai cloué. » Jetons un coup d'oeil, c'est parfait. J' ai rendu le mien un peu plus sombre. Ce n'était pas blanc. Mais tu ne le savais pas. Couleur Je fais juste cela parce que je veux que ce soit une couleur légèrement différente. Vous changez les règles, et je veux que ce soit un gris légèrement sourd parce qu'il est trop lumineux là-bas. Ok, la prochaine chose que je veux faire est d'obtenir l'espacement correct. Comment l'as-tu fait ? Avez-vous laissé le jeu inférieur avec les hauteurs, jouer avec les marges ? C' est comme ça que je vais faire, je vais me débarrasser de la hauteur du pied de page. Rappelez-vous où au début, nous avons ajouté des tas de hauteurs, et nous supprimons lentement tout cela parce qu'ils étaient juste utiles au début pour dire que pendant que nous apprenons, nous pouvons voir les choses, mais maintenant c'est bien laisser ça comme ça parce que je sais plus tard pendant que je le construis, je peux dire, « Est-ce que je fais un pied de page P, ou au pied de page. » Je pense que vous pouvez le faire à l'un ou l'autre. Je me demande ce que tu as fait. Laissez dans les commentaires, ce que vous avez fait. Si tu veux, « Hé, j'ai fait une autre chose et ça a toujours fonctionné. » faire ça parce que d'autres personnes pourraient dire : « Oui, moi aussi, je l'ai fait autrement. Il y a une meilleure distance. Dan l'écrit mal. » Je suis content pour ça. Pour le moment, je vais faire un peu de rembourrage sur le haut, 50 pixels, et même pour le bas. 50 pixels en bas. Vérifions ça, et c'est là que je voulais aller. J' ai rempli tout mon mémoire. Ignorer la carte, a fait l'espacement au-dessus et au-dessous, parfait. Pied de page, la balise p, couleur de fond, nous l'avons fait. Si le vôtre n'a pas fonctionné, je vais enregistrer ce fichier maintenant et le mettre dans les fichiers terminés juste pour récapituler les fichiers terminés parce qu'ils sont super pratiques. Sous vos fichiers d'exercice, il y aura un dossier appelé, Fichiers terminés. Je leur donne séparément pendant que je travaille dans ce cours, mais je vais vider tout ce dossier là quand j'aurai fini, et vous trouverez celui-ci, et vous pouvez voir sont toutes les différentes vidéos que nous avons faites. Ouvrez-les et vous devriez voir le code que j'ai ici et vous pouvez comparer. C' était notre projet photo terminé. Bien joué. Allons sur de nouveaux trucs de fantaisie. 30. Comment ajouter un simple bouton d'envoi d'e-mail à un site web en utilisant mailto en HTML ?: Salut là. Cette vidéo est tout au sujet de l'ajout d'un bouton e-mail vraiment simple sur le site Web. Nous avions ce lien que nous avons fait plus tôt, et quand nous avons cliqué dessus, il est allé à Google, ce n'était pas si utile. Ce que nous voulons faire maintenant, c'est quand nous cliquons dessus, il ouvre notre campagne de courriel, et comme il y a un site Web pré remplit et les lignes d'objet faites, c'est un joli petit truc rapide, super facile, rapide pour ajouter ce genre de à votre site Web. Allons entrer et faire en sorte que ça se produise. Pour le faire fonctionner, nous allons le faire sur le bouton que nous avons ici dès qu'il ne va pas dans Google. Il irait à une autre page Web, Je veux l'obtenir de sorte que lorsque vous cliquez dessus sur l'utilisateur, Je suis sur ce site et l'idée, Je veux cliquer dessus, et envoyer un e-mail pour une réservation. Je fais un formulaire, nous le ferons plus tard dans le cours parce que c'est assez difficile à faire. le faire plus tard, mais pour le moment, un peu de courrier deux choses va être agréable et simple, rapide et facile à faire. Tout ce que nous devons faire, c'est nous, l'avons fait href plus tôt, donc si vous n'avez pas fait celui-là, cherchez à faire une vidéo de lien hypertexte plus tôt, et tout ce que nous avons à faire est de changer ce pot, donc au lieu d'aller à Google.com, nous allons le faire aller au mail deux, deux-points, donc ça doit ressembler exactement à ça, puis vous mettez l'adresse e-mail, pas d'espaces. Si vous vouliez m'envoyer un e-mail, vous enverriez un courriel à Daniel sur mon site web. Quand quelqu'un clique dessus, ils vont le montrer, cibler vide ou non, n' a pas vraiment d'importance dans ce cas parce qu'il va charger et sa propre chose vide, et c'est cela qui devrait le faire fonctionner. Sauvegardez-le, donnons-lui un aperçu. Cliquons dessus, regarde ça. Il a ouvert mon système de messagerie sur ma machine. Je fais semblant d'être le client maintenant, donc je cherche un restaurant sur Internet et je fais une réservation. Cliquez sur le bouton, cela s'ouvre, et donc il ouvre le courrier, et veut exécuter un sujet et je pourrais dire, puis-je obtenir une réservation ? C' est un moyen agréable, bon marché, facile, rapide, donc c'est cinq secondes à mettre en œuvre, et c'est plus facile qu'un formulaire. Quelques choses qui pourraient être pratiques est de mettre fin à une ligne d'objet comme la préfixation dans, donc ce que vous pouvez faire, vous pouvez le faire un peu plus à la fin de ceci, donc mail deux est cool, mais à la fin du .com, mettez un point d'interrogation. Vous devez poser un point d'interrogation et un doit être orthographié comme le capital est et il doit être sujet. Un point d'interrogation est pour le sujet, et ensuite vous pouvez mettre un égal parce que o doit ressembler exactement à ça, alors vous pouvez simplement ajouter la ligne d'objet, sorte que vous pouvez dire réservation, allez. Appuyez sur Enregistrer, et nous allons en prévisualiser. Fermons, il est prévisualisé dans le navigateur. Cliquez dessus. Vous pouvez voir beaucoup de mon email et mettre le sujet dans cool. Vous pouvez faire d'autres choses comme obtenir le CC et pouvez-vous mettre copain copie et je pense que vous pouvez aussi bien. Je ne les connais pas par cœur, mais vous pouvez aller jeter un oeil à cela vous-même maintenant, tout ce que vous avez besoin de vraiment chercher est, chercher du courrier à un HTML, et vous trouverez une page sur ce que vous pouvez et ne pouvez pas ajouter, et ce sera juste des choses différentes comme ça. J' imagine que ce sera point d'interrogation, CC égal, vous mettez une autre adresse e-mail et, mais c'est une supposition et juste un petit truc bon marché pour ajouter un email, donc c'est tout pour celui-ci, passons à la suivante si vous êtes En pensant, ce sera le dernier pour ce soir, je vais en faire plus demain. Fais le suivant, le suivant est génial. Intégrer des codes qui vont nous faire paraître génial, c'est cette carte, ça ne va pas prendre trop de temps, soit je te vois dans quelques secondes, soit je te verrai demain quand tu te réveilles. Au revoir maintenant. 31. Comment ajouter Google Maps à votre site web à l'aide de codes d'intégration: Bonjour, les gens jolis. Cette vidéo, nous allons regarder quelque chose appelé un code d'intégration et nous allons commencer avec celui-ci ici. Tu vois que c'est ? C'est une carte. C' est sur notre site. C'est interactif. Il nous montre où se trouve notre restaurant. C' est super facile à faire. Google fait tout ce qu'on fait, c'est copier et coller des trucs, ok ? Plus tard, nous ajouterons une vidéo, d'accord ? De YouTube à notre site Web et nous allons ajouter cette chose cool de réservation où quelqu'un peut faire une réservation. On ne le fait pas. Nous ne le codons pas. On ne le coiffe pas. Nous allons simplement sur ces sites Web comme YouTube, Google Maps et OpenTable et ils nous donnent tout ce dont nous avons besoin. On le copiera et on le collera et on a l'air génial, non ? Sautons maintenant et essayons comment. C' est ce que nous voulons ajouter, non ? C' est juste une capture d'écran pour le moment. Cela ne fonctionne pas vraiment, donc nous voulons l'ajouter à notre site Web et la chose cool à propos de choses comme ça, nous allons faire Google Maps ici, mais vous pourriez avoir un calendrier de Google Maps ici, une feuille de calcul de Google. Quoi d'autre ? Vous pourriez avoir billetterie de Ticketmaster ou Eventbrite que vous pourriez avoir des flux Facebook ou Twitter. Ils utilisent tous la même méthode. Ça s'appelle un code incorporé. En Allemagne, dans quelque chose appelé un iframe. Tout d'abord, allons chercher le code. On va utiliser Google Maps, d'accord ? Je viens de charger la version Nouvelle-Zélande mais allez sur google.com/maps, ok ? Je suis allé à .co.nz, mais de toute façon, ça n'a pas d'importance et puis tapez l'entreprise que vous voulez énumérer, ok ? Tape-le et trouve-le et disons, donc c'est là que je vais aller, n'est-ce pas ? Je suis plutôt excité, comme Adare. Adare Manor est un grand état de fantaisie. Maison de manoir là-bas. Le Carriage House à Adare Manor semble un endroit vraiment cool à ajouter à ma carte fictive. Ce que je vais faire, c'est que je vais cliquer dessus pour que je l' isole juste ici parce que je ne veux pas toutes ces choses ici aussi. Je vais juste trouver le Carriage House à Adare Manor. Parce que tout ce que tu verras ici sera ce qu'il y a sur ta carte. Ça va me montrer les autres restaurants. Où sont les restaurants ? Il est parti. Une ou deux choses que vous devez faire lorsque vous faites une carte est de zoomer avant et arrière, parce que c'est la taille si vous voulez la montrer par rapport à Dublin, d'accord ? Ce qui est à des kilomètres, Adare Ireland, je viens de Nouvelle-Zélande. Ma femme est irlandaise. Bref, pour que tu décides de l'échelle, d'accord ? Vous pouvez voir cette distance en voiture entre Dublin ? Dublin est là-bas quelque part ou voulez-vous des cartes vraiment localisées pour que les gens puissent voir la rue qui est sur très près. Vous obtenez ce droit, cliquez et faites-le glisser jusqu'à ce que vous obteniez la bonne position. Alors ce que vous cherchez, maintenant je vais vous montrer ce qu'il est en ce moment. Chaque fois que j'enseigne ce cours et que je fais une vidéo, ils vont se déplacer où est ce bouton, accord ? Tu sais comment te plaindre ? Google change ça me va, tu dois le creuser et le trouver. S' il est à un endroit différent, écrivez les commentaires pour que les autres élèves sachent où il est allé. Ce que je cherche est un code incorporé. Où est-il en ce moment ? Est sous celui-ci appelé Partager. Vous donne des options de partage et vous êtes à la recherche de celui-ci appelé Intégrer, d'accord ? Embeed une carte, cliquez dessus. Alors ce que je veux faire, c'est que vous avez les différentes tailles. Je vais choisir une taille personnalisée. Vous pouvez simplement choisir l'un d'entre eux comme la taille personnalisée. Maintenant, quelle largeur voulons-nous qu'il soit ? Je veux que ce soit, je sais que la largeur de mon site est 1,024, donc je pourrais aussi le faire largeur, 1,024 même. À quelle hauteur ? Je devine juste 500. C' est l'aperçu à la taille réelle. C' est à ça que va ressembler, d'accord ? Une fois qu'il se charge finalement, génial. Tout ce que je dois faire maintenant est d'aller copier HTML et de le placer sur mon site. C' est trop facile, si bon. Googler à ce sujet, ça va nous faire paraître très bien si ça marche. Où vais-je le mettre ? Je vais le mettre à l'intérieur de la principale, donc juste avant. Je vais mettre quelques routines dedans et je vais l'examiner à travers et passer là-bas. Cool, donc ça me donne mon iframe. Voyons si cela fonctionne tout droit sans aucun, parfois il a besoin d'ajustements. Vérifions. Je ne peux pas me souvenir et prévisualiser dans le navigateur. Je vais voir comment ça se passe. Tu es prêt ? Lequel est-il ? Ouais, ça a l'air super. Je suppose que j'ai poussé sur le côté, mais c'est là, regardez-le. Vous pouvez zoomer, zoomer, les gens peuvent le vérifier, trouver des directions et il semble bon sur votre site Web. On n'a pas à faire ces trucs hardcore. Google fait toute la force de travail. Pourquoi tout est foiré ? C' est principalement parce que nous avons mis un couple de choses. L' un est qu'on l'a mis dans cette étiquette principale, que j'ai oublié. On avait un outil de rembourrage, ok ? Je vais laisser ça dans le cours parce que, sont des choses qui arrivent et tu dis : « Qu'est-ce qui s'est passé alors ? » Je sais parce que souvenez-vous de notre principal, nous avons dit plus tôt que nous avons dit que nous avons ajouté un rembourrage géant. Ce que je vais faire, c'est que je vais dire : « Ne l'avons pas en main. Mettons-le ensuite dans une étiquette. » Ok, quelle étiquette ? Utilisons une section, d'accord ? On pourrait, section ouais. La section est une bonne chose à utiliser, d'accord ? Ce que nous allons faire, c'est, vous pouvez juste utiliser un div. Exploration en utilisant des sections, d'accord ? Mets-le là-dedans. Cela va résoudre certains de nos problèmes parce que c'est dans un autre, le rembourrage ne va pas être affecté avec espoir. Vas-y et c'est réglé tous nos problèmes, gentil. Ok, donc c'est notre carte, nous avons des problèmes de rembourrage qu'il faut résoudre, d'accord ? Mais c'est cool. Il suffit de le jeter dedans et a l'air génial. Réparons le rembourrage et puis je vais vous montrer un peu court court à travers certains des codes incorporés. Ce que je vais faire, c'est ici ma section et je vais lui donner un nom de classe, d'accord ? Je vais appeler celle-là, ce que je vais appeler celle-là cartes, cool. Ici, ce que je veux faire est que je veux dire s'il y a .maps, j'aimerais qu'il ait un peu de rembourrage ou de marge. Look rembourrage toute la marge fonctionnera. Faisons fond de rembourrage et combien ? Mettons 100 pixels pour voir à quoi ressemble. On y va. Un peu d'espace là-bas. Mon image n'est pas assez grande pour la porter. Si vous travaillez sur un petit écran, vous n'allez probablement pas rencontrer de problèmes d'image, mais nous y voilà. Regardons quelques autres codes d'intégration parce que le processus est le même. On en fera deux de plus. Le vrai commun est YouTube. Ok, alors allez sur YouTube, trouvez une vidéo que vous aimeriez. Je connais une bonne vidéo et la lecture à ce fait pour lancer, parce qu'il va vous montrer tout mon historique de recherche. Qu' est-ce que Dan aimait regarder ? Ce n'est pas trop mal. Faisons des salons de voitures et des trucs de rénovation de maison. Vous êtes comme, « Pourquoi y a-t-il beaucoup de webdesign shows ? » Parce que j'aime faire des vidéos de design web pas les regarder de toute façon. Ajoutons une vidéo. Apportez-le ici en haut. Est lié à être une bonne vidéo là-bas. Regarde ce type. Super, et attrapons celui-là. Ok, c'est une de mes vieilles vidéos sur mes autres vidéos. Ce que tu fais c'est que tu trouves la vidéo que tu veux. Assurez-vous qu'il y a un beau kiwi dedans, ok ? Une fois que vous avez trouvé que vous cherchez le bouton de partage. Encore une fois, ça pourrait changer. YouTube change les choses tout le temps, donc à la recherche de Partager. Il sera là quelque part et ira où on veut. Partager lien intégrer voir celui là. Cliquez dessus, d'accord ? C' est notre iframe comme avant. Vous pouvez le faire démarrer à partir de la position. Voulez-vous les contrôles du joueur ? Voulez-vous le bouton de lecture ou pas ? J' allais copier tout ça. C' est juste une copie, voilà, et je saute dans mon code de studio. Où vais-je le mettre ? Je vais le mettre juste en dessous de cet iframe. Oui, juste mis en dessous. Je sais qu'on va s'en débarrasser et juste te montrer par exemple, coller le dedans. Voyons s'il y a des problèmes. Jetons un coup d'oeil. C'est l'ancien. La nouvelle, ça ressemble à ça. Il y a une carte et une vidéo en dessous. Maintenant, vous pouvez faire des choses comme en faire une largeur de 100 pour cent. Que pouvez-vous faire d'autre ? Regardons un peu le code parce que nous avons dit que ce serait la hauteur et la largeur, ok ? Je vais en faire une largeur de 124. Qu' est-ce que c'est égal ? Je ne suis même pas sûr. Puis-je supprimer la hauteur ? Je pense que vous pouvez simplement supprimer la hauteur et le laisser faire pour vous. Non, vous devez déterminer quel est le ratio et le rendre plus grand. C' est une vidéo vraiment maigre. Je ne sais pas ce que c'est, alors je vais le laisser pour le moment. C' est un gâchis que mon cerveau ne peut pas faire maintenant, temps d'avoir des nuits trop tard pour les maths. Jetons un petit coup d'oeil. Oui, ajouter des vidéos. Je vais juste en mentionner quelques autres maintenant que vous pouvez partir et faire. Twitter fait la même chose. Si vous voulez ajouter votre flux Twitter, ajouter un peu de vie à votre site Web. Allez sur Twitter et ils ont un code d'intégration pour que vous puissiez intégrer un flux de vos tweets, ok ? Vous pouvez aller sur Facebook et mettre votre groupe Facebook ici aussi dans différents messages. Que pouvez-vous faire d'autre ? MailChimp en a un. Dis que tu veux ajouter une inscription par email, accord ? Vraiment rapide et facile. Allez à MailChimp, inscrivez-vous et ils vous donneront un peu de code d'intégration que vous pouvez simplement coller sur votre site et ils feront tout le levage lourd. Ils vont récupérer les e-mails. Ils les confirment pour vous. Ils vont les ajouter à une liste que vous pouvez leur envoyer des e-mails ou l'un de ceux que je voulais montrer que vous étiez OpenTable. OpenTable, ce n'est pas déjà grand ici sur l'Irlande, mais je ne parle pas dans le monde entier. Mais de toute façon, disons que vous voulez ajouter une réservation, parce que le moment où nous avons juste ce truc raisonnablement boiteux, alors que c'est ? Peut-être qu'on est là qui a un bouton ? Ok, mais disons que s'ils veulent réserver une heure et un endroit et que vous ne voulez pas avoir à coder tout ça, parce que c'est vraiment compliqué. Il peut être, vous pouvez aller à OpenTable et si vous avez été accepté, dites que vous êtes le propriétaire du restaurant, d'accord ? Ou le concepteur web du restaurant, vous allez devoir les amener à s'assurer qu'ils ajoutent leur restaurant et qu'ils doivent sauter à travers les cerceaux pour dire : « Oui, je suis un restaurant et c'est une OpenTable ». Ce que vous pouvez faire alors c'est qu'ils ont le créateur de widget, ok ? Je n'ai trouvé qu'un tout nouveau restaurant, Philadelphie. Je n'y suis jamais allé. Mais ce restaurant, parce qu'il est sur OpenTable, vous permet de créer un widget très rapide et facile, ok ? Vous pouvez choisir l'outil de taille. Copions le code, jetons-le dans votre site et espérons qu'il ne le casse pas. Où vais-je mettre le mien ? Je l'ai mis juste en dessous. Coller, voir ce qu'il fait. Jetons un coup d'oeil. C'est là, cool. Il passe par et quelqu'un peut aller, je veux faire une réservation pour l'instant et pour deux personnes à 19h00 et cliquez sur « Trouver une table » et il enverra une demande de réservation à OpenTable. Je suppose que je vous ai montré tout cela, je l'ai mis plusieurs fois, mais je voulais partager ce truc de code intégré parce que tout ne doit pas être fait par vous. Vous pouvez vous tenir sur les épaules de géants qui ont fait cool petits codes d'intégration. Tu peux les arracher et les coller ici. On en a parlé d'autres ? Quelques autres que j'utilise est Eventbrite. J' ai créé mon entreprise de classe assis autour d'Eventbrites. Les codes d'intégration m'ont permis de faire à certaines personnes de prendre des billets et d'entrer dans mes cours sans que j'aie vraiment à faire beaucoup. Je vais passer par là et le supprimer. Je vais l'enregistrer pour cette vidéo mais je la supprimerai pour la prochaine. Quand je me réveillerai demain et que nous commencerons notre prochaine vidéo, ces gars seront partis parce que la carte reste, mais le reste, c'est que des trucs ont été jetés pour apprendre. Comment ça s'est passé les gens bien ? Je vais voir dans la vidéo suivante. 32. Comment mettre votre site web en ligne sur Internet avec votre propre domaine ?: Hé mon pote, c'est vivre toi et moi. J' ai eu l'impression que ce matin nous allons commencer la journée, nous allons faire des vidéos en direct parce que j'ai impression que nous sommes coincés derrière l'écran trop longtemps. Aujourd'hui est une journée très excitante, pour sortir cette vidéo est une vidéo très excitante parce que nous arrivons à coller notre internet, notre internet. Notre site web en ligne. On va faire deux choses. Nous allons acheter un nom de domaine et obtenir un hébergement, puis nous allons le coller et d'autres personnes pourront le voir. Le nom de domaine est quelque chose comme www.adarerestaurant.com nous allons vérifier si celui-ci est disponible et nous allons l'acheter. Ensuite, nous avons besoin de quelque chose appelé hébergement et c'est juste un service où ils vont dire, nous nous occuperons de votre site Web pour vous, vos images et vos HTML et CSS et nous nous assurerons que c'est disponible pour tout le monde. C' est la partie hébergement et le nom du domaine, c'est juste le nom. Très bien, les moments passionnants permettent de sauter derrière l'ordinateur à nouveau et de voir si on peut tout mettre en place. Bien, avant de commencer, je veux vous montrer ce qu'on fait à la fin. C'est ça. C' est soudainement comme si j'avais déjà vu ça. On l'a fait. Mais regardez, c'est maintenant sur adarerestaurant.com. C' est en direct sur internet. Les gens peuvent le voir. Les gens commenceront à faire des réservations et à nous consulter sur notre carte. D' accord, c'est ce qu'on va faire. Allons entrer maintenant. Bon, alors commençons ça. Ce sera deux parties, nous devons nous inscrire pour notre nom de domaine et notre hébergement. Nous le faisons ensemble et ensuite nous devons trouver un moyen de connecter notre VS Code avec cet hébergement pour le télécharger. Où allons-nous acheter un nom de domaine et un hébergement ? C' est à vous de décider. Il y a beaucoup de sites qui le font. Ma recommandation est un endroit appelé Bluehost, et c'est ce que nous allons faire dans cette vidéo, mais il y a beaucoup d'autres alternatives. Pourquoi choisir Bluehost ? Si vous voulez aller sur Bluehost, allez BringYouRownLaptop.com/Blue et il vous redirigera là. J' aime Bluehost parce que c'est celui que j'utilise. J' aime aussi parce que deux raisons nous gagnons tous les deux et j'ai un accord d'affiliation avec eux où je reçois une petite partie de votre inscription alors quand vous vous inscrivez, je reçois un peu. Tu peux me faire le tour si tu ne veux pas, tu peux aller sur BlueHost.com, c'est bon. Mais si vous utilisez BringYouRownLaptop.com/blue, deux choses se produisent. J' ai un peu plus et tu as un gros rabais sur ton inscription. Si vous utilisez ça, regardez, c'est Bluehost et il y a mon visage là-dedans. On fait des trucs avec Bluehost. C' est un peu sympa, ils ont fait un petit site web pour moi, ce que je n'arrive pas à croire. La chose cool à ce sujet est que vous obtenez votre nom de domaine gratuit dans le cadre de celui-ci et il a toutes les choses que nous allons avoir besoin pour cette et les futures classes que j' ai prévu où allons-nous faire WordPress. On ne fait pas ça maintenant. Si vous êtes à la recherche d'autres alternatives pour l'hébergement, il y a quelques choses que vous devez juste surveiller. Ne pas faire attention, assurez-vous juste qu'il est inclus. Vous avez besoin d'un domaine et d'un hébergement. Ce sont les bases. Après cela, ce serait vraiment cool s'ils avaient vraiment une installation WordPress très simple. Tu n'as pas à le faire pour tout ce cours parce qu'on ne le fait pas. Mais si vous prévoyez de suivre les cours plus tard, ce sera super pratique. Les autres petites choses à surveiller sont quelque chose appelé un certificat SSL. Assurez-vous qu'ils ont ça. La plupart d'entre eux l'ont maintenant et il devrait être gratuit dans le cadre de votre hébergement, ce Bluehost le fait. D' autres trucs nerdy est de s'assurer que c'est un serveur Apache et que vous pouvez exécuter PHP dessus parce que plus tard dans ce cours particulier, nous allons exécuter quelques PHP de base pour faire des trucs de validation de formulaire cool. Si ça s'est passé, vous y êtes tous comme de quoi il parle, utilisez Bluehost et suivez-moi. Bon, commençons. Cliquez sur Commencer maintenant. Bon, choisissez notre plan maintenant. Oui, il y en a toujours trois, pourquoi est-ce qu'il y en a toujours trois ? Pour vous, pour cette classe, tout ce dont nous avons besoin, c'est le plan de base. Vous pouvez faire le plus ou le choix plus. Ce n'est pas beaucoup plus cher. Mais la raison pour laquelle vous seriez est si je suis juste en train de concevoir un site Web, disons que je suis le propriétaire de Adare Restaurant et je n'ai pas besoin d'avoir 10 autres sites Web. Je vais juste utiliser basique parce que c'est la grande chose qui est différente ici. Domaine garé, sous-domaines, signifie juste celui-ci ici je peux être plus un web designer et aller, accord, j'ai 10 clients et ils utilisent tous le même hôte. Je dois acheter 10 noms de domaine donc adarerestaurants.com et puis je fais quelque chose pour dentiste de notre Dan, puis la conception web de Dan et ensuite la mécanique automatique de Dan. Je fais beaucoup de sites pour les gens, c'est là que vous pourriez décider d'utiliser ce plus ou ce choix plus afin que vous arriviez à faire beaucoup de sites Web en utilisant le même coût mensuel plutôt que, imaginez comme j'en ai acheté un et puis j'ai dû acheter une seconde un, je suis déjà à 5$ par mois donc je pourrais aussi bien aller pour quelque chose comme ça. Vous pouvez l'activer plus tard. Pour le moment, nous allons utiliser Select et nous allons choisir un nouveau nom de domaine. Maintenant, à ce stade, vous avez deux options, trois options en fait, votre nom de domaine, où vous pouvez choisir votre .com ou tout ce que vous voulez. Si vous avez déjà un nom de domaine, saisissez-le ici et Bluehost vous aidera. Fondamentalement, ce sont deux choses distinctes. Le nom de domaine est pointé vers l'hébergement et si vous avez déjà un nom de domaine, saisissez-le ici, Bluehost vous aidera pointer vers l'hébergement auquel nous sommes sur le point de vous inscrire. Si vous n'en avez pas, mettez-le ici si vous essayez de partir où il est parce que, comme parfois vous aimez en fait, je ne suis pas trop sûr, vous y allez. Je ne savais pas comment activer cela, mais il semble que lorsque vous essayez de laisser ceci, il dit, hé, ne peut pas décider d'un nom de domaine, vous pouvez le faire plus tard. Vous obtenez juste un crédit et vous pouvez l'ajouter plus tard. Si vous avez déjà passé une heure à essayer de trouver un nom de domaine, revenez plus tard et faites-le. Comment activer cette petite popup, aucune idée. Il suffit de vous remuer la souris. Je pense que si vous allez vers ça, le franchir, il semble le lancer. Maintenant, nous allons vérifier si le restaurant Adare est disponible. Cliquez sur Suivant. Je pense qu'Adare, c'est un mot bizarre, toute façon donc personne ne l'a, son disponible qui est génial. La prochaine chose à faire est évidemment que vous savez quoi faire là-bas. Détails de l'emballage. Le prix qu'on a bien eu. Je pense que c'est 2.95 pour les États-Unis. C' est un peu moins en euros, mais c'est basé sur 36 mois, donc trois ans et vous pourriez être comme wow, un grand engagement. Tu peux descendre à 12. Ça te coûtera plus cher par mois, c'est à toi de décider. L' autre chose à penser est ceux-ci, maintenant c'est à vous d'avoir un peu lu et le principal dont je vais parler est la protection de la vie privée du domaine. Lorsque vous remplissez les détails d'un nom de domaine comme celui-ci, c'est en fait une connaissance du domaine public. Les gens peuvent entrer et savoir qui est propriétaire du nom de domaine et trouver l'adresse. Ce que les gens font, pas moi, c'est certaines personnes mettraient une fausse adresse que je n'en avais jamais entendu parler avant. Mais une autre façon est de faire cette protection de la vie privée de domaine. Je ne sais pas comment ils font un coût mensuel qui le bloque aux gens, mais c'est le cas, vous devez contacter Bluehost pour obtenir l'information. Ce n'est pas facilement disponible. Mais lisez un peu ça. Je n'utilise aucun de ces trucs. Ils sont juste des extras facultatifs ont une lecture à travers eux. Je reçois un peu plus j'ai lu certaines de ces choses et j'ai donc un peu lu par vous-même et décider si elles sont bonnes pour vous et quoi d'autre. Je n'ai pas besoin de l'hébergement des e-mails. Détails de la carte de crédit. Signez votre vie loin, remplissez tous ces détails et je vous verrai dans une seconde après que vous êtes passé cette page, fera le reste. Ok, c'est la page sur laquelle tu finis. Rappelez-vous que si vous regardez ça à l'avenir, tout pourrait être légèrement différent, mais nous devrions finir dans un endroit similaire. Nous allons définir notre mot de passe pour le compte. Je le ferai sans que tu regardes. Tu détournes les yeux, promets-moi, et je te verrai dans une seconde. Mot de passe terminé. Allons à la connexion. Très bien, je vais aller à mon identifiant d'hébergement et je vais me connecter. Je te vois dans une seconde. Très bien, il essaie de nous amener à installer WordPress, ce qui est juste une façon différente de construire un site Web. Vous n'êtes pas en fait, eh bien vous le construisez, oui, mais en utilisant des modèles. Ce que nous voulons faire, c'est sauter cette étape en bas. Le tien pourrait être un peu différent. Ils changent cet embarquement tout le temps. Ils nous disent ici qu'ils vont mettre l'installation WordPress sur un domaine temporaire. Nous ne allons pas l'utiliser alors nous allons sauter, arrêter de construire, parce que c'est arrêter de construire ce site WordPress que nous allons juste aller à notre compte d'hébergement. Très bien et c'est votre tableau de bord. Commencer. Je ne veux pas acheter maintenant. Non, merci. Je suis sûr que je n'en veux pas. Merci beaucoup. Ce que je veux faire maintenant, c'est télécharger mon site. La prochaine chose que nous voulons faire est que je vais vous montrer deux façons de télécharger votre site Web sur votre nouveau domaine. Nous utiliserons les langues de l'homme grotte, super simples et ne peuvent pas être cassées. Ensuite, il y a la façon de le faire automatiquement directement à partir du code VS, ce qui est utile, mais un peu plus difficile à configurer. Nous cherchons le gestionnaire de fichiers. Ce n'est peut-être pas là, quand vous allez ici, ils peuvent bouger un peu, mais vous cherchez le Gestionnaire de fichiers quelque part. Le Gestionnaire de fichiers va se charger. Cette grande chose s'ouvre. C' est en regardant, rappelez-vous avant que nous ayons quelque chose appelé le site local. Laisse-moi te montrer. Sur notre bureau, nous avons créé ce dossier local appelé Project 1, et à l'intérieur de celui-ci se trouve notre site Web. Le seul problème, c'est que nous avons une page d'index et nous pouvons la voir, mais le reste du monde ne peut pas. Tout l'hébergement est qu'il y a une entreprise comme Bluehost qui dit, nous allons prendre ces fichiers et nous allons les partager avec le monde entier et nous allons nous assurer qu'il est en direct et connecté à votre nom de domaine. Quand les gens vont sur adarerestaurant.com, ils vont voir cet index et ils ont promis de toujours avoir un temps de disponibilité de 100 pour cent pour que tout le monde puisse le voir tout le temps. Ce qui se passe est, c'est la structure de dossier que vous obtenez. Votre site Web est conservé dans celui-ci appelé public_html. Double-cliquez sur public_html pour y accéder. Il s'agit actuellement de ce qui se trouve dans votre site Web. Ce n'est pas ce qu' il nous faut juste, il y a un site réservé ici pour nous. Nous allons tout sélectionner et le supprimer. « Sélectionner tout » et en haut ici « Supprimer ». Nous allons ajouter tout cela à la suppression. Laissez à la poubelle. Tu peux mettre la poubelle, c'est à toi de décider. Mais maintenant j'ai un fichier vide. Maintenant, je veux télécharger des trucs. Rappelez-vous que nous sommes dans le public_html. Allons au téléchargement. Ici, nous pouvons faire glisser des fichiers ou les cliquer un à la fois. Sélectionnez le fichier, faisons l'index, « Ouvrir ». Ça ne marchera pas à moins que nous ayons tous les autres dossiers. Nous [inaudible] à moitié travailler. Nous devons faire à la fois CSS et le HTML. Ou vous pouvez simplement le faire glisser, c'est à vous de décider. Vous ne pouvez pas faire glisser des dossiers dans cette chose pour une raison quelconque. C' est pour ça que c'est un peu cinglé de le faire de cette façon. Mais j'ai mon index et mon HTML téléchargés. Maintenant, je veux ajouter un dossier Images et les télécharger séparément. Retournons en arrière. J' ai ces deux-là et on a juste besoin de reconstruire ça. Nous avons besoin de ce dossier appelé images. Assurez-vous qu'il est orthographié exactement la même chose. Je vais faire un dossier, le mettre dans « Créer un dossier ». Ouvrez-le en double-cliquant dessus, téléchargez des trucs dessus. Trouvez nos images. J' en ai pas beaucoup, deux. Je vais les traîner à travers. téléchargement des images prendra un peu plus de temps. Je suis sur un terrible internet ici donc, ça va assez vite. Je suis le web designer qui travaille à l'ombre à côté des moutons, avec Internet terrible. Bref, c'est assez rapide. Revenons en arrière. On est à l'intérieur ? Oui. Retournez à public.html juste pour voir, vous avez tous là-dedans. Allons voir ça. Es-tu prêt ? C' est un moment assez grand. Je vais aller à une nouvelle fenêtre. Nous allons taper adarerestaurant.com. Es-tu prêt ? Tenez place. C' est comme un [inaudible] aller, le faire charger. Il y a une carte. La bonne chose à ce sujet est vous en ce moment, comme un étudiant peut aller à adarerestaurant.com et il sera probablement ici. Faites-moi savoir si ce n'est pas le cas. Parce que je n'ai pas payé mes frais d'hébergement, cela pourrait venir à un moment donné, parce que même si j'aime ce site Web, il ne sert à aucun autre but que l'apprentissage. C' est ce qui est cool, c'est que tout le monde peut aller voir ça. Vous pouvez l'envoyer à votre mère, vous pouvez l'envoyer à vos amis et dire, aller voir mon site Web. Vous pouvez commencer à poster sur les médias sociaux, j'ai fait un site Web. Je suis excité parce que même si c'est juste mon, j'ai fait un zillion de sites, et il y a juste ce moment, c'est comme la naissance de votre site Web. C' est vivant, tout ce travail acharné, les autres peuvent le voir. Le problème, c'est que personne ne va vraiment le voir. Personne ne va trouver ce site, à moins que je commence à partager et à dire aux gens et à l'ajouter à des listes, et ce genre de choses. Mais c'est vivant, c'est excitant. Une chose que vous pourriez trouver quand vous commencez est que, étonnamment, je suppose que pendant ce cours nous allions le télécharger ici, acheter notre nom de domaine. Les noms de domaine prennent beaucoup de temps à remplir. Souvent, vous devez attendre un jour ou quelques heures pour adarerestaurant.com pour travailler. Je suis vraiment surpris de voir à quel point Bluehost a fait ça. Je ne sais pas si c'est juste parce qu'ils sont géniaux. Il m'a fallu entre enregistrer ceci et faire ce lancement là, je ne sais pas, environ 15 minutes comme ça. C' est assez incroyable. Si vous allez à votre hôte et votre nom de domaine et que vous avez danswebdesign.com et qu'il n'est toujours pas de chargement est à venir avec pas reconnu ou ne peut pas le trouver, donnez-lui le maximum d'une journée. Si cela ne fonctionne toujours pas après une journée, contactez Bluehost. Bluehost sont géniaux au service à la clientèle. C' est la raison pour laquelle je suis vraiment heureux d'envoyer les gens à leur chemin parce que support Bluehost 24 heures sur 24 est vraiment incroyable. Où sommes-nous ? Ces gars, vous pouvez les appeler, vous pouvez utiliser le chat en direct, vous pouvez les envoyer par e-mail. Ils sont dingues rapidement de vous rejoindre. Ce n'est pas un chèque d'animal de compagnie, c'est juste plus de, toutes les entreprises ne sont pas aussi bonnes que ça, je voudrais que plus étaient. Le nom de domaine est arrivé. Tu devrais peut-être attendre un peu. Je veux juste sauter ici très vite, parce que j'ai dit juste attendre un peu. En fait, vous n'avez pas à le faire, vous devez attendre un certain temps pour que le nom de domaine soit rempli, mais il y a un nom de domaine temporaire que vous obtiendrez. Ils vous enverront probablement trois courriels ; inscrivez votre compte, quelques détails comme celui-ci. Vérifiez toutes ces informations, et vous trouverez l'un d'entre eux qui a ces informations importantes sur le compte. C' est celui que vous pouvez utiliser temporairement. Parce que si vous êtes un peu dégonflé parce que vous aimez, j'ai un nom de domaine et ça ne marche pas. Utilisez ceci, copiez et collez ceci dans le navigateur. Il s'agit d'une détention temporaire pour votre nom de domaine qui deviendrait plus tard en ligne. Utilise ça. Le vôtre ne sera pas adarerest, le vôtre sera quel que soit le nom de domaine que vous utilisez, donc ce sera différent pour vous. Revenons dans la vidéo. Encore une fois, si vous rencontrez des problèmes avec cela, avec l'hébergement, vous pouvez me contacter et je vous aiderai du mieux que je peux. Mais parce que c'est plus le truc de Bluehost, et qu'ils changent les choses et bougent les choses, ça peut être un peu plus facile pour eux et probablement plus rapide pour eux de vous aider. La maison est là où nous avons commencé. Récapitons simplement. Ce que Bluehost veut que vous fassiez, c'est de vous inscrire à WordPress. Nous avons ignoré cela et supprimé ce modèle du site. Ce que vous voulez, c'est le Gestionnaire de fichiers et recréez simplement les dossiers et téléchargez-le manuellement. D' autres parties intéressantes sur votre hôte se trouvent sous cette version avancée. Cliquez dessus, vous verrez tout cela à nouveau, mais il y a d'autres choses utiles ici, dépend de la façon dont vous voulez aller nerdy. Vous pouvez configurer votre adresse e-mail à partir d'ici, vous pouvez configurer le suivi du nombre de personnes ont été sur votre site, toutes sortes de choses cool. L' autre chose est, quelque chose appelé un certificat SSL sera créé et appliqué plus tard. Pour le moment, si nous allons à adarerestaurant.com, vous verrez qu'il dit pas sécurisé. C' est juste parce que ça n'a pas encore été fait et fait. Cela deviendra une lettre sécurisée sur. Si vous allez sur votre site, il dit que c'est un site Web à la recherche dodgy. C' est parce que la sécurité n'a pas encore été mise. C' est bien pour toi de regarder. C' est bon pour tout le monde à regarder, parce que ce n'est pas malveillant. Mais il nous faudra être là éventuellement, parce que Google n'aime pas les sites non sécurisés. Mais cela se produira automatiquement pour vous. Si ce n'est pas le cas, contactez Bluehost et demandez-leur de l'aide, mais cela semble être un processus automatisé avec eux. Je vous ai promis que nous ferions le long chemin qui est d'utiliser cPanel et File Manager, et de le mettre à jour manuellement. Maintenant, ce serait bien d'être juste dans le code VS et juste de l'envoyer automatiquement. Faisons ça maintenant. Cette vidéo est épique, non ? C'est assez long. Faisons-le dans la vidéo suivante, séparons-le. Je te vois dans une seconde. 33. Comment connecter Visual Studio VS Code via sftp à l'hôte bluehost ?: Salut là. Dans cette vidéo, nous allons utiliser VS Code pour se connecter directement à notre hôte plutôt que d'utiliser quoi que ce soit d'autre. Donc, nous utilisons leur site Web [inaudible] fait dans VS Code, nous allons installer ce plugin appelé SFTP. Cela va me montrer tout sur mon site bien, et quand je veux télécharger des choses, je viens de cliquer avec le bouton droit dessus et dire Upload et finit sur les symboles de mon site Web. Donc, dans cette vidéo, nous allons nous connecter directement à partir de VS Code. Nous allons utiliser quelque chose appelé SFTP, et c'est l'une des extensions comme nous l'avons fait plus tôt. Rappelez-vous que nous avons fait des extensions pour HTML Hint et Gareautrain. Comme les autres, SFTP est le plus courant en ce moment. C' est celui que j'ai utilisé et ça semble fonctionner très bien. Il a 4,5 étoiles, et a un morceau de téléchargements. Donc, vous allez vérifier quand vous le faites. Il y en a d'autres ici qui ont des listes d'étoiles, c'est ce que nous allons utiliser pour le moment. Lisez un peu comment ça marche, je vais vous montrer comment le faire. Le principal pour celui-ci est l'utilisation. Ça dit que tu dois faire ça. Vous devez ouvrir la ligne de commande, le pellet de commande et exécuter cette chose, et je vais vous montrer comment faire ça dans une seconde. Mais en gros, voilà, c'est là que nous devons mettre dans les détails. Installez-le d'abord, donnez-lui une seconde. Il est installé, rien ne se passe vraiment. Vous avez peut-être remarqué qu'il y a une nouvelle petite icône ici qui ne fonctionne pas encore, nous devons la mettre en place. C'est ce qu'ils voient ici. Ils disent, faites ceci, exécutez le raccourci sur Windows ou Mac, puis tapez ceci dans. Nous allons donc le faire, et le long chemin est sous Afficher et Command Palette. La Palette de commandes vous permet de donner des commandes à ces plug-ins. C' est une façon grossière de le faire. Cela dépend, vous pourriez être heureux avec la ligne de commande du terminal, certaines personnes ne le sont pas. Ce que je veux faire, c'est que je veux taper SFTP, il devrait le pré-remplir. Pour configurer ce soit le logiciel, c'est ce que nous devons taper. Allons-y. Je vais fermer mon HTML et mon CSS. Je vais même fermer cela en double-cliquant dessus, donc c'est sympa et propre. Ce petit fichier JSON est les détails que vous devez remplir pour que cette chose fonctionne. Maintenant, vous, « Où puis-je trouver tous ces détails ? » Ce sont les choses qui sont arrivées dans un courriel. Ils proviennent soit d'un e-mail de Bluehost soit si vous accédez à votre compte Bluehost, vous les trouverez à partir de Home, descendez à Avancé, accédez à Comptes FTP et vous les trouverez au bas de cette page. Ce top ici est celui qui est généré automatiquement et qui doit avoir tous les détails dedans. Vous cliquez sur « Configurer le compte FTP » et voici les bases dont vous avez besoin. Le nom d'utilisateur, le serveur qui va et le port. Alternativement, si vous ne voulez pas utiliser ce plugin que nous utilisons dans VS Code, si vous êtes plus familier avec FileZilla ou Cyberduck pour Mac, vous pouvez les utiliser. Une instructions cool sur la façon de l'utiliser, c'est juste une autre façon. Nous allons donc les copier et les coller à travers. Qu' est-ce qu'on a ? Le nom du serveur, il s'appelle Bluehost. Cela n'a pas d'importance, vous pouvez taper n'importe quoi là-bas. Cette suivante, l'adresse de l'hôte, est vraiment importante. En ce moment, est l'hébergement local, sur ma machine, ce n'est pas ce que je veux. Je vais l'attraper ici, FTP. Maintenant, si vous utilisez autre chose que Bluehost, parfois il ne peut pas avoir le FTP devant lui et parfois il le fait. Donc, si vous utilisez une autre société d'hébergement, parfois il est là, FTP, parfois pas, dans ce cas il l'est. Maintenant, je pense que dans ce cas, nous utilisons juste FTP et non SFTP. Vérifions. Je pense que vous pouvez utiliser l'un ou l'autre dans ce cas. J' ai mis mon mot de passe, où est mon mot de passe ? Vraiment, il ne l'a pas, est une option. Je me souviens de ça quand je l'installais en premier. Cela a besoin d'un mot de passe pour entrer, mot de passe. Il suffit donc de le taper à l'intérieur des guillemets, deux-points et votre mot de passe entre guillemets et se termine par une virgule. Donc nous avons un nom, nous avons un hôte, nous avons un mot de passe, nous avons FTP, le numéro de port, souvent il est 22 dans le cas de Bluehost. Ils sont 21 là-bas. Votre nom d'utilisateur, où est mon nom d'utilisateur ? Il y en a là. Adareres, et le chemin distant. Dans ce cas, ils disent que mon chemin distant est, maintenant, ce n'est pas ça. Généralement pour à peu près toutes les sociétés d'hébergement qui ont je jamais traité avec son, laissez-moi jeter un coup d'oeil, gestionnaire de fichiers. Vous vous souvenez de public_html ? C'est celui qu'on veut. Tu te souviens de celui-ci ? C'est le dossier. Parce qu'en ce moment nous nous connectons à ce gros truc de directive dont nous n'avons pas besoin, nous voulons trouver ce public_html pour accéder à notre site Web. Donc ici, nous allons à public_html et ceci, c'est à vous de choisir. Upload-on-save Je l'accorde à false juste parce que le problème avec l'avoir comme vrai cela signifie, chaque fois que je clique sur « Enregistrer » rappelez-vous le fichier enregistrer tout, il va ensuite essayer de pousser mon site Web en direct à adare-restaurant.com. Si je manque une ceinture avec elle et que tout est cassé et à moitié réveillé, le site va être à moitié réveillé sur le côté. Alors j'ai mis le mien à faux. Bref, c'est ce dont ce type a besoin. Donc, nous allons le sauvegarder et nous allons le fermer, et nous allons à cette option ici pour notre SFTP. Vous pouvez voir notre petit hôte là-bas, vous allez le déposer, cette petite barre bleue va courir pendant un certain temps jusqu'à ce qu'elle se connecte à votre serveur. [ inaudible] bien sûr, c'est le cas. Voilà, tu y vas. Il a donc trouvé mon index, mon style et mes images. Le truc, c'est que ce n'est pas sur mon ordinateur. Ceci est en train de regarder ce dossier ici sur Bluehost qui est connecté à mon URL, qui est ceci. C'est ce que c'est. Donc, si je vais ici maintenant et je clique dessus, et je clique dessus avec le bouton droit de la souris et je dis supprimer, soyez très prudent. Vous voyez en bas, il est dit : « Êtes-vous sûr de vouloir supprimer votre page d'index ? » Je suis d'accord avec ça, donc je vais le coller une seconde. Mais parce que je l'ai supprimé ici, mon site va paniquer parce qu'il n'a pas de page d'index. Je vais frapper « Rafraîchir » Jetons un coup d'oeil ici aussi, vous voyez ça bourdonnement. Il pense à, il vérifie le serveur. Ce n'est jamais un processus rapide. Je pense que c'est parti, puis supprimez. « Es-tu sûr ? » Supprimer. Le fichier n'existe pas. Cool. Cette chose pourrait prendre un peu de mise à jour, même si j'ai cliqué sur « Mettre à jour », il est toujours la liste. Là, il est parti. Si je vais au restaurant Adare, me dis : « Hé, je flippe. Je n'ai pas de page d'index. » C'est la raison pour laquelle nous avons besoin de index.html. Ça me montre d'autres trucs ici. J' ai vu des feuilles d'images, mais ce n'est pas très utile. Alors, comment récupérer des trucs ? Disons que je suis dans mon Explorateur de fichiers, ce top, et ici je vais à la page d'index et je travaille dessus. Cet explorateur est mon truc local, ici, c'est la télécommande. Remote est considéré comme le disque dur de Bluehost. C' est pour votre site, comme pour d'autres personnes, c'est vous. Alors faites votre travail localement et ensuite vous le poussez en direct. Pour le pousser en direct, vous cliquez dessus avec le bouton droit de la souris et dites Télécharger. Off, ça va, et il devrait être en téléchargement. Espérons que dans une seconde, je peux aller à adarerestaurant.com et je devrais être de retour. Joli. Maintenant, ça va marcher bien pour moitié d'entre vous et le reste d'entre vous qui avez d'autres endroits va être, « Hey, ça ne marche pas, était si proche. » Comment on le répare ? Quelques choses sont que vous devez ouvrir la même chose qu'avant, pour revenir à faire les paramètres. C'est vraiment bizarre. Quoi qu'il en soit, c'est juste la façon dont les plug-ins fonctionnent dans VS Code. Je peux aller à View, aller à Command Pellet, et c'est la dernière chose que j'ai faite, et je peux ouvrir ce fichier JSON. Si vous ne vous souvenez pas comment le faire, vous allez à l'Extension, je vais fermer ceux-ci, et il me montre ceux que j'ai activés et vous cliquez dessus, et ils lisent à nouveau la documentation sur la façon de le faire . Vous pouvez voir qu'on vient de faire des trucs de base, il y a beaucoup d'autres choses qui peuvent y aller. Vous pouvez faire Watcher Folders qui est cool. Il y a beaucoup de choses que vous pourriez avoir à faire pour le faire fonctionner, peut-être à votre école, à votre université ou à votre travail. Alors, qu'est-ce qu'on fait ? Oh oui, des problèmes. Donc, je vais fermer toutes les extensions vers le bas, et je veux aller à View, Command Pellet et ouvrir ceci à nouveau. Si cela ne fonctionne pas, quelques choses que vous pouvez essayer facilement vous-même, c'est parfois que votre nom d'utilisateur a une adresse e-mail. Il peut être ceci sur adarerestaurant.com, mais parfois peut obtenir certains hôtes faire cela. Parfois, vous n'avez pas besoin de la barre oblique publique. Il peut simplement être levé par lui-même. Laisse la barre oblique là. Parfois, ça marche. Parfois, il doit être SFTP. Parfois, vous risquez de vous tromper de mot de passe. Nous avons parlé de l'hôte parfois il n'a pas besoin du FTP à l'avant, vous pouvez supprimer cela parfois. Le nom d'hôte ne fait rien. Juste les deux sont répertoriés dans ce petit dossier ici. Si cela ne fonctionne toujours pas, copiez ceci. Je vais effectivement copier et coller ceci dans un document Word moment et le coller dans vos fichiers d'exercice. Ce que vous faites, c'est de contacter votre hôte. Dites avec GoDaddy, votre HostGator ou quelqu'un d'autre. vois juste le ticket d'assistance et dis : « Hé, j'ai un compte avec toi et je ne peux pas le connecter. Pouvez-vous me dire quoi mettre là-dedans ? » Ils pourraient dire : « Oh tu le fais, tu as tort. Il faut mettre dans le port 23 ou 22 ou autre chose. » Ou ils vous diront comment le changer. La façon de le tester est, une fois que vous l'avez fait, sauvez-le. C' est peut-être une chose que vous avez mal faite aussi. Est aller à enregistrer le fichier, cliquez sur cela, et cliquez sur Bluehost, et j'espère que cela finira par remplir avec les choses sur votre site. Maintenant que vous demander d'essayer si cela ne fonctionne toujours pas et FTP peut être bloqué par votre fournisseur d'Internet, pas votre fournisseur d'Internet, mais dites que vous êtes à, je ne sais pas, un café ou un hôtel que vous essayez de faire cela dans ? Parfois, l'infrastructure là-bas, le réseau Wi-Fi, bloque les mauvaises herbes, des trucs comme ça, parce que vous essayez de vous connecter à un serveur en ligne et ils paniquent parfois. Donc, si cela se produit ou au moins le vôtre est cassé, essayez de vous connecter à un autre Wi-Fi. Disons que vous êtes au travail, essayez-le à la maison. Si vous êtes chez vous, essayez chez un ami et essayez exactement la même chose parce que parfois c'est votre Internet qui ne va pas. pas les détails, ce n'est pas le code VS. J' ai fait un tour parfois en faisant un hotspot sur mon téléphone comme, comment appelez-vous ça ? Tethering sur un iPhone ou un hotspot mobile sur mon téléphone Android, et je connecte mon ordinateur portable à cela et va essayer et ça a bien fonctionné. Si cela ne fonctionne toujours pas, contactez votre hôte. Ils sont là, ils sont très rapides, Bluehost est vraiment bon pour vous contacter et vous aider. Même chose. Je vais mettre ceci dans un document Word maintenant, essayez de me souvenir [inaudible]. Je vais le mettre dans vos fichiers d'exercice dans une seconde et ce sera sous Projet 1 et je l'appellerai Code FTP et c'est tout, je l'ai connecté, c'est en ligne. C' est excitant que les gens peuvent le voir, nous pouvons le mettre à jour, et si nous avons besoin de faire des amendes, nous le téléchargerons sur notre site. Ce que vous devez faire maintenant est de cliquer dessus, vous pouvez réellement attraper un morceau de choses, vous pouvez dire que je veux des images et tout cela, cliquez avec le bouton droit sur tous et dire Upload, et il va télécharger sur votre hôte. C' est tout pour le projet 1, c'est fini. C' est aussi loin que nous allons obtenir avec celui-ci. Nous allons passer à un autre projet, le projet 2 même. Il y a un atelier de réparation de vélos, nous allons ajouter des charges plus de détails à elle. Nous allons ajouter des formulaires, va être excitant, va être des lignes à votre pause. Secoue-le, j'y vais aussi et nous nous préparerons pour le prochain projet. On se voit dans une seconde. 34. Configurer notre nouveau projet de web design et discuter de nos sujets: Salut tout le monde. Cette vidéo va avoir deux parties. Nous allons parler des choses que nous allons réellement faire dans cette prochaine section du cours et aussi nous allons obtenir ce genre de trucs cool mis en place comme le Remote Folder et connecter le CSS, ce genre de choses. On le fera d'abord, on va tout ranger et se préparer, et ensuite on passera tout ce qu'on va faire. En ce moment, je suis sur mon explorateur ici. Nous utilisons actuellement le dossier local appelé Project 1. Je ne veux pas mettre un deuxième site web ici. Parce que nous ne voulons pas indexer les fichiers, parce que nous ne pouvons pas. On va aller à « Fichier » et on va à « Ouvrir ». Ça dépend de la façon dont vous aimeriez faire ça. Je vais aller à mon « Bureau » et faire un nouveau dossier. Je vais aller au « Projet 2 ». Excitant. Cliquez sur « Ouvrir ». Rien ne se passe vraiment. J' ai un dossier vide, retour à l'écran d'accueil. Contour. Je vais fermer en cliquant dessus. Je vais créer un fichier d'index et des styles et les connecter tous les deux. Fichier, Nouveau Fichier, celui-ci va être sauvegardé et il va au bon endroit. Joli. Index.html. On va l'épeler correctement. Tout doit être en minuscules. Créons un second fichier. Celui-ci va être sauvé. Ça va s'appeler Style. Style.css ou principal avec des styles. Nous allons les relier tous les deux. En fait, nous allons simplement les déplacer à travers en saisissant l'onglet. Allons tout être beau et joli avant de commencer. Allons connecter deux. Rappelez-vous, Point d'exclamation, appuyez sur « Retour ». Il met tout là-dedans, en dessous de ça. Ça n'a pas besoin d'être en dessous de ça. Je ne sais pas pourquoi, j'ai l'impression que le titre doit être en bas, mais il n'a pas à l'être. Ce sont des problèmes de commande. Plus tard, mais pour le moment n'a pas vraiment d'importance avec les styles tant que c'est avant la fermeture de la tête. Donc, nous allons faire le lien. Nous ferons un lien de CSS. Choisissons le style. Souviens-toi, juste deviné, mais c'est ce qu'on a. C' est ça ? Je pense que c'est tout. J' aime faire tourner les éditeurs ouverts parce que je trouve ça confus et c'est moi. Parlons des choses que nous allons couvrir dans ce cours. Allons le faire. C' est le design que j'ai fait dans Adobe XD. Si vous êtes comme, qu'est-ce que ce programme XD ? C' est un logiciel différent et c'est juste le design. Ce n'est pas un codage, ce n'est pas un vrai site Web. C' est comme une maquette. C' est un très bon programme. J' ai un cours là-dessus si tu veux aller vérifier. Cherche mon cours XD. Mais qu'est-ce qu'on va couvrir dans celui-ci ? Nous allons faire des choses comme des gradients en arrière-plan. Il y en a une légère. On va construire ce genre de cartes. Là où nous avons, nous allons regarder Icônes. Nous allons chercher à créer ces petits modules. La chose la plus importante que nous allons couvrir dans ce cours est quelque chose qui s'appelle Flexbox. On installerait des divs en ce moment et on les déplaçait. Nous allons devoir faire des trucs cool où ils s'empilent tous les uns à côté des autres et des bits sur la gauche et des bits sur la droite et le dernier projet pour garder les choses assez simples pour que nous puissions mettre en scène les choses. Je ne vais pas regarder ma liste ici. Nous allons commencer par une réinitialisation CSS. Qu'est-ce qu'on va faire d'autre ? Nous allons regarder les commentaires dans le code. On l'a déjà regardé. Hauteur minimale. Flexbox est la grande. On va faire des polices parce que le moment où on vient d'avoir cet Arial. Nous allons faire de fantaisie Google Fonts et nous allons examiner différentes tailles de police, des choses comme celles d'Em et de Rem. Nous allons regarder les images correctement, comment les créer. Les différences entre les JPEG et les PNG. Nous ferons ces boutons au lieu de simplement du texte. Il y en a un là-bas. Nous allons ajouter des ombres portées. Il y a une ombre portée sur ce type ici. Il y a des coins arrondis. Un autre couple de grands est que nous allons faire un menu déroulant. Lorsque vous réservez en ligne, cela va dérouler et aura effectivement une bonne navigation. Nous chercherons à créer un formulaire plutôt que simplement ce mailto vraiment simple que nous avons fait dans le dernier. Ce sera ça pour ce projet Quoi d'autre à couvrir ? Projet 3, rappelez-vous, va être un site web réactif. Pour le moment, celui-ci ne va pas s'ajuster pour mobile. On y va dans le troisième projet. Le quatrième sera bootstrap. D' accord. Prêt, prêt, allez sur ce nouveau projet. Je te vois dans la prochaine vidéo. 35. Qu'est-ce qu'une remise à zéro CSS, eric meyers ou normaliser ?: Salut là. Dans cette vidéo, nous allons discuter de choses comme normaliser, redémarrer, HTML5, la réinitialisation du Dr Eric Meyer. Fondamentalement, ils sont tous la même chose. Il y a tous appelés la réinitialisation CSS. Qu'est-ce qu'ils font ? La vraie version rapide est que par défaut, beaucoup sur les tags comme h1, h2. Comme certaines de nos listes dans les balises p qui auront le style appliqué à eux. Une réinitialisation CSS, vous modifiez votre CSS pour les obtenir tous la même apparence. Ce sont toujours des listes h1, toujours h2 et toujours non ordonnées. Mais ils ont tous la même apparence et nous, en tant que concepteurs, arrivons à passer à travers et décider quelles sont les tailles, quelle est la police, quel est le poids, sans laisser les défauts ou se battre contre eux. C' est une réinitialisation CSS, également noter dans cette vidéo à venir. Je dis beaucoup Eric Ries au lieu d'Eric Meyer, parce que je lis le livre d'Eric Ries sur Lean Startup pour la troisième fois et il est sur mon cerveau. Donc je vais basculer entre ces deux noms tout au long de cette vidéo. Désolé, Eric Meyer, entrons. Très bien, je sais qu'on vient de créer ces fichiers, mais ça se ferme. Nous allons d'abord créer comme un fichier à jeter, juste pour prouver les points et ensuite nous reviendrons à l'appliquer à notre projet réel. Nous allons créer deux fichiers, ajouter deux nouveaux fichiers. Sauvegardons ça. Celui-ci va être appelé supprimer moi 1, ou simplement l'appeler deleteme.html. J' utilise le mot supprimez-moi donc je donne la permission à mon futur moi de l'épingler sans même le vérifier. Tu sais que tu fais ces fichiers et que tu les as sur ta machine, tu aimes ce lien ? Si je l'appelle supprimer moi, je me donne la permission, supprimez-le sans même le vérifier. Je vais enregistrer ceci et j'ai deleteme.css. Nous en avons deux, deleteme.html, deleteme.css. Permet de les relier, les séparer comme le dernier. Mettez vos métadonnées et connectez-les, c'est une bonne pratique. Lien d'accord, CSS. Ce n'est pas appelé style dans ce cas. Ça s'appelle delete.css. Bon, alors qu'est-ce que ce truc de réinitialisation CSS dont vous parlez ? Fondamentalement chaque fois que nous faisons un document en HTML qui était des choses prédéfinies. Donc, si je fais un chacun, et que j'appelle celui-ci, mon titre et j'appuie sur save, puis je l'ai aperçu et il vous plaît noter que cela ne fonctionnait pas pour moi il y a une seconde, je ne pouvais pas trouver ce petit bouton. Si vous ne trouvez pas ce petit bouton, cliquez avec le bouton droit sur votre page ici et dites ouvrir avec le serveur live. Les joies des plug-ins. Un peu rapide pour ça. Je dois ouvrir ici. On sait que si on met ce cap, ça fait du Times New Roman un grand et audacieux noir. Il y a des caresses au-dessus. Il y a un peu d'espacement sur la gauche. Il y a certainement un peu d'espacement en dessous. Il y a les valeurs par défaut. Quelque part à l'époque d'Internet, quelqu'un a décidé que c'est à ça qu'un h1 devrait ressembler tout le temps. La première chose que je fais en tant que concepteur, c'est que je veux le changer et c'est là que la réinitialisation CSS entre en jeu. Je veux que le titre soit exactement le même que le titre deux, exactement le même qu'un paragraphe. Je déciderai de quelle taille ils sont, pas une sorte de lutte contre les défauts. Regardons le faire pour voir ce qu'il fait en premier. Ici, nous avons notre premier cap. Mettons-le dans une rubrique 2. Maintenant, mettre en place un en-tête prend comme corvée, ok, parce que vous devez penser à quelque chose pour le mettre comme si je le faisais tout le temps. Nous avons donc mis des faux textes appelés Lorem ipsum. Vous l'avez probablement retrouvé à différents endroits. Mais fondamentalement si je tape lorem avec un e, ok et hit retour et il met dans un tas de mots latins mélangés. Ils jettent des mots, mais ils sont tous en quelque sorte mêlés. Mais comme une sorte de cool comme, je vais le sauver, vous voyez que c'est juste un joli petit porte-place. Celle-ci est un peu longue. Je vais faire quelques choses. La première est que je vais remettre mon emballage en marche. Donc, si vous basculez le mot wrap et ce que je vais faire est, je ne veux pas autant de mots. Alors ça devient encore mieux. Lorem, c'est l'utilisation d'émit. Souviens-toi qu'on en a parlé avant. Donc petite abréviation et disons que je veux juste cinq. Donc, n'émettent pas d'espace, cinq, appuyez sur retour cinq largeurs. Eh bien, mettons un autre type de balises par défaut ou mettons une balise p. Je veux que celui-ci soit Lorem, disons 20, touche retour. Je vais mettre quelques autres étiquettes que vous ne connaissez pas encore. Allons UL, à l'intérieur de cet UL, mettre un LI. C' est une liste non ordonnée avec un élément de liste à l'intérieur. Si tu veux, qu'est-ce que c'est ? On s'occupera de ça plus tard. Donc UL et un OL avec LI est à l'intérieur. Si vous ne pouvez pas les faire arriver, ne vous inquiétez pas. Ce n'est pas vraiment important. Je dois écrire quelque chose au milieu ici, je vais ajouter quelque chose au milieu. Tu me regardes. Parfois, il devient un peu non fluide. Quoi qu'il en soit, liste non ordonnée est un point à puces, liste ordonnée et l'OL a un numéro, mais ils avaient leurs propres choses, est des espaces entre ceux-ci, ceci est indenté. Celle-ci a un grand écart, l'autre a encore un plus grand écart. Celui-ci est audacieux, celui-là ne l'est pas. Donc, effacons toutes les valeurs par défaut, mais en faisant une réinitialisation CSS. Maintenant, y a-t-il un spécifique que vous pouvez utiliser ? Non, il y en a un zillion. Tu peux en faire un. Celui que j'utilise le plus et c'est très populaire sur Internet. Si vous regardez dans vos fichiers d'exercices, il y en a un qui s'appelle le projet 2 et voyons celui-ci ici, CSS Reset, Eric Meyer. C' était le plus célèbre. Ce type ici. Développeur Wave, il a fait une réinitialisation CSS. Tout le monde l'utilisait. Il est mis à jour plusieurs fois. Je l'utilise toujours. J'adore, mais il y en a d'autres. Il y a des choses comme normaliser, nous allons discuter dans celui-ci, mais il y a d'autres que nous ne couvrirons pas ce genre d'alternatives pour cela. Il y en a un qui s'appelle normalisé, on le fait. Redémarrage, HTML5, docteur, quoi d'autre ? Ce sont ceux qui viennent au sommet de mon esprit, mais il y en a beaucoup et si vous êtes comme moi, vous finissez par commencer par quelqu'un comme celui d' Eric Meyer et ensuite l'ajuster comme vous voulez. Je vais l'ouvrir. Je vais copier tous ces trucs hors de lui. Je suis juste en train de sélectionner tout, de le copier, et je retourne à Visual Studio Code. Maintenant, où le mettez-vous ? Ce que nous allons faire, c'est que nous allons le mettre dans ce delete.css. On va le coller et c'est tout. C' est tout ce qu'on a à faire. Je vais sauver tous, deux côtés. Maintenant, regardons le document. Ça nettoie tout. Il dit juste que nous sommes tous pareils, nous sommes tous égaux ici et vous pouvez maintenant passer en tant que designer et dire, d'accord, maintenant en bas ici, après tout ça, je peux dire, je veux que mon h1 soit arial et maintenant nous allons mettre une police, famille d'arial, point-virgule. Alors maintenant, je peux décider et je le construis à partir de là. Pouvez-vous voir le genre de logique qu'il contient ? Au moins, ça ne vous plairait peut-être pas. Vous pourriez vouloir commencer avec tous les paramètres par défaut et c'est totalement amusant. Qu' est-ce que je fais d'autre ? J'essaie de parler et de coder. On y va. Je l'ai rendu plus grand. Je le fais chaque fois que je commence un nouveau site, je vais passer par, prendre celui d'Eric Meyer et juste le placer au début et travailler de bas en bas. Regardons celui-là. C'est dire normaliser. Je vais supprimer tout cela, le supprimer, et regarder celui normalisé. Il aime une saveur différente de lui. Ce que normalize fait, au lieu de réinitialiser ses valeurs par défaut, ce qu'il fait est, je vais copier tout cela, coller dans, l'enregistrer et jeter un oeil. Tu es genre, ça ressemble vraiment à ce que c'était et c'est en quelque sorte. Ce que je vais essayer de faire, c'est je vais ouvrir celui-là. Je reviens dans une seconde pour les comparer. Très bien, donc sous côte à côte et vous êtes genre, ils ont l'air de la même façon, mais regardez les appariements différents à l'intérieur. D' accord. Je suppose que la grande différence entre elle est, normaliser la cohérence des têtes entre les navigateurs. Nous savons que nous utilisons Chrome, dans ce cas, c'est notre navigateur, mais vous pouvez utiliser Microsoft Edge ou Microsoft Internet Explorer, Mozilla Firefox, Safari. Il y a beaucoup de navigateurs différents et le problème avec tous ces navigateurs différents, ils ont tous décidé de l'interpréter, nos balises h1 ou h2 ou p. Toutes ces choses sont légèrement différentes. C' est un peu difficile de montrer l'extrême. Donc je te montre en safari, ça a l'air différent. Firefox. Il a l'air différent, l'espacement est un peu différent. Maintenant, ce que normaliser fait, c'est qu'il va le rendre cohérent à travers tous d'entre eux. Tous ont le même rembourrage sur le côté, ils ont tous les mêmes espaces entre eux. C' est le travail de normaliser. Il y en a. Au lieu d'essayer de faire des choses et de tester sur un navigateur, et c'est comme, "Pourquoi est-ce différent sur cela, normaliser est un moyen de vraiment assez beefy bit de CSS. Ça essaie juste de faire en sorte que tout soit cohérent. Vous pouvez voir ici il y a beaucoup de commentaires. Vous pouvez voir cette petite option ici, ceci avec peu de hack rendra les tailles de police des h quand ils sont dans une section et un article cohérent sur tous ces différents navigateurs. C' est son travail, sa cohérence. C' est toujours une réinitialisation CSS, mais ça fait quelque chose de légèrement différent. C' est juste que tout ressemble à la même chose alors que celui d'Eric Ries fait tout, rien. Alors, allez tout ce que l'on voit, il y a tout le monde pareil, est-ce que ça a du sens ? Peut-être le premier, mais pas le second, c'est mauvais enseignement alors. Donc, ce que je vais faire maintenant est de ne pas l'appliquer, nous le ferons dans une seconde en fait, nous l'appliquerons à notre projet pour citer mais quelques choses à penser quand vous le faites , ce n'est jamais mettre cela à mi-chemin d'un travail parce que c'est comme une maison de cartes. Quand on arrête de construire des trucs, tout repose sur tout le reste. Vous avez vu une balise de corps pour être une police, mais vous changez la police h pour choisir une police différente et elle est construite au-dessus de cette balise de corps d'origine et c'est une tour vacillante. Donc, vous ne pouvez pas simplement aller et le jeter en haut de votre document et espérer résoudre certains problèmes, ne fonctionne pas, il suffit de l'oublier. Si vous avez un site qui ne l'a pas, je vous l'ai montré parce que vous aurez des sites qui ont déjà dedans. Tu serais genre, c'est quoi tout ça ? Je ne sais même pas ce que ça fait et tu commences à supprimer des trucs et ce sera comme, oui, ça ne fait rien. C' est parce que quelqu'un a utilisé une réinitialisation CSS comme ceci. L' autre chose à noter est qu'il est très opiniâtre. Les gens n'aiment pas celle d'Eric Ries à cause de X, Y, et Z et une autre personne, pense comme bon, mais ils devraient changer cela et il n'aurait pas dû faire ça et il y a eu beaucoup de ces différentes réinitialisations, j'ai déjà vous donné un couple mais il y a plein d'entre eux là-bas et vous trouverez les moments que nous aimons en fait qui voit ses réinitialisations ça ne marche pas pour moi donc vous allez créer comme un Eric Ries', Eric Reese et modifié par Dan. Je n'arrête pas de dire Eric Reese, c'est une autre personne d'Eric Meyer, c' est Eric Ries qui est le gars de la start-up ? Bref, tu as ce que je veux dire, non ? Bon, alors allons-y et mettons-en œuvre ça. Je ne vais pas l'enregistrer parce que c'était juste comme une petite page de test jetable et ce que je vais faire est que je vais le supprimer ici pour le rendre agréable et propre pour nos notes. Allons supprimer, parti. D' accord, alors ouvrez ces deux, double-cliquez dessus. Ils vont ouvrir deux onglets plutôt qu'un seul et nous sommes de retour. Donc, pour les appliquer, vous ne pouvez pas simplement les vider dans le CSS et la plupart des gens, moi inclus, aiment le garder dans sa propre feuille séparée. Donc, ce que nous allons faire est nous allons créer un autre fichier, appelé, sauver, et je vais l'appeler CSS reset mais pas d'espaces, CSS. C' est le repos. Réinitialiser, cliquez sur Enregistrer. Nous avons donc deux feuilles de style, une seule d'entre elles est connectée et nous devons les ajouter et c'est vraiment important où ça va. Donc la bonne chose à propos de CSS est que vous pouvez en avoir autant que vous le souhaitez, vous pouvez en avoir deux juste pour séparer tout le reste. Pour un petit site Web, vous n'avez pas vraiment besoin de le faire à moins que vous n'ayez quelque chose comme ça, comme une réinitialisation CSS comment l'appelons-nous ? Nous l'appelons CSS, réinitialiser ou se reposer ? La grande chose est cette commande, vous allez réinitialiser doit être devant votre feuille de style sinon il fera des choses vraiment bizarres parce que vous allez dire comme B H un et votre propre, disons que c'est de retour dans l'autre sens . La page se charge de haut en bas. La toute première chose que le navigateur voit est comme, Hey, je suis HTML et il monte les pouces et puis il dit, hé, je suis écrit dans la langue anglaise et il va les pouces vers le haut. Donc, il est en train de le lire par le haut et arrive à ici, puis vous arriverez à votre style et vous dites, je veux que mon frapper un soit blanc et dans la réinitialisation dit : Hé, tout le monde soit noir et puis il continue. Donc, vous pouvez voir comment le problème serait, les choses que vous avez portées sont toujours réinitialisées à la normale. Donc, il s'assure que la réinitialisation est au-dessus de votre CSS et j'ai eu mes styles n'est rien dans celui-ci. Ma réinitialisation CSS, je vais coller celle d'Eric Ries. Ne normalisez pas, copiez. Je vais vous montrer ça maintenant parce que ça a l'air bizarre, vous allez trouver des sites Web qui l'ont et quand on fera plus tard choses comme Bootstrap et ça va le faire pour nous, donc nous sommes ravis de le présenter maintenant. Vous pouvez voir ce qu'il fait quand il voit toutes ces balises ? La marge zéro zéro zéro zéro zéro zéro, je me débarrasse de tout joue et tu te souviens des O L que nous avions ? Où étaient-ils ? Ils sont ici quelque part ? Ils sont là, la liste ordonnée, les listes non ordonnées, dire aucun style de liste. Débarrassez-vous de la balle et du petit chiffre qui commence vient d'être effacé, s'il vous plaît. Très bien et ça va être que vous pouvez les fermer maintenant. Nous allons le sauver d'abord et maintenant rien ne va avoir l'air changé, mais j'ai ce petit jeu de style réinitialisé en arrière-plan, faisant son truc. Donc, quand j'ajoute un H et que je m'entraîne sur un petit raccourci là, enregistrez-le. Je vais l'ouvrir dans un navigateur, éteindre, l'allumer. Il y a un petit H, mais il est gentil et petit et il n'est pas décoiffé. Très bien, nous allons nous débarrasser de celui H, il était juste un petit détenteur et nous allons faire commentaires juste pour que cela soit vraiment clair pour nous-mêmes. On a fait des commentaires ici, tu te souviens ? On a fait des trucs et on l'a enveloppé dans ces étiquettes. Rappelez-vous qu'il s'agit d'une barre oblique de commande sur mon clavier, ou vous avez juste à taper les astérisques de barre oblique avant. Pour HTML, c'est un peu différent de code. Ce que je veux faire, c'est dire que c'est la réinitialisation CSS d'Eric Meyer. Juste pour m'aider plus tard sur mon futur moi à partir ouais, c'est ce que c'est. Donc, mais je ne peux pas juste le laisser comme ça, quelque sorte l'envelopper dans ma balise, vous pouvez utiliser la même commande de raccourci barre oblique avant sur mon MAC, contrôler barre oblique avant sur un PC et vous pouvez voir le commentaire HTML est beaucoup plus grand. Vous devez mettre entre crochets, point d'exclamation, deux tirets et l'autre côté est juste deux tirets et des crochets d'angle. Donc une fois que tu l'as là-dedans, c'est très pratique, donc je peux être juste un peu plus spécifique avec mon étiquetage de nuit. C' est ma propre feuille de style, je les sépare avec les retours parce que c'est comme Daniel rugit et le titre du document que nous avons presque oublié. Ça s'appelle cycles de rugissement et c'est Bike Repairs à Dublin. Joli mot clé juteux riche lampe de titre, faire un enregistrer tout et je vous verrai dans la prochaine vidéo. 36. Quelle est la hauteur minimale par rapport à la hauteur d'une balise div ?: Très bien, cette vidéo a deux parties. La partie principale est d'apprendre ce que min-height est au lieu de la hauteur. Ensuite, on va faire juste un peu d'entretien ménager. Nous allons ajouter une structure à notre page. Nous allons ajouter un conteneur et un flotteur au milieu, frappeur et Main et ces cartes en bas ici. C' est ce que vous avez fait avant, mais nous devons faire avant de passer à la prochaine vidéo. Voyons ce que min-height est dans le code. D' abord, on a besoin de quelque chose pour donner de la hauteur ou de la hauteur minimale. Tout d'abord, créons un div, appelé conteneur. Appuyez sur « Espace » ou appuyez sur « Retour » sur votre clavier, div classe égale conteneur. Je vais mettre un [inaudible] le séparer. Par ici, nous allons le styliser. Rappelez-vous, arrêt complet devant elle et conteneur, accolades. Ensuite, nous allons lui donner une largeur d'abord. Nous ferons la même chose qu'avant, 1024 pixels. N' oubliez pas les pixels, et n'oubliez pas le point-virgule. Donnons-lui une couleur de fond. Je vais choisir n'importe quoi, d'accord ? Je ne vais pas utiliser les noms. Je vais faire des variations de vert. Je vais commencer par le vert foncé, pour commencer. Assurez-vous que le point-virgule passe à la fin. Vérifions ça. Il ne sera pas capable d'être visible parce que nous n'avons pas encore donné de hauteur, mais gardons cela en vitesse. J' ai un peu de mon autre écran. Viens ici, mon pote. Bien. Nous devons lui donner une hauteur et c' est là que min-height intervient parce que si nous lui donnons une hauteur régulière et je dis que je le veux, disons, je vais juste dire 300 pixels parce que cela rend mon exemple plus facile. Jetez un oeil, mais nous rencontrons ce problème avant si nous commençons à ajouter des choses à cela, disons que j'ajoute une balise P et je mets beaucoup de contenu, nous avons un gros article long ou un bug post. Je veux dire 500 mots, ce qui n'est pas massif. Appuyez sur « Enregistrer », sautez ici maintenant. Vous pouvez voir qu'il se déverse. Au lieu d'utiliser une hauteur, c'est très simple, nous utilisons juste une hauteur minimale. Nous disons juste que le minimum que vous pouvez aller est de 300, mais vous pouvez aller n'importe quelle taille si le contenu en a besoin. On va sauver ça. Présentons un aperçu ici. Ici, tu y vas. Il dit être à 300 à moins que vous ayez besoin de plus, donc ça ira plus grand. Chaque fois que vous pensez à la hauteur maintenant à peu près pour tout, pensez min-height. Je veux le centrer. Pause ici, en tapant le centrage. Tu te souviens du centre ? Je veux que vous l'arrêtiez, voyez si vous pouvez le faire. Vas-y. D'accord. Tu es de retour ? Tu te souviens de ce que c'était ? C'était la marge à gauche. Ma marge, à gauche. Qu'est-ce que c'était ? C' était auto. Tu l'as eu. Beau travail. Puis marge droite, marge droite. Bon, vérifions ça. C'est au centre. Bon, donc on va jeter d'autres morceaux. Maintenant, regardons la maquette. C' est dans vos fichiers et Exercice Files, Project 2, il y en a un dans l'exemple appelé Mock up up. Regardez d'abord la page d'accueil. Tu peux ouvrir ça. J' utilise le fichier XT juste parce que c'est une directive, mais la même chose. On va avoir notre conteneur. Nous allons avoir un en-tête en haut. On va avoir une section principale, accord, alors on va ajouter des cartes aussi. le titre principal sera ce titre. Ce texte ici, ils ont été séparément, nous allons faire ces trois petits gars ici. Certaines personnes les désignent comme des tuiles, ou des cartes. Nous allons les désigner comme des cartes, mais les tuiles n'ont pas d'importance. Les petites boîtes que vous pouvez appeler comme vous voulez. Il suffit de les mettre et nous en discuterons plus tard dans le cours. Très bien, alors jetons ces bits dans mon emballage de retour sur, a pris un enveloppement de mots, que je cliquais sur le mauvais. J'ai été cliqué ici donc c'est l'emballage de mots sur CSS, qui est séparé. Maintenant, il le fait ici, et je veux me débarrasser de ce morceau géant de P tag. Était juste là à titre d'exemple. De quoi avons-nous besoin ? Nous avons besoin d'en-tête, un prédéfini, charmant. De quoi d'autre avons-nous besoin ? On a besoin d'une partie principale. Avons-nous même un pied de page sur celui-ci ? Il n'a pas de pied de page. Vous n'avez pas besoin d'avoir un pied de page. Je n'ai pas conçu celui-là, donc on n'en a pas. Ce que j'aimerais faire, c'est mettre en trois cartes. Ça va être en dehors de ce principal parce que je veux qu'il ne fasse pas partie de ce conteneur principal. Je veux qu'il soit sur toutes les pages et tu pars. C' est sur cette autre page est une petite boîte séparée. Il n'y a pas de prédéfini comme le conteneur. n'y a pas de nom pour les cartes qu'on doit lui donner. Je pense que ça s'appelle des cartes parallèles. Il a été fait et nous allons faire les trois petites cartes séparées et une seconde va faire comme une boîte dans laquelle ils vont tous aller. Nous allons concevoir un enveloppement d'étiquette qui va autour de tous ces gars, c'est le principal celui-ci ici et ensuite nous allons mettre petits morceaux individuels à l'intérieur. Idem avec l'en-tête. Nous avons fait ça comme gros gros gros gros ici en haut à l'intérieur de ça va aller, le logo, à l'intérieur de celui-ci va être ces petites étiquettes, désolé petits boutons. D' accord, donc j'ai des cartes, des cartes de style. On a un conteneur, on a un en-tête. On va avoir une couleur de fond de quoi ? Nous allons mettre des visions de ce vert. couleur de fond, il allait aller plus léger et plus léger que je vais le long. Nous ; allons mettre dans une hauteur min-min, min-hauteur. Maintenant, vous pouvez voir ça, ça ne marche pas. Ce n'est pas le pré-remplissage. [ inaudible] soit commence à faire ça c'est parce que nous avons oublié de fermer cette propriété en haut. Maintenant, si on commence à taper, elle est de retour. Ça va être un 100 pixels. C' est tout ce que je veux faire. Maintenant, on va le vérifier avant d'aller plus loin, qu'est-ce que j'ai fait ? Je n'ai pas appuyé sur « Sauvegarder tout ». Ils sont là. J'ai un conteneur qui est le vert foncé est un en-tête et à la fin. Regardons un peu. Maintenant, les couleurs sont ici juste pour votre plaisir de visionner de sorte que vous pouvez voir où les choses se déroulent et stylisent le principal et [inaudible]. Celle-ci va être encore plus légère. Joli. Celle-ci a une hauteur de 300. On fera la même chose pour les cartes. Je deviens vraiment paresseux maintenant. Impressionnant. Celui-ci s'appelle .cards. Celle-ci va être encore plus légère. Sauvez-le. Voyons ce qu'on a. Bon, donc il y a un conteneur qui se cache en arrière-plan. C' est couvert maintenant. Ensuite, il y a un en-tête, puis il y a un principal, et puis il y a mes cartes. Mes cartes sont trop grandes, n'est-ce pas ? Changons ça en une seconde. C'est bon. Bon, donc ça nous fait sortir de la structuration de base. Prochaine vidéo, nous allons regarder ajouter des cartes et travailler avec quelque chose appelé Flexbox. D'accord, je te verrai alors. 37. Faire tenir les balises div sur une ligne en utilisant Flexbox en HTML et CSS: Hé, là. Dans cette vidéo, nous allons parler de l'empilement des boîtes les unes à côté des autres. Ça semble simple. Dans le projet précédent et j'ai empilé tout sur l'autre pour une raison juste rendre cette partie du cours agréable et facile de nous faire commencer. Mais vous allez très vite vouloir mettre les choses à côté de l'autre, ce qui est tout à fait naturel. Mais par défaut, Si vous commencez à empiler des choses, j'ai fait ces petites boîtes, et je les colle dans mon HTML et par défaut ils veulent vraiment être les uns sur les autres. Tu aimes y aller, on va utiliser quelque chose appelé Flexbox pour les amener à rester l'un à côté de l'autre comme nous le voulons. Tu es prêt ? Je suis prêt. Allons-y. Avant de pouvoir ajouter notre flex, nous devons créer quelques conteneurs. Je vais créer à l'intérieur de cette classe de cartes à partir de, prendre ici, nous allons créer trois nouveaux divs à l'intérieur, et nous allons l'appeler carte 1. On va en avoir un autre, il semble, je vais juste tricher, copier, coller, coller. Tous les trois, j'en ai un, je vais les appeler carte un, deux et trois. Maintenant, je leur donne des noms spécifiques parce que plus tard dans le cours, je suis impatient de penser un peu, ils sont en fait de faire des choses différentes, parce que celui-ci a un fond de cette image, celui-ci a un autre , que l'on a une image différente. Ils font des choses différentes. Je vais leur donner des noms précis. Si vous êtes des génériques, il n'aurait pas à leur donner des noms séparés. Quoi qu'il en soit, au moins, ça pourrait être appelé carte 1. Maintenant, commençons toutes ces cartes. Nous commencerons avec la carte 1, puis nous copierons et collerons cela quelques fois. Nous allons lui donner une couleur de fond et une hauteur minimale, la même que celle-ci. Nous allons changer la couleur pour être quelque chose d'encore plus léger. En fait, nous allons changer de schéma de couleurs parce que mon plan vert ne fonctionne pas parfaitement. Je vais aller pour le, je ne suis même pas sûr. Je veux dire melon d'eau ? Non, [inaudible] non. Bref, rose. Nous allons y aller et rincer tout et choisir une couleur, et nous allons utiliser la même hauteur, mais la hauteur minimale au cas où il aurait besoin de grossir. On va lui donner une largeur parce que je veux trois d'entre eux là-dedans. Je veux, vous pourriez lui donner une largeur de pixel, il a une largeur absolue. Tu pourrais t'entraîner. Je ne veux pas aller 1024 divisé par trois, c'est gênant pour ça, et vous pouvez le faire. Ou une belle astuce facile est, peu importe si vous utilisez des pixels ou dans ce cas, nous pouvons faire une largeur de, vous le faites pour tout, pas seulement pour ces cartes. Nous pouvons faire la largeur des pourcentages. Si nous avons fait 33,3%, ça va aller à autre que, nous avons perdu un peu là-bas, mais ça va aller trois à travers facile. Regardons un peu ce qu'on a, sauvegardons tout et on y va, c'est ma première. Je vais dupliquer ça quelques fois, deux fois. [ inaudible] J'en ai trois. Toi, ça doit être toi, et toi, ça doit être trois. Je vais changer les couleurs. Briquet. Pas assez changé alors. Celle-là va aller super léger. J' ai trois nuances différentes de mon rose et par défaut ils alignent toujours les uns sur les autres, ce qui est juste la façon dont il fonctionne dans la carte. Si vous ne faites rien d'autre, ils essaieront tous de bien s'empiler les uns sur les autres. C' est là que Flexbox va entrer dans cette vidéo particulière. Nous allons les empiler joliment ensemble, et la façon dont Flexbox fonctionne est nouvelle car, comme si vous avez fait un cours précédent du mien, nous flottons à gauche et à droite. Cela fonctionne toujours, mais c'est juste plus difficile à mettre en œuvre parce que vous devez effacer float et ces types de choses. Si vous n'avez jamais entendu parler de flotteurs, ne vous inquiétez pas, Flexbox rend les choses plus faciles et c'est nouveau pour HTML5 et il fonctionne sur tous les navigateurs pour le moment, ce qui est cool. Tout ce que vous devez faire est qu'il doit y avoir une balise parent. C' est pourquoi ce groupe, ces cartes ont leur propre petit gang léger, ou leur petit parent. Ils sont le tag parent, ce sont les enfants, parce qu'ils sont à l'intérieur du parent. Ce parent doit être dit de fléchir et tout le monde à l'intérieur va bien s'aligner ensemble. Juste beaucoup plus facile à faire. Trouvez des cartes et nous allons dire « display ». Merci. On va dire « flex ». Assurez-vous que le point-virgule va à la fin et espérons, pendant que le travail est fait pour nous. Regarde ça. Maintenant, si vous êtes nouveau dans le web design et que vous êtes genre, oui, c'est cool. [ inaudible] Allons-y. Si tu l'as déjà fait et que tu es comme moi et arrête, non, c'est incroyable. J' adore ça, mais flotter avant d'effacer les flotteurs était un drame. Maintenant, ce n'est pas le cas. Mais je ne vais pas continuer parce que tu es probablement nouveau et que tu t'en fous autant et autant que moi. Mais la chose à récapituler est que parce que j'aurais pu m'en sortir avec ne pas avoir cet emballage ici parce qu'il n'y a pas de vraie raison parce que les finitions principales et ensuite ces gars commencent. Mais je voulais ce wrapper parce que tout ce parent parce que je veux lui appliquer flex. Vous ne pouvez pas les appliquer individuellement aux mecs étaient dudet. Vous devez le faire au parent à la place. C' est ce que nous allons faire avec Flexbox en ce moment. Vous ne pouvez pas vous précipiter pour en savoir plus sur Flexbox. J' ai intégré ce cours pour essayer et, je ne sais pas, de ne pas tout jeter dans une seule vidéo. Il y a d'autres choses à venir à propos de Flexbox, mais pour le moment, la plupart du temps je l'utilise est juste pour obtenir des choses à coller sur sa propre ligne. Oui, et c'est tout pour cette vidéo et je te verrai la prochaine. 38. Ajouter un espace régulier entre les balises div en utilisant la méthode flexbox sans marges extérieures: D' accord, tu reviendras, je suis de retour avec cette vidéo. On va parler d'espacement et entre nos petites boîtes ici. Super facile à utiliser Flex Box. Le tricheur est juste d'ajouter ça et vous êtes en faveur du parent. Mais parlons un peu plus dans la vidéo pour que nous le comprenions vraiment. En plus, il y a une feuille de raccourci à la fin. se voit dans une seconde. Vous l'avez peut-être vu dans la dernière vidéo, mais avant de commencer, nous devons résoudre mon problème de syntaxe. Vous avez peut-être remarqué que j'avais oublié de mettre ces points-virgules à la fin. Pourquoi ils ne l'ont pas cassé encore fonctionnant bien. C' est parce que, c'est la dernière chose dans cette liste. Donc, en arrière-plan, il a besoin du point-virgule pour savoir que c'est fini. Ensuite, la même chose avec une hauteur minimale, il a besoin de le savoir. Puis celui-là pour commencer, mais il n'y a rien après, donc c'est bon. Ce n'est pas avant que tu partes, je veux faire quelque chose avec l'écran, mais ça ne marche pas. C' est la mauvaise couleur et ne se remplit pas. C' est parce que j'ai ces gars. C' est très bien. Va dans l'autre sens. Donc, ce que nous voulons faire est, nous voulons ajouter un peu d'espacement et nous allons vous montrer le mauvais chemin puis le moyen vraiment facile. Ok, on pourrait juste passer parce qu'on doit faire les boîtes un peu plus petites parce qu'il n'y a pas de place pour le moment pour l'espacement. Donc on pourrait juste entrer ici maintenant et faire 30 pour cent pour tout ça. Maintenant, je vais utiliser mon multi curseur. Ai-je déjà fait multi curseur ? Si nous ne l'avons pas fait, vous pouvez maintenir l'honneur Mac. C' est la touche Option. Sur un PC, c'est la touche Alt. Vous pouvez cliquer une, deux, trois fois, voir mon curseur clignotant ou tous. Nous l'avons fait d'une manière légèrement différente. Si vous n'êtes pas sûr du raccourci ou qu'il ne fonctionne pas pour vous, C'est celui-ci ici. Vous pouvez basculer entre le clic de commande pour le curseur multiple, ou il y a une autre option qui est le clic alt. Vous pouvez basculer entre ces deux-là, il suffit de déterminer lequel fonctionne pour vous. Nous irons à votre PDF de raccourci dandy que nous vous avons donné. Tu te souviens de ça ? Prenons un 30. Enregistrez tout, prévisualisez. Maintenant, on a des espaces partout ici, donc on veut le mettre entre les deux. On pourrait faire ça, on pourrait faire marge. Donc le premier va avoir un peu de marge sur la droite, et disons que nous voulons qu'il soit 20 pixels. Puis celui-ci, je veux 20 pixels à droite de celui-ci aussi. Ensuite, sur celui-ci, vous aimez trop demander, donc il est augmenté. Celui-ci un peu jusqu'à ce que nous l'obtenions au bord et que vous finissiez, le plus gros problème est lorsque vous mélangez des pourcentages avec des tailles physiques. La chose vraiment facile à faire est de supprimer ceci. Un autre des avantages de Flex Box. Nous allons apprendre beaucoup d'avantages de Flex Box. Il nous faut les largeurs. Tout ce qu'on doit faire au parent, c'est dire, j'aimerais que tu justifies le contenu, et je veux qu'il y en ait plein. On va utiliser l'espace. Maintenant, il y en a deux que vous allez utiliser de l'espace autour d'eux. Faisons autour, et puis mettre un autre point-virgule. Donc tous les enfants vont bien s'espacer, regardons un peu. Alors mettons de l'espace de chaque côté. Donc, ils ont tous les deux des montants égaux de chaque côté. Ils doublent au milieu parce qu'ils se connectent tous les deux. L' autre façon de le faire est l'autre. Donc nous avons fait de l'espace autour, et l'autre est appelé espace entre. Sauvez-le. C'est celui que je veux. Voilà, tu y vas. Alors les sépare bien. Merci, Flex Box. Si vous êtes comme, ce truc de Flex Box, je ne m'en souviendrai jamais aussi, parce que je fais ça. Est-il justifié le contenu ? Il y en a un autre qui s'appelle justifier les éléments. Ce que j'ai fait, c'est que je vous ai donné dans vos fichiers d'exercices, dans votre feuille de raccourci, cette chose appelée feuille Flex Box de Joni Trythall, ça va faire. C' est vraiment cool, vraiment joli aussi, bon travail. Vous voudrez peut-être l'imprimer. Vous voudrez peut-être le regarder comme ça, et ça me donne juste une compréhension de base d'eux. Vous pouvez voir ici pour activer les pouvoirs de Flex Box, le conteneur doit avoir affichage Flex dessus, puis les enfants disons celui-ci ici. Celui qu'on voulait, c'est que faisons-nous ? Nous avons justifié l'espace de contenu autour, l'espace entre aller droit aux bords. Donc, il a un joli petit visuel de celui-ci que je trouve est super utile et vous pouvez juste passer par. On va couvrir beaucoup de ça dans le cours. Mais nous reviendrons à celui-ci. Merci pour ce Joni. C' est tout pour celle-là que nous avons fait notre espacement, allons dans la prochaine vidéo. 39. Comment avoir 2 balises div de tailles différentes dans la même rangée html css flexbox: Salut là. Dans cette vidéo, nous allons faire des tags div de tailles différentes. Nous avons fait des choses uniformément espacées, sympa et facile, mais dans ce cas, je veux que celui-ci soit deux tiers et ce soit un tiers de cette partie principale de mon site Web. Ça ne va pas regarder ça joli, notre version va ressembler à ça, mais c'est le même principe. Deux tiers, un tiers en utilisant Flexbox et display flex. Pour commencer, nous devons ajouter deux boîtes. Cette boîte ici qui va avoir mon H1 et la balise p et ce bouton dessus, et cette autre boîte ici pour avoir l'image dedans. Il va y avoir deux grosses boîtes ici. Mettons-les dans notre HTML. Où vont-ils aller ? Ils vont aller à l'intérieur et mettre un retour, et je vais mettre dedans. Comment je vais les appeler ? Je pourrais les appeler sections. Je vais juste les appeler tags div. Sections, articles, je suis confondu avec. Celui-ci va être div de l'hérobox1. Mettons ça d'abord. Souvent, cette zone, la tête de mât principale peut être appelée une hérobox. Eh bien, l'image de héros ou l'image principale, héros s'utilise un peu, je l'utilise un peu. Donc nous avons deux boîtes. On va avoir celui-là, je vais le copier, le coller. Donc on en a deux, et je vais leur donner noms différents parce qu'on veut qu'ils soient de tailles différentes. Joli. Séparons ça un peu. Je dis que je le fais pour toi, mais c'est pour moi. Je suis une personne visuelle qui fait du code. Dans l'hérobox, je veux ajouter quelques choses. Je veux ajouter un H1, cool, et je veux ajouter peut-être Lorem, peut-être des largeurs complètes pour le frapper, et je vais ajouter un p-tag, et ce p-tag va avoir peut-être 30 poids. Génial. Enregistrez-le, vérifions-le dans le navigateur. Voilà, tu y vas. Cool. Je veux faire la même chose pour la prochaine boîte. Je vais l'attraper, le voler, et mettre les mêmes choses à l'intérieur, hérobox2. Ce sont mes deux boîtes, elles ont exactement le même contenu, elles ont des noms. Quelques choses que nous devons faire, c'est d'abord, nous devons faire ce que nous avons fait dans les dernières vidéos, les empiler l'un à côté de l'autre. Ils ne s'empileront l'un à côté de l'autre que s'ils ont une largeur. On doit dire : « Vous avez une largeur. » Faisons ça d'abord. On va faire une citation hérobox1, et je vais donner à ça une largeur de disons 50 pour cent. Ça ressemble à un bon nombre parce que c'est la moitié, et nous ferons la même chose avec la deuxième boîte. Celui-ci va être hérobox2. Nous leur donnons les deux couleurs de fond différentes. Couleur de fond, et celui-ci va être, nous allons nous débarrasser de ces couleurs mais bleu bleuet. Joli. Celui-ci va être de couleur de fond, et celui-ci sera de couleur aléatoire la prochaine, crème à la menthe. Reprenons les. En fait, ils travaillent tous. Oui. Donc ils ont une largeur que j'empilerais l'un à côté de l'autre. Comment pouvons-nous faire cela avant tout ? Nous ne sommes pas inquiets pour les hauteurs en ce moment parce que ces bâtons et ça garde ces boîtes ouvertes. Si vous le faites sans ces balises h1 et p, mettez du contenu là, ou donnez-leur des hauteurs. Alors les empiler l'un à côté de l'autre. Tu te souviens du quiz pop, prêt, ville, qu'as-tu fait ? Suspendre ? Va essayer, empilant l'un à côté de l'autre, c'est exact. Le parent doit être appelé un flex d'affichage. Donc, dans ce cas, le parent est principal. Donc principal, je dirai « display », et nous dirons « flex », s'il vous plaît, et donc nous devons faire, tous les enfants, d'accord, qui sont ces deux gars, vont entrer, empilés l'un à côté de l'autre. L' autre chose à savoir sur Flexbox est que ce qu'il veut faire est, avant qu'ils ne soient vraiment courts, donc ils ne sont venus qu'au bas du texte, maintenant ils remplissent tout l'espace prévu. C' est comme une fonctionnalité de Flexbox. Tu ne peux pas éteindre ça. Je ne vais pas le couvrir maintenant, mais vous pouvez aller à votre feuille de raccourci et vous pouvez le faire pour qu' ils s'alignent au bas du texte. C' est à toi de m'expliquer comme ça. Ce que je veux faire, c'est ce gars ici, rappelez-vous que ce gars occupe environ les deux tiers et c'est environ un tiers. C' était facile avec ces gars, parce que Flexbox les empilera les uns à côté des autres. Je veux qu'ils soient séparés, et je pourrais utiliser des pourcentages. n'y a rien de mal à faire ça. Je peux faire de flexbox1 70 pour cent, et celui-ci ici 30, ça marcherait. Mais je veux vous montrer comment Flexbox le fait. C' est une autre méthode de le faire, et vous verrez qu'il se charge en ligne. Donc, vous devez savoir comment le faire, surtout plus tard dans le cours quand nous faisons Bootstrap et d'autres choses, d'autres frameworks, ils utiliseront cette méthode. Ce qu'ils diront, c'est : « Je veux être flexible  », donc c'est flexible : et tu décides de la taille que tu veux que celui-ci soit. Je veux que ce soit 2. Je veux que celui-ci soit un flex de 1. C'est un ratio. Je veux que vous preniez deux parties et une partie. Sauvegardons-le et vérifions-le. N' oublie pas les points-virgules faits. Regardons un peu, voilà. Il s'agit de deux parties, c'est une partie. Maintenant, je n'ai pas besoin de getters pour le moment, j'ai des couleurs ici maintenant, mais on va s'en débarrasser. Je suis heureux que cela ait acheté juste à côté, et nous allons ajouter un peu de rembourrage à l'intérieur pour que le texte apparaisse. Pour récapituler, si vous voulez des formes régulières, vous pouvez le donner, plus tard, vous pouvez utiliser des pixels. Les pixels sont mauvais parce que lorsque nous essayons de redimensionner une tablette, laquelle nous allons entrer dans le prochain projet, et il est préférable d'utiliser des pourcentages ou d'utiliser cette option où il est dit « Flex », l'un ou l'autre, cela n'a pas d'importance. Je veux juste vous montrer les deux méthodes parce que flex est génial et vous verrez qu'il se charge en ligne ou sur les sites Web d'autres personnes, ou les sites Web que vous héritez, c'est à vous de quelle façon vous voulez travailler. La façon dont cela fonctionne est que ce flex ne fonctionnera que si le parent a le flex d'affichage activé. Cela soulève la question comme pourquoi ne pas attraper le corps et dire en fait que je veux que tout le corps devienne flex, il suffit de le mettre sur flex et puis tout fonctionnera. La raison pour laquelle vous ne voulez pas faire cela est deux raisons. La première est que ça ne marchera pas. Ce qui finit par arriver, c'est que le parent doit être le parent direct. ne peux pas être le grand-parent, et ce truc parent-enfant avec qui je vais aller bien, mais tu dois être comme si tu vois que c'est une boîte à héroïne ici ? Display flex doit être sur ce type. Il ne peut pas être sur le conteneur qui est à l'extérieur du corps. Ceux-ci sont imbriqués les uns à l'intérieur de l'autre. Il doit être le descendant direct. Désolé. Tu as l'idée, non ? Donc ça ne marchera pas. En outre, flex fait des trucs, mélange les choses. Disons que je veux juste aligner tout. Je pourrais utiliser display flex sur le corps et dire, « Tout le monde s'alignent à droite », mais alors tout est aligné à droite, tout le site. Dans ce cas, nous arrivons à être très précis. Nous pouvons dire juste le principal, juste faire cette seule chose dans notre cas, comme la dernière était l'espace entre les cartes, que ce soit. C'est pourquoi. J' ai posé cette question, c'est pour ça que je te dis la réponse. [ inaudible] était comme : « Cela a renversé toute la chose. » Tu ne peux pas. D'accord. C' est tout pour avoir des tailles irrégulières en HTML. 40. Comment centrer verticalement le contenu d'une balise div html à l'aide de flexbox css ?: Salut là. Cette vidéo concerne le centrage vertical, super facile à utiliser Flexbox. Ce texte est ici à l'intérieur de cette plus grande couleur pourpre ici, et il est centré verticalement. Comme avec cette image, c'est en quelque sorte planer ici au milieu. Allons entrer maintenant et travailler à la façon de le faire. Souviens-toi dans la dernière vidéo, on a eu ce problème centré. Nous mettons le rembourrage en haut et en bas pour le simuler. D' accord. Donc, ce que nous allons faire maintenant, c'est utiliser Flexbox parce que c'est super facile à faire. Donc, ce que nous voulons faire avec notre autre maquette, nous voulons le contenu, je vais vérifier ces petites boîtes que j'ai ajoutées, pour être un peu centré dans ce genre de div principal ici. Maintenant, il y a deux choses que vous devez faire. Tout d'abord, la div principale, qui va à l'intérieur de, donc ces deux petits gars sont à l'intérieur. Cette div principale a besoin d'une hauteur, d'une min-hauteur. Donc, il a une hauteur min-300 qui va fonctionner parfaitement. Alors ce que nous devons faire, c'est que nous devons lui dire de faire quelque chose. Nous voulons utiliser les éléments d'alignement, aligner les éléments au centre. Sauvegardons-le, vérifions-le. Allez-y. D' accord. Donc, par défaut, nous avons vu dans la dernière vidéo, si vous tendez la Flexbox, elle s'étire en quelque sorte pour s'adapter à son parent, ok ? Avec cela, permettez-moi juste de le commenter, sauvez-le en fait. Peut-être que notre contenu est si grand, mais il s'étend, donc vous pouvez en quelque sorte le remplacer en faisant différentes choses. Donc nous disons en fait, passer le même test, donc ça suppose que j'abandonnerai tous les trucs supplémentaires et nous allons juste courir le milieu ici. Allez-y. Maintenant, c'est celui à mettre en signet. C' est de loin celui sur lequel j'envoie le plus de messages comme  : « Hey, comment as-tu recentré au milieu ? Ok, verticalement, oui, c'est difficile de se souvenir de faire. Mais comment te souviendrais-tu ? D' accord. Soit marquez cette vidéo, soit dans votre feuille de triche, vous passez par ça, et vous avez un coup d'oeil et vous dites : « C'est ce que je veux ? » Justifier le contenu jusqu'à la fin, ce n'est pas ce que je veux. Justifier le centre de contenu, c'est intéressant car il centre tout votre contenu. La plupart des gens ne l'utilisent pas. Ils font juste le centre de l'alignement du texte. Nous l'avons fait plus tôt pour notre image, qui semble tout aussi bonne. Mais en tout cas, espacement entre, on a fait ça, tu as juste fait défiler, et j'adore que tout ça soit visuel parce que je me dis : « Oh, regarde ça. » Vous voyez, nous pourrions aligner flex-end, mais nous faisons centre, juste test flex-end, juste [inaudible]. Donc, notre balise parent, faisons flex-end, faites-en un flex-start. Flex-start est par défaut et prévisualisez, allez flex-end. Flex-Start serait utile si vous ne vouliez pas qu'il s'étire. Jetons un coup d'oeil. Vous pouvez voir qu'il va au sommet sans sorte de remplir le reste de l'espace. Je vais annuler ça. Il y a quelques choses que nous voulons faire avant d'aller juste ranger parce qu'on vient d'avoir un texte réservé. Avant de faire ça, récapitons. Pour que cela fonctionne, il a besoin d'un parent. D' accord. Donc ces deux filles au milieu ici ou les gars, sont mes petits enfants et je veux leur faire le [inaudible]. Donc, vous l'appliquez au parent. Donc on n'a pas de parent dans la boîte. Supposons que vous regardiez cette vidéo plus tard et que vous dites  : « Mon site Web n'a pas de tag parent ». Mettez-en un autour. Enveloppez-le juste et dites appelez-le une balise wrapper. Tout ce que vous allez faire est d'appliquer une hauteur, et vous allez appliquer. Le flex d'affichage doit être activé. D' accord. Nous avons activé le nôtre par défaut dans les dernières vidéos. Si vous regardez juste cette vidéo, cela doit être activé aussi. Donc, il a besoin d'une hauteur, d'affichage flex, puis d'aligner les éléments au centre, et tout ce qu'il contient le fera. Bon, qu'est-ce que je veux faire maintenant ? Je veux commencer à supprimer certaines de mes couleurs. Alors, où est-ce ? Je veux me débarrasser de la couleur principale, la sauver, ou tout simplement continuer à tester cela pendant que nous allons le long. Ok, et vous voyez l'arrière-plan, c'est la couleur que nous avons utilisée pour le conteneur. Je vais m'en débarrasser maintenant aussi. Si vous les trouvez plus utiles, nous allons commencer à nous débarrasser des morceaux. Où d'autre ? On va se débarrasser du bleu. C' est une couleur très haute pour voir celui-là, cône bleu pâle et crème à la menthe, adieu crème à la menthe, aller parce que c'est ce que je veux. Nous allons remplir l'arrière-plan et un peu avec ce grand dégradé de fond dans cette image. [ inaudible], je veux remplacer le texte ici et l'image. Donc, le texte est facile. C' est dans vos dossiers d'exercice. Ok, il y en a un dans le projet 2. Il y a un texte appelé ou est-ce projet deux texte ? Ok, et puis là, les réparations de vélo mobile. Vous pouvez également taper cela et l'enregistrer. C' est le corps, le type de copie sous la balise p. Assurez-vous que lorsque vous faites cela, je perdrai souvent accidentellement ce dernier angle parenthèses, et je le fais, et puis tout va mal. Soyons prudents. Vous pouvez voir qu'il est mis là-dedans. On se casse ici parce que je l'ai copié et collé à partir de ce logiciel [inaudible] dedans. Peu importe quand il passera de l'autre côté. Juste l'ignore en quelque sorte. Vous n'aimerez peut-être pas ça, même si vous le rangez si vous voulez. Si vous voulez être sur deux lignes, c'est un bon point. On n'a jamais couvert ça. Donc, si vous voulez être sur deux lignes séparées parce que ce n'était pas le cas, ce sera juste sur une grande ligne. Même si vous mettez un retour ou des retours minces, n'a pas d'importance, d'accord ? Donc, ce que vous devez faire est de le mettre dans deux balises p individuelles. Je vais couper ça. Essayons de le rendre agréable et clair. C'est ce type. Bon, mettons un arrêt complet. Donc j'ai besoin d'une autre balise p ici. D' accord. Alors p, je vais le coller dedans. Voilà, deux étiquettes séparées. D' accord. Nous allons remplacer ce texte par une image. Alors, où sommes-nous ? Je veux tout ça ici. Je vais mettre une étiquette image donc img, et d'où est-ce que ça vient ? Nous ne l'avons pas encore mis dans notre dossier local. Donc tu te rappelles. Maintenant les fichiers d'exercice, il y en a un qui s'appelle. Je ne sais pas comment ça s'appelle. Attendez là. Là, c'est là. On va utiliser celui-ci ici, le service-A. Laisse celui-là pour le moment. On va regarder ça plus tard. Ok, utilise-le celui-là. Image-Bike-réparation, enregistrez comme un. Je vais le copier. En fait, non. Utilisez celui sans le a. Ça n'a pas vraiment d'importance, mais [inaudible] moi pour le moment, vous utilisez celui-ci. Nous allons les regarder quand nous faisons des images réactives dans un peu, et je vais les mettre dans mon bureau, dans mon projet deux. Je veux le mettre dedans, dossier Images. D' accord. Donc, un nouveau dossier ici appelé Images. Ouvrez-le, collez-le, rappelez-vous ça. Je vais supprimer l'erreur, ce n'est pas censé être là, attendez. Hé, mec, c'est parti. Maintenant, dans VS Code, nous devrions être en mesure de démarrer des images/remarquer ce qui est là. N' oubliez pas de mettre un texte alt. D' accord. Rappelez-vous que le texte alt est ce qui est chargé. Si l'image ne se charge pas, mais c'est principalement ce que Google aime voir. J' ai mis en personne l'entretien d'un vélo à Dublin parce que cela explique vraiment la photo, mais vraiment bourrer de bons mots clés dans mon site Web pour que je puisse potentiellement mieux classer. Bon, donc c'est tout. Regardons un peu ça maintenant. D' accord, il y a une image, et on a du texte qu'on doit formater, ce qu'on fera dans un petit peu. Bon, pour que nous puissions [inaudible] dans. Ça va aller mieux, je te le promets. Mais pour l'instant, c'est tout. Je te verrai dans la prochaine vidéo. 41. Projet de cours 3 - En-tête Flexbox: D' accord. C'est le projet de classe à nouveau. Je vais définir des tâches maintenant, et vous pouvez les faire vous-même. Dans la vidéo suivante, je vais vous montrer comment je l'ai fait, mais assurez-vous que lorsque cette vidéo se termine, allez faire votre travail, puis envoyez-moi une capture d'écran et soumettez-la puis envoyez-moi une capture d'écran et comme votre mission afin que je sache que vous l'avez fait. Ce qu'on fait, c'est cette structure en haut. Donc l'image et le texte. Le texte peut juste être un texte ancien. Je vais vous montrer les exemples finis. C' est à ça que ressemble le tien. Pas vraiment sympa, mais comparé à ce que tu avais, mieux. Cet en-tête ici, je veux que vous mettiez une image d'un côté, donc ce sera une balise div allant de ce côté avec votre image dedans. Ce sera un div de navigation de ce côté avec du texte dedans. Maintenant, le texte est juste un vieux texte ordinaire. n'y a pas de liens hypertexte ou [inaudible] dans les boutons dans une vidéo future, donc pas de balises P, juste de vieux texte assis là-dedans, et les règles sont, je veux qu'il ait un peu de rembourrage soit en haut et en bas. Nous allons enlever la hauteur une fois que vous avez obtenu le logo, enlever la hauteur de l'en-tête parce que c'est superflu, parce que nous allons ajouter un peu de rembourrage à l'en-tête haut et bas. Les grands font que ça soit à gauche et que ça soit juste. C'est délicat. On l'a déjà fait. Je vais vous donner un indice. Ça fait des trucs, la même chose qu'on a fait pour les séparer. Nous voulons aussi qu'il soit centré dans cette div. Donc, l'en-tête est lié à ce spectacle, mais l'en-tête est à peu près aussi élevé, ceux-ci sont assis au centre, donc l'image est le même que celle-ci. Jetons un coup d'œil aux exigences ici. Rappelez-vous, dans vos fichiers d'exercices, dans vos projets de classe, il y a le document Word. J' ai aussi dans votre projet deux projets de classe de fichier trois. C' est comme une capture d'écran de ce que vous devez vous diriger vers. Modifiez également la couleur d'arrière-plan. Vous auriez remarqué un grand changement. C' est la couleur là-bas. Retirez la couleur de l'en-tête chaque fois que vous êtes prêt et ajoutez le no logo et la boîte de navigation. L' image se trouve dans vos fichiers d'exercice, vous devrez donc la copier dans votre dossier local. C' est le texte à mettre en place. N' oubliez pas de le déstyler. Le NAV doit être aligné à droite. Retirez la couleur et la hauteur de l'arrière-plan de l'en-tête, ajoutez un remplissage en haut et assurez-vous qu'ils sont tous les deux centrés verticalement. Lorsque vous avez terminé, soit publiez-le dans les affectations. Ok, prenez juste une capture d'écran, ça n'a pas à être tout le code. Montrez-moi simplement que vous l'avez fait, et soit publiez-le ici dans les affectations ou vous pouvez le poster dans les commentaires sur cette page ou sur les réseaux sociaux et me taguez. D' accord. Donc, dans mon Instagram, je suis @bringyourownlaptop, Twitter je suis danlovesadobe et sur Facebook groupe, il y a un groupe Facebook. Va vérifier ça et juste étiqueter avec ceci pour qu'il soit facile de trouver les trucs Web pour moi. D' accord. Profitez du projet de classe. On verra comment vous allez. Aligner à droite ce sera le plus dur. Si vous trouvez ça frustrant, c'est bon, nous le ferons ensemble dans la prochaine vidéo. Bonne chance. Je te verrai dans un peu. 42. Projet de cours 3 - En-tête Flexbox COMPLET: D' accord. Souviens-toi, c'est à ça que ça va ressembler quand on aura fini. Il y a un logo sur la gauche. Le nav sur la droite ne fait pas vraiment beaucoup de trucs de la marine, mais vous comprenez ce que je veux dire, juste placer plus vieux prend pour le moment. Commençons. Voyons comment ça se passe. Ce serait intéressant de voir si vous avez fait vos devoirs et vous comparez le vôtre avec le mien. Oui. Voyons comment le tien est différent. On dirait qu'on l'a décrit, peu importe, il n'y a pas de bien ou de mal. Elle est cassée. C'est faux. Mais si ça a l'air bien, c'est bon. Tout d'abord à l'intérieur de l'en-tête, nous allons mettre deux divs. Maintenant que le premier il n'y a pas de logo prédéfini, nous allons créer un logo appelé et nous allons mettre notre image là-dedans et nous allons en créer un autre appelé nav. Mais il y a un nav. Si vous êtes allé l'appeler classe div égale nav, c'est très bien aussi. Ne vous inquiétez pas pour ça. A l'intérieur du logo ici, je vais mettre à mon image. J' ai besoin de le copier et de le coller parce que c'est dans mes fichiers d'exercice, projet 2 et ça s'appelle logo, Nous utilisons le png. Ne vous inquiétez pas si vous utilisez le svg. Nous regarderons svgs plus tard dans le cours, pour le moment, je vais le copier sur mon bureau, trouver mon dossier local, et aller au projet 2, dans mes images. Je vais le coller ici. Je l'ai déjà fait ou place. La prochaine chose que je veux faire est d'éditer, donc les images slash et il y a le logo là-bas. Assurez-vous de modifier tout le texte. C' est le logo pour les vélos d'atelier de réparation de vélos rugissent. Vérifions-le dans le navigateur. Génial, notre logo est dans. Ensuite, ajoutons le nav. Maintenant, j'ai juste dit d'ajouter le texte. Ça a pu être un peu déroutant. Il va le copier hors du fichier du projet. Je vais le coller et je vais m'en débarrasser. Sauvez-le. Jetons un petit coup d'oeil. J'ai un texto. Maintenant, j'ai besoin qu'il soit par ici à droite. Comment l'as-tu fait ? Il y a quelques façons et la façon dont je vais le faire est que je vais dire le parent, qui est l'en-tête, je vais dire que je voudrais que vous affichiez et que je voudrais afficher flex, s'il vous plaît. Voilà, tu y vas. Ils sont côte à côte. La prochaine chose que je veux faire est que je veux faire pousser vers la droite et l'amener au centre. Faisons ça en passant à droite. Je serais intéressé de savoir si tu l'as fait différemment pour moi. Dans le code VS ici, je vais dire en-tête, et je veux que vous les divisiez pour moi. Je veux aller à l'en-tête, et je veux dire justifier. Je veux justifier le contenu et je veux dire et l'espace autour. Je veux l'espace entre, les sépare. C' est peut-être le seul si tu dis  : « Je n'ai même pas pensé à ça. » Dans les voit les espacés et mettre des espaces entre eux agréable et uniformément et pas d'espaces sur le côté. Vous auriez pu le faire d'une manière différente. Essayer de penser à une autre façon. Vous pourriez avoir correctement aligné le nav, écrire les commentaires si vous avez trouvé une autre façon, oh, je sais que l'autre façon que vous auriez pu le faire, vous pourriez avoir fait flex. Flex un, puis flex deux, il peut avoir obtenu recross puis aligner à droite le texte dedans avec un sélecteur composé. Je suis intéressé maintenant. Faites-moi savoir ce que vous avez fait. La prochaine chose que je veux faire est de le mettre au milieu ici. Nous allons utiliser quelque chose de similaire. Nous l'avons fait avant, aligner les éléments et nous allons aller au centre. Jetons un coup d'oeil. Là, il est là. Tu te trouves parfois confus. Pouvez-vous voir qu'il y a un contenu d'alignement et les éléments. Fondamentalement, les éléments sont alignés simples, le contenu est des groupes d'alignements. C' est probablement plus facile de te montrer. Je vais zoomer pour que l'éditeur puisse zoomer. Aligner le contenu au centre. Pouvez-vous voir ? Il s'agit de plus d'une ligne de contenu. C' est comme des groupes de trucs là-dedans. C' est toujours aligner le centre dans la div alors que si je fais défiler vers le haut, les choses deviennent un peu agitées, il y a des éléments alignés au centre. Pouvez-vous voir ? Ce n'est qu'une rangée. Il va serrer sur une ligne. Articles, individuels, contenus, groupes de choses, ne vous inquiétez pas, j'oublie, vous oublierez. Essayez les deux et nous mettrons à jour plus tard. Merci, Microsoft. Qu'est-ce que j'ai dit de faire d'autre ? J' ai dit, nous allons nous débarrasser de la hauteur minimale et ajouter un peu de rembourrage haut et bas. Combien de rembourrage ? ne me souviens pas, je vais juste ajouter, qu'as-tu fait ? J' ai fait padding-top, et on dira 20 pixels. On pourrait changer ça, haut et même fond complet. La hauteur pourrait probablement rester là, mais je le veux. Oui, on n'a pas besoin de la hauteur, alors pourquoi l'avoir ? J' ai un peu de rembourrage de chaque côté. J'ai dit autre chose ? J' ai dit couleurs. J'ai dit une couleur de fond. Maintenant, comment avez-vous la couleur de fond ? Espérons que nous avons fait ça, au corps parce que c'est tout sur la page, nous sommes allés couleur de fond , nous y allons, et nous allons mettre dans ça, là nous allons. Remarquez qu'il y a quelques espaces supplémentaires là-dedans, peu importe. On y va. Débarrassez-vous de la couleur de l'en-tête, au revoir. Rangement. C' est ça. Nous avons tout ce dont nous avons besoin, regardons un peu. Cool. C'était notre tâche. Je me demande comment tu es arrivé là si c'est un peu différent. Laissez-moi un message, envoyez-moi un commentaire envoyez-moi une capture d'écran. Ouais, c'est ça. Je te vois dans la prochaine vidéo. 43. Comment créer un dégradé d'arrière-plan complet sur un site web CSS: Salut là. Dans cette vidéo, nous allons apprendre comment ajouter un dégradé à l'arrière-plan d'un site Web. On va s'assurer que ça va jusqu'au bout. Nous allons jouer avec la direction, nous allons finir comme ça avec un joli dégradé subtil. Mais nous allons regarder les mauvaises, nous allons vous montrer où trouver l'inspiration pour les gradients dans différents endroits sympas. Comment les choisir à partir d'un site Web en utilisant un petit plug-in cool. Si vous pensez que les dégradés sont suffisants, vous pouvez totalement ignorer toute cette vidéo. C' est comme 10 minutes de vie que tu peux avoir de retour. Si vous êtes intéressé par les gradients écoutez. Ajouter un dégradé est assez facile. On va le faire au body tag parce que ça couvre tout le fond. Nous avons une couleur existante pour le moment. Supprimons ça. Cool, donc la couleur de fond. Imaginez si nous pouvions simplement taper en background-grad. Il n'existe pas. Nous allons utiliser l'image d'arrière-plan pour ce faire. Image d'arrière-plan et puis vous commencez à taper dans l'une ou l'autre linéaire, donc l. Vous pouvez voir cela en haut là. Dégradé linéaire tandis que r, pour dégradé radial. C' est à vous de décider si vous voulez un cercle ou une ligne droite. Nous allons utiliser un dégradé linéaire et dans les parenthèses ici nous tapons en deux couleurs séparées par une virgule. On va juste faire du rouge et du jaune. Parce que vous remarquerez que quand je commence taper ce n'est pas pré-remplir les couleurs comme la normale, juste parce que c'est un cas d'utilisation bizarre donc de toute façon. Mettez dans votre point-virgule de fermeture, Sauvegarder tout, prévisualiser dans le navigateur. C' est là, ardent. Ne vous inquiétez pas que ça s'arrête ici. On va en parler dans une seconde. Mais pour le moment, oui, c'est tout. Dégradé linéaire et par défaut il va de haut en bas. Vous pouvez vous débrouiller avec cela en mettant une valeur juste en face du rouge. Vous pouvez soit utiliser 90deg, donc 90 degrés. Sauvez-le et maintenant il va de gauche à droite, ou il y a une syntaxe bizarre où vous pouvez faire. C' est bizarre, c'est bien. Tu peux dire à droite. Une partie est vraiment bizarre comme, hey, vous devez utiliser cette image de fond aléatoire pour faire un dégradé. Mais alors nous allons l'utiliser comme divers intervalles comme, je ne sais pas, code phonétiquement correct. Ça fera la même chose. À droite, à gauche. Jetons un coup d'oeil. Ça va dans l'autre sens. Ça n'a pas d'importance. Vous pouvez utiliser des degrés ou cela. Tout ce qui fonctionne pour vous. Je vais laisser tomber. Je veux juste aller tout droit de haut en bas. Vous pouvez ajouter plus d'un arrêt. Pour le moment, il passe du rouge au jaune, mais on pourrait dire du rouge au jaune au bleu. Ça va avoir l'air bien. Boum. Si vous avez utilisé quelque chose comme Adobe Illustrator, j'ai l'impression que c'est là qu'ils obtiennent des idées pour les dégradés par défaut. Ils sont terribles là-dedans. Quoi qu'il en soit, il y a plus de choses que vous pouvez faire. Je ne me souviens jamais de toute la syntaxe pour cela, donc j'ai mis un lien dans votre document texte. C' est dans votre fichier de projet 2 appelé Text. C' est tout le contenu que nous avons utilisé jusqu'à présent. J' ai mis ce lien ici. Pour w3schools.com et c'est une très bonne explication de tout ce que vous pouvez faire. Ça devient charmant, regarde ça. Ecoute, tu peux mettre des tas de couleurs. Pour les séparer, vous pouvez voir ici pour les séparer d'une virgule. Vous pouvez mettre de la transparence, vous pouvez faire des choses répétées. Je ne vais pas couvrir tout ça parce que tu cherches, je ne sais pas, à répéter. Wow, quelques bonnes. Il y a beaucoup de choses différentes que vous pouvez faire ici et juste avoir une lecture à travers pour obtenir ce dont vous avez besoin. Arrêtez de faire défiler alors. Tu rends les gens étourdis. Les autres choses que je veux vous montrer sont, où j'ai mes idées pour les gradients. Il y a quelques endroits. Grabient est vraiment bon. En fait, avant d'y aller, parce que vous ne vous souciez peut-être pas des gradients, mais vous pourriez vous soucier de l'endroit où cette chose s'arrête. Une ou deux choses, c'est celui-ci s'arrête ici parce que notre conteneur finit ici. Parce que c'est un tout petit site web en ce moment. Ça finit juste là et ça se répète. Ça se répète sur l'arrière-plan. Nous pourrions essayer un ajouter un pas de répétition, mais alors vous avez juste une boîte de couleur différente ici. La façon de contourner tout ça, c'est que je sais que je construis ce site, ça va s'allonger et ça va disparaître. C' est seulement là parce que mon écran est vraiment grand. Si je le rends plus petit, si vous utilisez un écran plus petit, vous n'aurez probablement même pas ce problème pendant ce cours. Tu dis : « Il n'y a pas de problème. » Mais sur les écrans de certaines personnes comme celui-ci, c'est un problème. Si je construisais le site, je le laisse juste en sachant que mon site va s'agrandir et que ça ne va pas être un problème. Parce que c'est là qu'on va. C' est la version gustative que j'ai faite. Parce que c'est si grand, ça va jusqu' l'écran et ça ne sert à rien de faire ça. Mais vous risquez de rencontrer ce problème, et tout ce que vous devez faire pour le résoudre est Visual Studio Code. En haut, nous allons l'étiqueter sur notre balise HTML. Mauvaise parenthèses. N'oubliez pas que notre HTML est le document entier. Alors le corps est tout ce qui l'utilise. Vous pouvez faire des choses au HTML. Cette chose ici, si je fais la hauteur à 100 pour cent, je ne sais pas vraiment pourquoi cela fonctionne. Je sais juste que ça résout notre problème. Je vois que ça se charge quand les gens disent : « Hey, mettez un gradient. » Mettez de la peau. Personne n'explique jamais pourquoi, et je ne sais toujours pas pourquoi. Revenons à notre original. On y va. Mon gradient spectaculaire, tout le long. Éloignons-nous de suffisamment de couleurs et regardons d'où je tire mes idées de dégradé. Un endroit vraiment sympa s'appelle Grabient. Gradient.com et ils ont juste des couleurs vraiment cool. Vous avez un tas de pages et si vous avez fait l'un de mes cours, vous en verrez probablement quelques-unes parce que je les utilise juste comme une idée ou comme un guide. J' aime bien celui-là. La façon dont j'entre dans VS Code est, pouvez-vous voir ici si je passe au-dessus de cette couleur ? Ça me donne ça. Je peux cliquer dessus, dire « Toi, mon ami, tu viens avec moi. » Je vais prendre le hachage et tout. Tout ce que j'ai à faire, c'est remplacer le rouge par ça. Celui-ci ici, copiez et collez. C'est juste assez facile. Coller et puis je vais me débarrasser du bleu. Merci, bleu. On y va. On a appliqué ce gradient. C'est un moyen facile. Mais ils vont bien. C' est sympa de les voir in situ. Je vais vous montrer quelques endroits que je trouve mon inspiration en général pour le design, pour le web design, mais aussi pour les couleurs. Deux endroits que j'utilise. J' utilise Dribble, dribble avec deux bs, et Behance, qui est celui d'Adobe. Je vais ici et l'un de ces deux. Ils sont très différents. Pour une raison quelconque, ils font un travail similaire, mais ils ont un aspect ou un type d'utilisation très différent. Ils ont différents types de contenu. J' ai fait une recherche sur ça pour le gradient. Apportez juste quelques gradients, mais vous n'avez pas à le faire. Mais disons, vous pouvez voir mes sentiments que les gradients viennent de ce genre de travail. Cela va changer. Si vous regardez dans le futur et que vous êtes genre, « Les dégradés sont si 2019. [inaudible], sortez d'ici. » C' est bien aussi. Ignorez toute cette vidéo. Mais disons que tu aimes ça et que tu  : « Oh, je veux vraiment faire quelque chose avec une couleur. » Je fais juste défiler, défiler. Où sommes-nous ? Je vais juste en choisir un qui me plaît. Dis que tu aimes ces trucs et je vais en choisir un et y aller. Je choisis celui-là. Voyez cette orange à cette autre orange. Je veux avoir ces deux couleurs. C' est dur de le sortir. Si vous connaissez Photoshop et Illustrator, vous pouvez le faire facilement. Faites une capture d'écran, apportez-la, utilisez l'outil pipette. Mais tout le monde n'aura pas ces compétences. Dans Chrome, Chrome a quelques trucs cool où le navigateur, vous pouvez installer quelque chose appelé une extinction. Un vraiment cool est ce qu'on appelle FileZilla. Mais si vous allez aux extinctions de Chrome, suffit de faire des recherches pour les extensions Chrome, puis pendant que vous êtes là, recherchez le sélecteur de couleurs. Un sélecteur de couleurs est le mot général pour tout cela. Trouver un qui a des critiques élevées et beaucoup de téléchargements, puis dire Installer et il apparaîtra juste en haut juste ici. Tu peux voir mon sélecteur de couleurs. Ensuite, je vais juste y aller, sélecteur de couleur, choisir la couleur de la page et ensuite je vais juste me déplacer jusqu'à ce que je puisse vous voir ici. C' est dur à faire parce que ma souris est ici, mais toi, les yeux, tu regardes ici. Écoute, tu y vas et tu le choisis. Impressionnant, et il est juste ajouté en haut ici à mon sélecteur de couleurs et il est également automatiquement copié dans mon presse-papiers. Tout ce que je dois faire maintenant est d'aller ici et dire Supprimer, Coller tout. Coller. C'est cette orange. Je vais choisir une couleur aléatoire, parce que si je choisis quelque chose de proche de ce rose, ce ne sera pas un bon exemple. Je vais juste choisir ce vert foncé ici. Cliquez dessus. Copiez dans mon presse-papiers, collez, enregistrez. Voyons notre site. Hé, cool. Je suis indécis. Mais vous avez l'idée. Behance est juste bon pendant que tu es ici. En termes de mes idées vantées pour conception web et comme preuve construire les sujets pour cette classe. J' ai dû construire un faux magasin de vélos. D' où puis-je obtenir les idées ? Il existe souvent un kit d'interface utilisateur ou une conception d'interface utilisateur. L' interface utilisateur est souvent un bon endroit pour obtenir des idées et des couleurs et des schémas et de la structure. Utilisez-le pour l'inspiration. Faites la même chose sur Dribble. Vous avez peut-être votre propre endroit pour avoir des idées cool, mais elles sont à moi. Avant de partir, nous allons ajouter les gradients appropriés de notre balisage. Peut-être que ce sont ces couleurs et elles sont dans votre texte ici. Celle-ci ici. Je vais les copier et les coller, et on passe à autre chose. Vous pouvez passer à autre chose maintenant pendant que je les colle. Coller, Enregistrer, Document texte. Si tu me demandais, « Hey, comment fait-il ce truc de saut d'un programme à l'autre ? » Je vous l'ai dit tout à l'heure, mais vous avez peut-être oublié. Sur un Mac, c'est la commande et l'onglet. Maintenez la touche de commande enfoncée et appuyez simplement sur la touche de tabulation jusqu'à ce que vous arriviez à la bonne, ou vous pouvez pointer dessus avec votre souris et simplement lâcher les touches. Sur un PC, c'est très similaire. Il est onglet de contrôle, ou est-il maintenez Tab. ou PC. Pas sûr. Essaie les deux. Jetons un coup d'oeil. On a notre belle couleur riche ? Nous le faisons. Juste un dégradé subtil. Pas trop. Ça va être tout, je te verrai dans la prochaine vidéo. 44. Comment modifier la taille de la couleur et du type de police par défaut sur un site Web à l'aide de HTML et CSS ?: Salut là. Dans cette vidéo, nous allons parler de la police par défaut et la changer, car par défaut il est noir et c'est Times New Roman. Nous voulons changer cela pour chaque balise qui est sur le côté, plutôt que de le faire individuellement. Jusqu' à présent, nous l'avons fait par tags, le h1 est maintenant Arial, et puis la balise p est maintenant Arial. Faisons-le une fois pour tout le site. C'est assez facile. La version courte est juste éditer la famille de polices à la balise body, travail fait. Pourquoi cette vidéo est-elle si longue ? C' est parce que je veux aussi parler de spécificité, alors traîne-toi pour ça. Oui, allons-y. Nous avons notre police par défaut, c'est Times New Roman noir, et c'est 16 points, c'est la valeur par défaut, nous voulons changer cela. Parce que ce que nous avons fait dans le dernier projet est chacun d'entre nous avons fait Arial puis nous avons fait le p tag Arial, donc nous l'avons fait individuellement, mais ce serait génial juste de les changer tous par défaut. C' est assez facile, on utilise le body tag. Body tag est le tout sur la page. Donc, dans cette balise ici, nous devons dire la famille de polices et ce sera Arial dans ce cas. On va faire des polices de fantaisie dans la prochaine vidéo, mais ce sera là, le titre, donc on a un h1 ici, où est-il ? Il y a un h1 et le p tag, ils sont tous Arial. De plus, je veux que la valeur par défaut pour le site soit une couleur de blanc, pas de blé. C' est ce que vous devez faire au début de tout ou au début d'un site Web. C' est juste sont dans certains trucs par défaut globalement. Ensuite, plus tard, vous pouvez le remplacer. Je veux parler de spécificité à nouveau en CSS, parce que c'est assez générique, c'est en haut de la balise body, tout est dans la balise body. C' est très générique. Tout ce que vous devez faire est de mettre quelque chose de très spécifique, comme, un h1. Dis juste, en fait, je veux que le h1 soit une taille différente. Nous allons aller même taille de police et nous allons choisir comme 80 pixels parce qu'en haut, en fait, nous n'avons pas dit la taille ici, n'est-ce pas ?. Disons que nous voulons changer la couleur de celui-ci au lieu de la taille de la police. Nous allons dire que nous allons utiliser une police, ou nous allons utiliser la couleur. La bonne chose à propos de VS Code est que parce que je les ai utilisés dans le code plus tôt, il me les a suggérés. Donc je vais le rendre noir maintenant. Le haut dit être blanc, mais ici il dit être noir. Parce que c'est plus spécifique, body generic et h1 est un peu plus spécifique, il va le remplacer. Maintenant, quand il n'y a pas une spécificité vraiment claire, disons que vous avez deux h1, donc cela finit par arriver. Cela semble stupide maintenant quand ils sont juste à côté de l'autre mais quand vous avez un très long document CSS ou que vous utilisez le site de quelqu'un d'autre et que vous ne savez pas où il y a quelque part dans ce code, le h1 étant tourné en blanc peut-être ou noir ou violet. Vous ne pouvez tout simplement pas travailler où, tout ce que vous devez faire est plus loin dans la cascade, donc c'est Cascading Style Sheet, le navigateur le lit de haut en bas. S' il y a des choses qui sont tout aussi spécifiques, alors la dernière gagne. Donc ici, si je dis être rouge, celui-ci gagnera parce que c'est après ça. Au sommet, il est blanc, il va à quelque chose comme, je ne sais pas, on lui dit beaucoup de choses. Le haut dit être blanc, tout le monde est blanc et il dit être noir, puis rouge. Le rouge gagnera parce qu'il est plus bas de la liste. Le h1 gagnera le tag body à chaque fois, peu importe où il se trouve parce qu'il est plus spécifique. Essayons ça. Prenons le h1, coulons-le. Ce n'est plus là, c'est juste au-dessus de tout. Ici, on y va, on le colle, on le sauve, et il devrait toujours être rouge. C' est un mélange du flux, de la cascade, et cela peut être troublant parfois parce que vous lancez des choses partout et que vous êtes comme, pourquoi est-ce ? J' ai dit qu'il était blanc parce que c'est la dernière chose dans la cascade Donc c'est un mélange de flux, de cascade, de cascade, qui descend à un mélange de spécificité. C' est une façon difficile de le dire. Je vais me débarrasser de ce rouge et je vais changer la couleur en blanc, je vais juste laisser la taille de la police là. Allons dans la prochaine vidéo où on commence à ajouter polices fantastiques parce qu'on en a tous marre de toi Arial. Il est temps d'y aller. Je te vois dans la prochaine vidéo. 45. Comment choisir et installer les polices google sur votre site web HTML CSS: Il est temps de passer du vieux Arial ennuyeux à Playfair et Roboto. Tu n'es peut-être pas aussi excitée que moi, mais c'est douloureux, ce cours. Il s'agit des polices de base réelles depuis longtemps. Maintenant, nous pouvons faire de jolies polices. Nous allons utiliser quelque chose appelé Google Fonts. Je vais vous montrer comment les choisir, comment les intégrer et faire démarrer le code, ainsi que comment choisir les polices et comment les styliser. Où trouver de l'inspiration. Assez bavardage, plus faire. Je te vois dans la vidéo. Pour commencer avec Google Fonts, pourquoi nous utilisons Google Fonts ? Donc fonts.google.com, il y a des concurrents, Font Squirrel, 1001 Polices, Star Font, il y a des concurrents. Tout ce que vous devez faire est de vous assurer qu'il s'agit d'une police qui est hébergée pour que vous puissiez l'utiliser sur un site Web. Il est différent des polices que vous téléchargez pour utiliser sur votre ordinateur. Si vous allez à DAFont et téléchargez une police gratuite, ce n'est pas quelque chose que vous pouvez utiliser sur votre site Web, doit être quelque chose qui vit sur Internet. Un bon endroit pour les trouver est quelque chose comme fonts.google.com, ils sont libres. Je vais passer par la façon dont je choisis les styles, couplage de polices et quelques autres choses après avoir fait les vraies bases de la façon de le mettre et de le coder parce que c'est peut-être tout ce que vous êtes ici pour. Donc, je vais utiliser quelques polices. Donc ici dans la recherche, je vais taper Roboto. Je ne suis pas parce que c'est juste là, mais vous devrez peut-être le taper et cliquer sur plus. Cela s'ajoute à ce petit, ici, cette petite police, sélectionné mon petit groupe de polices que je vais utiliser sur mon site. L' autre que je veux est ici, ça va être Playfair. C'est deux mots ? Non, j'ai un jeu de sorts. Le cerveau fonctionne. Donc c'est Playfair, c'est un mot. Vous pouvez le voir là-bas, j'utilise juste le Playfair Display. Je vais éditer. Éditons ici. Ça ne fait pas grand-chose. Appuyons sur ce petit bouton pour l'ouvrir. Ce que nous voulons faire maintenant, c'est que nous voulons personnaliser. Donc, pour le moment, disons Playfair, il est là, et Roboto, pour le moment, il ne va charger qu'une seule version de cette police. Maintenant, vous devez décider en fonction de votre conception, et c'est vraiment important lorsque vous utilisez un programme pour concevoir votre site Web, disons que c'est ce XD ou Sketch ou Illustrator ou Photoshop. Utiliser des charges de différentes polices va être un peu pénible lorsque votre site doit être chargé. Donc pour le moment, je n'ai qu'une taille. C' est la taille régulière que j'ai utilisée dans mon design. Là où il arrive à la Body Copy, j'ai utilisé Roboto et j'ai utilisé la version légère et je n'ai rien utilisé d'autre. Mais vous trouverez probablement que vous pourriez avoir besoin d'utiliser un gras aussi, peut-être un italique. Le seul problème avec cela ou la chose à craindre est de dire que j'ai besoin de la version en gras et de l'italique ordinaire, vous pouvez voir cette chose ici disant, « Hé, votre site Web va prendre un temps modéré à charger. » C' est pour ça que tu es orange, mais en bas et tu dis, « En fait, je veux de la lumière, et je veux du médium et j'ai utilisé de l'audace. » Vous pouvez voir ici, mauvais, il est devenu rouge ici et dit que votre site Web va prendre une éternité à charger. Pourquoi c'est mauvais ? C'est mauvais pour l'utilisateur en général. Donc, la personne va sur votre site et il faut du temps pour charger à cause des polices, et cela ne va probablement pas en valoir la peine ou au moins une considération que vous devez garder à l'esprit. L' autre chose est que Google utilise vitesse de la page ou la vitesse de chargement comme l'un de ses ticks algorithme de recherche. Ce n'est pas la seule chose, mais c'est l'une des choses à considérer si vous construisez un site qui a vraiment besoin de bien classer dans les résultats Google, ce que la plupart des sites font, vous avez juste besoin de vous assurer que vous ne vous tuez pas en mettant trop polices là-bas. Donc, j'ai pour le moment juste le régulier et j'ai juste besoin de la version légère. Je vais probablement avoir besoin d'audace à un moment donné parce que mon site n'est pas très grand pour le moment, il n'est pas vraiment arrivé à ce point, mais gardons juste la lumière. Nous l'avons personnalisé, nous le voulons, maintenant nous devons l'ajouter à notre site. Une chose cool que vous pouvez faire pendant qu'on est là, c'est , non, je vais couvrir ça un peu, allons-y sur le site. Cliquez sur intégrer. Donc, comme nous l'avons fait quand nous avons importé cette Google Map, c'est vraiment facile. Ils font tout le travail pour toi. Vous prenez ce morceau et vous le copiez. J' utilise la commande C sur mon Mac, contrôle C sur un PC, et ça dit : « Mettez ça dans votre tête. » Je peux le faire. Donc, copions-le ici dans Visual Studio Code. Rappelez-vous, voici notre étiquette de tête, s'ouvre, se ferme. Où est-ce que ça va aller ? Je vais le coller dans le fond. Ils n'ont pas dit où le mettre. Donc je vais juste le coller là. Vous pouvez voir où il est ajouté. Il disait : « Hey, quand cette page se chargera, va chercher les polices. » Ces polices, je veux avoir Roboto et Playfair, et les blancs. Je veux que tu téléportes celui-là. Ça doit être pour les deux. L' autre s'appelle Display. Donc vous pouvez changer ça, disons plus tard que vous êtes genre, « En fait, je ne veux pas utiliser ça, je veux utiliser le 500 », qui est la police la plus lourde. Vous remarquerez qu'ils que je n'utilise pas, ils disent gras, mais le code fait référence à 700. Donc, si je voulais 700 maintenant et pas le 300, je peux juste éditer là plutôt que de retourner à Google et essayer de le personnaliser à nouveau. C' est à moitié éditer, donc vous l'ajoutez au HTML et vous devez ensuite le modifier à l'endroit où vous voulez qu'il s'applique. Donc, dans notre cas, nous avons ma copie corporelle. Je voudrais que tout soit Roboto. Pour le moment, je l'ai réglé sur Arial. Donc, je vais juste entrer ici et prendre l'incorporation. Donc, dans la tête, ceci dans le CSS, et je vais attraper le Roboto, copier tout cela, et juste remplacer tout cela. Sauvegardez maintenant, et j'espère que dans mon navigateur qui est maintenant Roboto, et vous êtes comme, « Ne semble pas très différent d'Arial. » Il est si bon, Roboto est le plus générique, Open Sans, Source Sans, et Roboto sont le Body Copy pour en ligne. C' est le plus couramment utilisé. Appliquons un peu plus spécifique ou au moins un peu plus visuellement différent. Donc c'est ce Playfair, cliquez sur copier et je vais modifier sur mon site, donc je vais l'ajouter à mon h1. Donc ici, je vais le coller, l'enregistrer, prévisualiser. Regarde ça, Playfair. Les marges ont raté, nous allons jouer avec ça bientôt. Mais c'est comment l'implémenter, le vider dans la tête, puis éditer dans le CSS. Maintenant j'ai dit, je vais vous dire comment je choisis les polices. Donc c'est un peu plus juste créatif, comment je vais choisir ma police, donc rien de technique. Vous êtes seul ici afin que vous puissiez passer à la prochaine vidéo si vous embauchez. Mais si ce n'est pas le cas, parlons-en parce que je fais ce processus de conception. J' utilise Adobe XD. Tu pourrais utiliser quelque chose comme. Je ne sais pas, PowerPoint, si c'est là que sont vos compétences ou Photoshop pour faire du web design, Illustrator pour faire du web design. J' ai des cours sur tout ça si tu veux aller voir ça. Mais disons que vous utilisez XD et que vous n'allez pas avoir Roboto ou Playfair sur votre ordinateur, pour commencer à utiliser, mais vous voulez vous moquer de votre conception réelle avant de l'implémenter dans le site Web. Donc, ce que vous faites est au même endroit, dans Google Fonts, vous obtenez exactement le même bit. Vas-y, je veux télécharger tout ça, et tu les ajouteras au groupe comme nous l'avons fait. En haut, haut de cette petite flèche, voir la petite flèche ici, était la chose que j'allais essayer de vous montrer plus tôt, mais nous nous sommes séparés. Cliquez dessus. La chose cool à ce sujet est que va télécharger ces polices sur votre ordinateur. Vous pouvez double-cliquer sur eux, les ouvrir et ils vont installer, et ils sont libres d'utiliser, ils sont vraiment cool. C' est un bon moyen d'obtenir des polices gratuites. Ce que vous pourriez faire si vous les téléchargez pour votre propre ordinateur va réellement personnaliser et passer par et simplement les prendre tous. La chose cool à leur sujet est que vous pouvez les utiliser pour la conception graphique ainsi que pour la conception web, juste une excellente ressource pour les polices. Donc, vous savez comment les télécharger. Parlons de la façon de les choisir, comment choisir des styles. Donc, nous allons revenir à Google Fonts, donc je clique juste sur le logo ici. Google lui-même a quelques fonctionnalités intéressantes, alors que disons que nous faisons quelques en-têtes, et je veux trouver quelques polices de titre, Display est le terme général pour un peu plus de polices créatives. Donc tu peux passer par ça, April, je l'aime bien, et trouver ce qui va marcher pour toi. Comme avec Body Copy, vous allez soit faire un Serif, soit un Sans-Serif. La différence est qu'une police Serif est comme Times New Roman. Il a tous les petits pieds supplémentaires sur les ins qui sont appelés Serifs et Sans-Serif est sans pieds. C' est donc une chose plus courante et vraiment facile à faire. Ce ne sera pas Font 101, mais une façon réelle de choisir les polices pour votre site est de toujours choisir un contraire. Donc, si vous êtes les titres sont la police Serif, choisissez une copie de corps sans empattement, il y a assez de changement visuel dans eux pour. C' est un très bon point de départ. Il est très difficile d'obtenir deux polices Serif pour être l'en-tête et la police Body Copy parce que souvent leurs modifications ne sont pas assez importantes pour avoir une belle distinction visuelle entre les deux. Donc, un bon moyen facile est de choisir un pour le titre, puis un pour le Body Copy. Une autre règle est juste de choisir deux polices. Une police peut fonctionner s'il y en a assez, une police sans empattement comme Roboto, que vous pouvez utiliser pour tout le site. Pourquoi ? Parce qu'il y a un tas de tailles différentes pour cela. Donc le noir est vraiment lourd et très distinctif. Vous pouvez donc utiliser cela pour les en-têtes, puis utiliser le support ou le standard pour la Copie corporelle. Cela fonctionnera bien aussi. Certaines de ces polices n'ont tout simplement pas beaucoup de variété, elles peuvent avoir seulement quelques tailles. Une autre chose que vous pouvez faire ici est que l'espace réservé coche ici, vous pouvez effectivement cliquer dessus. Vous pouvez taper mon nom. Supposons que vous faites un design pour quelqu'un et que vous devez appliquer à toutes les polices. Parce que parfois vous téléchargez une police, vous dites : « Ça a l'air génial. » Ensuite, vous le téléchargez et tapez vos litres, Vous êtes genre, « Man, regardez bien sur la ligne, mais quand vous l'avez téléchargé, ça ne semble pas bien. » Vous pouvez tout faire ici, jouer avec les tailles et les poids, et c'est amusant. D' autres choses que vous pouvez faire lorsque vous choisissez, en particulier une police de titre, pour notre conception ici, ce n'est pas trop mal. Tu vois qu'on a trois mots en haut ? Mais l'extérieur est assez petit. Disons que vous faites un site et qu'il est plein de billets de blog, articles, de recettes ou, je ne sais pas, mais vous allez avoir beaucoup de tailles différentes ou de longueurs de titres. Certains peuvent être seulement 20 caractères et d'autres peuvent être 40 caractères. Vous n'avez pas à le faire, mais c'est une considération que je prendrais certainement en compte est de faire avec la largeur. Si j'allume la largeur et que je la fais glisser vers le bas, je vais me donner accès à, allumons ceux-ci, je vais me donner accès à des polices qui sont juste plus minces, et vous pouvez simplement obtenir plus en ligne. Alors dis-lui ici ou celui-là, et puis tout est génial. Mais disons que nous aimons, montons un de plus pour lui donner plus de variété. Ça n'a pas vraiment d'importance, j'en choisis un. Voyez celui-ci ici, au lieu d'utiliser celui que nous utilisons Playfair, celui-ci a le potentiel d'installer plus de personnages sur une ligne et de ne pas se diviser en deux. Donc la largeur est quelque chose à regarder. Mais disons que vous êtes comme, je ne sais toujours pas comment choisir, et utiliser le terme appariement de polices. Les appariements de polices sont une astuce très utile. Je viens de mettre des appariements de polices Google et je l'ai mis dans la date de cette année. Parce qu'il y a des vieux trucs autour, je veux juste des trucs contemporains. Fais une recherche pour ça. J'ai cliqué sur les deux premiers résultats. Ne vous inquiétez pas de ces sites Web, faites la même chose et de voir que nous sommes à 2020. Vous pouvez voir le truc cool sur les appariements de polices est que quelqu'un, et ce cas c'est un DB Morgan. Elle a choisi des polices qui vont bien ensemble et les a mises sur place, ce que j'aime vraiment. Parce que vous pouvez obtenir quelques idées de design cool et elle est choisie, vous pouvez voir Serifed, Sans-Serifed, Serifed, Sans-Serifed, ce n'est pas toujours vrai, mais vous pouvez voir San-Serifed, Serifed. Les appariements de polices, vous pouvez y aller, je vais utiliser Raleway et Lato. Ces deux ou combinaisons de tous, vous choisissez le vôtre, mais il est juste pratique de trouver d'autres personnes. J' aime bien celui-là. Je n'ai jamais vu ce mobile. L' appariement des polices est pratique, les polices Google sont un endroit, c'est l'endroit principal. Il y a d'autres options pour cela. Dobby le faire, Font Squirrel le fait, il y a quelques autres endroits qui font des polices gratuites ou même des polices payantes. Mais pour les implémenter comme super facile, suffit d'ajouter le code à la balise head , puis il suffit d'ajouter le code à la balise head , puisde l'ajouter à vos CC de la chose que vous voulez styler. potes, c'était ça pour les polices. Notre site web commence à paraître un peu plus agréable maintenant avec notre dégradé et nos polices, je vous verrai dans la prochaine vidéo. 46. Quelle est la différence entre les tailles de police PX, EM et REM ?: Salut tout le monde. Cette vidéo, nous allons vous expliquer pourquoi vous ne pouvez plus utiliser les pixels pour les tailles de police. On va utiliser les rems et les ems. Oui. Nous allons examiner les différences entre eux, comment les calculer. Dans cette vidéo, je suis vraiment conscient de mon accent. J' ai l'impression d'avoir un accent vraiment neutre, jusqu'à ce que je commence à parler de rems et d'ems. Ton genre, « tu n'as pas d'accent neutre Dan. » Je me sens comme si. Homme international. Savez-vous que si je me présente en Irlande et que je dis, « Mon nom est Dan », ils disent toujours « Salut Dean ». Oui. J'ai reçu des SMS, « Hé Dean, je te verrai le week-end ». Je m'appelle Dan. Dan. Donc je suis Daniel en Irlande principalement. Ce que vous n'avez pas besoin de savoir, passons en rems, ems, pixels. Tout d'abord, fermons ce que nous sommes en train de faire. Juste nous allons déplacer ça dans son propre petit document parce que nous allons faire un peu d'expérience. Alors allons à Fichier Nouveau. Je vais sauver celui-ci, et je vais appeler celui-ci fontcraziness par html. Maintenant, nous allons traiter avec les polices parce qu'elles sont utilisées un peu pour ceux-là, mais c'est une mesure en général. Vous pouvez l'utiliser pour dimensionner des boîtes. Ajoutons tous nos trucs de type doc standard. Puis en bas ici, jetons quelques choses. Jetons deux étiquettes P. Mettez votre nom dedans, dupliquez-les. Maintenant, avons-nous déjà fait la duplication ? Sinon, nous le couvrirons à nouveau. Vous maintenez la touche Maj enfoncée, puis maintenez enfoncée sur un Mac, c'est la touche Option, et sur un PC, c'est la touche Alt. Puis appuyez sur la flèche vers le bas. Cela duplique la ligne sur. Donc on en a deux. Appelons celle-là, comment devrions-nous l'appeler ? Donnons à celui-ci une classe, et appelons celle-ci une mauvaise taille. Celle-ci va avoir une classe de bonne taille. Donc, en haut, on va le coiffer. Tu devrais utiliser une feuille de style externe, mais on retourne à la vieille école. On va juste le coiffer et le succès ici, juste pour le rendre facile. Alors, nous allons les coiffer tous les deux. Jusqu' à présent, nous les avons stylisés en disant que la taille de la police est, disons que nous voulons qu'elle soit, je ne sais pas, 30 pixels. Malheureusement, c'est une mauvaise taille. Les pixels sont ce qu'on appelle les polices absolues. Ils sont les mêmes sur tous les ordinateurs et ils ne peuvent pas être changés. Ils sont comme, tu dois avoir 30 ans. Pixels est une police absolue, ne peut pas s'embêter avec eux. Ce dont nous avons besoin, c'est quelque chose qu'on appelle une police relative, et c'est là qu'elle entre en jeu et rems. Alors vérifions ce qui se passe d'abord, prouvons dans un navigateur. Fermez-le, ouvrez-le à nouveau. Donc on lui a fait 30 pixels. Donc, au lieu d'utiliser des pixels, faisons une autre police, et faisons celle-ci est la bonne taille. Celle-ci va avoir la taille de police de, nous allons utiliser, disons trois R-E-M. Ce sont les rems de l'utilisateur. Ces ems et rems, nous allons parler de la différence de deux, mais rems est ce que nous allons utiliser et probablement la chose la plus courante à utiliser. Voyons à quoi ils ressemblent d'abord et ensuite on parlera de ce qu'ils sont. Donc, le sauver, prouver le navigateur. Ce que je pourrais faire pour cette vidéo, c'est juste l'avoir ici, que nous puissions tous voir tout. Joli. Donc, trois rems est plus grand que 30 pixels. Pourquoi c'est ça ? Un rem ou un em. Ils sont très communs, très semblables au moins. Donc trois em ou trois rem, n'a pas d'importance. Ils sont trois de la taille de police par défaut sur le navigateur. Donc, le navigateur, si je le mets dans une balise P avec rien dedans. Donc une étiquette P, et j'ai mis Daniel Scott en bas ici. C' est la taille de police par défaut. Je ne l'ai pas coiffé, je n'ai rien fait, c' est juste une taille. Il est de 16 pixels, généralement à ce sujet. Différents navigateurs ont un aspect légèrement différent de leur police, mais Google Chrome, nous utilisons a 16 pixels comme taille de police par défaut, 16. Ce qu'un rem ou un em fait, c'est qu'il dit : « Je suis trois fois peu importe la valeur par défaut ». Alors trois fois 16 ? Je ne peux pas faire de maths aussi bien que je peux épeler, c'est 48. Donc trois rems pour le moment, soit 48 pixels de haut. Pourquoi faire cela plutôt que cela, parce que nous pouvons simplement taper 48 et ce devrait être le même ? Quarante huit pixels, même taille. Juste le type 48 semble plus facile. Maintenant, la raison pour laquelle nous faisons cela, est pour les personnes qui ont du mal à voir le site. Alors disons que je suis malvoyante et que je trouve ça trop petit. La taille de police par défaut est beaucoup trop petite. Je peux aller dans Chrome et dire Préférences, et je peux dire en fait ici, Je vais dire, « Je vais le rendre plus grand, Je vais le rendre très grand. » Parce que c'est ce dont j'ai besoin, juste ce que j'ai besoin pour voir les choses. Ce que vous remarquerez est très grand. Allons voir notre document. Ce qui finit par se passer, c'est que ce type est devenu plus gros, ce gars ne l'a pas fait. Rappelez-vous qu'ils étaient de la même taille. Vérifions que les paramètres, remettons-le vers le bas. Moyen. Donc ils sont exactement de la même taille. J' ai dit, « tu as 48 ans et tu finis par être 48 », mais en fait c'est plus juste des fois par défaut, alors que je le fais plus grand. Ça devient plus grand pour moi. Vous pouvez voir si je suis malvoyante, ce n'est pas bon. C' est génial. Alors c'est ce qui se passe. C' est la raison pour laquelle Google veut vraiment l'encourager. Nous allons donc l'utiliser pour que les gens puissent mieux utiliser notre site. Une des autres raisons, est que Google basera votre site sur la façon dont il est accessible pour les personnes qui ont besoin de ces aide supplémentaire. Encore une fois, revenez au classement. Si vous construisez un site, vous voulez que Google l'aime, sorte qu'il vous classe, et l'une de ses mesures, avec un million d'autres, est votre site accessible aux personnes qui ont besoin de ces changements. C' est pourquoi nous utilisons rems ou ems. En fait, revenons à ma taille normale, normale. Pour ici la même taille. Si je change cela de rems ou ems, ça ne changera pas. Nous en parlerons ensuite, la différence entre rems et ems, mais avant, vous devez passer de mon accent, parce que rems et ems semble probablement vraiment mauvais. Je sais, c'est mon accent. Je sais que rems et ems ont l'air bizarre. Rems, Ems, on y va. Ça va être un peu un cache-cerveaux. Alors commençons. Donc j'ai ces deux-là. Débarrassez-vous de cette étiquette P ici. Sauvez-le, alors il est parti. Disons que j'ai une étiquette P en bas. Onglet sur. Il va avoir un mot différent ici, il va avoir du cornichon juste parce que. Ce cornichon que je voudrais lui donner une classe de, J'ai déjà quelques cours. Je vais utiliser disons badsize, non, bonne taille. Nous ne voulons pas utiliser de mauvaises tailles, donc j'ai une bonne taille. On dirait exactement le même que le reste de ceux-ci, mais nous savons que sur un site Web, nous avons des tags body, mais nous n'avons jamais juste des tags p traîner par eux-mêmes. Ils sont également à l'intérieur des conteneurs, qui sont à l'intérieur des étiquettes principales, qui sont à l'intérieur des sections. Disons que ce type est à l'intérieur d'une étiquette, donc je vais mettre une étiquette autour de lui. Je vais appeler cette étiquette « Ma boîte ». Je vais prendre la balise div, donc elle s'ouvre là et elle se ferme de l'autre côté, et ensuite tout rendre joli. On est d'accord avec ça. Ce type est à l'intérieur d'un div appelé « Ma boîte ». Il a l'air de la même chose. Maintenant, commençons par ma boîte. Disons qu'on utilise EMS. C' est exactement le même. C' est là que vient la différence. Je veux que ma boîte fasse des trucs. Ça va faire des choses pour moi, ça va dire, je vais faire 2ems. Ce qui finit par arriver, c'est qu'ils finissent par se compliquer. Ma boîte est 2ems et alors la bonne taille s'applique aussi bien, donc nous finissons avec 5ems. On est comme des composés. La différence est si j'utilise juste rems. Donc bonne taille maintenant, si c'est un rem, ignore la taille rapide des étiquettes et dit : « Je me fiche de ce que vous faites ou de ce que le reste du monde me dit de faire. Je vais retourner directement à la source. » R est root, donc root em. Cela remonte jusqu'au début et dit : « D'accord, la valeur par défaut est toujours 16, donc j'ai 3 fois 16. » Ce n'est pas si compliqué au niveau auquel nous sommes maintenant parce que nous n'avons pas beaucoup de choses, surtout dans cette vidéo, mais même dans nos autres sites Web, ce n'est pas si grand. Mais quand vous arrivez à des frameworks et WordPress et de grandes choses énormes que vous utilisez ou essayez d'éditer, parfois vous êtes juste comme, « pourquoi êtes-vous si grand ou petit ? » Il y a toutes ces choses qui se passent. Si tu fais un rem, ça dit : « Oublie tout ce qu'on m'a dit. Je vais être trois fois la valeur par défaut. » Maintenant, pouvez-vous juste utiliser des pixels ? Tu peux totalement. Si tu dis : « Mec, c'était comme Narnia. Qu'est-ce que c'était ? Début ? Il y a trop d'informations, de choses à l'intérieur des choses , rems, ems, son accent fou. » Vous pouvez simplement utiliser des pixels. Le site ne va pas exploser, mais j'essaie de faire deux choses, une est que vous devez être un bon concepteur web pour les malvoyants et aussi, vous allez tomber dans ces rems et ems plus tard quand vous êtes travailler avec d'autres sites et modèles. Une autre chose utile est de savoir, est-ce utile ?. Qu' est-ce que trois em ? Dites que je veux choisir une taille de copie pour celui-ci ici, et je veux qu'elle soit de 20 pixels parce que c'est ce que je l'ai conçu. Qu' est-ce que c'est en rems ? Il y a des calculatrices en ligne. Vous pouvez faire ems aux pixels calculateurs ou rems aux calculatrices de pixels. Mais bizarrement, ma petite calculatrice ici, si je veux qu'il soit 20 pixels, je peux le multiplier par 0,0625. Écrivez-le, post-it et notez-le et il vous donnera les rems ou ems, même chose. Donc c'est ce que ça va être. Nous utiliserons les bons rems. C'est 20 points. Si je veux que ce soit 48, je tape 48 fois 0,0625, et encore, 3 rems. Mais ça ne va probablement pas te coller dans la tête comme il a la mienne. Il y a des calculatrices, juste Google eux. Ils sont faciles à faire, sachez qu'on a environ 16 ans. Quand je dis environ 16, différents navigateurs traitent la taille de la police par défaut un peu différemment. Vous avez remarqué comment Google n'a pas dit 16 pixels, il a dit moyen ? Vous devriez dire 16 pixels avis moyen. Bon, donc je vais enregistrer et fermer ça, et nous allons passer en revue et éditer notre grand site maintenant. Fermez ça, rendez ça plus grand, ouvrez tout, notre explorateur nous avons besoin d'index, style, parce que nous devons revenir en arrière maintenant et réparer les choses que nous avons faites. Nous avons fait nos tailles de police, donc ce que je vais faire est que je vais changer ma taille de police par défaut de 16 pour être une taille de police de 1.125 rems. Tu pourrais juste mettre 1.1. Le 0,25, le 25 supplémentaire, est-ce que ça change vraiment beaucoup ? C' est à vous de décider. C'est à quel point tu es cool à propos de ce genre de trucs. Regardons un peu. Toute ma taille de police par défaut a un peu augmenté. Regardons celui-là. Dans mon document XD, il est 52. Donc ici, je vais trouver mon 'H1' et je dis, « 80 n'est pas ce que je veux. » Je vais faire 52. Donc 52 fois 0,0625. C' est un peu plus grand que 3 rems. Combien je me soucie de ce 0,25 ? Probablement pas assez pour s'inquiéter, mais mettons-le tout dedans. Rems, regardons un peu maintenant, et c'est la bonne taille. Ouais, ça a l'air sympa, mais au moins ça correspond à ma maquette ici. Maintenant, une des autres choses que je viens de mentionner à la fin de ceci est que lorsque je regarde ce design ici, cette police semble vraiment légère, et elle est affichée différemment de ce qu'elle est sur mon site Web. Il rend juste différemment. C' est le bon poids parce que j'ai sauvé le haut ici dans Visual Studio Code, et rappelez-vous ici, je dirais que Roboto est 300. Donc, il affiche le bon poids. Le problème est, est que chez XD utilisera Roboto 300 différemment de votre site Web. La façon dont la chose est que si je regardais cela sur Safari, puis sur Firefox, ils le feront tous légèrement différemment. Cela me dérange en tant que concepteur que les polices ne sont pas exactement les mêmes dans beaucoup de choses. Je suppose que c'est la grande chose que vous devez lâcher si vous venez d'un fond de design plus traditionnel. Tu dois juste laisser passer les choses parce que tu ne peux pas forcer l'alias des polices, et une chose qui m'a rappelé, c'est que nous n'avons qu'une seule taille en main. Disons que vous en avez deux, il y en a 300, 500 et 700. Donc, vous avez différentes tailles. Nous ne les avons pas implémentés parce que nous n'avions pas à le faire. Mais disons que vous avez différentes tailles que vous avez choisies dans les polices Google. Ici, vous pouvez passer par la section du corps à utiliser, c'est celui-ci ici, c'est le poids de la police, et vous dites, « En fait, je veux que ce soit 600. » C' est ça. 600. Ce sera une police de 600 si vous avez plusieurs options. Je n'ai pas eu à le faire parce que je n'en ai qu'un. Bon, passons à autre chose. Réparons tous ces trucs avec la coqueluche et en ignorant les lacunes et les espaces entre les deux. Qu' est-ce que l'intégration, l'espace après les paragraphes, toutes ces choses amusantes dans la toute prochaine vidéo. 47. Hauteur de la ligne espace entre les paragraphes espace aka après: Salut tout le monde. Nous allons passer du terrible espacement des lignes et toutes sortes de groupées à agréable, respirant et lisible pour correspondre à notre maquette. On va apprendre quelque chose qu'on appelle la hauteur de la ligne. Ensuite, nous allons regarder l'espace entre les paragraphes, l'espace après, mais vraiment c'est juste appelé marge inférieure. Allons entrer maintenant et travailler à la façon de le faire. Très bien, donc l'espacement des lignes et la hauteur des lignes. Nous allons d'abord faire l'espacement des lignes. C' est l'espace entre. C' est donc un paragraphe juste là. C' est un p tag, suffit de les casser en deux lignes. C' est l'espacement des lignes. L' espace entre les paragraphes est entre ces deux balises p distinctes, et elles sont différentes. Vous commencez toujours avec la hauteur de la ligne d'abord parce que la hauteur de la ligne affecte tout et ensuite nous pouvons regarder faire l'espace entre les paragraphes. espacement des lignes est assez facile, nous allons aller à Visual Studio Code. Nous n'avons pas de style pour votre p tag get. On va dire que la balise p est, qu'est-ce qu'on va faire ? Qu' est-ce qu'on va faire ? Ça s'appelle la hauteur de la ligne. La hauteur de la ligne dépend des mesures. Ça dépend si vous utilisez des rems comme nous l'avons fait. Nous utilisons rems pour la hauteur de ligne parce que nous voulons qu'ils correspondent. Si vous utilisez des pixels pour les tailles de police, utilisez des pixels. Quelle est la taille de la ligne ? Il y a beaucoup de devinettes. L'un ne sera rien. que soit la taille de la copie corporelle. Nous avons tout décidé ici, qui signifie que la balise p est 1.125. C' est là que nous commençons, donc tout ce qui est au-dessus de ça, ça va montrer un écart. Donc si on a un 1,5 rem, ça va être un petit écart. Même Rem. Vérifions ça. Il y a des petits espaces ouverts. Jetons un coup d'oeil à 2.5 juste pour vous montrer, grand écart. Tu décides. Quelle que soit votre taille, environ la moitié s'agrandit. C' est toujours un bon point de départ dans ma tête, et ça marche pour moi. Mais je veux que ce paragraphe s'espace un peu, cool. Pour faire cet espacement entre les paragraphes, il n'y a pas de véritable spécial que vous avez utilisé dans la marge, ou le fond de remplissage. Ça n'a pas d'importance. Bas de marge ou de rembourrage. Pourquoi ? Parce que ça va ressembler visuellement. Nous savons qu'il fait des choses différentes, il pousse de l'intérieur ou de l'extérieur, mais ça n'a pas d'importance. Maintenant, ce fondamentalement quelque chose au-dessus de zéro va vous montrer quelque chose que la valeur par défaut est zéro de notre réinitialisation CSS. Regardons 0.5 rem. C' est probablement ce que je veux. Juste un plus grand écart ici. Tu peux mettre un gros écart là-dedans, c'est à toi de décider. Ici, tu y vas. Vous devriez mettre un zéro devant lui. Je trouve que si je laisse le zéro sur le devant, ça marche toujours, mais je parie qu'il y a un cas où ce n'est pas le cas. Soyons syntaxiquement corrects. D' accord, la prochaine chose que je veux faire est le tag h, ok, le h_1 au moins je veux pousser un peu d'écart en dessous. Je dois trouver mon h_1, on va faire la même chose, on va faire. Maintenant, mon h_1 ne casse pas sur deux lignes. Si c'était le cas, nous devrions commencer à regarder la hauteur de la ligne. Mais ce n'est pas le cas, donc je vais juste utiliser Margin-bottom. Quelle taille devrait-il être ? Aucune idée. 0,5 rem, trop grand. Je ferme quelque chose là-bas. Ramenez tout à la case 1. C' était trop grand. Que devrions-nous faire ? 0,1 à 0,2 alors. Jetons un coup d'oeil. Peut-être encore un peu grand, faisons 1 rem. C' est sympa. Cet espace sous le h_1 fonctionne pour moi. Très bien, et ce que nous pourrions faire ici juste pour tout ranger, vous pouvez voir cette balise div va jusqu'au bord ici. Qu' est-ce que cette balise div s'appelle ? Je ne me souviens pas, hérobox1, on pourrait y ajouter un peu de rembourrage. Donc herobox1, ajoutons un peu de rembourrage et nous allons l'ajouter à droite. Je vais deviner pour quelques pixels, ça marche pour moi. Très bien, la hauteur de la ligne, l'espace entre les lignes s'appelle la hauteur de la ligne. Je l'ai appelé l'espacement des lignes avant, la hauteur de la ligne. n'y a pas d'espace après ou d'espace entre les paragraphes comme dans quelque chose comme Word ou InDesign, ok utilise la marge ou le fond de remplissage. Ensuite, assurez-vous simplement que la mesure que vous utilisez est la même que, ou au moins l'unité de mesure est la même que l'unité que vous utilisez pour la taille de police. Donc pixels, ce serait des pixels aussi. D' accord, passez à la vidéo suivante. 48. Quand utiliseriez-vous une image svg au lieu d'une image jpg ou png dans la conception de sites Web ?: Hé, là. Cette vidéo va parler des différences entre les JPEG, les PNG et les SVG ; nous allons même mentionner les GIF à la fin. Si vous savez tout ça, vous pouvez sauter. On ne va pas faire quoi que ce soit dans cette classe. Beaucoup de moi parlent et expliquent. Mais si vous n'avez peut-être jamais entendu parler d'un SVG, Scalable Vector Graphics, lieu de rencontre parce que celui-ci est génial. Je vais vous montrer un exemple. Tu vois, PNG floue. Vraiment sympa SVG, et il évolue pour toujours. Regardez. Continuez à mettre à l'échelle. Oh, regarde comme il est bon. Bon, allons entrer et comprendre tout ça. Bon, parlons des principaux types d'image : JPEG, PNG et SVG. JPEG et PNG sont là depuis un certain temps. JPEG est probablement le plus commun. JPG, JPEG ; quoi que vous vouliez l'appeler. C' est incroyable pour des images comme celle-ci. Salut, Dan. Les photos font vraiment bien que JPEG. Pourquoi ? Parce que la taille du fichier est très petite par rapport à la qualité que vous pouvez obtenir de lui. Vous pouvez obtenir quelque chose qui semble vraiment bon, beaucoup de couleurs ; il y a des millions de couleurs dans un JPEG, mais la taille du fichier en comparaison est très, très petite, donc nous l'utilisons. Où les JPEG se sont arrêtés, et vous dites  : « Ok, nous allons juste utiliser les JPEG pour tout. » Le gros problème avec JPEG est qu'il n'y a pas de transparence. Vous ne pouvez pas voir à travers un JPEG. n'y a aucun moyen d'avoir un trou dedans pour montrer les choses à travers et c'est là que le PNG commence. Ok maintenant, nous allons regarder notre logo que nous avons fait. Ce logo ici. Pouvez-vous voir nos Roar Bikes ? C' est en fait une image. Tu vois quand je le traîne ? Il est en fait voir à travers. Donc, je peux changer la couleur derrière elle et la couleur change là-bas. Si c'était un JPEG, choisissez une couleur pour l'arrière-plan et ce serait pour toujours. PNG sont géniaux. Ils ont aussi beaucoup de couleurs. Vous pouvez utiliser des millions de couleurs dans un PNG, mais il a également de la transparence. Vous pourriez dire : « Pourquoi ne pas les utiliser ? » Parce que les tailles de fichier sont énormes pour les PNG par rapport à un JPEG. Tu dois faire un échange. Ai-je besoin de transparence ? Cool. Si vous le faites, alors vous devez laisser JPEG derrière. Si vous ne le faites pas, comme cette image ici, certainement un JPEG parce qu'il n'y a pas de transparence donc je pourrais aussi bien avoir toute la bonté des couleurs avec la faible taille du fichier. Maintenant, la troisième option, le SVG. C'est tout à fait nouveau. Si vous n'avez pas entendu parler de cela, c'est un graphique vectoriel évolutif, et le vecteur est le bit cool. Si vous connaissez les graphismes vectoriels, vous allez dire : « Vraiment, vous pouvez faire des vecteurs en ligne. » Oui, tu peux totalement. Si vous n'avez jamais entendu parler de vecteur auparavant, vous pouvez rechercher le terme. C' est vecteur, V-E-C-T-O-R, parce que nous ne le couvrirons pas trop ici, mais l'avantage, tant que c'est une forme vraiment simple comme une icône ou un logo, un SVG serait terrible pour cela, même si vous vouliez transparence, ce serait terrible parce qu'il y a tellement de détails. Mais pour les formes simples, les SVG sont brillants. Donc le logo est là. Nous allons changer ça pour un SVG et regarder les avantages. Passons d'abord et voyons la différence, puis je vais expliquer les avantages pour n'importe quel SVG. Dans vos fichiers d'exercice, donc si vous allez à « Exercice Files », « Project 2", il y avait un lion PNG que nous avons utilisé plus tôt. Nous allons utiliser celui-ci appelé SVG. Copiez-le. Allez sur votre bureau, placez-le dans votre dossier Project 2, dans vos images et collez-le dans. Maintenant, dans votre code, allez dans Visual Studio Code, appuyez sous votre balise d'image dans votre div logo. Interrupteur PNG pour SVG. Regardons un peu la différence. C' est l'original et préparez-vous, regardez le second. Prêt, net et clair. Tu regardes cette vidéo. Parfois, en fonction de votre internet, les gens écriraient parfois des commentaires en bas comme, « Il ressemble le même. » Vous êtes peut-être en train de regarder une très basse résolution de la vidéo. Souvent, si vous cochez en bas à droite de votre vidéo, vous pouvez augmenter ou diminuer la qualité de la vidéo que vous regardez. Juste pour que vous puissiez voir ces détails, mais rendons cela un peu plus évident. Je peux zoomer, donc si je zoome sur celui-ci, je maintiens la commande en plus de la frapper quelques fois. C' est sur un Mac, Control plus sur un PC. Zoomer sur mon site Web afin que vous puissiez voir la vraie différence. Un PNG utilise des pixels pour créer son graphique. Alors qu'il était vraiment petit, c'était bien. Avait un peu floue bord mais vecteur, ce SVG, il échelle à l'infini. Vous pouvez le mettre à l'échelle aussi grand que vous le souhaitez et le truc cool à ce sujet est qu'il sera toujours net et clair à l'extérieur et qu'il aura toujours une très petite taille de fichier. Vous pourriez obtenir un PNG qui ressemble vraiment bien à cette taille. Vous pouvez le rendre plus grand ou le rendre génial, mais la taille du fichier va devenir vraiment grande. Vous trouverez beaucoup de sites Web maintenant utilisant SVG, compatibilité du navigateur est vraiment bonne maintenant. S' il s'agit d'une icône ou d'un logo, utilisez un SVG. C' est une bonne règle de couverture. Si c'est dire une image, je vais vous montrer un bon exemple. Celle-ci ici. C' est un graphique que j'ai fait pour une partie ultérieure de la classe et disons que je voulais ressembler exactement à ceci. Mon yogourt géant à la viande de mauvaises herbes que j'ai fait pour vous les gars. Mais il y a une couleur de fond. Cela fonctionnerait mieux comme un JPEG. Je vais vous montrer comment exporter tout ça en une seconde, mais comprenons-les d'abord. Ce serait génial comme un JPG parce qu'il y a beaucoup de couleurs ici et c'est raisonnablement photographique et la taille du fichier sera belle et petite. Mais disons que j'en ai besoin pour avoir un fond vide. Ce petit truc en damier est la façon dont l'ordinateur dit qu'il n'y a rien derrière. Ça devrait être un PNG. Pourquoi ne serait-ce pas un SVG ? Un SVG a besoin de détails très simples. Si c'était un SVG, taille du fichier serait énorme et cela aurait l'air terrible et cela ne fonctionnerait tout simplement pas. Je ne peux pas faire ça en SVG. SVG parfait pour ce type de chose quand il y a un très simple lignes. Tout ce qui est fait dans Illustrator peut être exporté en SVG parce que c'est vraiment basique. Formes basiques, couleurs simples, facile. JPEG pour les images, PNG pour les images qui ont besoin transparence et tout ce qui est vraiment des lignes simples comme des icônes et des petits graphiques, des flèches, ce genre de chose serait parfait pour un SVG. Vous dites : « Il n'a pas parlé de GIF. » La seule raison pour laquelle vous utilisez des GIF ces jours-ci si vous avez besoin de les animer. Les GIF ont un réel inconvénient. Ils ont seulement 256 couleurs, ce qui est une douleur. Vous ne pouvez faire que de petites choses et les couleurs ne peuvent pas être trop larges. n'y a aucune raison de l'utiliser à moins que vous ne vouliez l'animer et même alors, animant des GIF, ils sont vraiment des cas d'utilisation de niche. Vous pouvez animer en CSS et beaucoup d'autres meilleures façons. Je ne vais pas couvrir les GIF ici. Je couvre beaucoup plus et mon autre, disent les cours Photoshop et Illustrator. Nous fabriquons toutes sortes de GIF animés là, mais nous n'allons pas utiliser ce genre de web design traditionnel maintenant. Ce qu'on va faire, c'est que tu comprennes ça. Je pourrais en fait déplacer la partie suivante de cette vidéo vers une autre vidéo que vous pouvez juste regarder ce beau et par lui-même. Plus tard, vous pourrez revenir et vous montrer comment exporter facilement ces SVG, PNG et JPEG. Oui, alors faisons-le dans la prochaine vidéo. 49. Comment exporter des svg png jpg depuis XD Photoshop Illustrator pour la conception d'un site web ?: Salut tout le monde, cette vidéo va vous montrer comment exporter des graphiques à partir d'un tas de produits logiciels Adobe. Nous allons examiner Illustrator, Adobe Photoshop et Adobe XD. Maintenant, je sais que tout le monde n'aura pas le logiciel, mais il est vraiment courant dans, en tant que concepteur web d'avoir accès à cela. Vous n'avez pas à payer un produit payant. Il y a des essais gratuits pour eux, il va être probablement fois que nous sommes vous allez devoir rencontrer ce logiciel, ou au moins pour faire glisser les graphismes hors d'eux. Je vais vous montrer comment faire tout ça, dans cette vidéo. D' accord. Ce sera juste une course rapide. Je veux vous donner des compétences de base. En tant que concepteur web, vous aurez besoin de le savoir souvent. Disons que vous travaillez avec un plus de graphiste, qui fait la mise en page qui en conçoit. En fait, tu fais juste le codage. Bien qu'il vous suffit de vous remettre un document Photoshop, ceux qui sont impatients de le faire, ou un document SD, et de dire que vous corrigez cela à Illustrator, ou vous pourriez faire tout ça comme moi. J' aime faire la partie design, ainsi que le codage. Nous allons parcourir les programmes que j'utilise. Ils ne seront pas tous, mais ils sont très communs pour l'industrie. Commençons par XD. Adobe XD, c'est comme UX Design Program. C' est un nouveau, il gagne en popularité, c'est un très grand concurrent à esquisser. D' accord. Exporter à partir de cela est très facile. Cliquez sur le graphique que vous avez conçu dans XD, et vous appuyez sur « Commande E » sur une marque ou sur « Contrôle E » sur un PC. Ou Exporter le fichier, et nous allons utiliser l'export sélectionné. Assurez-vous juste qu'il est sélectionné, et il devrait sortir. Dans ce cas, on va lui donner un nom. Je vais appeler celui-là, les hommes de vélo. Vous utilisez des traits de soulignement ou des traits d'union. Vous ne pouvez pas utiliser des espaces où il est une mauvaise pratique d'utiliser des espaces, car certains navigateurs plus anciens commencent comme ça. Ensuite, je vais juste mettre mon industrie sur le bureau juste pour vous montrer, et ici, vous pouvez décider de votre format, Easy-peasy. PDS ne fonctionnera pas pour notre site Web. Donc, nous voulons PNG, SVG, qui un JPEG. Dans ce cas, à cause de celui-ci, nous en avons déjà parlé. Lequel voulons-nous ? Oui JPEG. Ensuite, il y a la qualité. Pour un site web, jamais 100 pour cent. Ceci est une suggestion, entre 40 et 80, cela dépend vraiment du graphique. Celui-ci est une image boursière. D' accord. C'est vraiment sympa dans l'autre sens, mais vous vous souvenez, il est vraiment bon de pouvoir aller assez bas si vous avez des images des clients, et il est montré sur un téléphone cellulaire, souvent, la qualité peut descendre aussi bas. Fondamentalement, ce que cela signifie, est que la taille du fichier va devenir plus petite, et c'est ce que vous voulez. Nous allons parler de la vitesse de chargement des pages étant une partie importante du classement dans Google. Donc mon cas, parce que c'est une image de tête, j'obtiendrais probablement 80%. Pour ces gars ici, qu'il juste des graphismes de soutien derrière, je serais probablement descendu entre 40 ou 60. Vous pouvez simplement le taper et faire une symphonie. Maintenant, nous ne allons pas couvrir comme 2x et 3x, le moment, nous allons regarder des images réactives un peu plus tard dans le cours. Mais pour le moment, c'est comme ça que j'obtiens mon JPEG. On y va, et on va en faire quelques autres à partir de XD et ensuite on passera à un autre programme, on y va. Je clique juste sur mon bureau maintenant, j'ai JPEG, juste traîner dehors à ne rien faire, c'est 36 kilo-octets, c'est de bonne qualité. C' est comment faire sortir JPEG. Celle-ci ici. Maintenant, qu'est-ce que ça devrait être ? JPEG ou PNG ou SVG. Donc répliquer, vous pouvez cliquer avec le bouton droit de la souris, parfois cela dépend , celui-ci est marqué pour l'exportation, donc nous allons utiliser un raccourci, commande E. Je vais utiliser long chemin. Celui-ci ici, va fonctionner vraiment bien n'est pas SVG, laissez toutes les valeurs par défaut, nous allons cliquer sur l'exportation, et j'espère que sur mon bureau, j'ai SVG. On y va. SVG n'a pas très bien aperçu. D' accord, mais juste celle-là, j'ai oublié de changer le nom de ça. Je peux le faire après. Je peux mettre des traits d'union dessus. Je ne le fais pas maintenant. N'oubliez pas de le faire. Maintenant, il n'y a probablement aucune raison d'exporter un JPEG, PNG dans ce cas, mais vous savez comment le faire. C' est dans la même petite liste déroulante, et il n'y a pas de vrais ajustements pour les PNG, juste vous allez et exportez. Ceux-ci ici, pour la taille des mauvaises herbes est quand nous arrivons à faire des applications mobiles. Lorsque nous explorons pour Android iOS, nous n'en avons pas besoin pour le moment. C' est les bases de XD. Maintenant, il y a beaucoup plus, si vous faites mes cours Full HD, tout un chapitre là-dessus, nous ne ferons pas tout ça ici. Ça te donne ça, tu te débrouilles. Regardons l'utilisation de Photoshop, très courante pour utiliser Photoshop, même si c'est comme un programme de retouche photo, il est vraiment courant de l'utiliser encore dans la conception web. Donc je veux exporter cette chose comme, et voulons-nous le fond complet ? Ce sera parfait comme JPEG, parce que je veux de la transparence. Ça va être un PNG. La raison pour laquelle ce n'est pas un SVG, c'est parce que ce n'est pas vraiment simple graphiques est trop en cours ici. D'accord. Pour exporter à partir de Photoshop, il y a plusieurs façons, la meilleure façon est d'exporter des fichiers, et ce nom insignifiant ici, s'appelle Exporter comme c' est génial. Si vous utilisez Safe For Web, c'est bon. Ce n'est pas aussi bon que ça. Certaines personnes peuvent me battre là-dessus, mais c'est la nouvelle chose, et mon expérience est la meilleure chose. qui est cool, c'est que vous n'avez pas besoin de le redimensionner avant de venir ici. Beaucoup de gens vont dire : « Oh, j'ai cette grande image. Maintenant, j'ai besoin d'aller à l'image, la taille , la rendre plus petite, puis l'exporter. Ensuite, ils annulent la taille de l'image pour qu'elle redevienne grande. Alors que XD, ce qui signifie que vous pouvez faire ici. D' accord. Formater ici. JPEG, GIF, SVG. C'est tout ce dont vous avez vraiment besoin. Je vais vous montrer quelques autres petits avantages. Vous pourriez dire, « Ok, ça doit être un JPNG, mais j'ai besoin qu'il soit de 500 pixels de large. » Vous pouvez le faire à ce stade, ce qui est assez agréable. Mais disons que vous avez besoin d'une version plus petite aussi pour certaines choses que vous pouvez frapper un peu plus là-bas. Donc, vous pouvez en avoir une qui est la moitié de la taille, donc 0,5, eh bien, peut-être une qui est deux fois la taille fera l'affaire. C' est un design plus réactif. Vous pouvez ajouter différentes versions du graphique, différentes versions, différentes tailles de celui-ci. Autre chose ? Non. Cliquez sur « Exporter », et je me lie simplement à mon bureau. Je vais avoir un tas de SVG à la bonne taille. Maintenant, nous n'avons pas vraiment besoin de le couvrir, mais faisons-le très vite. Exportez un JPEG juste là, et les curseurs de qualité juste le long du haut ici. Comme nous l'avons déjà dit, les mêmes règles s'appliquent à cette affaire, car elle a un fond complet. Maintenant, vous voyez la transparence parce que c'est le JPEG, disons que c'est bon, c'est ce dont nous avons besoin, et je vais obtenir 60%, et la qualité va très bien, parce que c'est une bonne image qui a été modélisée dans Adobe. Je vais le faire dans la dimension, ce qui est cool, petit programme 3D qu'ils ont. Je vais juste avoir une taille. Merci beaucoup, et appuyez sur » Exporter ». Maintenant, SVG va fonctionner. Celui-ci n'est pas vraiment, c'est sur un graphique vectoriel. Il doit être quelque chose dessiné avec vecteur maintenant dans, désolé, dans Photoshop il faudra quelque chose dessiné avec ces outils. Vous en avez un tas, ce sont toutes des formes vectorielles, et vous pouvez voir que c'est vraiment simple. Ces exportations grand est un SVG, ce n'est pas. Maintenant, il y a beaucoup plus que vous pouvez faire pour Photoshop, pour la conception web. J' ai aussi un cours complet à ce sujet. Si vous voulez chercher mon Photoshop pour le cours de design web. Mais la dernière chose que je veux vous montrer, c' est que vous pouvez simplement trouver la couche, cliquer dessus avec le bouton droit de la souris et dire, « Exporter sous », ou utiliser l'Exportation rapide. Le vôtre va probablement dire, « Export rapide », JPEG complet. C'est très bien. J' ai changé mes préférences aussi, parce que j'exploite principalement comme un JPEG étant aller ici. Vous exportez juste cette couche. Juste une autre façon d'y arriver. Il y a plein d'autres choses que je veux te montrer. Encore une fois, c'est un tout autre chapitre, et c'est logique. Regardons le dernier de notre petit gang sera Adobe Illustrator. Donc ce petit logo ici, je veux exporter cet ajout est un de ces graphiques ici. Maintenant illustré comme panneau cool, fenêtre cool, et il est sous l'exportation d'actifs. Ok, ce petit panneau s'ouvre. Il y a déjà pour une raison quelconque. D'accord. Donc ça ressemble à ceci, et ce que vous devez faire est de regrouper ce que vous voulez rester ensemble. Si ce n'est pas groupé, ça finit par faire des trucs bizarres. Donc, c'est un groupe. Je l'ai juste traînée ici, et il y en a. Si ce n'est pas groupé, je vais vous montrer ce qui se passe au cas où vous le feriez. Ici, parce que c'est un petit morceau si je dessine tout, et que je le fais glisser dans vous voyez, ce sera comme de petits graphiques exportés. Alors annulons ça. Cool, donc je peux faire glisser ça, disons, j'ai fait un design complet de site Web dans un Illustrator. C' est parfait pour le faire. Eh bien, devrait regrouper ces 10, regroupez-les. J' en ai regroupé quelques, les jetant tous ici, puis comme un grand groupe qui est Co. Je peux dire en fait que je les aurais tous pour être PNG ou SVG, et je vais les exporter, et les coller sur mon bureau. Ça devient un peu, donne-moi un [inaudible]. D' accord. Il va l'exporter. Qu' est-ce qui est vraiment cool à propos de ça ? Où sont mes SVG ? Ils sont là. Illustrer comme les mettre dans un joli petit groupe. Il y en a un, en fait, c'était un bon point. Vous pouvez voir celui-ci va à la ligne bleue autour d'elle. Donc il n'a exporté que celui-là, ça va vous attraper. Donc, sélectionnez les deux, cliquez sur un, maintenez la touche Maj avec le suivant. Ou je pense que si vous avez rien sélectionné, et vous allez un sélectionner tous. J' allais passer sur mon clavier, cliquer sur les deux, appuyer sur l'exportation, et nous devrions les obtenir tous les deux maintenant. Remplacez-le. Il est là sur mon bureau. Cool. Actif 2 et actif 3. D'accord. L' autre chose cool que vous pouvez faire ici. Eh bien, ce qui est sympa dans ce panneau d'actifs, c'est de regarder ça. Si je change cela à une autre couleur, au lieu d'avoir le dégradé, je choisis juste une autre couleur. vous voyez mis à jour ici, je n'ai pas besoin de le faire glisser et de le faire. Je peux lui donner un nom ici aussi, pour que je puisse l'appeler une fusée. Je peux frapper à nouveau l'exportation, et ça me fait gagner du temps. Je dois le faire glisser et l' identifier à nouveau. Il se met à jour instantanément. Je clique juste sur Exporter, et voici ma fusée. Les mêmes choses si vous avez besoin, PNG ou JPEG, c'est à vous de décider. Dites trois contre un logiciel, ce sont de vieux Adobe. Il est assez courant d'utiliser des produits Adobe. Le seul autre qui s'utilise assez couramment est quelque chose appelé sketch. Je n'ai pas encore de cours sur le croquis. Mais si vous illustrez, je vais avoir des cours illustrés génériques comme essentiels et avancés. Mais j'en ai un vraiment spécifique, pour le web design qui pourrait vous être utile. Il s'appelle illustrateur pour la conception Web, c'est l'interface utilisateur de stratégie la plus cool, et la conception Web, de même pour Photoshop. Cette classe générique est un Photoshop outils essentiels et avancé. Mais il y en a un spécifiquement pour le web design et XD. Je dois XD est seulement la conception web utile. Donc il n'y a qu'un seul cours qui doit en choisir un. Mais j'espère qu'il y a assez dans cette vidéo pour vous montrer comment les obtenir, au moins les bases de celles-ci. Mais c'est le logiciel, et ce n'était pas trop d'une vente croisée essayant de mincir d'autres cours que vous n'avez pas à les faire, parce que souvent vous juste, au lieu de faire beaucoup de la conception, vous pourriez être juste faire le codage dans la création. D' accord. Mais c'est tout ce qu'on vous verra la prochaine vidéo. 50. Images de niveau de bloc par rapport aux images d'arrière-plan en HTML et CSS: Salut là. Dans cette vidéo, nous allons mettre dans images de fond de morue similaires à l'arrière-plan que nous avons fait dans le projet 1. Nous allons ajouter un peu de fantaisie supplémentaire avec la position de fond et nous allons parler la différence entre les images de niveau bloc et ces images que j'ai définies comme arrière-plans CSS. Permet de sauter et de travailler. Tout d'abord, nous voulons mettre ces graphiques d'arrière-plan dans. Maintenant, je veux soulever un point parce qu'il y a des moments où nous mettrions juste dans l'image dans le HTML. Nous l'avons fait jusqu'à présent avec celui-ci ici, c'est la source de l'image et nous l'avons mise dans le côté HTML réel, et nous l'avons fait quand nous l'avons mis en tant qu'image d'arrière-plan. Rappelez-vous que nous l'avons fait dans le dernier projet, nous avions ce graphique géant de fond. Pourquoi ferais-tu les deux ? Maintenant, ce qui va arriver, c'est que vous aurez un mélange des deux. La raison pour laquelle vous l'avez ici dans le HTML est parce que, si c'est dans le HTML, c'est ce qu'on appelle une image de niveau bloc. Cela signifie qu'il est vu par le navigateur, ou au moins par le moteur de recherche. Le moteur de recherche vient comme Google ou Bing et vient ici et dit : « Hé, regardez, il y a un site web, tout est sur les réparations de vélo. » Parce que nous l'avons dans notre titre là-bas. Il dit aussi : « Oh, il y a aussi un message sur les réparations de vélo. Il y a même une image, il y a des emprises du gars à propos de faire des trucs avec des vélos. » Tout cela ajoute à la capacité des moteurs de recherche de comprendre ce que votre site Web est et ce que vous devriez classer pour. Alors qu'ici, dans le CSS, il l'ignore, il dit, « Je me fiche que vous ayez passé des âges à jouer avec le titre supérieur parce qu'il n'ajoute aucune valeur à la recherche. Avec votre cahier est que, ou avec votre espacement des lignes, le même problème est les images dans les dégradés d'arrière-plan. Ils seront ignorés. Il est préférable d'avoir autant d'images que vous le pouvez dans le HTML parce que vous voulez le compter contre votre site Web ou contre lui vers votre site Web, disons. Alors que la raison pour laquelle vous mettez des images en arrière-plan comme nous allons le faire, dans ce cas est parce que deux choses.La première est, [inaudible] les graphiques de soutien ils ne sont pas vraiment si utiles. Ce ne sont pas des parties clés du site. Ils sont juste du style. L' autre raison est ceci, nous voulons mettre des choses sur le dessus et cela rend super facile quand il s'agit d'un graphique de fond CSS. Fais-le et c'est là que tu mets des trucs sur le dessus. Alors que si vous le faites avec une image, il est vraiment difficile de mettre les choses sur le dessus. Jetons un petit coup d'oeil avec mon image ici. Il y a mon image, je veux mettre une balise P juste au-dessus. Je vais mettre une balise P et je vais mettre un texto. Mais parce que ce sont à la fois des choses au niveau du bloc, du texte au niveau du bloc, des images au niveau du bloc, ils essaieraient de se battre les uns avec les autres. Vous pouvez voir ici le texte a poussé ce gars à la ligne suivante. Peu importe si ce texte est en face ou derrière lui. Ils ne veulent vraiment pas mélanger, ils sont comme l'huile et l'eau. Il y a des façons d'y arriver. Vous devez commencer à jouer avec des choses comme positionnement et l'index Z et c'est beaucoup de bruit. Pour s'éloigner de cette agitation, nous allons juste utiliser une image de fond. Pour ce faire, nous devons copier les graphiques. Nous allons trouver ce fichier d'exercice. Allons au projet 2, et je veux ces trois. Arrière-plan de l'image 1, 2 et 3, copions-le. Allons sur mon bureau, trouvez le projet 2, mettez-le dans notre dossier d'images et regardez, ils sont déjà là. Le tien ne le sera pas, les miens le sont. Collez le vôtre ici, les miens sont déjà ici parce que j'ai déjà eu un couple de comme va à cette vidéo et ça a mal tourné. Essayer d'expliquer le niveau de bloc par rapport à l'arrière-plan CSS, cela m'a pris quelques fois mais j'ai l'impression de l'avoir cloué cette fois, donc c'est la dernière fois que je vais le faire de toute façon. Images de la, ajoutons-les. Nous allons aller à la carte 1 et faisons quelques choses, nous allons débarrasser de la couleur de fond de toutes ces choses. Ici, ici, ici, ici. Tu n'en as plus besoin. Carte 1, permet de mettre en arrière-plan, vous souvenez-vous de ce que c'était ? Image d'arrière-plan. C'est facile. La partie suivante est bizarre. C'est l'URL. URL, quelques crochets et à l'intérieur d'ici, vous devez taper le chemin d'accès à l'image. Dans notre cas, ce sont des images, puis je peux cliquer sur « Image Background Card 1, et à la fin ici, mettre dans un point-virgule. Sauvez-le. Allons vérifier. Ça marche. Vous pouvez le voir répéter là, l'image n'est pas assez grande pour tenir. Tu n'auras jamais l'image pour s'adapter parfaitement. Vous pouvez le forcer, mais parce qu'on utilise un pourcentage, c'est-à-dire 30 pour cent, il sera très difficile de l'obtenir parfait. La façon de l'obtenir pour s'adapter parfaitement à l'arrière-plan est, vous souvenez-vous de ce que la chose était ? Ça s'appelait le fond, je me souviens ? Taille de fond, peut-être celui-ci, couverture. C' est vraiment pratique propriété CSS qui correspond juste à la boîte à sa fin. Si la boîte devient plus petite, disons que c'est 250. En fait, je vais le rendre beaucoup plus petit, juste pour que vous puissiez voir. Une largeur de, laissons-le à cela comme une hauteur minimale. Pourquoi est-il encore grand ? Des cartes ici. À l'origine, nous avons ajouté une hauteur aux cartes, et cela illustre vraiment pourquoi c'est un peu douloureux d'ajouter des hauteurs. Nous le faisons dans cette classe juste parce que cela me rend facile de vous montrer, « Hey, nous avons fait un tag div et nous savons qu'il est au bon endroit parce que nous lui avons donné une taille et une couleur. » Mais chaque fois que je travaille, je n'ajouterai jamais de hauteurs. Les hauteurs proviennent du contenu. Je vais supprimer les cartes, vous faites de même. Espérons que ça marche toujours ? Non. Tous ces types se battent. Ces gars gardent leur boîte belle et grande. Ce n'est pas ce que je veux, alors ce que je vais faire, c'est me débarrasser de la hauteur minimale sur toi et toi, et voyons. On y va. La chose cool à ce sujet est, si je fais ce 100 pixels de large maintenant et que je le fais 50 à travers, pouvez-vous voir l'image essaie de s'étirer pour combler l'écart ? Si je fais ce 10 pour cent à travers, couverture essaie toujours d'insérer la boîte là dedans. C' était une terrible explication. Ce que je veux que vous fassiez, c'est que j'aimerais que vous ayez une hauteur minimale de, disons 250 pour l'instant pour les trois. Je pense qu'il était réglé à 300. Changeons ça ici, et j'aimerais que tu n'aies pas de taille sur les cartes. n'y a pas de couleur sur tout ça. Jetez un petit coup d'oeil. Tu dois le sauver et regarder un peu. On va le faire. Je veux te montrer un peu plus. Maintenant L image ont des exploits en train d'être coupés parce que ce qui se passe est cette couverture par défaut, il essaie de tout saint. Non, il utilise le haut à gauche. Parce que si je fais ça, non je ne vais plus gâcher avec le haut, c'est en haut à gauche et si je rends la boîte plus courte, tu ne verras que sa tête. Il y a un moyen de le forcer à faire ce que vous voulez. Au lieu d'être en haut à gauche, vous pouvez obtenir qu'il soit le bas. Vous utiliseriez quelque chose appelé position de fond. Je ne veux pas dire au fond s'il vous plaît, et maintenant, j'espère qu'on devrait voir ses pieds. J' utilise le bouton parce que ce truc en haut ici, ne me dérange pas d'être coupé. Vous pouvez utiliser le centre. Disons que vous voulez couper la différence parce que votre image a un peu des deux, vous pouvez utiliser le centre et cela signifie qu' il va couper un peu de haut et un peu de bas. Regardons un peu. Je vais retourner au fond. Ça va se défaire. J'aimerais que ça soit sur eux. Je vais prendre ça et je fais la même chose ici, et la même chose pour trois. Mais je dois passer par là et passer à deux et ici à trois. Voyons voir comment ça s'est bien passé. Celle-là a fonctionné, l'autre n'a pas fonctionné. Eh bien, parce que j'ai mis 12. Tu l'as vu. Ce type peut être différent. Vous pourriez décider d'aller au centre pour l'un ou l'autre. Je suppose que la grande chose à retenir est que nous savons à moitié ce qu'est une image de niveau bloc par rapport à une image de fond CSS, et nous avons appris quelques astuces supplémentaires comme jouer avec la position d'arrière-plan. Ça pourrait être bien maintenant. Rappelez-vous notre premier projet, la grande image de fond, vous pouvez passer par maintenant et changer la position pour dire centre au lieu d'être dans le haut. On va le laisser là pour celui-là. Nous allons l'envelopper comme étant spécifiquement les images d'arrière-plan. Dans la vidéo suivante, nous allons finir la, ou au moins commencer, ou au moins faire un peu plus de cartes. Nous allons mettre dans les tics, obtenir le style, nous allons faire des choses amusantes avec des cartes cliquables complètes. Je te verrai dans la prochaine. 51. Finir nos cartes: D' accord. En toute honnêteté, cette vidéo n'est pas super excitante. On va ajouter les H2 ici. Nous allons ajouter nos tags p et faire un peu de style. C' est la viande et les pommes de terre du cours. En faisant cela, nous savons comment le faire. Je vais vous donner quelques trucs et astuces. On va faire des trucs amusants avec des marges, mais quand je dis amusant, je veux dire, ça vaut la peine de regarder, c'est ce que je veux dire. Nous allons les ajouter. Allons y sauter. Je ne l'ai pas vraiment vendu, mais c'est la vérité. Ce n'est pas des moments Eureka dans celui-ci, c'est juste faire des vidéos. Dans cette vidéo, nous allons ajouter une étiquette H2 et P à toutes nos boîtes. Pourquoi un H2 ? Deux raisons ; l'une est qu'il va visuellement être plus petit comme frapper un est notre plus important et ceux-ci et est important pour l'importance du rôle du site, parce que ce n'est pas essentiel, mais il est plus important de donner à votre H 1 toute la puissance qu'il peut en ne le diluant pas. Si vous finissez par avoir comme dix H1 sur votre page d'accueil, il devient difficile pour les moteurs de recherche de savoir ce qu'est votre site. Gardez-le à un ou deux et ces gars vont être H2 vous avez des H2, des 3, des 4, des 5, 6 pour que vous puissiez tout étaler. Ajoutons-les. Je n'ai pas de copie parce que c'est juste réserver en ligne. On pourrait taper ça. Mettons-le dedans. Il a une carte 1, je dois mettre un retour et ensuite à un H2 et celui-ci va être réservé en ligne. Sauvez-le. Jetons un petit coup d'oeil. Nous goûtons toujours comme nous le faisons. Cela va juste être une balise P et nous allons mettre dans un lorem ipsum de base et 15 mots est ce qui a fonctionné. Ça va être sympa à cause d'un petit regard, ça marchera bien. Donnons du style à ce H2. Dans mon CSS, je les garde juste ensemble. n'y a aucune raison pour que le H2 soit au-dessus de la balise P, mais c'est juste agréable quand vous cherchez à travers elle pour trouver tous les H ensemble. C' est pas cher et attraper tous les trucs H1 et juste jouer avec la taille. Maintenant, j'ai déjà travaillé à mes tailles. C' est peut-être mon rapport fou, les temps 0.0625. Ça va être deux rames pour la taille que je veux. Je veux qu'il soit placé ici et une marge que je n'ai pas décidée. Je vais supprimer ça. Jetons un petit coup d'oeil. C' est mon H2, ma balise P. Pour le moment, il utilise tout ce que j'ai fait actuellement pour le P mais dans mon cas, je veux qu'ils soient réellement petits. Tu vois mon dessin ici ? Ce texte est beaucoup plus petit que cette balise P. Je vais commencer la balise P générique. Je veux changer celui-ci et on va utiliser un sélecteur de composé. On les a déjà regardés. Ce que je veux dire, c'est que cela dépend de la spécificité que vous voulez être. Vous pourriez dire que je veux qu'il soit dans la carte 1. S' il y a une étiquette P, faites cette chose mais parce que ça va être dans toutes les cartes, ce que je vais dire c'est que je vais utiliser celle-ci. Je vais dire l'emballage que j'ai utilisé à l'extérieur. Je peux dire, S'il y a une balise P n'importe où à l'intérieur de toute cette balise div géante qui s'ouvre là et se ferme là, qui comprend les cartes 1, 3 et 3, ça devrait fonctionner. Ce que je veux faire, j'ai pensé que je veux que la taille de la police soit d'environ 0,85, enregistrez-le. Jetons un petit coup d'oeil. Ne fonctionne pas. Sauvez-le, sauvez-le, ne fonctionne toujours pas. Tu sais pourquoi ? Je ne sais pas pourquoi. Je vais l'interrompre et le comprendre et je reviendrai. Vous l'avez tous vu. Apprendre. J'ai oublié de mettre un rem et le point-virgule. Il supprime la moitié de cet indice. Ouf, facile. Maintenant, nous allons devoir nous battre avec la hauteur de ligne parce que nous l'avons mis en place ici pour être parfait, mais maintenant ça ne marche pas tout à fait. Nous allons utiliser une hauteur de ligne de tout ce qui est plus grand que 0,85. J' ai déjà travaillé sur le mien à 1.2. Maintenant, je veux voir ça et ça. Ce que je pourrais faire, c'est que je pourrais dire, « Très bien, je veux que tu sois au centre du texte. » Mais je dois le faire deux fois. Je devrais le faire voir pour que vous puissiez travailler, copier, puis vous pouvez le faire et ensuite le coller ici et cela fonctionnerait bien. Totalement. Mais soyons juste intelligents et ne pas l'avoir sur ceux-ci et l'avoir sur l'emballage à l'extérieur. On va dire que tout dans les cartes va être placé au centre de la ligne. Jetez un oeil fait maintenant le même travail. Le truc cool à ce sujet est qu'il va le faire pour cela, et dans la vidéo à venir quand nous ajouterons l'icône, ce sera aussi simple. Juste un peu plus intelligent. Quelques autres choses que je veux faire vont trop près des bords plus le titre au-dessus de ça et tout ça. Ajoutons un peu de rembourrage et je veux vous montrer un petit raccourci cool. Jusqu' à maintenant, nous avons fait ça. Si nous voulons un rembourrage au-dessus et en bas et à gauche et à droite. Vous pouvez voir que je veux un rembourrage au-dessus, gauche et à droite et en bas et cela peut être douloureux quand vous faites. Vous voulez un rembourrage ou une marge. Dans ce cas, ça n'a pas d'importance. Je vais faire la marge, en haut, et puis tu fais ça et tu le fais en bas, à gauche, droite, et tu as plein de lignes. Ce que vous faites normalement maintenant que nous allons tous un peu plus loin, c' est que nous tapons juste, « Marge » Il y a un raccourci. Fondamentalement, ça commence au sommet. Disons que nous voulons que ce soit dix au sommet. Voici dix pixels, pas de virgule. C' est le haut, et il suffit de mettre un espace et vous en voulez 30 sur la droite. J' aimerais qu'il soit 20 en bas et 30 à gauche. Il fonctionne toujours comme ça, en haut, et puis il va dans le sens des aiguilles d'une montre. En haut, à droite, en bas, à gauche. C' est logique. Dans le sens des aiguilles d'une montre, et enregistrez-le. Jetons un coup d'oeil. Éditons les dix en haut, 30 là, 20 en bas, et 30 là. 20 en bas n'a aucun sens pour le moment. Plus tard sur le cours, lorsque nous ajoutons l'icône ci-dessus qu'il pousse. C' est juste un peu d'espace en dessous pour qu'il ne soit pas assis sur la droite en bas ici. C' est un petit raccourci cool. Disons que nous voulons 20 parce qu'en ce moment nous avons dix en haut et 20 en bas. Disons qu'on s'en fichait. C' est très commun de faire la même chose en haut. Je veux 20 en haut et en bas, je veux 30 à gauche et à droite. Tu peux être encore plus court, Hentry. Si je fais 20 et 30 et que je n'ai que deux mesures, cela suppose que vous voulez dire haut et bas, gauche et droite. Est-ce que ça a du sens. Vous pouvez simplement taper marge, en bas, en haut à gauche et avoir quatre lignes. Mais c'est la version super abrégée. Je ne pouvais pas utiliser ça parce que je voulais que le haut soit différent du bas. 20px, puis 30 à nouveau. Cool. Nous allons ajouter un peu de rembourrage sur le H2 aussi parce que je veux qu'il ne soit pas seulement hors du haut de cette boîte, mais il va être hors de l'icône que nous allons ajouter plus tard. On va y aller. Ce cas et sa forme parfaite, marge supérieure, parce que nous n'avons pas d'autres mesures que nous voulons ajouter. Nous ajoutons à 20 pixels. Pourquoi est-ce que j'utilise des pixels et non des rems ? C' est une bonne question parce que parfois vous pouvez utiliser des anneaux pour des tailles comme celle-ci aussi, mais je ne vois pas la raison d'avoir rems que si quelqu'un met à l'échelle une police, que l'espacement du haut doit changer. Je ne pense pas que ça en ait besoin. Ça n'a pas vraiment d'importance si cette police devient plus grande. Il peut toujours rester 20 pixels par rapport au haut. Je trouve des choses comme l'espacement, je vais laisser en pixels, tailles de police absolues, et pour des choses comme les mesures de police réelles. C' est ce qu'on appelle une taille relative. Il est un rem est relatif à quelle que soit la taille par défaut est définie sur le navigateur. Relatif, absolu. Modifions ces autres cases et nous allons passer à autre chose. Je vais attraper tout ça. Vous copiez, je vais le coller là-dedans. Je vais le coller ici et ça allait changer. Qu'est-ce qu'on a ? Types de service. Merci beaucoup. Le dernier, s'il vous plaît, allez. J' essaie d'utiliser des raccourcis, appelez des conseils. Ça va être le dernier. Il suffit de taper ça. Ici, nous allons dans nos H2 ça devrait être dans les trois. Jetons un petit coup d'oeil. Joli. Ce sera tout pour cette vidéo et la prochaine vidéo, nous allons rendre toute la chose cliquable, ce qui est cool. Des nuages qui arrivent. Je te vois dans la prochaine vidéo. 52. Comment ajouter des icônes à votre site Web à l'aide de Font awesome VS Code: Salut là, cette vidéo, nous allons mettre en icônes. Tu dis : « Hé, ça ressemble juste au logo ou à l'image, à quel point ça peut être dur ? Pourquoi la vidéo est-elle si longue alors ? ». C' est parce que nous allons utiliser des polices pour faire des icônes. Nous allons regarder quelque chose appelé Font Awesome, nous allons regarder le matériel de Google pour les icônes. C' est une façon intelligente d'implémenter des icônes sur votre site sans utiliser d'images. Il y a des avantages et des inconvénients, et c'est juste une autre façon d'utiliser des choses comme des PNG ou des images pour des icônes. Notez également qu'à la fin j'ai une fausse fin. Je me dis : « Oui, merci et vous avez fini » puis continuez un peu et vous montrer un peu de rembourrage supplémentaire en haut. Alors traîne pour le dernier morceau. Saute alors. Alors, qu'aurions-nous fait par le passé ? Nous aurions ajouté une image ; un PNG ou un SVG à notre graphique, ou à notre code et puis dans ma vue en direct ici, il y a l'icône ici, et c'est charger un JPEG, un PNG, ou un SVG, il est donc en cours de téléchargement. Ils ne sont pas très gros, donc vous pouvez utiliser des images, c'est bon. Mais nous allons examiner l'utilisation de polices ou de polices d'icônes dans cette vidéo particulière. Je veux vous le montrer parce qu'il y a beaucoup de frameworks plus tard que vous pourriez rencontrer les utiliser et l'autre chose cool à leur sujet est qu'il y a juste beaucoup de cool, vous n'avez pas à les concevoir vous-même. Ils sont tous dans de jolis petits groupes, ils sont libres, il y a toutes sortes de bonnes raisons d'utiliser des polices, mais pour moi personnellement, la première chose que je veux faire quand je télécharge une de ces polices est de s'ouvrir dans Illustrator et de la changer et de gâcher autour avec. Je vais vous le montrer aussi, mais utilisons ces icônes de police qui sont vraiment faciles à utiliser. Alors regardons les deux principaux acteurs dans ce domaine. Eh bien, le principal est Font Awesome. Font Awesome fonctionne de la même manière que nos polices Google, rappelez-vous plus tôt dans le cours quand nous étions comme  : « J'aimerais avoir quelques bonnes nouvelles polices sur mon site ». Nous avons ajouté ce morceau de CSS, pour aller à Google Fonts et nous avons téléchargé Playfair et Roboto. C' est exactement le même principe ici pour utiliser Font Awesome, sauf la police qu'ils ont changé l'ABC en bacon, cake, burger. Donc c'est tout ce qui se passe vraiment. Allons-y et faisons-le, faisons une recherche. Il y a une version pro, et fondamentalement la version pro vous donne des poids différents. Je vais te montrer ce que je veux dire dans une seconde, allons l'utiliser gratuitement. Je vais chercher des polices, je vais dire « Bike ». J' ai déjà préparé, donc j'en ai trouvé un cool qui est un vélo. En fait, j'ai ignoré ceux-ci ici. J' ai essayé d'en trouver, j'ai choisi au hasard. Ce n'étaient pas de bonnes icônes, je vais en choisir de nouvelles, des vélos. Donc, la différence entre pro et payant, c'est une police gratuite, c'est une police payante et être comme, « quelle est la différence ? » et il y a juste des poids différents. Vous pouvez voir que l'un en a une belle mince, que l'autre est plus mince, que l'autre est en quelque sorte plein. Vous devez décider si vous pouvez vivre avec ça, ou si vous voulez vraiment celle-là. Donc c'est la différence et vous voyez que le prix n'est pas énorme. Abonnement, vous obtenez beaucoup plus d'icônes, toutes les icônes grisées, sont celles que vous ne pouvez pas utiliser, mais il y a une version gratuite de toutes. Maintenant, pour les utiliser, cliquez sur un. Cette page se charge, semble changer de couleur à chaque fois que je recharge cette page, rose pour le moment, le vôtre sera différent. Donc ce qu'il nous faut, c'est le truc le long du sommet ici, principalement. En fait, c'est une sorte de te montrer des trucs cool, je peux le voir comme une couleur unie, comme blanc sur noir, différentes tailles, tout très cool. Alors commençons à utiliser cette icône. Il y a deux parties dont nous avons besoin, nous avons besoin de cette partie et nous avons besoin, où est-ce ? Vous n'avez pas de projet mis en place. C' est un peu caché. Faisons ce peu d'abord. Donc, commencez ici et fondamentalement c'est le CDN, c'est un réseau de diffusion de contenu, c'est exactement le même que nous l'avons fait pour les polices Google. Tout ce qu'on a à faire est de le copier, et d'entrer dans notre code. Mettez-le ici, je le mettrai juste en dessous. Ce qu'il a vraiment besoin de faire est juste être sous votre style.css. et n'a pas vraiment d'importance de quelle façon les polices Google et cette Font Awesome va, mais il a juste besoin d'être dans le haut là-bas. D' accord, la prochaine chose que je dois faire, c'est que je vais y retourner. Donc, une fois que c'est dedans, vous n'avez besoin de le faire qu'une fois par page. Cela doit être sur chaque page sur laquelle vous avez une icône. Il n'a pas besoin sur les pages qui n'utilisent pas d'icônes, donc il n'a pas besoin d'être sur chaque page, mais souvent il suffit de les jeter sur le rôle. Donc ce dont nous avons besoin, c'est cette chose ici , ce morceau de code, cela va dans notre HTML, je vais le copier. Ça n'a pas vraiment d'importance si tu l'obtiens de là ou d'ici, même chose. Copiez-le et passons dans notre code et mettez-le là où vous le voulez. Donc je vais me débarrasser de cette icône d'image et je vais la coller ici. Je vais le frapper et l'aligner bien et appuyer sur Enregistrer et nous allons voir comment cela fonctionne et vous êtes là. Voici ma petite icône. Donc, par défaut, c'est très petit, en fait, le truc bizarre est que vous devez penser à cela comme une police, ce qui est vraiment difficile à faire. Tu dis : « Ok, je veux dimensionner ça, je vais en faire une largeur de 100 pixels ». Ça ne marchera pas. Vous en avez besoin pour en faire une taille de police de 100 pixels, ok, parce que c'est une police, c'est pourquoi elle est si petite. Le vôtre pourrait être plus grand parce qu'il utilise quelle que soit la taille par défaut est venue dans les navigateurs 16, à quoi est-ce que nous changeons cette valeur par défaut ? Je pense que c'est à 18 pixels, quoi que ce soit, c'est la taille de police par défaut. Donc, pour aller et styliser ceci, jetons un oeil à notre HTML. Donc, nous pouvons styler ceci, nous avons une balise i, c'est ce qui est utilisé pour l'icône, rappelez-vous p pour le paragraphe h2 pour frapper deux, je est utilisé pour icônes et il y a quelques classes qui lui sont appliquées parler dans une seconde. Donc, vous pouvez cibler n'importe lequel d'entre eux, parce que je n'ai qu'un seul groupe d'icônes sur toute cette page. Ils sont juste un, deux, trois. Je vais juste marquer toutes les icônes. Vous devrez peut-être être un peu plus précis. Donc, je vais dire, « toutes les icônes ont une taille de police de, je vais utiliser 100 pixels ». Pourquoi est-ce que j'utilise des pixels même si nous avons fait des sonneries plus tôt ? Principalement parce que, si j'ai un coup d'oeil, ça ne va pas aider les malvoyants si cela devient de plus en plus petit. Cela ne va pas la rendre plus lisible, c'est une photo d'une moto vraiment stylisée et simple. Vous pourriez soutenir qu'il a besoin de devenir plus grand et plus petit, peut-être que vous utilisez une taille plus petite. Donc, il pourrait vraiment être des bagues ou vous l'utilisez en ligne avec le texte, disons qu'il arrive à la fin, vous utilisez cette petite moto à la fin d'une phrase, alors ce serait une bonne idée d'être une bague et c'est comment commencer à les utiliser. Donc, la chose cool à leur sujet, nous allons faire un peu plus de détails mais fondamentalement, c'est charger une police qui se trouve être à la place des lettres, ce sont des icônes, il y a des charges à choisir parmi Font Awesome, et cela signifie qu'ils sont évolutifs comme vector, vous savez, nous avons parlé d'être, où sont toutes mes affaires, nous avons parlé d'être évolutif. Si je zoome dessus, vous verrez que ma moto est mise à l'échelle, comme un SVG, mais elle est chargée en tant que police et si quelqu'un est allé sur un site qui utilise Font Awesome, quels sont les nombreux sites qui l'utilisent, cela signifie quand ils arrivent à votre site, il pourrait simplement se charger encore plus rapidement parce qu'ils sont déjà préchargés mais si vous pensez, « hey, pourquoi ne pas simplement le charger comme une image semble être une chose facile à faire plutôt que d'appeler le CDN en haut et, en toute honnêteté, c'est ce que je fais. Je vous montre cela parce que vous allez trouver des sites avec ceci dans et ce petit tag i mis en œuvre et la raison pour laquelle je ne le ferais pas cette façon est parce que la première chose que je veux faire est télécharger la moto de Font Awesome comme SVG et je pense que vous pouvez le télécharger à partir d'ici à partir d'un SVG, où est-il, ici, il est en haut ici dit « télécharger, SVG ». Je suis d'accord et je télécharge et vous obtiendrez juste un vieux graphique régulier parce que ce que je veux faire est de le télécharger, d' ouvrir cela dans illustrator et de commencer à jouer avec lui et de le changer. n'y a donc pas de bonne ou de mauvaise façon de le faire, mais nous avons appris à le faire. Allons dans un petit peu plus de détails. Regardons la structure de celui-ci. FAS, donc il s'est donné deux classes, donc bien, il en est suggéré deux. FAS, et FA- moto. Donc FAS est Font Awesome, donc il est écrit deux fois là-bas, Font Awesome c'est une version solide, il y a une version régulière et une version légère, donc si j'avais payé pour cela, je pourrais obtenir la version FAR la version FAL et le fait est que je n'ai pas besoin de changer, je n'ai pas besoin d'utiliser le site Web pour le faire. Je peux aller ici et dire en fait que j'ai payé pour ça maintenant et que j'utilise... Ils vous donneront un CDN différent en haut ici pour les payants et vous pouvez aller ici et le changer en R, ou lumière, mais nous utilisons la version solide gratuitement. Cet autre peu ici, le FA dit que c'est Font Awesome et moto est très clair ce que cela fait. Ok, allons-y jeter un coup d'oeil. Donc je vais éditer ces deux autres... Je vais le faire mal à d'autres cartes. On y va, mec, je suis dans une mauvaise matinée. Allez, tu peux le faire. Bon, donc maintenant ce qu'on peut faire, c'est dire que je veux, je cherchais un COG. Lequel sera le COG ? Qu' est-ce qu'on a ? Nous avons des types de service, appel à conseil, donc nous ferons le service sera rouages. Donc j'ai trouvé que certains Cogs et moi aimons celui-ci et au lieu d'avoir une copie et coller le code, je peux juste dire, oh regardez ceci, si un Cog.Donc c'est ce qui est écrit là-bas et je vais juste aller ici, je vais pour dire que vous êtes Cog et je suppose que ça, je suppose totalement téléphone. Je n'ai pas préparé celui-là. Vous avez fait un travail ? Que je le sauve ? Sauvegardez. Regarde, il y avait un téléphone. Vous pouvez espérer le meilleur et essayer de deviner sauf assez bien nommé. Qu' est-ce que j'ai choisi ? J' ai utilisé le téléphone, mon exemple préparé, le RNA-seq, vivre dans. Donc, c'est comment les utiliser et comment les mettre en œuvre si vous avez besoin de les colorer, comment les colorierais-tu ? Pense à réfléchir. Arrêtez, faites une pause, mettez la vidéo en pause, réfléchissez. Vous avez fait une pause ? Qu' est-ce que tu en penses ? Je le fais comme ça ? Rappelez-vous que c'est juste une ancienne police ordinaire, donc vous la stylisez en utilisant toutes les choses que vous pouvez pour les polices. Donc nous en aurions maintenant des bleus, la seule raison pour laquelle mon blanc est parce que je suis dans ma tête tag ici dit que toutes les polices qui sont dans la balise body sont blanches sauf si je dis le contraire. C' est pour ça que ça passe par White, je n'ai pas besoin de le répéter ici. Cette petite boîte de couleur que je l'ai ignorée, je me suis habitué à lui. Tu ne le feras probablement pas. Tu commences à supprimer des trucs et cette petite boîte blanche s'en va. Il est juste là pour un petit moment et disparaît. Si vous le trouvez ennuyeux, aussi. Boîte colorée ennuyeux qui ne semble pas apprendre à connaître la façon dont les cartes dit cool, mais c'est aussi une douleur. Maintenant, une autre chose que je veux juste mentionner brièvement est que Font Awesome est une option et il pourrait ne pas être dans le futur que vous pourriez passer par et il pourrait y avoir quelque chose de plus génial. Un autre qui est assez commun est Material. Donc material.io est plus que des icônes. Font-Awesome est juste des polices, icônes et du matériel comme beaucoup de choses. Nous en avons parlé dans d'autres cours comme notre cours UI UX, mais il a aussi de très bonnes icônes. Donc, si vous allez à material.io et passez par et jetez un coup d'oeil, j'essaie de deviner où il est. Je normalement juste Google material.io icône, il est là, ils sont populaires. Cela va changer aussi bien, je vous parie au moment où vous arrivez ici, mais si vous icônes Google Matériel, vous finirez ici ou quelque chose qui ressemble raisonnablement à ceci. Pourquoi utiliserais-je cela sur Font Awesome ? Celui-ci ici vous l'utilisez pour beaucoup plus genre de, si je faisais le site Web d'une banque ou une application pour quelque chose de comptable, quelque chose qui a besoin d'icônes plus institutionnelles, il y a beaucoup plus d'icônes institutionnelles ici. Plus Font Awesome est amusant, mais certaines des icônes sont un peu ambiguës, alors que ce Material Design semble, tend à avoir un peu plus. Ils correspondent à toutes les choses utilisées dans les applications Android. Si souvent ces icônes sont enseignées au monde via les applications de Google ; Gmail, Chrome, c'est une sorte de chose universelle que Google utilise donc il est très utile. C' est gratuit à utiliser. Il n'y a pas de version payante de ceci, mais il n'y a pas autant de polices. Vous n'allez pas trouver une fouille ou y aura-t-il une icône Instagram ? Je doute qu'il y en ait. Il y a probablement un Instagram sur, il n'y aura pas de clown sur une moto, alors qu'il y a probablement un clown sur une moto à Font Awesome. Ici, vous pouvez faire similaire à ce que vous avez fait dans Font Awesome. Il y a différents styles, donc il y a une version remplie, vous pouvez le voir là, je vais faire défiler vers le haut. Il y a une version Arrondi qui n'a pas l'air trop différente, deux tons, version Sharp. Donc, vous pouvez choisir l'un d'entre eux, faire une recherche en haut ici. Donc disons que j'ai besoin d'une photo d'un Cog, il n'en aura pas une. Pas de rouages, mais ils sont un portefeuille, il n'y a pas de portefeuille [rires] Il y a un rouage de carte de crédit. Donc, je clique dessus et c'est un type très similaire de chose, vous pouvez soit le télécharger en tant que SVG ici, donc vous pouvez dire SVG, s'il vous plaît télécharger. Déjà cliquez sur Télécharger aller ou vous pouvez cliquer sur la petite flèche ici, voir petit chevron, et vous pouvez l'intégrer. Donc, vous devez faire deux choses. Allez aux instructions, ça ouvrira une sorte de comment le faire et tu fais juste défiler parce que tu aimes, je suis hardcore, je n'ai pas besoin de tout ça, j'ai juste besoin de toi. Donc il suffit de l'attraper, donc c'est le même type de polices Google que nous l'avons fait avant, mais la famille de polices est des icônes Matériel, disons copier cela, collez-le dans la tête de votre document. Donc, ici, vous pourriez probablement le combiner avec celui-ci. Oui, vous pourriez certainement ou vous pourriez avoir un séparé n'a pas d'importance. Chargez deux fois, puis vous collez le HTML et tout comme nous l'avons fait avant, donc il est là. Bon, donc ce n'est que deux d'entre eux. Il y a beaucoup d'options différentes, mais deux les plus populaires en ce moment. Très bien, c'est assez pour les icônes et les polices. Passons à la prochaine vidéo alors. Dépêche-toi. D'accord, tendez. Tenez en place. Tenez en place. Regarde l'icône là. Ils touchent le haut, ils ne peuvent pas les laisser comme ça. Donc, nous allons passer à travers maintenant et juste les pousser sur le rembourrage. Ce n'est pas très amusant ou excitant. Comment va-t-on le faire ? J' ai l'intention de le faire avec mon, comment doit-on le faire ? Je pourrais le faire, si je le fais à la carte, si je dis que la carte était en attente, je le ferai encore une, deux, trois fois parce qu'on a la carte un, deux et trois. Donc, je vais faire l'icône et je ne le fais que pour cela parce que j'ai le luxe de n'avoir que ceux que j'ai, les icônes une fois sur une page et c'est tout ce que j'utilise pour. Si vous utilisez sont très icône site lourd. Cela se sent comme une très mauvaise idée parce que vous aurez plus tard dans la conception de votre site Web vous seriez comme, oh, je vais ajouter une icône et ce sera le rembourrage de shoot dessus. Donc nous allons faire, ce que nous pourrions faire est padding-top et nous dirons que le rembourrage sur le dessus de cela, je n'en ai aucune idée. Pixels. Jetons un coup d'oeil, vas-y. Non, trop, 30. D'accord. Oui. Je suis là. Je suis là et une chose que nous pourrions faire, c' est qu'il n'y a pas de mal à dire maintenant faire un sélecteur composé, donc je veux des tags mais seulement s'ils sont à l'intérieur d'une carte. Je n'aurais pas dû utiliser de cartes, et ça va faire la même chose. Ça va marcher. Mais plus tard, si vous utilisez l'icône en dehors de ces cartes, cela ne s'appliquera pas. Donc, vous pourriez juste être à l'épreuve de l'avenir. C' est le genre de choses auxquelles je pense quand je suis genre, c'est une chose vraiment facile qui fonctionne en ce moment. Ça va me causer un gros mal de tête plus tard. Bon, maintenant, c'est la fin. Je te verrai dans la prochaine vidéo. 53. Comment faire d'un conteneur DIV entier un lien cliquable ?: Salut là. Dans cette vidéo, nous allons passer à travers et rendre chaque partie de cette carte cliquable. Tout en une seule fois plutôt que d'ajouter un texte, chaque élément séparé, le tout va être sympa et cliquable, aller à un seul endroit. Allons entrer et travailler sur la façon de le faire maintenant. Je veux que toute cette chose cliquable et je veux que l'icône cliquable, le texte cliquable, tout cela cliquable à la fois aller au même endroit. Donc, je pouvais passer par et lentement mais sûrement aller, je pourrais envelopper mon h2 dans un tag A. Donc, au début, je vais taper un A. Besoin d'un espace pour tout ce pré-allusion au travail. J' ai donc besoin de l'espace entre mon h2 et mon A. Ensuite, le wrapper part d'ici. J' ai mis la balise A s'ouvre avant et après. Il n'a pas besoin des espaces juste là pour le rendre clair. Où d'autre ça va aller. Ça va aller dans cet endroit aléatoire que je n'ai pas encore décidé. Ça marche. Il est devenu violet parce que c'est un lien visité qui n'est pas cool, mais nous allons corriger cela. Mais je peux continuer à le faire pour cette police, pour cette balise P. Je pourrais le faire pour toujours, mais il est plus facile d'envelopper le code entier dans une balise. Un peu de défaite, retenez. façon si problématique. Donc au début, il y a un tag, je vais dire, début de ce code, je vais envelopper tout ça, d'accord ? Cliquez dans le « Div » et il devrait mettre en évidence, ok, donc il y a un début et la fin. Donc je veux commencer comme je prends ici. Ça va aller au hachage. Et si vous avez obtenu ce que fait le hachage, ou le signe de livre, rappelez-vous, c'est juste un endroit tenir le lien parce que je n'ai pas d'autres pages. Ce projet particulier fera d'autres pages parce que nous le ferons. Mais cela va maintenant en faire un lien entier, qui fonctionnerait normalement, ça fonctionne, tout est devenu violet, parce que c'est un lien visité, nous allons le rendre blanc. Mais ça marche en fait. Je peux cliquer sur eux tous, tout est activé. Le problème, c'est que ça a détruit mes boîtes, tu veux, qu'est-ce qui s'est passé là-bas ? Tu te souviens quand on parlait de Flexbox parce que ces cartes utilisent Flexbox, d'accord ? [ inaudible] nous disons display flex. Ok, et on a fait 30% à ces gars. Et le truc cool à propos de flexbox est, il est juste général sur une ligne et ensuite nous les espacons uniformément. Nous utilisons donc beaucoup d'attributs de boîte flexible. Et je me souviens que l'un des rôles était que vos cartes devaient être des enfants directs du parent. Le parent dit que tu vas fléchir et que ces gars doivent être directement en dessous. Ce qu'on a fait, c'est qu'on a coincé une étiquette A entre la famille heureuse. Codes un, doit être directement le prochain descendant des codes. J' ai pris le truc de la famille trop loin. J' ai une thérapie familiale dysfonctionnelle, thérapie pour nos tags div. Donc ce qu'on va faire, c'est qu'on va l'annuler. Comment contourner ça dans ce cas ? Ce qu'on va faire, c'est dire qu'on pas besoin de la balise A pour enrouler ces trois. Ça n'a pas besoin d'être autour de ça. On sera cool parce que j'adorerais que tout soit cliquable. Mais pour le moment, ce sera juste tous les ingrédients, toutes les choses à l'intérieur, et je suis assez heureux avec ça. Notre étiquette A, ça va aller au hachage. Je vais prendre tout ça. Colle-le là, mets-le au bon endroit, qu'est-ce que tu vas te faire ? Là-bas, on l'a un peu ramassé. Je ne fais rien d'autre que des tabulations. Ça a l'air vraiment sympa. Alors codez un à l'intérieur, puis mon balise A, et puis tout ça. Ceux-ci sont tous également importants pour ne pas l'intérieur l'un de l'autre. Ils sont tous dans le même genre de marge du côté ici. Si vous lui donnez un aperçu un chèque ; et cela fonctionne. Tu es comme, tout est violet, ça ne marche pas. La couleur par défaut des liens qui ont été visités est pourpre. On va changer ça. Alors allons-y et changeons-le. C' est aussi un quiz pop, êtes-vous prêt ? Quiz pop, tu dois le tirer dans une seconde et essayer de le faire tout seul et puis revenir voir si tu es proche. Très bien, je veux que tu fasses un blanc et je voulais que tu te débarrasses du souligné. Comment le ferais-tu ? Pause maintenant et je te vois dans une seconde. D' accord, reviens, il y a deux façons de le faire. Pendant que vous pouviez le faire, vous pouvez dire si ces codes, au pluriel, d'accord ? Il y a une balise A avec un h2 dedans, vous pouvez le faire comme une combinaison multiple, il y a h2-s, ils sont à l'intérieur d'une balise A qui sont des codes. Je veux dire que la couleur va être blanche ? C'est tout blanc. Vous pouvez le voir ; si c'est un h2 c'est là, c'est blanc. Et je peux dire décoration de texte. Celui-ci pourrait être, tu l'as compris, non ? Tu es genre, comment tu te débarrasses du sous-jacent ? Décoration de texte. D' accord. Aucun. Même pas. D' accord, donc la ligne est passée en dessous. Ce n'est pas le cas, parce que j'ai fait quelque chose de mal. Qu'est-ce que j'ai fait de mal là-bas ? Décoration de texte, souvent j'ai besoin du code pour m'assurer que ma syntaxe est correcte, mon orthographe est correcte et que la ligne a disparu. Très bien, donc ça ne marche pas [inaudible] ok même si ça semble bon. Mais je dois passer par là, faire une pour la balise A, et une icône et puis c'est un tambour loin. Donc vous avez peut-être emprunté cette route. Vous pourriez avoir deux classes différentes. Vous pouvez en fait simplement dire en fait, il n'a pas besoin d'être aussi spécifique, juste un balises à l'intérieur des classes. Donnons ça un coup, jackpot. Maintenant, ce que vous pourriez aussi faire, c'est que vous partiez ; je vais rencontrer ce problème beaucoup. Je n'ai jamais voulu être violette et je n'ai jamais voulu souligner. Ce que vous pourriez commencer à décider, c'est que rappelez-vous, je verrai qu'il est écrit récemment en haut ici. Nous avons fait notre propre réinitialisation CSS ? Celui d'Eric Meyers, on pourrait l'appeler la barre oblique Dan Scott d'Eric Meyers, parce que nous pourrions aller dans cette réinitialisation CSS et arrêter de faire notre propre version. Nous pourrions aller ici et dire en fait, je veux que toutes les étiquettes A soient blanches, s'il vous plaît et n'aient pas de soulignement. Vous pouvez éditer à cela, alors je n'en ai pas besoin ici. Je n'ai pas besoin de le dire. Donc, vous pourriez constater que chaque fois que je fais un site web, je ne veux jamais le soulignement. Ainsi, vous pouvez arrêter de faire votre propre réinitialisation CSS. Je ne vais pas le sauver. J'ai dit de réinitialiser Meyer cette fois ? Je ne suis même pas sûr. D' accord. Désolé, Eric Meyers. Très bien, si vous l'avez fait d'une manière différente, j'aimerais le voir dans les commentaires. Faites-moi savoir comment vous l'avez fait, prenez une petite capture d'écran de la façon dont vous avez fait un travail. Et oui, c'est comme ça que j'ai fait fonctionner. Vous pourriez trouver encore un meilleur moyen et avoir de bonnes raisons pour cela. Mais ce qui compte vraiment pour moi en ce moment, c'est qu'il est cliquable, et c'est un blanc sans soulignement. Le reste de cette vidéo ne sera pas très excitant et nous allons le faire. Eh bien, une chose que je veux faire, pendant qu'on est là, on commence à arriver à un point où, je ne sais pas, dépend. Vous pourriez être comme si c'était encore très dur et je ne sais pas ce que je fais. Mais si vous vous sentez juste un peu moins nerveux à ce sujet, et en regardant votre site que vous aimez, et vous avez fait ce port. Je veux que tu sois fière. Je veux que vous passiez à travers et que vous regardiez réellement, code [inaudible] il y a du code en cours. Je cods un site web, il y a beaucoup de choses à apprendre. Vous pouvez voir qu'il y a beaucoup de vidéos prises en charge dans ce cours, mais j'espère que vous pouvez avoir un sentiment de défiler vers le haut et vers le bas et aller, « regardez-moi », je comprends comment la plupart de cela fonctionne pour le moment. Pas la semaine prochaine, mais au moment où vous êtes comme, « en fait, je pourrais passer par là et commencer à ajuster des choses ou au moins faire un autre site d'égale complexité de celui-ci ». Je ne veux pas que tu oublies ça. Je veux que tu sois fière parce qu'il y a toujours des choses à apprendre. Je vais bien en tant que concepteur web. Mais il y a beaucoup de gens bien mieux que moi. Mais ça n'a pas d'importance même si je termine un site Web et c'est assez simple, je suis toujours [inaudible] je suis genre, « regarde moi faire le codage », je me sens bien. Comment vous sentez-vous bien ? Et ça suffit. Maintenant, allons-y et finissons les derniers morceaux. Je vais envelopper tous les autres types dans des étiquettes. Je vais copier cela ; je vais mettre plusieurs curseurs. Un juste ici, un juste là, maintenant, sur mon Mac, c'est « ALT ». Désolé, sur mon Mac sa touche « Option » pour cliquer deux fois. Sur votre PC, c'est probablement « ALT ». Mais rappelez-vous, vous pouvez faire des curseurs multiples. Vous pouvez aller voir ce qu'il y a ici. Vous pouvez mettre un espace dans, et le placer dans, je vais le reTab pour que c'est un peu là où je voulais être. Tab tout ça, tous les curseurs sont pratiques, non ? A propos de là, puis je ferme mon étiquette A. Donc, je vais le faire multi-curseurs et je vais le mettre dans ma balise A. fermeture du A, on y va. Joli. D'accord. [ inaudible] et le navigateur ne l'a pas cassé. Tout est cliquable. Ça ne va nulle part. Si tu dis, « mec, c'est le truc du hashtag qui ne marche pas ». Il suffit de taper HTTP, barre oblique deux-points [inaudible], obtenir un [inaudible]. C'est mon site. Et si vous le savez déjà, il vous redirigera vers mon site, au moins une partie de l'apparence, cliquez sur. Assurez-vous d'appuyer sur « Enregistrer ». Cliquez sur, codez deux puis codez deux. Très bien, ça suffit pour cette vidéo et les shenanigans. Je te verrai dans la prochaine vidéo. Bonjour moi. 54. Comment utiliser le border-box de Flexbox dans VS Code et le design web: Salut tout le monde, cette vidéo est sur la taille de boîte et border-box et c'est la magie. On a ces boîtes ici. Je veux ajouter un peu de rembourrage à l'intérieur pour juste aligner toutes ces choses mais quand je fais cela, rembourrage ajouté et les boîtes vont plus gros. Vous ajoutez du rembourrage et il semble rendre les boîtes plus grandes, bizarres. Nous allons ajouter des tailles de boîte, border-box, et magiquement nous avons un rembourrage, mais ils ne sont pas devenus plus grands. Plus besoin de réduire le rembourrage de la taille et de la largeur des boîtes. Sa magie, regardons comment le faire maintenant dans VS Code. Qu' est-ce que cette boîte magique taille, border-box bonté ? Il se rapporte à la boîte flexible à nouveau. est l'un de ses beaux petits add-ons pour HTML5. Il a une grande compatibilité avec le navigateur, et ce que cela signifie, c'est que nous pouvons ajouter du rembourrage sans sortir les boîtes. Vous remarquerez que nous avons dansé autour, nous avons mis un rembourrage au bas de l'étiquette p pour pousser le bas vers le bas. Nous avons ajouté un rembourrage en haut de notre icône. Nous avons ajouté un rembourrage à la balise p ici gauche et à droite pour le garder loin des bords. Pourquoi ne pas l'ajouter à la carte elle-même ? Il suffit de mettre une frontière autour de l'extérieur. C' est facile, parce que ça le casse. Ce qu'on va faire, c'est prouver le point. Allons à notre code. En fait, permet d'ajouter quelques classes, faites-le une à aller. Faisons la carte1, la carte3, la carte3. Vous pouvez tous les faire en une seule fois. Il y a une virgule là. Vous remarquerez avant qu'on ne fasse un complexe alors qu'à celui-ci ici. Cela signifie que ces gars ont une relation les uns avec les autres, une étiquette à l'intérieur des cartes. Alors que cette chose que nous faisons maintenant est cette virgule et ceci et ça. Ils aimeront des petites choses séparées. Une virgule les sépare. Si c'était sans les virgules, il chercherait une card3 qui est à l'intérieur d'une card2, ceci à l'intérieur d'une card1, qui n'existe pas. Nous allons ajouter du rembourrage, et nous allons le faire jusqu'à 20 pixels. Sauvez-le, et regardons un peu. Il a soufflé les bords ici, est allé trop loin. Il ne l'a pas ajouté à l'intérieur. Bizarrement ces derniers temps, il se termine à la taille globale. Si nous le rendons encore plus grand, disons que nous obtenons jusqu'à 50, nous remarquons que va juste les bananes. Ils cesseront de pousser les uns dans les autres et ce n'est pas trop cassé, mais le rembourrage est là, 50 pixels mais il l'ajoute à la taille, et c'est là que border-box fonctionne. Nous pouvons dire est en fait ajouter ce rembourrage, mais nous allons faire le dimensionnement de boîte et nous allons utiliser border-box, et appuyez sur sauver. La chose cool à ce sujet est qu'il supprime les largeurs maintenant. C' est juste un bon moyen facile de le faire. On va enlever le rembourrage, et c'est ce qu'on a fait. Aussi après la balise p, si nettoyer un peu parce que j'ai dansé autour d'elle pendant longtemps parce que j'ai l'impression que vous lisez maintenant. Prêt pour border-box. Oui. Parce que ce que vous pourriez faire, c'est que vous pourriez passer par ici et dire vraiment bien. Nous allons le faire et ensuite nous allons arrêter de miner la largeur. Je vais dire que la largeur est égale à moins, et vous pouvez commencer à essayer de réduire ce à quoi vous ajoutez le rembourrage et cela vous fait juste caché. C' est ce que tu devais faire. Allons réparer ça. On a une boîte à border-box, une boîte de retour. Débarrassez-vous tout d'abord de toutes les autres choses que nous avons faites. Sous la balise p, nous avons fait marge inférieure dont nous avons besoin. C' est le fond des cartes et on l'a fait, alors on a fait une marge autour de ce truc. Nous avons encore besoin de la marge juste au-dessus. Nous ferons Margin-top différemment. Margin-top, mais on n'a pas besoin de tout le reste. Qu'est-ce qu'on utilise ? Nous avons utilisé à 30 gauche et à droite et 20 en bas. Tu dis : « Pourquoi ne pas continuer comme ça ? » Parce que nous n'avons pas pu apprendre Border-box si nous le faisons. Laissez-le comme ça et vous allez le rencontrer dans Code et vous allez rencontrer ce problème de « Hey, ça vient de mettre du rembourrage autour. » Pourquoi cela s'ajoute-t-il ? Même chose avec cette marge, il y ajoute simplement, mais si vous voulez par magie moins la marge du rembourrage sur la largeur totale de la boîte, utilisez border-box. Allons faire ça. Je me perds un peu maintenant. Tu pourrais être la même. Si vous mettez juste un attribut, il va tout le chemin, rappelez-vous. Le haut dans ce cas, et si on mettait sur l'étiquette i ? Padding-top 30, parce que c'est ce qu'on a mis dans ce haut ici. On va faire ce type et dire, Top sera ce que je viens de dire, 30. Trente pixels ou g pixels. La gauche et la droite seront 30. N' utilisez pas de points-virgules à la fin d'eux. En haut, à droite, en bas, on ne se souvient même pas maintenant, 20 ans ? On va y jeter un coup d'oeil. Mets ça là-dedans. Le dernier a 30 ans. Impressionnant. Ça devrait marcher. Jetez un oeil, on y va. Si je l'ai sauvé, j'ai une bonne façon de le faire à l'envers. J' ai juste gardé ça un peu plus tard dans le cours. Maintenant, probablement quand j'ai mis mes cartes pour la première fois, j'ajouterais le rembourrage avant de jeter tous les trucs dedans, et je m'assurais juste d'utiliser border-box sur ces cartes. Vous pouvez les utiliser individuellement. Ça pourrait être dans je pourrais couper ça et le mettre dans toutes les cartes. Je l'ai dans les trois fois. J' ai juste gardé ça séparé pour cette vidéo, et un peu mieux. Je ne suis pas sûr que ça sauve beaucoup de type, mais de toute façon est-ce que ça a du sens ? J'espère que ça l'a fait. Sans elle, éteignez-le, jetons un coup d'oeil. Les boîtes reçoivent juste son original 30 pour cent plus ce rembourrage. Je pourrais le réduire sur les 30 pour cent, mais moins 30 pixels de pourcentages est époustouflant. Pour moi au moins, il vaut mieux juste l'ajouter et maintenir border-box sur. Travail fait haut cinq. Je te verrai dans la prochaine vidéo. 55. Comment créer un bouton coloré dans VS Code en utilisant HTML CSS: Salut là. On va faire un bouton. Pas un vieux bouton comme celui-ci. Un beau bouton comme ça. Ignorez le titre supérieur, nous corrigerons ça dans la vidéo suivante. Mais nous avons un bouton, il est cliquable, et il a un beau fond. Allons entrer et travailler à la façon de le faire. Alerte spoiler, c'est juste un a-tag avec un peu de rembourrage, mais faisons-le ensemble quand même. Pour faire notre bouton, ce que vous pourriez être vraiment enclin à faire, c'est de savoir où nous allons le mettre. Je veux le mettre juste après ce p-tag ici. Voilà, il y a herobox1, voici mon p-tag. Alors juste après, je vais mettre ce qui semble sensé comme un bouton. Je vais cliquer ici et cliquer sur « Enregistrer ». Je vais en prévisualiser et on aura ce truc. Il y a le bouton de formulaire. Ce n'est pas ce que nous voulons ici parce que nous voulons que ça ressemble à notre maquette ici et c'est juste trop difficile à faire en utilisant ce bouton. Vous pouvez le formater un peu pour le faire ressembler à ceci, mais il est plus facile de commencer par une balise a pour lui donner un peu de rembourrage et de couleur d'arrière-plan. Donc nous n'allons pas utiliser le bouton. Allons au bouton Supprimer. Bouton d'adieu. Tout ce qu'on veut, c'est un A-tag. On a utilisé ça des tas de fois. Où est-ce que ça va aller ? Allons le faire aller quelque part. Je suis sûr que tu en as marre de mettre du hachage. Alors faisons notre fichier, nouvelle page. Je vais sauver celui-là et ça va s'appeler ma page de test. Nous pouvons le lier à partir de nos liens maintenant. Cela va à be.html. Je vais le mettre dans un h1 disant : « Yippy on a réussi. Nouvelle page. » Je vais le fermer. Donc je l'ai fait, ai fermé, et je vais y lier maintenant. Alors comment on l'appelle ? Test-page. En fait, ça va quelque part. Qu' est-ce que ce bouton va faire ? Il est destiné à aller à notre livre en ligne. Donc, entre les a-tags, nous allons dire « Réservez en ligne ». Est-ce que je voulais en majuscules ? Non. Donc, nous utilisons le cas de titre et c'est à ça qu'il ressemble dans le navigateur. Tu dis : « C'est bien mieux que le vrai bouton moche ? » C' est facile à coiffer comme un seul. Allons faire ces bases. Cela dépend si vous êtes allé et souvenez-vous plus tôt sur nous avons stylé notre a-tag potentiellement dans la tête ou dans le CSS, ce que nous appelons la réinitialisation CSS. Ça aurait été pratique, mais je ne l'ai pas fait. Je vais dire, en fait, je ne vais pas être vraiment spécifique. Je vais être assez large. Je vais dire tous les a-tags ici. Pourquoi c'est au sommet ? Parce que j'ai l'impression que c'est un coup très large donc ça devrait être au sommet. Je vais dire, bien a-tags doivent maintenant avoir une couleur de blanc. Ça va probablement revenir et nous mordre dans les fesses. Il semble toujours arriver quand je fais du freestyle comme ça. Couleur et nous allons dire que la décoration du texte est définie sur zéro. Ça va nous faire commencer, j'espère. Voilà, tu y vas. Rien ne rentre vraiment à la maison. D'accord, donnons-lui une couleur d'arrière-plan et colorions le texte. En fait, ce que nous pourrions faire est que nous allons commencer à créer notre propre classe parce que nous ne allons pas définir tous les a-tags pour être des boutons. Ce que je vais faire, c'est, juste après les guillemets ici, je vais lui donner un nom de classe de mybutton. Par ici, je vais dire que mon bouton fait quelques choses. C' est totalement inutile maintenant. On peut s'en débarrasser ? On peut. Parce que je mets tous les a-tags être blancs sans décoration de texte. Enregistrez une petite vérification rapide et assurez-vous que j'ai travaillé quoi que ce soit. Oui, parfait. Mybutton a besoin d'une période devant lui et nous allons dire à ce bouton, « Je veux une couleur de fond de, laissez-moi utiliser le blanc. » Ça va enregistrer. Assurez-vous qu'il y a un point-virgule à la fin et assurez-vous de tout enregistrer. Voilà, tu y vas. Il est naufragé. Si vous ne voyez rien, c'est soit vous n'avez pas du tout enregistré, soit il n'y a pas de texte dans votre bouton. Si vous avez juste laissé cela en pensant que vous reviendrez plus tard, et parce qu' il ne peut pas être vu ou qu'il n'y a pas de choses à envelopper, il a besoin de quelques prises dans le a-tag. L' autre chose que ça pourrait être, selon l'endroit où tu regardes ça et oui, on va vraiment s'en occuper dans la prochaine vidéo. Mais si vous êtes encore usé ici et que vous êtes coincé là, vous devrez peut-être faire afficher le bloc inline-block ou le bloc display. On va en parler dans la prochaine. Mais cela pourrait vous causer des problèmes aussi. Alors fais ça, ça pourrait arranger le tien. La nôtre fonctionne bien. Le problème avec le nôtre est que la couleur du texte est aussi blanche. Donc, nous allons à la couleur du texte de, nous allons utiliser ce haut ici pour former notre dégradé. C' est la chose cool à propos de VS Code, c'est qu'il regarde à travers votre CSS et dit, « Hé, vous avez déjà utilisé ça avant. Vous voulez les utiliser à nouveau ? » Je suis genre, « Ouais ». Vous gagnez du temps pour jeter un coup d'oeil. Je voudrais aussi faire en sorte que ce soit Playfair. Donc la famille de polices, on va être juste pour jouer. En fait, je ne me souviens pas de toute la syntaxe pour ça, donc je vais aller le voler. Je vais utiliser la fonction de recherche, qui est la commande F sur un Mac ou le contrôle F sur un PC. Je vais taper « Play ». Il y a beaucoup de jeu. Il y a Playfair. Donc la raison pour laquelle je ne me souviens pas, je pourrais probablement deviner Playfair, mais je ne me souviens jamais si c'est en deux mots ou en un mot. Rappelez-vous que si c'est en deux mots, il y a ces citations autour. Si la police que vous utilisez n'a pas deux mots, elle n'aura pas ces guillemets autour d'elle. Donc ça va te chier. Regardons un peu maintenant. C' est bon et gentil. Réglons un peu de rembourrage autour d'elle. Donc on va faire du rembourrage. Maintenant, on va faire nos trucs de raccourci. Nous allons utiliser un rembourrage rigoureux et nous allons faire le haut et le bas. Je pense qu'on a déjà couvert ça. Donc, si vous mettez une vieille police, ça passe en haut, et on utilise 11 et 25. Donc pixels pour le haut, 25 pour le droit. Donc, il va dans le sens des aiguilles d'une montre en commençant par le haut. On peut faire tout le tour. Mais parce qu'il est très commun d'avoir les mêmes axes x et y, donc les sommets et les bas sont les mêmes dans la gauche et la droite est la même. Vous n'avez pas besoin d'écrire toute la répétition supplémentaire qui est là-dedans. On suppose que s'il y en a deux, vous voulez dire de haut en bas pour le premier et à gauche et à droite pour le second. Ça devrait marcher. On y va. Nous avons besoin d'un peu de marge au-dessus, mais cela ne fonctionnera pas. Nous en parlerons plus dans la prochaine vidéo. Marge en haut. Il va avoir 10 pixels, parce que je sais que vous allez l'essayer. Ça ne marchera pas. Je me rendais fou aussi quand au début quand il travaillait ce que ça faisait. Ne vous inquiétez pas pour le moment. On va revenir vers lui. C' est quelque chose à voir avec la bonté de bloc en ligne. En fait, je vais le séparer pour une autre vidéo, mais si vous voulez juste le réparer, ajoutez la marge et tapez simplement « display ». Parce que je sais de toute façon que tout le monde va passer à la prochaine vidéo. Alors, affichez, allez inline-block. Si vous définissez cela et faites maintenant la marge, cela fonctionnera. Mais nous en parlerons plus en détail dans la prochaine vidéo. D'accord. Donc on a du rembourrage, on t'a, on a ça. C' est tout ce qu'on va faire pour celle-là parce qu'on a un bouton. Nous cliquons dessus et cela fonctionne. Va là votre nouvelle page Yippy. Yippy nouvelle page même. Il a disparu, attendez. Oui. Qu'est-ce qu'on va faire ? C' est tout pour celui-ci, vous pouvez simplement ajouter une marge au bas de la balise p, mais cela ne fonctionnera pas en haut. Nous allons parler des éléments en ligne et en bloc dans la prochaine vidéo pour savoir réellement ce que nous faisions lorsque nous tapons dans display inline-block. Faisons dans la prochaine vidéo. 56. Pourquoi je ne peux pas ajouter de marge ou de remplissage en haut et en bas de ma balise a. Éléments en ligne et blocs: Bonjour les gens frustrés. Nous ne pouvons pas ajouter de marge en haut de notre bouton. Nous avons bloqué une balise et nous voulons la pousser à partir de la marge supérieure ou de la marge inférieure, mais cela ne fonctionne pas. Pourquoi cela ne fonctionne-t-il pas ? C' est parce que la propriété display est définie sur Inline. La version rapide de cette vidéo est juste de mettre display inline-block sur votre bouton et assurez-vous de l'enregistrer et puis vous pouvez le faire. Restez autour de cette vidéo entière parce que nous allons parler des différentes propriétés d'affichage, bloquer en ligne, et nous allons faire un CSS fantaisie où nous connectons quelques classes et une balise ensemble. Es-tu prêt ? Ajoutons la marge supérieure à notre bouton. Rappelez-vous dans la dernière vidéo, nous avons eu des problèmes à placer la marge au-dessus de cela et c'est quelque chose à voir avec sa propriété d'affichage. Nous avons créé ce petit peu jetable de HTML. Tu n'as pas à faire ça. Tu peux jouer si tu veux. C' est juste un document HTML de ticks. Il y a beaucoup de propriétés d'affichage. Nous allons parler des principaux qui vous conviendront en tant que débutant, concepteur web, et qui est en ligne et bloc. Il y a des choses qui sont affichées par bloc par défaut. Ce que cela signifie est de regarder une balise p avec du texte, en fait, ajoutons un texte de bloc. Lorem, mettons-nous à 50. Un autre est h1 qui est par défaut ce qu'on appelle un niveau de bloc, et tout cela signifie vraiment, ajoutons un couple de plus. Je vais mettre dans une liste non ordonnée, qui est une liste à puces avec quelques éléments de liste, mais je veux 10 d'entre eux. A l'intérieur de ça, je vais mettre des objets. Ils sont tous au niveau du bloc. Ce que ça veut dire, c'est que si je regarde ça, tu vois que ce type le pousse sur sa propre ligne. C' est son propre bloc de trucs. C' est un type aussi gros bloc. Tous ces types qui courent un petit bloc, ils se repoussent. Le contraire pour ces gars sont en ligne. Ils sont utiles pour des choses comme, disons un tag. Je vais mettre un tag, et celui-ci va hacher, et ce sera mon lien. C'est une ligne. Ce qui nous donne ce problème. La différence entre Inline est, pouvez-vous voir, cela n'a pas repoussé tout le monde. Il joue bien avec les autres. Cela fonctionne en ligne, tandis que le bloc dit, « Vous devez être dans votre propre ligne », propre ligne, en lignes, même avec une image, si j'ai besoin d'ajouter une image ici IMG, les sources, les images, barre oblique mettre celle-ci et lui donner une hauteur à au moins donc ce n'est pas trop grand. Vous pouvez faire des hauteurs dans le HTML, ce qui est bizarre. C' est en ligne pour que vous puissiez les changer. Vous pouvez dire : « En fait, j'aimerais ici mon style. » Je n'utilise pas une feuille CSS pour ce particulier juste pour gagner du temps. Je vais dire, « Je veux que les images soient la propriété d'affichage pour être bloquées. » Tu bloques les choses. [ inaudible] faire son propre truc. Cool. Une des propriétés pour, disons, une balise ici, parce que c'est en ligne par défaut est que vous ne pouvez pas mettre une hauteur, vous pouvez faire à gauche et à droite. Je peux dire en fait que je veux un tag qui a une grande marge sur la droite. Cela fonctionne parfaitement, 200 pixels. Jetons un coup d'oeil, il y a une grande marge à droite, mais je ne peux pas faire une grosse vieille marge vers le haut, ce que nous savons déjà de notre dernière vidéo. Allons 100 pixels en haut, s'il vous plaît. Il ne fait rien, il ne pousse pas 100 pixels vers le bas. Mais ce que vous pouvez faire, c'est que vous pouvez dire. « En fait, une balise que j'aimerais que vous arrêtiez d'être en ligne et je veux que vous soyez un affichage », je ne veux pas qu'elle soit bloquée parce que bloc dans ce cas ne ferait pas ce que je veux qu'elle fasse. Mon Dieu, j'ai des ennuis. Allez. On y va, parce qu'il pousse à sa propre ligne, et tu dis : « En fait, c'est ce que je veux. Je veux un peu de l'entre-deux. » L' intervalle est, je veux que tu restes en ligne, mais aussi que tu sois un peu bloqué. Il fait un peu des deux. Fondamentalement, ce que ça va faire pour nous, c'est que ça va rester en ligne. C' est toujours sur la même ligne que notre paragraphe. Débarrassez-vous de la balise image. Il fait tout paraître un peu déroutant. Restez dans ce paragraphe, mais permettez-moi de faire des choses comme frapper ou margin-top. Ils ont tous leur capacité naturelle. Dites ces éléments de liste ici. Rappelez-vous que ces gars veulent vraiment être sur leurs propres lignes qui sont appelées niveau bloc. Ils sont en fait appelés, comment s'appelent-ils ? J' en ai un spécial pour eux. Liste des éléments. On va dire : « Display, s'il vous plaît. » Ils l'ont appelé, où est l'élément de liste unique ? Ce qui fait la même chose que le bloc, avec quelques pokes supplémentaires. Au lieu d'être bloqué, je veux que tu sois en ligne. Regardons un peu ce qu'il fait. Voyez ces petits éléments de liste, ils sont tous empilés sur la même ligne maintenant, donc il y aura beaucoup de fois où vous devez le laisser comme valeur par défaut. De temps en temps, tu dis  : « En fait, fais juste partie du gang. » Je veux un h1 avec la balise p juste à côté parce que j'ai fait des trucs de conception cool et j'ai besoin de l'implémenter. Alors que les frappes veulent vraiment être sur leur propre ligne parce qu'ils ont des éléments de bloc. Est-ce que cela aide à récapituler ? balises par défaut sont en ligne, ce qui signifie qu'elles restent sur la même ligne que tout le monde. P tags, h1s, bloc, il y a des propriétés de bloc d'affichage, donc ils pourraient tous être sur leur propre ligne. Si vous voulez un peu des deux, inline-block est un bon peu des deux, peu de ligne, un peu de bloc, et surtout ce que cela va nous permettre de faire maintenant est que nous allons revenir à cette page. Double-cliquez sur vous, double-cliquez sur vous, traînez-le autour, vous allez ici je vais dire à mon, où êtes-vous ? MonButton. Je ne vais pas le faire pour tous parce que je pourrais dire en haut ici que je veux que tous les tags soient inline-block, mais je ne veux pas le faire pour tous. Je vais juste le faire pour celui-là et tu deviens inline-block. Maintenant, je peux faire une marge en haut. On va le mettre dans, je n'en ai aucune idée, 20 pixels, jetons un coup d'oeil. Maintenant, celui-ci est un génie. Celui-ci ne marche pas. Sauvegardez tout. Pour avoir un petit coup d'oeil. Je ne marche toujours pas, MyButton. Cela ne fonctionne pas pour cette classe appliquée à mon tag, donc ce que je vais devoir faire est de dire, « En fait, je veux qu'il y ait une balise avec myButton appliqué. » Cela ne va toujours pas marcher. C' est une bonne information juteuse. Si je prends ces deux-là, et que je dis, « Toi, j'aimerais que tu fasses ça. » Ça ne va probablement toujours pas marcher, toujours pas. Cool, parce que ce qui se passe est, ce qu'il cherche en termes de silice que je viens de faire, c' est dire, « Je veux trouver un MyButton à l'intérieur d'une étiquette. » Mais ce n'est pas à l'intérieur. J' ai une balise qui est myButton. Ce n'est pas à l'intérieur comme nous l'avons fait dans le passé où nous avons un h1 qui est à l'intérieur d'une boîte de héros qui est à l'intérieur de mon principal pas à l'intérieur de celui-ci, c'est en fait juste une étiquette avec une étiquette de myButton. Comment tu répares ça ? C'est bizarre. Espaces vous montre cette miettes de pain de MyButton est à l'intérieur de l'étiquette a. Alors que si je les rejoins, donc il n'y a pas d'espace entre eux, il voit une, une balise qui est un myButton. Appliquez les trucs. Sauvegardons ça, voyons si ça marche. Ça ne marche toujours pas. Allez. Toujours pas de travail. Qu'est-ce qu'on fait d'autre ? J' avais un liant cérébral là-bas et je le laisse dans le cours parce que c'est un liant cérébral très utile. Je croyais savoir ce que je faisais. J' ai dit : « Oui, alors on fait ça et on peut les rejoindre. C' est pour cela qu'il était cassé et qu'il ne fonctionnait toujours pas. » La raison pour laquelle ça ne marchait pas, j'ai toujours ajusté ça. Je suis genre, « L'homme qui fonctionne. » Je vérifiais la syntaxe. La raison pour laquelle il ne fonctionnait pas était parfaite. C' est parce qu'on a fait ce petit parcours. J' ouvre ça, tu te souviens du petit testeur ? Je l'ai ouvert et testé dans le navigateur, et j'avais fait une connexion entre VS Code et cette page. Puis je l'ai fermé et je me suis mis sur mes affaires et j'ai continué avec celle-ci et je l'ai fermé. Ce que j'ai oublié, c'est que cette connexion, cette connexion en direct a été rompue entre ma page d'origine ici et VS Code parce que je suis parti et fait autre chose, vous ne pouvez attacher qu'à un à la fois. Maintenant, je marchais en marchant, me grattant la tête en disant : « Je ne sais pas comment ça marche. » C' est parce que je suis allé à cette autre page, aperçu maintenant, je vais devoir le fermer, ouvrir de manière à ce que la connexion et la connexion entre le site existant. Maintenant, il va me le montrer, mais flosté, je le suis. Maintenant, ça marche. Nous avons appris quelques choses. Je veux finir et je veux laisser dans le mal là-dedans juste, vous allez rencontrer ce problème. C' est une de ces choses qu'on aime, « ça ne marche pas, je vais me coucher », et tu te réveilles le matin et ça va commencer à marcher comme  : « Ça ne s'est pas réveillé hier soir, je te le promets. » C' est parce que tu as fermé et rouvert ça. Nous avons appris quelques choses. Nous avons appris à propos des affichages. Nous avons affiché le bloc, qui est notre truc au niveau du bloc. C' est pourquoi nous avons défini des balises de laboratoire de niveau bloc comme celle-ci quand je parle. Vous avez en ligne, ce qui est des choses comme nos balises d'image et maintenant des balises, c'est beaucoup d'attributs en ligne, éléments, mais il y a certains d'entre eux font un peu des deux. C' est ce que nous voulions dans ce cas. Je veux que MyButton me permette de faire une certaine marge en haut. L' autre bonne chose que nous avons travaillée était cet autre peu de façon d'écrire CSS. On a fait des virgules. On l'a fait ici. Où en sommes-nous, virgules, nous avons dit : « J'aimerais que vous ciblez la carte1, la carte2 et la carte3 ». Les virgules font les et. Si vous mettez un espace entre les choses, j'essaie d'en trouver un qui a un espace, maintenant, il doit y en avoir un. On en a un ? Nous le faisons. Je veux des balises p à l'intérieur des cartes, et appliquer ce truc, mais seulement s'il y a une balise p à l'intérieur. Celui-ci est ici, je voudrais une balise avec cette classe qui lui est appliquée. Vous pouvez l'utiliser. Il est appliqué littéralement il est coincé juste à côté. Il est appliqué sur le côté. Pas d'espace, mauvais espace. Nous avons également appris que vous devez redémarrer l' aperçu de votre navigateur si vous sautez d'un projet à l'autre. Bonne chance alors se perdre devant les gens. Vous l'utiliserez comme une expérience d'apprentissage, c'est ce que j'appellerai. Sur la vidéo suivante. 57. Comment ajouter des coins arrondis à un bouton ou à une balise div en HTML et CSS: Salut tout le monde, cette vidéo va être tout sur les rayons autour des coins des boutons. Mais nous le ferons pour les images et nous le ferons aussi pour les tags div. Nous ferons de grands rayons laids comme ça et de beaux rayons simples comme ça, gentils et petits. De plus, nous ferons les aléatoires comme ceci ou ceci, vous aurez l'idée, les coins arrondis. Cette vidéo dure quatre minutes, mais il suffit ajouter un rayon de bordure à vos boutons et vous aurez terminé. Mais si vous voulez la pleine charge, regardons jusqu'à la fin. Pour ajouter de petits coins arrondis aux bords de nos étiquettes de bouton ou div ou de n'importe quelle boîte, c'est super facile. Dans le code VS, nous allons trouver mybutton et je vais dire que vous avez un rayon de frontière de ce que vous voulez. Je vais utiliser des pixels et je vais dire, je veux que ce soit deux pixels et cela fera tous les quatre coins. Regardons un peu, j'ai des coins arrondis. Rendons-les un peu plus évidentes juste pour que vous puissiez voir, 12 coins arrondis géants. Vous pouvez faire des coins individuels. Je vais vous montrer quelques choses à faire avec le rayon de la frontière pendant que nous sommes ici. Tout d'abord, peu importe à quoi vous l'appliquez, tant que c'est une boîte et qu'il a des bords. Qu' est-ce qu'on a, ces cartes ; cartes 1, 2 et 3. Ils fonctionneront, cartes 1, 2 et 3. Vous collez. C' est cart1 coins arrondis. Cette image un peu plus bizarre. C' est dans une boîte. Mais si je le fais dans l'hérobox2 qui est la boîte dans laquelle il est assis alors que l'hérobox2. Si je le fais, ça ne marchera pas. La boîte est, mais alors il y a cette image à l'intérieur de la boîte. Nous devons faire est de dire, s'il y a une image, si elle est à l'intérieur d'herobox2 alors vous l'appliquez réellement à l'image. La seule raison pour laquelle je fais une classe composée est juste parce que je ne veux pas le faire à toutes les images sur le document. Ça vous plairait peut-être. Image à l'intérieur de l'hérobox2. Faites-le à toutes les images, hérobox2. Est ici dans Herobox2 ou est-ce que je fais juste des noms pour des trucs ? Ça se passe sur Hero2, ça s'appelle hérobox2. On y va. Ça y est, ça pourrait être n'importe quoi. Vous comprenez l'idée. L' autre chose que vous pouvez faire avec le rayon frontière est que nous l'avons fait pour les quatre coins, comme nous l'avons fait avec le rembourrage. Vous pouvez utiliser soit celui qui les fait tous, deux qui fait haut et bas, à gauche et à droite. Je pourrais en faire 12 et disons trois ou zéro. Faisons zéro pour le haut et le bas pour que vous ayez le premier. Tu comprends ce que je veux dire, difficile à expliquer. En haut à gauche est le premier, puis celui-ci est sauté. Tu l'as compris. Je sais que tu comprends, je ne peux pas l'expliquer. C'est ce que ça fait. Si vous voulez faire quatre, commencez en haut à gauche, faites le tour suivant sera trois ou six, et ensuite le prochain sera 100. Ça va passer par tout ça. Maintenant, ce qui finit par se passer pour 100, c'est que ce n'est pas en fait 100 pixels. Ça va et aussi loin que possible, c'est aussi loin que possible. Ça peut être 1000 et ça n'aurait pas d'importance. Vous pouvez l'utiliser à votre avantage. Je peux juste les faire tous 1000 pixels et ça vous donne cette boîte de forme ronde pâle parce qu'il essaie juste de l'ajuster jusqu'à ce qu'il entre dans un cercle et ne peut pas aller plus loin. Vous pouvez faire des tours soignés avec elle. Vous pouvez aller zéro pixels, 1000 et 1000, puis 0. Est-ce que c'est bon ? Ici, tu y vas. Vous pouvez faire des petites formes intéressantes avec elle. Mais tu comprends l'idée. Je vais mettre en deux pixels parce que celui-ci juste comme vrai subtil comme petit bord dessus. C' est le rayon de la frontière, mes amis. Génial et facile, mais je l'ai étiré pendant quelques minutes. Passons à la prochaine vidéo. 58. Comment ajouter une ombre projetée en css à un bouton de site Web, à des balises div et à des en-têtes de police de texte ?: Salut, tout le monde. Cette vidéo est tout au sujet des ombres portées. Déposez des ombres, déposez des ombres. Off, on, off, on. Le problème avec moi, c'est que j'aime mon ombre portée subtile, donc c'est un peu plus difficile de skeet à l'écran alors basculé entre eux vous rend fou. Mais tu comprends bien. Ombre portée sur les textes que ce soit sur les boutons ou sur les grandes balises div anciennes, c'est un extravagance d'ombre portée. [ inaudible] maintenant et de travailler à la façon de le faire en CSS. Nous commencerons par l'ajouter à notre bouton. On a notre bouton là, il est là, il n'est pas là, où est-il ? Voici celui-là. Comme je tag href dans notre classe appelée « mon bouton », il y a mon bouton et tout ce que vous faites est d'ajouter box-shadow ce qui est bizarre. Box-Shadow. La syntaxe fonctionne. Il y a x, y, flou, puis couleur. Vous ne pouvez pas juste mettre un x et un y. Vous pouvez dire en fait que je voulais être cinq pixels vers la droite et ensuite je veux cinq pixels vers le bas. Tu ne mets pas de virgules. Il suffit de mettre des espaces. Suppose juste que, vous pouvez le laisser là. Vous pouvez juste mettre une ombre portée, vers le bas et à droite de celui-ci. Regardons un peu. Tu le vois là-dedans. Fondamentalement, ce qu'il utilise est vraiment difficile et va amener l'éditeur à zoomer et vous pouvez voir la petite chose rose là-dedans ? C' est parce qu'il utilise la même couleur que mon texte. Dans ce cas, je vais devoir ajouter une couleur, qui est la troisième. Je vais dire noir. On y va. Je peux en ajouter un autre parce que c'est comme une ombre portée, moche. Ce que nous voulons, c'est brouiller un peu, et donc x, y, et puis le troisième sera flou. Je vais dire que je voudrais flouter de cinq pixels aussi. Ça y met juste un flou. Mais vous pouvez aussi faire avec les ombres portées comme nous avons utilisé le noir. Le noir est cool. Mais si je clique en noir et blanc pour cela avec la couleur ramasser ici, je veux jouer avec l'opacité. Je vais utiliser une couleur RGBA juste pour obtenir l'opacité afin que ce ne soit pas aussi violent. Encore une fois, je pense que c'est un gros bouton géant. Ça vous plairait peut-être. Je préfère vraiment simple donc, je n'aime rien sur x. c'est ce que je fais normalement. Tu n'as pas à le faire. Mais quelque chose comme ça me donne une belle comme si zéro à travers, donc ça ne sort que du fond. Il y a un très petit flou et l'opacité est basse. C' est comme 22 %. Donnons ça un test et voyons à quoi ça ressemble. Tout comme un petit bouton subtil et parfois vous en avez besoin. Je pense que c'est assez clair que c'est un bouton, mais souvent je vais concevoir quelque chose qui ne ressemble pas à un bouton. Vous devez lui donner des ombres portées juste pour lui donner l'impression qu'il est cliquable. Maintenant, nous l'avons fait pour ce bouton ici. En fait, on n'est pas pour un bouton. On vient vraiment de faire une étiquette. Vous pouvez le faire pour n'importe quelle balise. Disons h1. Prenons tout ça. Copiez-le. Découvrez h1. Mon pote, c'est là, et tu colles. On a la même chose et on l'a envoyée au bloc. On a fait l'ombre de la boîte. L' ombre de la boîte va bien fonctionner pour les boîtes. Le texte va bien fonctionner pour l'ombre de texte, vous le savez. On y va. Maintenant, allez ce petit subtil [inaudible]. Je vais le mettre très haut, donc si vous regardez et que la qualité n'est pas grande, et je vais mettre jusqu'à 90 pour cent, vous pouvez voir une ombre portée très forte. Zone pour les zones, texte pour les ombres de texte. Je vais retourner à ma jolie petite ombre portée subtile. Que voulons-nous faire d'autre ? Nous l'avons fait pour notre tag, nous l'avons fait pour notre h1. Nous le ferons aussi pour nos cartes. Je vais faire la même chose. Cartes 1, 2 et 3. Il y a 1 et 2. Je ne veux pas l'appliquer aux cartes au pluriel ou au wrap-up parce qu'il sera juste autour de l'extérieur. Vous pouvez voir ces gars ont tous une ombre portée et ce n'est probablement pas assez fort que même pour moi. Je vais passer par là et en fait pousser ça à gauche et à droite. Je vais y aller, peut-être. Je ne sais même pas. Allons devenir fou 10 et faisons un flou 10. Espérons que si l'opacité est assez faible pour la carte 1, probablement, la distance pour cela est trop élevée. Peut-être avec un flou, mais cinq. Vous pouvez passer à autre chose maintenant. Je vais juste aller et venir jusqu'à ce que je sois heureux avec la carte. Cette bande blanche à l'extérieur ennuyeux. Je l'ai ignoré donc c'est en fait à partir de mon image que j'ai faite. Je viens de faire une mauvaise image. On ne peut pas s'en débarrasser. Je dois entrer et frapper ce JPEG. J' aime bien celle-là. Faisons-le pour tous. Copier. Cool. Laissez des ombres sur tous ces types. Ça a l'air bien. Maintenant, une chose que je vais vous montrer, c'est que nous avons fait les bases et il y en a plus. Vous devez vous préparer à la quantité d'ombres portées que vous pouvez faire. Je suis allé à w3schools.com/. Vous pouvez voir l'URL là-bas. Je vais le mettre dans le texte via le projet. C' est sous les ombres portées. Si vous voulez jeter un coup d'oeil, il y a des choses terribles que vous pouvez faire. Il passe juste par toute la syntaxe différente. Tu peux faire de l'ombre portée. Il y a un flou autour. Pouvez-vous voir, si vous mettez 0, 0, c'est flou autour de l'extérieur si vous en avez besoin. Ce pourrait être bien si vous avez du texte au-dessus d'une image. Qu' est-ce qu'on a d'autre ? Des ombres multiples. Regarde ça. Vous pouvez mettre une virgule et mettre deux ombres. Ils ont l'air très similaires, ces deux couleurs. Mais, de toute façon, vous comprenez l'idée. Regardons ça. Il y a une ombre plus une autre. Vous pouvez mettre une bordure autour de l'extérieur. Il y en a beaucoup. Est-ce que ça s'aggrave ? Je me suis senti comme si je me souvenais d'avoir regardé ça en cours. Ils sont mauvais. Sachez que nous en avons couvert un peu, mais pas tout. J' aime cette ombre de boîte. Pas tellement fan de celui-là. Nous allons faire le vol stationnaire dans un peu et nous allons regarder des pseudo-classes dans une vidéo à venir. Pas tout à fait après, [inaudible]. C'est ça. Ombres de texte, ombres de boîte. Il va x, y, flou, couleur. C' est ça. Je te verrai dans la prochaine vidéo. 59. Comment sauvegarder votre site Web pendant que vous le construisez ?: Hé tout le monde. Nous allons regarder sauvegarder votre site Web au cas où tout se passe horriblement mal, vous devez le réinitialiser, ou vous êtes piraté, ou votre piratage vous-même en le cassant. Il y a un moyen officiel où cela se fait automatiquement tous les jours. Si vous utilisez Bluehost, il s'appelle CodeGuard. C' est une taxe tous les mois, mais ils s'occupent de tout. Ils vous l'envoient sous forme de fichier zip, vous pouvez simplement le réinstaller, revenir à une date ou une fin différente. Je vais te montrer la façon de le faire. Vous venez de vous en remettre, gros simplement le rouler dans un zip, lui donner un bon rendez-vous, et vous avez deux façons de le sauvegarder. Voyons comment faire les deux. Il existe deux façons de sauvegarder votre site. Il y a la façon de l'homme des cavernes et puis est la façon automatique, et vous allez probablement juste faire les deux. Ma façon de l'homme des cavernes est juste de le faire localement vous-même manuellement chaque fois que vous touchez votre site Web. C'est ce que je fais. Mon processus est le suivant, je vais trouver le bureau. J' irai comme un jeu, sur le point de gâcher les sites. Juste au cas où je casse tout, ce que je fais c'est que je sélectionne tout. Je clique sur le haut, maintenez Maj enfoncé, cliquez sur le dernier, cliquez avec le bouton droit dessus. Sur un Mac, c'est compresser, ok, sur un PC, il est vu et puis il y a comme un dossier zip. Si vous pouvez le faire, vérifiez comment compresser un fichier sur votre plateforme. J' ai le zip sur mon Mac. Ce que je fais, c'est que je l'appelle la date, donc archive et ce sera la date à l'envers. Aujourd'hui, c'est le 19. Quel est le jour d'aujourd'hui, c'est le juin, je ne sais même pas quelle date il est aujourd'hui. Je suppose que les 19, 20, je crois que c'est aujourd'hui. Je sais que les Américains le font dans l'inverse, mais vous devez le faire de cette façon. Le 20 du sixième, 2019, ça veut dire que quand je fais un autre jour, disons que c'est la semaine prochaine. C' est dans le mois et je le compresse. fait la même chose et j'ai juste fixé la date est dans donc c'est toujours ce mois-ci, mais c'est le 30. Ça veut dire qu'ils collent Alpha numériquement. Si j'en fais un autre, c'est bien. Je vais penser que c'est typiquement ce que je fais ici. Dix-neuf, c'est plus tard dans l'année, c'est presque la fin de l'année. Cela signifie que le bas est toujours le dernier. Je sais que quand je regarde les sauvegardes, je peux les voir dans l'ordre chronologique, donc les plus récentes, les plus anciennes. Je vais vous montrer un peu plus en pratique. Où est un de mes fichiers, un de mes sites Web, oui, celui-là. Mettez-le aussi dans un dossier Zold, dont je parlerai dans une seconde aussi. Vous pouvez voir qu'il s'agit d'un ancien site Web. Je vais essayer de comprendre quand je me suis souvenu que j'ai eu et vous pouvez voir là que c'est une vieille sauvegarde et c'est une nouvelle, c'est une nouvelle. C' est vraiment pratique parce que c'est 2019 maintenant et je peux dire, c'est un vieux. Il y en a une à partir de plus tôt et ça veut dire que je peux y retourner. Parfois, vous venez de sauter dans un petit changement rapide , puis télécharger le site, puis vous partez, puis plus tard, vous réalisez que vous avez détruit une autre page. Tu peux revenir en arrière. Zold, je vais te montrer ce que je fais Zold. Ordinateur de bureau, projet 2. J' ai toujours mis les sauvegardes, au lieu de les archiver, je les ai mis dans quelque chose appelé Zold. Zold est juste vieux avec un Z à l'avant, donc il finit en bas de votre liste alphanumérique, puisqu'il était en bas, et puis, je vais faire mon petit truc d'archive et ensuite les jeter là quand j'ai fini, mettre le rendez vous sur eux et je les garderai à Zold. Oui. J'ai un peu bizarre d'organisation à propos de ce genre de choses. Vous l'avez lu. C' est la façon de l'homme des cavernes. La façon automatique, vous devriez faire les deux. Je ne compte jamais sur l'un ou l'autre d'eux. Bluehost a un service plutôt cool, où sont votre Bluehost. Vous êtes là. Il s'agit de votre tableau de bord lorsque vous vous connectez à Bluehost. Si vous utilisez une autre société d'hébergement, ils ont tous quelque chose de similaire. Bluehost appelle ça, j'ai quelques noms pour une raison quelconque, mais si vous avez un marché, c'est une solution payante. Ceci est appelé, nous allons aller aux Add-ons. Ouais, Add-ons et ça s'appelle Bluehost CodeGuard. Je l'ai vu appeler un pro de sauvegarde. C' est aussi un coût. C' est presque autant que mon hébergement. Tu dois décider si c'est bon pour toi. À votre stade, vous pourriez être heureux de faire style homme des cavernes, mais vous pourriez vouloir ce peu supplémentaire et cela vient ajouter à votre compte mensuel. Merci Bluehost. Rappelez-vous, si vous ne vous êtes pas inscrit à Bluehost, vous pouvez aller à bringyourownlaptop.com/blue et cela vous mènera là-bas et obtenir une réduction sur elle et je reçois un petit pourcentage de votre première inscription, ne coûte pas de coût supplémentaire que vous louez, mais juste un rappel. C' est tout, et j'attends juste que ma photo se charge. Très fier que je sois de ce côté-ci, regarde-moi. C' est ça. Je te vois dans la prochaine vidéo. 60. Réutiliser une classe de boutons dans la navigation: Hé mon pote, c'est simple. Nous avons créé ce joli style de bouton que nous voulons réutiliser pour notre navigation, pour le changer de ceci à ceci. Donc, nous allons le réutiliser et nous allons ajouter un peu de extra juste pour l'espacer. C' est assez simple. Allons-y et faisons-le. Bon, donc tu veux répéter notre travail de fantaisie que nous avons fait ici le long ces petits boutons ici en plus de faire un peu plus pour les séparer. Donc, pour réutiliser notre style, nous allons ouvrir VS Code. On va monter en haut. On vient de mettre ces trucs de base pour commencer, tu te souviens ? Nous allons taper, nous avons besoin de trois liens, donc nous avons besoin d'un tag. Maintenant, je pourrais commencer à les taper tous. Je vais te montrer une petite chose cool. Donc, quand un tags avec mon bouton appliqué à eux. Donc tant qu'ils sont réunis, ça dira que je vais avoir une étiquette avec mon bouton adjacent. Aussi, je veux trois d'entre eux s'il vous plaît. Retour et cola. Je vais avoir mon curseur multiple. Maintenant, je n'ai pas de PC, j'ai un Mac. Sur mon Mac, c'est l'option de commande et j'utilise simplement ma flèche vers le bas et j'ai fait plusieurs curseurs. Le vôtre sera Control Alt sur un PC. Je vais juste avoir un hash deux tous ces gars. Maintenant j'ai besoin de SMS, je ne me souviens plus de ce que c'était, qu'est-ce que c'était ? Nous avions, zoom arrière. Il a été réservé en ligne sur en contact. Donc, je peux le faire, réserver en ligne à propos de je serais vraiment rapide typer si je peux épeler. Je l'ai fermé, j'ai essayé de vous impressionner avec mes raccourcis. Ça n'a pas fonctionné. C'était un gros échec. Je tape assez vite. Vérifions-le dans le navigateur. Maintenant, parce que je suis allé déjeuner entre cette vidéo et la dernière, je vais juste l' éteindre et la rallumer juste pour m'assurer que je ne rencontre pas le même problème à nouveau. Ok, et pas de mise à jour. Alors, allez-y. On a réutilisé la même classe ici, mais je voulais faire quelque chose de légèrement différent. Je veux qu'il y ait un peu plus d'écart entre eux. Donc ce que je vais faire ici, c'est que je vais dire en fait que j' aimerais si ce bouton .my apparaît, si c'est à l'intérieur d'un NAV. Alors rappelez-vous, l'espace signifie ça à l'intérieur de tout ça. Je veux que vous fassiez quelque chose et peut-être un peu de marge à gauche, je veux gauche. Oui. Gauche. Combien de pixels ? 30 pixels. Alors regarde un peu, cool. Donc je ne voulais pas les deux côtés évidemment, c'est le droit, c'est le côté gauche est un peu là, un peu là et il y a des trucs qui traînent ici. Il y a une marge de ce côté, mais ça ne fait aucune différence dans mon design, donc je suis heureux. Très bien, c'est comme ça qu'il faut le réutiliser. Ce que nous allons faire dans la prochaine, c'est que nous allons le personnaliser un peu. Eh bien, nous allons personnaliser un énorme à venir. On va faire un menu déroulant et tout ce qui est cool. Ouais, c'est comment réutiliser une classe que vous avez faite en plus d'ajouter un peu d'extra. D' accord, prochaine vidéo. 61. Projet de cours 04 - Bouton personnalisé: Vous pouvez dire par le nom [inaudible]. C' est un autre projet de classe. Ne vous inquiétez pas, c'est amusant. Je dis que ça ne rend pas vrai. On va apprendre. Projet de classe 04. Si vous recherchez les notes électroniques pour cela, elles se trouvent dans le dossier de votre projet de classe. Il y a un document Word. Quelques choses que tu veux faire. L'essentiel est de le faire ressembler à ça. Actuellement, il ressemble à ceci avec ces boutons que nous avons réutilisés. Je veux que tu fasses ça ressembler à ça. Il y a une ligne autour de l'extérieur. n'y a pas de remplissage. On utilise Playfear au milieu. Les tiques blanches, il n'y a pas de soulignements. Fais-le juste ressembler à ça. On gardera celui-là ici. Laissez mon bouton tranquille et vous en créez un nouveau. J' ai suggéré un bouton de navigation de code. Vous pouvez l'appeler comme vous voulez, mais ce sont les choses. L' une des grandes choses est que, vous ne savez pas encore comment faire les frontières, nous ne l'avons pas fait. Donc, j'ai délibérément oublié ça pour le moment. Vous apprendre à pêcher cette chose, où soit juste Google ou chercher Stack Overflow et un moyen de mettre une ligne autour de l'extérieur. J' évite le langage qui se trouve réellement parce que je veux que vous puissiez le trouver et l'implémenter vous-même. Il y a deux façons de le faire. Nous explorerons tous ceux dans le prochain. Tout ce qui a besoin d'entrer. Ils vont tous être des tags, ce qu'ils sont déjà. Nous allons créer un nav bouton. Nous allons mettre une bordure blanche, Playfair, prendre ce blanc, pas de soulignement, fond, pas de couleur de fond. Quand vous aurez fini, avant de passer à la vidéo suivante, je veux que vous preniez une capture d'écran et que vous la partagiez avec moi sur les réseaux sociaux pour dire : « Oui, je l'ai fait. Il l'a cloué. » Si ça tourne horriblement mal, vous pouvez aussi partager cette image. Je veux juste que tu sois tenu responsable et je sais que je n'ai aucun moyen de dire que tu ne fais pas une photo de ça. C' est un peu virtuel ce truc vidéo, mais on peut se connecter via les médias sociaux. N' oubliez pas d'utiliser le hashtag byOLWeb. Apportez votre propre ordinateur portable web et le groupe Facebook ici. N'oublie pas ça. Je vais le mentionner à nouveau parce que c'est très pratique et qu'il grandit très bien et il y a beaucoup de gens qui répondent. J' adore que c'est le dernier projet de Stephen Butler. C' est un des modérateurs. Il a transformé ses neveux en ça. Regarde à quel point c'est cool. Il y a des trucs vidéo, vous pouvez voir ici qui sont quelques-uns des trucs UX de XD. Il y a toutes sortes de trucs cool ici, mais je veux d'autres trucs sur le web ici. Pour le moment, c'est très graphique pour nos autres cours. Alors jetez un coup d'œil, il apporte votre propre ordinateur portable en ligne. C' est un groupe, vous devez demander à rejoindre, mais vous devez poster une petite capture d'écran là. Je te verrai dans la prochaine vidéo. 62. Projet de cours 04 - Bouton personnalisé COMPLET: D' accord. Comment ça s'est passé ? Tu l'as fait, tout d'abord ? Deuxièmement, est-ce que ça s'est bien passé ? Pouces levées. Ça s'est mal passé ? Pouces baissées. C'est bon. Nous allons travailler sur la façon de le faire maintenant. Regardons un peu ce code. Ce que nous allons faire, c'est que nous allons supprimer mon bouton, de tout cela et appliquer notre propre classe. Un petit raccourci cool est, ça n'a pas vraiment d'importance si vous l'avez sélectionné qui fera juste un curseur à l'intérieur de quelque chose comme une classe, il peut être à l'intérieur de n'importe quoi. Mais si vous voulez quelque chose plus loin sur la page, vous pouvez appuyer sur Command D sur un Mac, Control D sur un PC et regarder cette Commande DD fermer celui-ci. Si vous voulez que celui ici à nouveau, D. Vous pouvez voir juste saute vers les anciennes versions de ça. Ça peut être super pratique. Dans notre cas, parce qu'ils sont empilés les uns sur les autres, vous pouvez utiliser plusieurs curseurs mais DDD. C' est Control D sur PC, Commande D sur Mac. Celui-ci va être appelé bouton nav. Bien, ici, je vais créer notre bouton de navigation. Mettez un arrêt complet ou une période, bouton de navigation, obtenir les accolades, que devons-nous faire ? Maintenant, il y a deux façons de le faire en fonction de l'âge de l'école la solution que vous avez trouvée, il y a une nouvelle façon et une ancienne façon. Ils sont tous les deux parfaitement aussi bons que le suivant, donc le style de bordure et vous le définissez sur solide, c'est un et demi de celui-ci. Ensuite, vous dites poids de la bordure puis taille de la bordure. C' est la taille ? Vérifions. Non, c'est la largeur de la bordure. Oui. Largeur de la bordure. Cool et je vais mettre le mien à un pixel. Ça devrait nous rapprocher. Regardons un peu. Ça va avoir l'air un peu bizarre, mais voilà, c'est le genre de base dedans. Maintenant, nous devons ajouter du rembourrage et tout le reste. Mais parlons de l'autre côté. Au lieu de faire cela, vous pouvez simplement taper bordure, deux-points et ensuite vous pouvez le mettre dans un ordre afin qu'il aille pour le poids autour de l'extérieur, le style. J' utilise juste des espaces entre eux. Je vais utiliser du blanc. Ai-je besoin d'écrire du blanc ? Je ne m'en souviens pas, mais ça fera exactement la même chose. C' est juste une syntaxe plus courte que de les faire séparément comme taille de bordure, style de bordure, couleur de bordure. Je pense que par défaut, il prend la couleur du texte à l'intérieur de celui-ci, un 100 pour cent. Mais c'est une façon de le faire. Nous allons ajouter du rembourrage et nous allons utiliser notre rembourrage fantaisie. Tu as utilisé le rembourrage de fantaisie ? Ou le haut de rembourrage, rembourrage à gauche, rembourrage à droite ? Peu importe que vous arriviez au même endroit, mais rappelez-vous, comme les marges, que vous commencez par le haut. Je veux que le haut soit 11 pixels d'espace. Ensuite, nous allons utiliser le droit, et je vais faire 25 pixels. Si je le laisse comme deux se souviennent, ça finira par être haut et bas, ils seront à gauche et à droite. Sauvez-le. Regardons un peu. Cool. Je veux que ce soit Playfair, et donc le style de police Non, pas la taille, le style, et je le veux. Viens alors. Famille de polices. Ne prétends pas que c'est un test , en fait, va le voler. Vous y allez. Tu l'as probablement fait aussi. Je parie que tu l'as fait. Parce que j'oublie toujours est-ce deux mots, est-ce un mot de toute façon. Sauve ça. Regardons un peu. Je pense qu'on l'a fait, c'est une étiquette. Jetez un oeil à notre liste est un tag. Nous avons créé notre propre classe appelée bouton nav. On a une bordure blanche autour de l'extérieur. C'est Playfair. C' est blanc. Il n'y a pas de soulignement et il n'y a pas de couleur de fond. Maintenant, le texte est blanc et souligné, peut dépendre de la façon dont vous avez implémenté votre site. Le vôtre était violet et il était souligné ou bleu et souligné. Le mien n'est pas parce que plus tôt dans le cours, j'ai pris soin de lui rappeler, j'ai dit, nous allons juste ajouter une balise. Tous les tags sur l'ensemble de notre site sont blancs, et n'ont pas de soulignement, décoration de texte, aucun. Si vous ne l'avez pas fait, vous devrez modifier ici. Mais j'espère que ça marche pour toi, et si ça n'a toujours pas marché. Je pense juste, si c'est encore souligné en bleu, eh bien, vous devez le faire. Vous devrez obtenir une, une balise qui est jointe au bouton de navigation et le style pour être de couleur blanche, et je vais faire avec le tout. On y va, on est allés jusqu'ici. Décoration de texte aucun. Je blâme une partie de mon orthographe, je ne vois pas mon clavier. Quand tu filmeras ces cours, tu ne l'es pas, je le suis. Il y a un gros micro juste devant mon visage. Vous pouvez entendre moi et mon grand son. Parce que si je suis trop loin, tu m'entends ici, et ce n'est pas aussi cool, donc je dois m'asseoir bien et près, ce qui veut dire que c'est juste en face de mon clavier donc je regarde autour de ça comme ça, ou je ne peux pas voir ce que je tape et je ne suis pas un dactylographe assez bon pour ne pas être en mesure de voir, de toute façon. Maintenant, je trouve que plus tard dans ces cours, eh bien, j'ai un bazillion vidéo, et j'ai l'impression que nous avons traversé le Dan est d'être un super professionnel au début et nous sommes trop dans le partage. Vous pouvez dire partager trop Dan, et je vais le redresser pendant un petit moment, au moins. Maintenant, on parle de familles et de mes problèmes avec mon micro. Sautons maintenant et passons à la prochaine vidéo avant de partir sur une autre tangente. Au revoir maintenant. 63. Comment ajouter une règle horizontale en utilisant HTML5 & CSS3 dans VS Code: Hé, tout le monde. Joli, simple. On n'a pas de ligne. Maintenant, on a une ligne. Super simple. Nous allons ajouter une bordure à la boîte de l'en-tête. Nous allons parler de la <hr> balise '' ainsi que de sauter dans VS Code et faire en sorte que cela se produise. D' abord, parlons de la ligne dont nous avons besoin, c'est celle-là, non ? Sur ma maquette, j'ai cette ligne qui traverse le document en haut de la page, entre l'en-tête et cette boîte de héros principale ici et c'est une couverture comme un gris clair. J' ai choisi cette couleur le C-C-C-C-C, et nous allons vous montrer comment le faire. La mauvaise façon, eh bien, ce n'est pas un mauvais moyen, c'est juste ne semble pas être utilisé aussi souvent et il a quelques inconvénients donc entre l'en-tête et le principal, je vais juste rester ici au milieu et nous allons utiliser cette balise . Si vous avez fait mes cours précédents, cette <hr> balise '' est ce que nous utilisons, la règle horizontale. Il apparaît sur la page. C'est parfait. Il y a beaucoup de choses sur elle, ce qui est probablement le plus gros problème avec elle. Bizarrement à propos d'une balise '' 'aussi, il n'a pas de' fermeture, n'en a pas besoin. Je ne sais pas pourquoi. Juste de la magie. Il n'a pas besoin de faire tout ça. Il y a quelques balises qui le font, et donc la raison pour laquelle nous ne le faisons pas est que je ne suis pas dans la documentation HTML5, il dit , « Hey, nous n'utilisons plus cela comme une règle. Nous l'utilisons comme un saut de contenu et nous allons le cacher. » Vous devriez le faire de sorte qu'il styles que vous ne pouvez pas le voir et qu'il est utilisé pour briser le contenu. fonctionne toujours, mais ne l'utilisons plus et je vais vous montrer la façon la plus facile de contourner, super facile parce que l'autre inconvénient avec '' est son quelque chose sur votre page, et je vais devoir l'avoir sur chaque sous chaque en-tête. Une bonne façon de contourner cela est soit nous allons ajouter une bordure comme nous l'avons fait pour les boutons ici en bas de l'en-tête ou en haut de la principale, toute façon nous mènera au bon endroit. Voyons l'en-tête et vous remarquerez comment le support était là, il n'est pas cassé. C' est juste que ça m'ennuie. J' aimerais qu'il soit séparé comme ça. Nous allons utiliser « frontière ». Sortez dès aujourd'hui. Bordure inférieure, et comme nous l' avons fait avant, nous pouvons mettre une rangée pour que la première soit sa largeur, puis elle sera solide et ensuite elle sera grise. J' adore ça. Vous pouvez utiliser le gris avec un A ou un E. C'est la même couleur. Je ne pense pas qu'il y ait des versions américaines ou anglaises de l'orthographe. Je pense que c'est juste deux orthographes du même mot. Je me trompe probablement à ce sujet. Mais de toute façon, voilà. Il y a un gris clair pour les deux. Les deux sorts sont les mêmes. Vous pouvez avoir les deux orthographes. Vous pouvez voir qu'il fait exactement le même travail et c'est juste une chose plus simple alors que l'autre avait toute cette profondeur bizarre. Le <hr> 'a un style de poids à elle, une sorte de vieille école. Tu es solide, tu as pointillé. Il y a beaucoup de style différent pour ça. C' est le style est assez petit. Je vais le rendre beau et grand pour que vous puissiez le voir au cas où vous vouliez des points géants, mais c'est tout. Belle courte vidéo, facile à faire des lignes. N' utilisez plus le '', il suffit de trouver l'une des cases qui s'appliquent. Maintenant, il va y avoir des moments où vous êtes genre, « En fait, je veux une petite ligne à travers », et vous pourriez utiliser le '<hr>'. Vous pourriez simplement le styliser pour vous débarrasser de tous les bits supplémentaires. Je ne vais pas couvrir comment enlever tout le style construit sur pour cela. Vous pourriez trouver qu'il y a en fait une belle ligne droite en utilisant le '' parce que la réinitialisation CSS que vous utilisez peut l'avoir effacée, mais celle que nous utilisons de Chris Meyer ne l'est pas. D' accord, c'est tout. Je te vois dans la prochaine vidéo. 64. Comment faire en sorte que les balises div s'enroulent sur des lignes séparées en utilisant HTML5 CSS3 Flexbox: Hé, tout le monde. Cette vidéo, vous remarquerez que nous avons tous ces témoignages ici. Ils sont ici parce que je veux vous montrer comment fonctionne Flex-wrap. On a ces gars dans une étiquette de parent. Ils ne sont pas dans des rangées individuelles. Ils sont tous dans leur propre étiquette et il y a une petite fonctionnalité cool appelée text-wrap, ou au moins Flex-wrap qui les cassera sur leurs propres lignes. Oui, alors apprenons à faire ça et ajoutons quelques témoignages. Dans ma maquette, je me suis moqué de quatre témoignages différents ici. Ce que j'aimerais faire, c'est que je voudrais que ce site grandisse, car je continue à ajouter des témoignages pour obtenir de plus en plus longtemps. Au lieu de faire une ligne, je pourrais faire une balise div comme un parent, et y mettre ces deux-là, et les diviser en utilisant Flexbox, puis en faire une seconde. problème avec cela cependant est que je dois faire un parent pour chaque seul et ce que je veux faire est que je veux vous montrer l'attribut Flexbox appelé text-wrap. Ça veut dire qu'on va faire un géant ou un parent pour qu'ils entrent tous et ce qu'on va dire, c'est que les gars s'emboîtent sur la ligne suivante. S' il y a trop d'entre vous et que vous ne rendez pas, passez à la ligne suivante. Parce que par défaut ce qu'il essaie de faire comme ces gars ici essaie juste de les presser tous sur la même ligne. Maintenant, ça va nous prendre un peu de temps pour construire ça. Si vous voulez simplement couper à la feuille de raccourcis dans vos fichiers d'exercice sous Flexbox, c'est l'attribut ici. Vous pouvez voir ce qu'il fait là. Ça va à la balise parent. Il suffit d'ajouter cette condition d'emballage. Mais si vous travaillez avec moi, passons par le reste de ce tutoriel parce que je veux ajouter quelques morceaux. Parce qu'il y a des choses plus tard dans ce cours, si vous pensez, « passons celui-ci ». Ça va revenir, parce que je veux faire des pseudo-cours et toutes sortes d'autres choses amusantes plus tard. Où les ajouter, devient déroutant ici et vous êtes comme, où est tout cela ? Je trouve juste en cliquant dessus et vous pouvez voir que c'est peu marié avec son pote en haut. Des cartes là-dedans. Une fois les cartes terminées, je veux que mes témoignages commencent. Je vais y mettre une belle pause pour le rendre plus facile pour tout le monde. Je vais créer un cours appelé « Témoignages ». Ça marche assez pour moi et à l'intérieur de là, je vais en faire, combien ? Nous avons besoin de trois d'entre eux. Je vais créer toutes les classes maintenant. Celle-ci, je vais l'appeler T Box et contrairement à nos cartes. On a la carte un, deux et trois. Parce que ce sont exactement les mêmes, tout le long du chemin. Je vais juste utiliser la même classe pour tous les contrôler. Cool. À l'intérieur de ces T-box vont être quelques ticks que j' ai dans votre dossier de projet deux. Cherchez le texte du projet 2 et j'ai mes témoignages. Je vais vous montrer ceci. testimonial-generator.com, Je ne l'utilise pas pour moi-même. Mais je cherchais quelque chose pour ce cours et j'avais juste besoin de passer par et j'ai trouvé testimonial-generator.com. Tu as mis le service de tes projets, le massage du dos de Dan. Personne ne veut un de ceux-là, et voilà, générez. Depuis que j'ai investi dans le massage du dos de Daniel, j'ai fait plus, Wow 100,000 profits, je serais perdu [inaudible] Mais vous comprenez l'idée, non ? Vous pouvez générer toutes ces choses. Je l'ai fait pour ceux-là, mais je ne le fais pas pour les miens. J' ai mis des cycles d'inscription et ce que j'aimerais faire, c'est que j'aimerais ça. Le nom est séparé de la copie du corps en deux balises P distinctes. Je vais copier ce premier morceau et je vais entrer ici, et je vais le mettre dans une étiquette P et le coller, et je vais le ranger parce que c'est le gars que je suis. On y va et on va faire un autre P tag, je pourrais juste faire le bon nom. Une autre étiquette P, et je vais mettre celui-là dedans. Bon, donc je veux ça pour trois d'entre eux. Donc je vais juste les dupliquer. Copier, coller, coller. Ils sont tous en train d'obtenir. Mes onglets se mélangent tous. Tu te souviens de ce qu'on a fait plus tôt ? Je vais sélectionner alors que tout cela et un clic droit dessus et je vais aller à la sélection Format. Vous voyez le raccourci là. Si vous trouvez, vous savez, vous voulez le faire tout le temps. Maintenant, c'est sympa et espacé. Ok, ça va changer le texte. Je vais demander à l'éditeur de l'accélérer. Le rédacteur en chef l'est, Jason. Merci Jason. Pour une raison quelconque, j'ai décidé qu'il nous fallait trois. Il nous en fallait quatre, d'accord. On y va, on les colle et on met le dernier dedans et je te verrai dans une seconde. D' accord, tu es de retour. Ce que vous avez pu remarquer, c'est quand j'ai fait mon nettoyage, nettoyé mon code. C' est un truc bizarre en mettant ça là-dedans et je ne sais pas pourquoi. C' est peut-être l'apostrophe. Pas sûr. Je ne l'ai pas vraiment nettoyé. J'ai bien mes onglets. Mais c'est un truc bizarre avec l'étiquette P. Rappelez-vous si le vôtre coule hors de la page, obtenez une vue et basculez le mot-wrap. Ok, si ça va jusqu'au bout, il peut y avoir comme ça tu l'aimes, je ne le fais pas. D' accord, donc j'ai mes quatre choses dedans. Jetons un coup d'oeil sur ma page. J' ai ces quatre témoignages. Je ne les ai pas coiffés du tout. Alors allons-y et faisons-le. Je vais d'abord coiffer la boîte en T, d'accord. Parce que ce sont eux qui avaient comme la largeur et la hauteur. Va à la boîte en T. Je vais y faire quelques choses. Je veux lui donner une largeur. Dans ce cas, je vais utiliser des pourcentages et je vais le faire. J' ai déjà testé ça, ok ? Je vais faire 37% pour avoir un petit coup d'oeil. Rappelez-vous, en fait, c'est un peu petit oui bon travail, Dan le teste. Donc, ils sont parfaits. Je voudrais mettre un peu de rembourrage autour d'elle. Ok, donc rembourrage tout autour, je vais faire 50 pixels. Je veux les faire monter sur la même ligne. En fait, mettez la ligne sur l'extérieur d'abord juste pour que nous puissions faire ce morceau. Alors fera la frontière. Je vais l'épeler mal pour la millionième fois. Frontière. Et on va faire la même chose que pour les boutons. Il va avoir une largeur d'un. Ce sera une bordure solide, elle sera blanche. Alors jetez un coup d'oeil. À quel point c'est proche ? C'est plutôt bien. Ok, maintenant je veux les mettre sur leur propre ligne. Ça n'arrivera jamais pour le moment parce que nous avons le nôtre un peu gros. Vous pouvez voir que j'ai fait 47%, ok. Mais, c'est bien au-delà, c'est plus de 50 ans. Pourquoi c'est ça ? Tu sais, pourquoi ? Parce que nous avons ajouté le rembourrage. Rappelez-vous le rembourrage ajouté à la largeur totale. Tu es genre, ok. Je pourrais, c'est pourquoi j'avais 37 dans ma tête parce que 37 plus mon rembourrage, ça fait moins de la moitié. Ou est-ce, moins de la moitié ? Ok, et il y avait juste un truc sournois. On ne veut pas faire ça. Nous voulons être tous officiels. Rappelez-vous comment le faire. Nous le faisons à la boîte ou à la boîte d'emballage. Je pense qu'on peut le faire. Je ne suis même pas sûr. L'esprit est devenu vide. Vérifions. Éditons nos témoignages. Rappelle-toi ce que c'était. Souviens-toi border-box. Non, sa taille de boîte. Taille de la boîte, boîte de bordure. Voilà, tu y vas. Non, tu dois vraiment le faire aux choses elles-mêmes. Bien sûr que vous le faites. Ça a du sens. Voilà, tu y vas. Ok, donc en faisant ça, ça fait moins de ça et on est prêts à y aller. Ok, la prochaine chose que nous voulons faire est de les mettre sur la même ligne. Comment on fait ça ? Je veux que vous l'arrêtiez et que vous réfléchissiez un peu. Pas un examen. C' est un peu comme un quiz pop. D' accord, ce qu'on a fait avant. N' oubliez pas que nous avons réglé l'affichage sur Flex. Ok, et par défaut que tous essayer de presser sur la même ligne, qui est, cool. La prochaine chose que nous allons examiner, c'est ce que nous avons. Eh bien, nous n'avions pas à le mentionner ou à le pointer complètement. D' accord. À partir de votre feuille de triche Flexbox. A partir de vos fichiers d'exercices et nous définissons le flex-wrap pour envelopper parce que c'est ce que nous voulons faire. Ok, et jetons un coup d'oeil. Allons à, ici. Réglons le flex-wrap pour envelopper. On y va. Voyez si ça marche. Joli. D'une manière ou d'une autre, je veux les séparer. Je pourrais commencer à ajouter du rembourrage entre eux. Je peux faire un peu dur. D' accord. Vous souvenez-vous de la classe que nous ajoutons de Flexbox juste pour les séparer tous. On l'a fait pour celle-là. Tu peux tricher et aller vérifier celui-là. Ok, où sont mes cartes ? C' est là, d'accord. Tu te souviens de celui-ci ? Justifier, contenu, espace entre, tout droit, cartes. Il était juste en retard parce qu'il ne se souvenait pas un peu. Mais c'est ce que c'est. Justifier, contenu, espace entre, d'accord. Il devrait les séparer tous. Maintenant, je veux un peu de marge vers le haut, ok. Donc de ces petites boîtes en T ici, je vais dire marge. Marge fera le dessus. Combien allons-nous faire ? 50 pixels. On y va, il y a une petite frontière. Ok, on a ce truc bizarre qui se passe avec la hauteur ici. Ok, sans dégradé au hasard en arrière-plan, réparons ça. Qu' est-ce qui le contrôle ? Le haut ici. Nous avons ajouté ceci avant pour résoudre un problème où notre site Web était trop petit. Ok, et ça a fait 100% de la vue initiale, ce qui nous amène au bas de mon écran. Le vôtre peut ne pas avoir ce problème car votre écran peut être plus petit ou plus grand. D' accord, mais on n'a plus besoin de la hauteur pour être à 100 %. Parce que mon site web est beau et long. Faire un peu de rembourrage en dessous de ces gars. En fait, où est-ce que vous ajoutez le rembourrage maintenant ? D' accord. Nous n'avons pas de pied de page dans ce site. On n'en a pas conçu un avec un. Donc je n'ai pas besoin d'en avoir. Où dois-je le faire ? Je pourrais le mettre au bas des témoignages. Je suis réticent à ajouter du rembourrage au fond du corps seulement parce que je suis timide, genre. Jouer avec la balise body peut faire des choses bizarres, surtout si vous travaillez avec des choses comme Bootstrap, Flexbox. Ils ont tous leurs mythes pour vouloir faire des trucs avec le corps. Ok, je vais juste être super prudent et juste utiliser celui que j'ai fait. Je sais qu'ils ne vont pas s'embêter avec ça. D' accord ? Je vais dire marge, en bas. Je vais dire 50, peut-être 100. Doublons ça. Jetez un oeil, c'est ma maquette. On y va. Un peu de rembourrage en bas, ou au moins une marge en bas. D' accord, alors on a regardé ce que le flex-wrap faisait. Ça veut dire que ces gars sont tous pleins, tous dans une seule boîte. Le truc cool à ce sujet est que si j'ai fait ces gars plus petits ou j'en ai ajouté plus. Ok, alors on va copier. Je vais ajouter un peu plus coller, coller, coller, faire des charges plus. Le truc cool à leur sujet est de vérifier. Ils peuvent simplement continuer à s'enrouler sur la ligne suivante. D'accord. Je ne veux pas que tous ces types y aillent. Agréable et propre. Retour à l'endroit où on a commencé. Toi, là-bas, attrape le micro. Nous avons fini. D'accord, je te verrai dans la prochaine vidéo. 65. Comment modifier la couleur du survol et animer mon bouton en HTML et CSS ?: Hé, là. Jusqu'à présent, notre bouton a juste mis là ne fait pas grand-chose. Mais maintenant, regardez quand je bouge ma souris, fané en vert. C' est ce qu'on appelle une pseudo-classe. On va utiliser le pseudo vol stationnaire. Je vais vous montrer comment le faire maintenant dans ce code. Actuellement, mon bouton n'a pas de survol. Quand je passe la souris, j'ai le genre de main de Mickey mais je n'ai pas le vol stationnaire comme tu l'as vu dans l'introduction. La façon d'obtenir cela est quelque chose qu'on appelle une pseudo-classe. Parce que cette balise A ici a plus d'un état. Il n'a pas été touché état et a un état de vol stationnaire. Il a quand je clique dessus état et il a été là avant l'état. D' accord. Il y a un autre mot technique, mais vous obtenez ce que je veux dire, il y a un code, il fait quelques choses différentes et vous pouvez les détecter en créant une pseudo-classe. La pseudo-classe fonctionne comme ça. Je vais le faire sur mon bouton parce que c'est ce que j'ai appliqué à ce truc. Vous créez une autre classe et vous dites, mon bouton. D' accord. Épellez-le correctement, vous avez besoin, je voudrais prendre le vol stationnaire, et la façon dont une pseudo-classe fonctionne est que seule la vitesse rejoint et il doit sauver cela. Je vais prendre le vol stationnaire, l' état du vol stationnaire de ce bouton. Qu' est-ce qu'on va faire ? Modifiez la couleur d'arrière-plan. Je vais probablement choisir quelque chose. Sélectionnez-le. D'accord. J' espère que maintenant quand je l'ai aperçu, je peux passer au-dessus et vous y allez. Cela a un pseudo état de vol stationnaire que j'ai trouvé et changé. Cool piratage. Vous pouvez le faire, vous avez peut-être remarqué dans l'intro, que je l'ai fait disparaître. Faisons ça. Dans CSS3, nous pouvons faire une transition, une durée de transition. Ça va faire combien de temps ferait une seconde. Donc ça va prendre une seconde pour que cette chose s'active. Donnons-lui un aperçu. Prêt ? Maintenant, nous avons regardé l'état de vol stationnaire, voici nos autres. Je vous montre juste w3schools.com pour les différentes pseudo-classes. C' est celui dont on a parlé. Jetons un coup d'oeil à fait en vol stationnaire. C' est le principal quand tu vas le faire. Je ne touche jamais le lien visité ou actif. Mais regardons un peu pour dire que tu sais ce qu'ils sont. Donc, pour le moment, il est prêt, si vous n'avez pas cliqué dessus, déjà cliqué dessus et il est vert. J' ai visité ceci donc c'est vert. Quand je souris survole, c'est rose vif. Alors vas-y, c'est ce qu'on a fait, le vol stationnaire. Celle-ci ici, quand elle est active, elle devient bleue. Regardez ceci, quand je clique dessus. Il devient bleu pendant une seconde. Je ne colore jamais ça parce que qui va voir ? Parce que je clique comme ça, comme une personne normale, super rapide et vous ne voyez jamais le changement de couleur. C' est à vous de décider, mais vous pourriez aimer changer la couleur active. Vous pouvez voir juste la syntaxe. C' est un deux-points, puis ceux-ci sont prédéfinis. Il va s'assurer que c'est le deux-points entre les deux. Il y a plein d'autres pseudo-classes. Au fond de cette école W3, il y a un tas de différentes écoles. D' accord. Nous allons en couvrir quelques autres dans la prochaine vidéo. Donc oui, on couvrira ceux que j'utilise de toute façon. Beaucoup d'entre eux ici. Je n'ai jamais eu l'occasion de m'en servir. Mais oui, il y a beaucoup de pseudo-classes en dehors de juste planer. Sautons dans la prochaine vidéo et vérifions quelques-uns d'entre eux. 66. Comment cibler des balises spécifiques dans le HTML pour y appliquer du css à l'aide de pseudo-classes ?: Salut là. On va passer les pseudo-classes à un niveau supérieur. Nous allons cibler cette deuxième balise P et maintenant des témoignages et nous allons la rendre plus petite, nous allons l'utiliser. Vous remarquerez maintenant que HTML nous n'avons pas appliqué de classe, parce que c'est ce que nous aurions fait jusqu'à maintenant. Nous aurions allé balise P obtenir une classe, mais regardez que juste de vieilles balises P simples, mais d'une manière ou d'une autre dans notre CSS par magie, nous pouvons isoler cela en utilisant une pseudo-classe. Nous le faisons avec notre témoignage, nous le faisons avec cette belle chose, chaque troisième élément de liste est rouge. Pseudo-classes, ils sont l'endroit où il se passe. Rejoignez-moi dans cette vidéo et vous aussi pouvez être cool avec les pseudo-classes. Nous avons appris le vrai vol de pseudo-classe de base dans la dernière vidéo, mais il y a beaucoup d'autres choses cool que vous pouvez faire avec des pseudo-classes. La version des écoles W3 d'expliquer tout cela peut être très sec et c'est parfois vraiment ce que je veux, mais parfois c'est bon d'aller voir quelque chose comme CSS-tricks, Chris Coyier est vraiment bon à donner des choses une application pratique et parfois il dira que vous devez faire quelque chose selon le manuel. Mais alors vous êtes comme « Vraiment » et puis vous venez ici et parfois Chris dit, « Ouais, c'est que vous vouliez faire », mais ce n'est pas ce que les gens ne font pas ce que les concepteurs habituels font ou les développeurs. Quoi qu'il en soit celui-ci est assez bon, css-tricks.com/pseudo-classsélecteurs, il suffit de faire une recherche sur ce site et il vous donne des explications plus pratiques. Maintenant, je vais les parcourir moi-même parce qu'il y a beaucoup là-dedans, mais sachez juste qu'il y a plus que nous pouvons couvrir dans cette vidéo en particulier. Il en a un très commun. Comme nous l'avons fait, regardons ceux-ci. La position et la numérotation sont vraiment utiles, parce que ce que j'aimerais faire pour nos témoignages est cette dernière chose ici, cette dernière balise P. Je voudrais le rendre plus petit, retrait un peu, voici ma maquette. Je n'ai même pas fait ça dans ma maquette, mais je veux que le petit soit poussé vers la droite et peut-être italique afin que nous puissions cibler des choses comme ça en utilisant des pseudo-sélecteurs. Jetons un petit coup d'oeil donc nous allons utiliser celui-ci appelé premier enfant d'abord et ensuite nous regarderons le dernier type peut-être. C' est quelque chose à notre code Visual Studio. Commencez à travailler avec les pseudo-classes un peu plus compliquées. Regardons le premier enfant, parce que ce que j'aimerais faire, c'est que j'aimerais dire style le H1 à l'intérieur de cette boîte à héroïne. On peut dire à l'intérieur de l'hérobox 1 que j' aimerais coiffer le premier enfant. Rappelez-vous que nous avons parlé des parents et des enfants qui a un peu plus de sens maintenant. Je veux trouver le premier enfant et maintenant ce que vous en faites est un ici, regardons plus tôt. Lorsque nous voulons trouver une étiquette P à l'intérieur des cartes nous mettons un espace et c'est la même chose avec ces pseudo-classes. Je ne veux pas l'attacher directement à cela et faire le premier enfant, parce que ce n'est pas ce que je veux faire est de trouver le premier enfant à l'intérieur de. Juste avoir cet espace ici comme nous l'avons fait plus tôt pour les classes composées antérieures. Je veux trouver le premier enfant à l'intérieur d'une boîte à héroïne, j'aimerais faire la couleur du bleu. On a envoyé un texto à notre, je trouve un moyen aussi. Cool. J'ai trouvé le premier enfant à l'intérieur de là, tu pourrais dire le dernier enfant. Il va regarder herobox et trouver la dernière chose là-dedans, et la dernière chose dedans est ce bouton ici et il est appliqué la couleur bleue au texte. Ça va marcher pour nous, ce que nous voulons faire, ce n'est pas de l'hérobox que nous voulons trouver nos cartes. Nous voilà et nous allons dire, je voudrais à l'intérieur de tbox, je voudrais trouver le dernier enfant parce que c'est la dernière chose dans leur, dernier enfant qui est ce que je veux. Un peu de syntaxe, moins d'accolades et faisons la taille de la police, assurez-vous juste que cela fonctionne. Font-size, je vais syntoniser à peut-être 0,8 ems ou rems. Sauvegardons ça, jetons un coup d'oeil. Est-ce que ça a marché ? Ici, tu y vas. J'ai sauvé le dernier enfant de cette boîte pour le faire. Ce que je pourrais faire aussi bien est si ces boîtes plus que ce sont assez simples que vous pouvez faire, commentons cela pour qu'il soit là et nous allons regarder une manière légèrement différente parce que votre balise div pourrait être plus compliquée que cela. Il y en a d'autres ici regardons un peu. Nous ferons nième de type ou de type c'est un bon. Enfant traite juste avec qui est à l'intérieur du parent et de type, disons que nous voulons trouver le dernier de type et quel genre de type ? Nous allons dire à l'intérieur de la tbox, espace, parce que je voulais qu'il soit à l'intérieur de tbox je veux que vous trouviez un dernier et pas le dernier enfant trouvera le dernier de type. Quel genre de genre ? Je veux que ce soit le P tag que ces deux-là se joignent. La dernière balise P à l'intérieur de tbox va faire la même chose. Je vais faire la taille de la police, la taille de la police de 0,8 rems et nous allons faire un peu de remplissage sur le, quel côté est que nous allons cacher est laissé. Il suffit de le pousser un peu. Jusqu'où ? Je vais deviner ça pour le moment. Regardons un peu et notre gars est là. C' est le dernier du type P que nous finissons au même endroit, mais vous pouvez imaginer si vous avez beaucoup de choses par la suite. Après cette balise P, il y a peut-être une image que notre dernier enfant ne va pas marcher, parce que c'est le dernier enfant maintenant. Donc, vous pouvez être un peu plus spécifique avec elle. Encore une fois, je ne vais pas les couvrir tous parce qu'il aura, je suppose, leur propre place. Regardons peut-être juste un peu plus mais ce que nous pourrions faire est que nous pourrions laisser ça parce que ça marche et je vais laisser là vous pouvez décider lequel vous voulez utiliser. Je vais juste fermer ceci et créer un nouveau document. Qu' est-ce que j'ai fait que je viens de créer comme un document jetable. Il y a une liste non ordonnée qui est une liste à puces et il y a 10 petits éléments à l'intérieur, et ça ressemble à ceci. Vous pouvez jouer le long, vous pouvez créer ceci si vous voulez et puis je vais faire mon style dans le tag de tête pour le moment. Regardons d'autres choses. Disons que je veux cibler le troisième type juste ce type. Ce que je peux faire est que je peux dire à l'intérieur de l'UL mettre un espace parce que quelque chose à l'intérieur de celui-ci, je voudrais cibler le nième enfant. Dans les parenthèses, vous tapez le numéro que vous voulez, donc je veux cibler le troisième enfant à l'intérieur de ce type. Je vais le mettre dans mes accolades, je vais te dire faire une couleur rouge qu'on a trop utilisé de bleu. Donnons-lui un test dans le navigateur là vous allez. cool, c'est que si j'arrête de mettre des trucs ici des pommes, j'accélérerai ça. Ça va le sauver, jetons un coup d'oeil. Donc l'orange est rouge mais le truc à ce sujet est que si je déplace l'ordre de ceci, je vais faire les oranges en haut, ça n'a pas vraiment d'importance en fait, vous pouvez voir que la banane est maintenant devenue rouge. C' est un excellent moyen de le cibler et vous pouvez vider des choses sur la page et peu importe que la troisième personne devienne rouge. Ensuite, vous pouvez aussi faire au lieu de juste le troisième enfant, vous pouvez effectivement dire que je veux la lettre n après. Ce sera la deuxième version de lui et répétez la même chose que vous pourriez mettre en troisième. Il y a beaucoup d'autres choses que vous pouvez faire et en termes d'essayer de trouver spécifique. Vous pouvez jeter des tas de données sur une page et vous devez styler toutes les 20 lignes, mais seulement si, et c'est ce que vous pourriez sauter dans quelque chose comme Chris Coyier est un peu plus, cela va plonger dans de beaux petits exemples. Mais je pense que cela dit que ça vous donne une bonne explication. La grande chose à savoir, c'est que souvent différent de notre autre classe, il y a un espace entre les deux. Parce que je veux trouver le nième enfant à l'intérieur de ce truc. Mais si vous voulez obtenir un vrai spécifique si je veux trouver le LI, je veux trouver le nième enfant ciblant uniquement les LIS à l'intérieur de l'UL qui est rejoint. Bizarre mais vrai. Est-ce qu'on fait du L ? Nous l'avons fait, nous les tapons dans c'est ce que je voulais vraiment faire et c'est pourquoi nous avons créé nos témoignages. Nous pouvons donc en apprendre un peu plus sur les pseudo-classes. Si tu dis : « Des hommes qui avaient l'air d'un gros. Qu' est-ce qu'on fait ça ? » Parce que plus tard dans le cours, nous allons avoir besoin d'en savoir un peu plus sur les pseudo-classes. C' est une bonne base pour nous, ça sera très facile plus tard. C' est tout pour cette vidéo que je vous verrai dans la prochaine. 67. Comment créer un simple bouton de menu de navigation déroulant HTML CSS: Bonjour, vous. Êtes-vous prêt pour le design web le plus délicat que nous allons faire jusqu'à présent ? Menu déroulant semble facile, et c'est facile. Pas à pas, vraiment facile. Tous ensemble ce truc. Un peu de CSS dont nous avons besoin pour le faire fonctionner, mais nous allons le faire étape par étape pour obtenir le pas aussi effrayant que je menace. Je fais que j'ai besoin d'être un peu nonchalante à ce sujet pour que oui, non, c'est bon. C' est facile et c'est juste le faire très vite. Ensuite, vous regardez la durée de la vidéo et vous êtes comme ça fait 20 minutes, c'est 20 minutes ? C' est probablement à propos de ça maintenant. Mais de toute façon, menu déroulant dans une navigation tout seul. C' est pour ça que nous le faisons ici, pour qu'on puisse juste le regarder et c'est pur et que tu puisses le garder séparé. Ensuite, nous allons le plier dans le site web que nous construisons dans la toute prochaine vidéo. Commençons. Nous allons le faire isolément d'abord, puis dans la vidéo suivante, nous l'intégrerons dans notre site vidéo de motos de rôle, désolé. Fermez le site Web et faisons un tout nouveau. On peut aller File, New. Nous allons créer deux fichiers. On va être HTML et on va être CSS. Nous allons garder cela séparément, être pratique pour vous de garder pour vous-même aussi est que vous avez un menu déroulant de travail tout seul. Sauvegardons, et appelons celui-ci menu déroulant CSS. Il y a beaucoup de façons de faire des menus. Nous le faisons en CSS parce que c'est quelques-unes des compétences que nous connaissons déjà, nous vous montrerons plus tard en utilisant jQuery, mais celui-ci est vraiment bon, facile, facile, facile, c'est facile à comprendre. Cela va être point HTML. Je vais faire un deuxième document qui sera le CSS du même nom. En fait, je vais lui donner le même nom pour le garder clair. Connectez-vous à deux. Ici, point d'exclamation, retour, ici sous titre, nous allons dire style, non nous allons dire lien et nous allons lier le CSS. On va appeler le nôtre autre chose, pas le style. On va l'appeler, ça fait des trucs bizarres. C' est bon, je veux menu déroulant CSS, sympa. J' ai connecté ces deux-là, glisser l'onglet sur le côté pour que je puisse les voir côte à côte. Dans notre HTML, mettons d'abord dans nos retours folles et il est mis dans un Nav. Juste le conteneur de Nav pour tout mettre à l'intérieur. Nous ne le ferons pas en super isolement, juste un peu d'isolement. Dans la dernière vidéo, on a mis un tag et on lui a donné un nom de classe appelé mybutton et on a commencé à ressembler à un bouton. Nous allons faire quelque chose de similaire ici. Nous allons, au lieu de faire une balise et de simuler une boîte autour d'elle, nous allons en fait faire une balise div et mettre en couleur et mettre l'étiquette a à l'intérieur de celui-ci. Je vais te montrer ce que je veux dire. Il va juste faire le menu déroulant, gros plus facile. On va faire une balise div et on va appeler celui-ci Navbutton. A l'intérieur de cette balise div, nous allons créer une balise. Ça va aller à nulle part Hash, et celui-ci va être appelé à la maison. Nous mettons l'étiquette a, c'est ce que nous avons fait dans la dernière façon que nous avons fait notre navigation, nous avons fait une balise, puis mis du rembourrage autour d'elle et une couleur de fond. Dans ce cas, nous allons faire un petit rectangle, une petite balise div, et nous allons le remplir avec une couleur de fond, principe très similaire. Donnons un style à ça. En fait, voyons ce que nous avons jusqu'à présent. Je vais sauver, je vais aller en direct. Où est-ce qu'il est allé ? Sur mon autre écran et on a cette jolie chose. Faisons ressembler à un bouton d'abord. Ici, on va dire que je vais cibler le cours en premier. Nous allons dire Navbutton, ça va faire une couleur de fond et nous allons choisir n'importe quoi, défiler vers le bas, choisir votre couleur préférée, vert pelouse, me semble bien, point-virgule à la fin. Qui va le construire lentement ? Nous allons lui donner un peu de rembourrage, donc nous faisons du rembourrage tout le chemin et nous ferons ce que nous avons déjà fait. Onze pixels et 25 en haut et en bas. Eh bien, à gauche et à droite, nous y allons, c'est ce qu'on appelle le rembourrage, donnons-lui une largeur. Je vais faire la mienne une largeur de, je suppose que c'est l'une des grandes différences entre faire avec l'étiquette a. L' étiquette a était juste la largeur de tout ce qu'elle était. Dans ce cas, nous avons dû donner à emporter pour lui donner une taille. Parce que ça veut vraiment être à 100 pour cent sur tout le chemin. Aussi, je veux m'assurer que l'alignement du texte est au centre. On va styler la couleur plus tard, on va la laisser juste pour que je puisse arrêter de construire ce truc. Créons les trois boutons. On a ce petit groupe ici, un bouton d'accueil, je vais en faire un autre, et ensuite je vais en faire un troisième. Ce que j'ai chez moi, celui-là, il va s'appeler Products. Celle-là, il va être Contactez-nous. Également espacés, nous devrions maintenant avoir trois petits boutons Go. Parce que ce peut être un balises sont en ligne, il y avait des techniques les unes aux autres qui sont opposées, c'est un niveau de bloc, ce sont des balises div, elles s'empilent les unes sur les autres. Je veux les empiler l'un à côté de l'autre. Je veux dire que vous êtes mon ami, nous aimerions afficher le bloc en ligne. C' est un peu au-dessus. Empilez les uns aux autres, génial, mais pousse les uns les autres dehors. La prochaine chose que je veux faire est que je veux construire la petite liste déroulante. Ce que nous allons faire, c'est nous allons le mettre ici pour que nous puissions le voir tout le temps, et nous allons l'éteindre par défaut jusqu'à ce que nous obtenions une pseudo-classe de survol sur ce bouton produits, qui va activer encore une fois. Regardons dans un vrai fondamentaux de ce que nous faisons. Tout d'abord, nous devons mettre des trucs dans les produits. Après l'étiquette a, mais avant la fermeture de la div, cela signifie qu'il va être dans cette boîte, et nous allons entrer dans déposé hors de cette boîte après le mot Produits. Je vais juste mettre quelques morceaux en le rendant un peu plus facile. Qu'est-ce qui va se passer ici ? Nous allons mettre un nouveau conteneur, une nouvelle étiquette div, et nous allons lui donner un nom, je vais appeler celui-ci, comment allons-nous appeler celui-ci ? La liste déroulante. Ça s'appelle une boîte juste pour essayer d'être clair sur ce que nous faisons. A l'intérieur de cette boîte, comme on l'a fait avant, je veux un tas de boutons. Vous pouvez voir comment nous entrons dans l'inscription [inaudible], nous allons dans différents niveaux. Navigation, il y a un bouton, un second bouton, celui-ci a le lien, mais il a un autre conteneur juste après ce lien. Nous appelons ça une liste déroulante, nous allons le styliser, et nous allons choisir une couleur différente pour elle, et nous allons avoir, combien de menus déroulants ici ? Trois. A l'intérieur de notre bouton, notre bouton produit, nous avons le petit lien qui se termine, et puis avant que le bouton entier se ferme, nous avons cet autre petit groupe imbriqué à l'intérieur. On l'a appelé, liste déroulante, et on a un, deux, trois boutons à l'intérieur. Tu es avec moi jusqu'à présent ? Oui, peut-être ? Essayer de le rendre propre pour regarder un peu comment il apparaît. Ha, vous pouvez voir ce qu'il fait, il met ces boutons à l'intérieur de ce bouton de produit, et il est coincé là-dedans. Ce que nous ferons ensuite, c'est que nous allons simplement l'éteindre par défaut. On a ce truc qui s'appelle la liste déroulante. Allons le cibler, c'était une liste déroulante. Qu' est-ce qu'on veut faire de lui ? Nous voulons afficher, et nous allons aller Afficher aucun. Vous allez prendre l'un ou l'autre des bars plus tard. Nous avons fait l'affichage, nous avons fait un autre affichage, nous avons affichage flex, bloc d'affichage, bloc d'affichage en ligne d'affichage. On n'en a pas encore fait. Qu'est-ce que ça fait ? Ça l'éteint, c'est parti. C' est l'astuce, nous allons le réactiver en utilisant une pseudo-classe de vol stationnaire. Pourquoi nous avons passé si longtemps à apprendre des pseudo-cours, ça va être utile et pratique au fur et à mesure que la classe continue. Si le mot produit a disparu, tu aimes, ha, il a disparu. C' est probablement parce que vous avez accidentellement eu cette idée de l'air, ça ira, ça doit être en dehors de cette liste déroulante que vous éteignez, juste au-dessus ou juste en dessous, ça n'aura pas vraiment d'importance. Ce que nous pourrions faire, c'est ajouter quelques commentaires, parce que ce serait juste pour nous expliquer, ce que cette chose fait ? Rappelez-vous toute ma marque, sa barre oblique avant de commande me donne mon astérisque de barre oblique avant, puis se termine par une barre oblique avant d'astérisque. Sur un PC, c'est le même ou similaire, c'est la barre oblique avant de contrôle et ma barre oblique est abaissée par mon point d'interrogation. Ici, je vais être très peu pour mon futur moi. Ceci ici l' éteint lorsque la liste déroulante n'est pas utilisée. C' est son boulot. Maintenant, ce que nous voulons le rallumer, je vais ajouter un peu de CSS pour dire que cela le rallume. Ce que je veux faire, c'est la liste déroulante maintenant, ce que j'aimerais faire, c'est que je vais le réactiver, afficher et le bloc. Vous pouvez apparaître, s'il vous plaît. Block et none ont une sensation très similaire à la façon dont ce nom, mais nous comprenons bloc maintenant, cause des classes antérieures, inline-block, c'est juste un morceau de choses. Au moment où ces gars se battent, ce qu'on peut faire est de dire, ce gars n'est allumé que lorsque je passe au-dessus de mon bouton de navigation. Mon bouton de navigation, et le voilà, ils adoptent le bouton de navigation avec la pseudo-classe de survol. Quand cette chose est survolée, je voudrais alors activer ce k qui est bloc d'affichage, et il doit être de cette façon autour de celui-ci ne peut pas être dessous de ce k parce que rappelez-vous que fonctionne du haut, est d'abord, obtient désactivé. Ensuite, si cette condition est remplie, c'est l'état hôte, il va déclencher cette classe pour faire autre chose, remplacer celui-ci pour dire maintenant bloc d'affichage. Est-ce que ça a du sens ? Jetez un petit coup d'oeil. Je vais être jolie. Eh bien, n'est-ce pas ? J' ai déjà le sien. Je l'ai laissé là-bas, il a disparu. On y va. Il ne l'est pas, Rosie. J' ai juste oublié de le sauver. C'est ce que je dois faire. Allez, alors. Bon, maintenant testez-le, nous survolons. Il apparaît au mauvais endroit, mais il apparaît. Ça fait des choses bizarres. Ce qu'il fait est, par défaut, toutes ces boîtes ont ici une position de quelque chose appelé relatif, elles sont toutes relatives les unes aux autres. Quand ces gars apparaissent, ils se déploient tous et ils disent : « Eh bien, je suis par rapport à toi et tu es au sommet, donc je vais aller au fond et ensuite je vais pousser tout le reste. » Ça ne l'explique peut-être pas très bien, mais c'est relatif à son pote. Pour désactiver cela, vous pouvez dire : « Faites une liste déroulante, je ne veux pas que vous soyez un parent positionnel », qui est celle-ci. « Je veux que tu sois un autre, quelque chose qu'on appelle absolu. » C' est le contraire, c'est le némésis pour le parent. Ça dit : « Je me fiche d'où sont mes potes, je vais juste aller où on me dit. » Jetons un petit coup d'oeil, il est là. Ça marche. Au moins ne joue pas avec mon menu du haut, j'ai besoin de les empiler, mais c'est bon. Nous avons dit au menu déroulant, cette classe déroulante. En fait, la liste déroulante soit la position de l'absolu. Mais ce que j'aimerais faire, c'est que j'aimerais dire au bouton Navbutton, « J'aimerais vous mettre en relation. » Position par rapport au parent. Je veux que ces gars soient relatifs les uns aux autres et ça veut dire que ces petits gars vont se nobrer et s'empiler les uns au-dessus des autres. Donc, le menu déroulant lui-même, le conteneur, est défini sur absolu, mais les boutons de navigation réels eux-mêmes, se noblent les uns les autres et ils s'empilent les uns après les autres. Que mes amis sont un menu déroulant assez grossier, en vol stationnaire. On va s'amuser un peu, mais ce sont les mécanismes pour ça. Fondamentalement, éteignez-le, sauf si vous avez une pseudo classe qui dit survol, activez-moi et puis il y a un tas de jouer autour pour tout mettre en ligne. Si vous êtes comme moi, en regardant ça, qu'est-ce que tout ça fait ? Vous pouvez copier et coller ceci, garder séparé, donc quand vous commencez à construire un site, en fait saisir le nav entier et saisir ce CSS, et juste commencer à partir de là. Si je suis honnête, parfois c'est ce que je fais. Une des choses que vous pourriez avoir à faire est, parce qu'il y a un isolement, ce menu apparaît au-dessus de ce fond blanc parce qu'il n'y a rien ici. Parfois, ce qui peut arriver, c'est cela apparaît et le Home, Home, Home finit par être sous le contenu, donc vous avez une grande image ici, le menu déroulant apparaît en dessous, une solution facile pour cela est quelque chose appelé l'index z. L' index z pense que vous avez X et Y sur votre page, nous en avons parlé. Z vient vers vous, donc vous pouvez dire, en fait, je veux que ce soit un indice z de, tant que c'est un ou au-dessus, si cela ne fonctionne toujours pas, vous pouvez aller jusqu'à une centaine, il doit juste être élevé. Fondamentalement, tout est réglé à zéro, et tant que vous le faites au-dessus d'un, cela devrait fonctionner. Parfois, il y a des moments où vous avez juste besoin d'avoir 99 ans ou quelque chose de plus. Tant qu'il est supérieur à zéro. Cela ne changera pas mon pour le moment, mais je vais jeter [inaudible] parce que j'ai toujours problèmes avec les menus déroulants, plonger derrière les choses. La prochaine chose que je veux faire est, ils se chevauchent là, donc ces boutons se chevauchent. Échangeons le mot Accueil parce que c'est déroutant et nous positionnerons un peu le menu déroulant. Ici, au lieu du mot Home, Home, Home, Home, on va mettre dans l'article 1. Commande+D, prenez ces deux, Article 2 et je vais résoudre ce dernier, trois. Très bien, même chose, juste avec un peu de chiffres là-dedans et faisons le positionnement. La liste déroulante, ça dépend, je veux qu'elle soit un peu plus bas, donc si j'utilise margin-top, et je dis, « Descends comme 10px. » Nous allons probablement rencontrer un problème en fait, regardons. Dix pixels l'ont fait. C'est aligné en bas, c'est dur parce qu'ils sont tous de la même couleur. Je ne vais pas le faire, mais ce que vous pourriez faire, c'est qu'ils utilisent tous Navbutton, donc ils sont tous aussi verts que la pelouse. Vous pouvez créer un deuxième navbutton, peut-être l'appeler le bouton déroulant et juste lui donner une couleur différente, sorte que c'est peut-être un peu plus clair et l'appliquer ici. Il a toujours besoin de toutes ces choses, mais vous pourriez avoir deux couleurs différentes. Ou tu pourrais être fantaisie, oh bon sang, ne sois pas fantaisie. Être un peu fantaisie ? Très bien, soyons un peu fantaisistes. S' il y a un bouton Navbutton qui apparaît dans une liste déroulante, mais seulement s'il se trouve à l'intérieur d'une liste déroulante, modifiez la couleur d'arrière-plan. Celui-ci va être Cadetblue. Ça me semble idéal. Bon, commencez à mettre des caractères aléatoires, regardons un peu. Cool ? L'a réparé. Maintenant, nous mettons en 10px, disons que nous en mettons 20, voyons ce qui se passe. C' est un peu bizarre, si je passe au-dessus, et que je suis rapide, je peux y arriver. Mais si je vais lentement, il y a ce vide qui va ah, ce qui est un peu ennuyeux. Pour contourner cela, nous pouvons utiliser la marge sur cela, parce que la boîte est autour de l'extérieur, la liste déroulante ne lui donne pas cette couleur. Cette couleur verte vient du bouton lui-même, pas de la boîte de reper, la boîte n'a pas de couleur. Je peux utiliser le rembourrage et personne ne remarquera, que c'est comme une chose interne parce qu'il n'a pas de couleur. Ce que je pourrais faire, c'est, au lieu de faire Margin-top, je vais faire du padding-top. C' est une des choses avec le rembourrage, c'est l'initié. La marge est l'extérieur, le rembourrage est l'intérieur, donc j'espère que cela sera le même, mais voyez cette zone ici, il fait partie de cette balise div. Bon, donc j'espère que ça a du sens. Si nous utilisions le menu déroulant pour ajouter la couleur d'arrière-plan, cela ne fonctionnera pas parce que ce serait un peu bizarre de pousser dehors de cela, donc nous utilisons le remplissage au lieu de la marge. Maintenant, je veux le pousser un peu comme ça, à gauche. Vous pouvez utiliser des marges négatives ou un rembourrage négatif. Pouvez-vous faire un rembourrage négatif ? Je ne pense pas que tu le peux. Essayons de padding-left et faisons un négatif 30 juste pour faire un point. Non. Mais vous pouvez faire une marge négative. Margin-gauche, négatif 30, sauf ça, faisons un test. Vous y allez, déplacez-le à travers. Je n'en ai pas encore eu un, mais selon l'endroit où vous voulez qu'il s'assiette. Tout ce que nous pourrions faire est de faire un petit retournement, nous l'avons déjà fait avant quand nous avons appris des pseudo-classes. Les boutons de navigation qui sont à l'intérieur de cette liste déroulante, nous avons changé la couleur de fond, mais en fait, changeons, nous sommes là. Je veux tout ça, mais je veux ajouter un survol. Dans une liste déroulante, quand il y a un bouton de navigation qui a été planté, je voudrais qu'il fasse autre chose. Je vais choisir une couleur aléatoire différente ici. Je vais choisir ma propre couleur aléatoire, magenta-ish. Sauvez-le. Donnons-le un coup d'envoi. Est-ce que ça marche ? Faisons le fondre aussi. En fait, la durée est ce que nous voulons, n'est-ce pas ? Durée de transition et placez-le pendant une seconde. Une seconde, c'est longue. C' est un beau mélange de couleurs. Vous pouvez utiliser des millisecondes. Oui, millisecondes. Une milliseconde est probablement trop courte, qu'est-ce que c'est, est-ce des milliers ? Je pense que c'est des milliers, donc 500, c'est une demi-seconde, un millier, c'est une seconde. Je pense que c'est comme ça que les millisecondes fonctionnent. Vous pouvez dire deux fois plus vite qu'une seconde, et si vous le faites, quelque chose de petit comme une milliseconde, c'est 0,1 de seconde. Ouais, super vite, tu ne le verras même pas. Je voulais juste vous montrer des millisecondes parce que, pas de bonne raison. Très bien, ça va être tout, on a les fondations. Pour que celui-ci fonctionne, nous avons utilisé une balise div comme une boîte avec une balise à l'intérieur. Plus tôt, je reçois l'étiquette a et nous avons juste stylé ça pour garder les choses plus faciles. Ça a l'air un peu plus compliqué ici, non ? J' aimerais pouvoir juste faire avec tous les tags a. Mais les classes div sont nécessaires et vous mettez la balise a à l'intérieur. Ensuite, il y a ce groupe imbriqué que nous avons donné son propre petit nom, et nous l'avons désactivé, nous avons dit, « Afficher aucun », ou est là. Puis plus tard, nous avons dit, « En fait, si ce menu déroulant a un bouton de navigation à l'intérieur de celui-ci qui est survolé, changez-le de display none à display block », alors il l'allume. Ensuite, nous avons dû jouer avec une partie du positionnement, donc absolu pour les faire pousser vers le bas, puis nous utilisons ce positionnement relatif pour les amener à empiler sur le dessus les uns par rapport aux autres. Mais tu le sais, tu viens de finir la vidéo. D' accord. C'est un résumé, c'est ce que c'était. D' accord, nous allons enregistrer ça, donc File, Save All et fermons tout. Je vais le fermer après le début de la vidéo. Nous allons en faire un autre fondamentalement, mais nous allons le plier dans le site Web existant parce qu'il y a quelques petites astuces pour s'assurer que cela fonctionne. Faisons ça dans la prochaine vidéo. 68. Ajouter notre menu déroulant CSS au site web des vélos rugissants: Bonjour, beau Web Designer. Nous allons essentiellement prendre les techniques de la dernière vidéo, au lieu de le faire isolément, nous allons le faire sur notre propre site. Nous allons aller dans le menu déroulant et l'intégration dans un site existant, et cela va aider à renforcer ce que nous avons appris, mais aussi ramasser quelques bizarreries qui se produisent lorsque vous travaillez dans un exemple plus grand. Allons-y et essayons comment le faire fonctionner. Nous avons fermé notre dernier projet, ouvrons l'index, et nous allons tout réinitialiser parce que parfois c'est bon se rappeler comment tout se passe. Ouvrez l'index, vous pouvez double-cliquer pour ouvrir un second fichier. Double-cliquez sur les deux, ils s'ouvrent séparément , dans styles.css cet onglet , faites-le glisser ici , le html, j'aime retourner mon emballage, donc il s'enroule, et je vais vous faire glisser là-bas. On est prêts. Nous allons le faire à nouveau, mais nous allons vous montrer quelques raccourcis aussi parce que ce que nous faisons est, nous avons créé un, <nav> puis nous avons créé juste des <a> balises avec ces classes sur. Mais rappelez-vous dans la dernière vidéo que nous ne pouvons pas simplement utiliser les <a> tags. On doit les envelopper dans une <div> étiquette. Les choses enveloppantes, vous pouvez juste commencer à taper ici et vous pouvez dire en fait que je veux mettre ici, nous allons l'appeler bouton de navigation, ça fonctionnerait. Mais puis le <div's> là et je peux le couper et je peux le mettre après mon là-bas, et vous pouvez voir le processus lent là-bas. Êtes-vous prêt pour le raccourci ? Ce que nous faisons, c'est que vous mettez en évidence cette couleur. Nous allons envelopper la sélection. Je vais vous montrer le long chemin. Vous allez à « View » et allez à « Command Palette ». On l'a utilisé avant une fois. Ce type fait tout, c'est comme le bricolage. Ce qu'on cherche, c'est qu'il devrait y avoir ça. C' est plus grand que le symbole, là ? Les crochets de fermeture, et ici il y a un tas de trucs. Le mien vient d'être utilisé récemment. C' est celui que je veux envelopper avec une abréviation. C' est ce que je veux, mais vous n'aurez pas que là vous commencez à taper wrap, et cela réduit aux choses que vous pouvez faire qui ont le mot wrap dessus, et nous voulons cela avec l'abréviation. Je vais vous montrer le long chemin. Maintenant, c'est l'abréviation. Maintenant, pensez Abréviation comme, comment dois-je nommer cette balise ? J' aimerais l'envelopper dans une <div> balise appelée « bouton de navigation ». Tu vas voir ce qu'il fait là-bas. Regarde, comme c'est beau. Entrez pour confirmer. Fait. C'est juste une chose très pratique. Regardons le faire une fois de plus avec un peu de raccourcis supplémentaires. Mettez en surbrillance, puis sur mon Mac, je vais « Command Shift P. » Je suppose que sur un PC c'est « Control Shift P. » Si vous n'êtes pas sûr, allez dans « Afficher », c'est n'importe quel raccourci qui est là sur votre PC. Retournons en arrière. Essayons de faire baisser le flux. J' ai terminé ça, je me sens bien, Command Shift P et parce qu'il est déjà là, je n'ai rien à faire. Vous pouvez taper « Rep. » Je rends ça lentement. Mais je peux juste appuyer sur retour sur mon clavier et ensuite aller, je veux envelopper cela dans « bouton de navigation ». Lisse alors. Il a totalement détruit ça. Je ne regardais pas. Prêt pour le flux. Coulant, en le mettant en évidence, Command Shift P, envelopper avec l'abréviation, mettre dans « bouton nav », appuyez sur « Retour ». Regarde ça. C' était mieux. Mettez en évidence ce gars, « Command Shift P », « Return », et mettons-nous un point, mettons-nous en « bouton de navigation », et nous faisons un emballage cool. Vous pouvez le voir entrer dans ça. Voyez quand je parle lentement. Est-ce que ça aide quelqu'un ? Peut-être pas. Je le sépare juste pour être très clair ce qu'on fait. On a trois boutons. Nous les avons tous emballés dans une <div> étiquette. Jetons un petit coup d'oeil à ce que nous avons fini avec. Je vais ouvrir dans mes ports parce que je travaille sur autre chose, je vais essentiellement le fermer et puis l'ouvrir à nouveau. Ça va s'ouvrir sur cette vidéo ici, et j'ai tout cassé. Nous avons totalement cassé beaucoup de choses avec notre code, donc nous allons passer par. Je suppose que c'est pour ça que je voulais le faire dans sa propre fenêtre séparée. Si vous faites au début, cela peut être plus facile, mais quand vous ajoutez des choses plus tard, il y a ce piratage en cours pour essayer de le ré-utiliser ou de le ré-corriger. En fait, nous avons déjà utilisé « bouton de navigation ». Débarrassez-vous de ça ici. Ces <a> balises, parce qu'il s'applique deux fois. J'essaie de le faire deux fois. Nous n'en avons <a> plus besoin sur ces balises parce que nous l'utilisons sur notre <div class>. Je vais me débarrasser de tout cela, je vais frapper « Commande D » pour me débarrasser de celui-là. On ne le fait pas, presque. Je vais à mon multi curseur. Je la maintiens sur ma touche « Option » sur un Mac, ou la touche « Alt » sur un PC. Maintenant, les classes Plano sont enveloppées dans ces <div> balises avec le même style dessus. Jetons un coup d'oeil maintenant. Mieux. La prochaine chose est, allons dans le pieu côte à côte. On va dire, vous mes amis, qui est-ce ? « Bouton de navigation » ? Avons-nous une classe de « bouton de navigation » ? « Bouton Nav », va être, comment allons-nous l'appeler ? On va dire qu'il est Display, et qu'il bloque en ce moment, alors il s'empile sur notre point de vue. L' autre est dans le bloc de ligne, ici il est là. Ils devraient s'aligner l'un à côté de l'autre. Cool. Maintenant, nous allons faire le menu déroulant. Ça va être à l'intérieur de ce livre en ligne. On va planer au-dessus et ça va tomber. Regardons le code. C'est très bien. Réservez en ligne, c'est à l'intérieur de ce <div> tag appelé « bouton de navigation ». Le début, l'ouverture. Juste après l' <a tag> est où je vais tout mettre. Je vais le mettre en quelques retours pour le rendre agréable. On peut maintenant le faire, prendre celui-là, le copier, et mettre trois boutons dedans. Ça marche en fait. n'y a rien de mal à ça. Les tags s'ouvrent et se ferment, mais les onglets sont bizarres. Je pourrais cliquer avec le bouton droit de la souris et dire, nous allons formater la sélection, mais je veux essayer d'être fantaisie et perfectionner nos compétences. Je ne fais ça que quand les gens passent derrière toi et que tu essayes de les impressionner, c'est ce que je fais. Parce que ça me prend un peu de temps pour m'entraîner. Je voudrais une <div> balise appelée « bouton nav ». A l'intérieur de ça, j'aimerais des <a> étiquettes. Combien en veux-tu ? Tu en veux trois. Je sais que ça ne va pas marcher, mais disons juste, faisons-le. Ça a fait ce que j'ai dit. Faites « bouton de navigation » et puis juste fois le A par trois. Ce que tu peux faire, c'est que tu vas finir tout ça. Vous pouvez dire, ouvrez les parenthèses, fermez les parenthèses. Faites toutes ces choses, puis les fois tous par trois. Pas seulement le A, tous. Parfois, lorsque vous supprimez ce dernier bit trois, tapez-le de nouveau pour que l'abréviation apparaisse, appuyez sur « Retour ». Hé, on fait des trucs. Multi curseurs, nous allons mettre en hachage. On va mettre les trois petits morceaux. Je vais l'extraire du texte que j'ai dans vos dossiers d'exercice. À l'intérieur de la balise A, je vais coller ça, Parts Delivery, et le dernier sera Requêtes Callback. Je les passe surtout au bon endroit. Jetons un coup d'oeil où ils finissent par arriver. Donc tu es à l'intérieur et ça s'est bien passé. Mais je sais que ça devait aller à l'intérieur de l'étiquette A là-bas. Maintenant, la chose cool à ce sujet est que cette Div a une balise A à l'intérieur et c'est exactement la même chose que de le faire de cette façon. Où nous avons une Div avec une étiquette A à l'intérieur exactement la même chose semble juste un peu différent ici. Surtout, quand je l'ai cassé. Je ne l'ai pas cassé, je l'ai plié en deux lignes. Rendons cela un peu plus large pour qu'il s'adapte. Bon, donc on a ces gars, qu'est-ce qu'on veut leur faire ? Nous voulons les éteindre parce qu'en ce moment ils apparaissent. J' ai cassé quelque chose ? A Div. Ce code m'a aidé à mettre une Div de fermeture juste là, ce qui n'est pas ce que je voulais. On y va. Donc tout a l'air bien maintenant, éteignons ces gars. Ces gars doivent être à l'intérieur de quelque chose que je peux éteindre parce que ce n'est pas le cas. Rappelez-vous le long chemin, la vue, palette de commandes, mais nous allons utiliser un raccourci. J' essaie de vous impressionner ici. Commande, Shift, P. Regarde ça, traîne juste dehors. La dernière chose récemment utilisée était [inaudible]. Super, je vais le taper. Je vais appeler ce menu déroulant. Regardez ça, appuyez à nouveau sur retour. Comment décontracté ? Regardez-nous envelopper les étiquettes, regarder bien, indenter et éteindre. On va dire « liste déroulante », c'est ce que j'ai appelé ? C' est ça ? On dira n'afficher aucun, partez mon pote. Donc maintenant, si je garde tout ça, c'est parti. Maintenant, je veux le rallumer. Donc, je voudrais le menu déroulant, me rallumer, s'il vous plaît. Je vais afficher le bloc, il se transforme en un bloc que nous pouvons voir, mais seulement si ce navbutton est survolé, ce navbutton. Donc, si le navbutton a une sorte de classe de survol alors faites cette chose, et il remplacera l'affichage de none pour devenir un bloc. Ça ne marche pas. Ça marche, mais le format est un peu bizarre. Essayons de réparer ça. Tu crois que c'est comme ça que ça a été fait. C' était une chose difficile, je m'en souviens seulement parce que j'en suis un professeur. Ce que je finis par faire est de le faire une fois, travailler à travers un tutoriel, puis de le copier et coller encore et encore dans beaucoup de mes projets. Je comprends comment ça marche, mais le taper à chaque fois, c'est assez long. Je ne sais même pas combien de temps nous sommes à cette vidéo. C' est probablement quoi ? Je suppose que 10 minutes, peut-être. Peut-être pas si longtemps. Donc, pour le mettre en position, nous allons dire la position, au lieu d'être relatifs l'un à l'autre et à tous ses amis, nous ferons position absolue. J' espère qu'il s'est éloigné, il n'est pas parent de ses potes et ça marche. Ces petits gars qui sortent, pour les réparer, nous devons trouver notre Navbutton. C'est là. Je me souviens qu'on l'a fait avant d'avoir dit, maintenant votre position, parent, vous allez travailler. Nous devons être un peu plus larges. Nous devons faire un peu de centrage, mais c'est la base de cela. Mon index Z n'a pas besoin d'être ajusté parce que les choses apparaissent ensuite donc c'est sur le dessus. Mais nous pourrions devoir aller dire, juste au cas où, votre menu déroulant a un index Z de 1, juste pour les obtenir, ou 99 juste au-dessus de zéro. Ce que nous voulons faire maintenant, c'est que nous voulons qu'il pousse un peu vers le bas. Nous n'allons pas utiliser la marge, rappelez-vous parce que la marge a laissé un écart que cette chose a fermé, donc nous allons utiliser le rembourrage. Nous faisons le rembourrage haut et nous allons ajouter un peu, combien ? 20 pixels et voir comment ça se passe. En arrivant là et nous voulons centrer tous ces boutons de navigation. Puis-je le faire juste dans la liste déroulante ? Parce que ces gars vont bien parce qu'ils rentrent dans leurs petites boîtes. Mais ce type qu'on pourrait devoir dire, essayez-le ensemble. Donc, il faut une ligne, peut être centre. Cela conviendra à tous les petits gars internes aussi. Donc c'est sympa. On pourrait agrandir ces boîtes. Pouvons-nous aller au menu déroulant ? Je doute qu'on puisse. Si nous disons mélanger ensemble largeur de, disons, 200 pixels juste pour voir si nous pouvons le faire. Ça a commencé à fonctionner, mais ça ne les oblige pas à être une taille, c'est donner à cette boîte belle et grande et ça leur permet d'être quelle que soit la taille qu'ils aiment. Cela pourrait fonctionner si c'est juste du texte, mais cela rend les boîtes de taille bizarre. Donc oui et non, ça a marché. On va avoir besoin d'un sélecteur de composés. Je veux styler ces boutons de navigation, mais pas tous, juste ceux qui sont à l'intérieur de la liste déroulante. Donc, voici un espace pour dire cette chose à l'intérieur de cette chose. Tu en prends le coup. Je voudrais dire que comme une largeur de 100 pixels, si elle est assez grande pour s'adapter à tous ces gars. Ce n'est pas assez grand. A 200 pixels, probablement trop gros. J' enlève les deux. Ça va trop vite. On y va. J' ai complètement fait le mauvais chemin. Donc, ce ne sont pas des listes déroulantes qui sont à l'intérieur des boutons de navigation, ce sont les boutons de navigation qui sont à l'intérieur des listes déroulantes. Ça arrive au meilleur d'entre nous. On y va. Maintenant, les 200 pixels sont trop grands. Alors peut-être 90. Ce n'est pas assez grand. Cent vingt, d' accord, c'est parfait. Peut-être un peu plus grand, je vais laisser ça sur deux lignes. Si nous le voulions, parce que ces lignes adjacentes, je pourrais utiliser la marge, mais ça va ouvrir un petit espace. Je pourrais juste dire que la couleur de fond de ces gars va être la couleur de fond. Ça va être légèrement différent. On va utiliser du blanc. Donc, ils sont tous blancs. Couleur du texte. N' oubliez pas de changer la couleur du texte que je vais utiliser ceci. Ne fonctionne pas. Donc ça doit l'être, pas toi. J' aurais dû le laisser là. Mais faisons des limites. Donc s'il y a un menu déroulant à l'intérieur, je vais mettre la couleur ici. Je vais dire que j'aimerais ça, mais je veux qu'il y ait une balise A qui est à l'intérieur d'un bouton de navigation, qui est à l'intérieur d'une liste déroulante je veux que vous fassiez une couleur de magenta. Voilà, on y arrive. Tu comprends ce que je veux dire. Maintenant, je joue juste en essayant de rendre ça agréable. Vous pouvez ajouter votre transition de survol. Vous pouvez jouer avec votre marge en la déplaçant vers la gauche si vous le souhaitez. Mais je vais m'arrêter là parce que cette vidéo est longue et je me moque juste. Il est de 10 minutes à 23 heures le soir et je vais probablement commencer à gaufrer. Alors finissons là-haut et je te verrai demain matin. 69. Raccourcis utiles et astuces pour accélérer le flux de travail dans VS Code: Bonjour tout le monde. Cette vidéo va être comme une vidéo de trucs et astuces. Nous allons regarder les raccourcis que nous n'avons pas couverts auparavant, et à la fin de cette vidéo, je vais jeter ceux que nous avons couverts. Juste pour qu'il y ait une vidéo avec toutes les choses dans un petit endroit. Notre premier petit raccourci va être le moyen de fendre les balises parents. Je vais cliquer dans le menu déroulant, j'ai cliqué dans le mot sur place. Sur un Mac, c'est Commande, Ctrl et Shift. C' est un raccourci bizarre, mais il vaut la peine d'apprendre. Commande, Ctrl, Maj sur un Mac, si vous êtes sur un PC, c'est Ctrl et Alt. Tenez les deux vers le bas. Maintenez-les enfoncés et vous utilisez la flèche droite, et vous pouvez le voir développé. Si étaient dans ma sélection était clignotant à l'intérieur ici, il se développe pour saisir le mot. Appuyez à nouveau sur la flèche droite. C' est vos flèches de clavier qui sont sur votre clavier, faites-le à nouveau attrape tout à l'intérieur de cette balise, attrape un de plus, il saisit le parent de cette balise entière qui est mon a, à nouveau, attrape la div, attrape toute la ligne, saisit tout le chemin ici, saisit la liste déroulante. C' est juste une bonne expansion. Vous pouvez utiliser la flèche gauche pour revenir. Souvent, si vous voulez saisir la liste déroulante entière, suffit de cliquer là et de l'écraser jusqu'à ce que vous saisissiez le tout. Ensuite, vous pouvez soit le supprimer, soit l'envelopper avec une autre balise. Commande, Ctrl, Maj sur un Mac et sur un PC c'est juste Maj et Alt, puis utilisez cette petite touche fléchée vers la droite, puis à gauche si vous avez besoin de revenir en arrière. Astuce utile numéro 1. Astuce utile numéro 2 est des lignes pliables. Si vous survolez là-bas, pouvez-vous voir ces choses là-haut ? Ça veut dire que je peux en fait, fermons la tête, planer au-dessus. vous voyez cette petite ligne ici. Vous pouvez voir qu'il s'ouvre là et se ferme à la tête. Si je clique sur le petit moins, il suffit de l'effondre. Vous pouvez fermer le corps, et je reçois juste une belle petite page HTML simple. Vraiment pratique si tu veux. Je ne travaille pas sur la tête, je vais la fermer. Je ne travaille pas sur la principale, je travaille juste sur ces cartes. Pas les témoignages, gardez tout bien rangé. Ils sont tous là. Vous verrez que le code ne disparaît pas. Il va de 58 à 68, il s'effondre. Vous pouvez faire la même chose pour ça si vous avez des trucs vraiment longs. Je ne le fais jamais vraiment sur mon CSS. Mais oui, le code s'effondre. Utile. Astuce numéro 3 met à jour toutes les occurrences de quelque chose. Disons que je vais tourner tout ça vers le bas. Disons le bouton de navigation. Je l'ai mal orthographié ou je veux le changer. Ici, dans le bouton de navigation, je vais faire une trouvaille. Commande F sur un Mac, Ctrl F sur un PC et bouton nav. Ce n'est pas vraiment le raccourci. La commande F était juste dans l'édition. Trouver, j'ai trouvé mon bouton de navigation, et disons que je l'ai mal orthographié. La majuscule et la minuscule est très importante. Vous ne pouvez pas utiliser upper ici, puis plus bas dans le nouveau HTML, ils ne correspondent pas. Parfois, les gens aiment utiliser ce truc appelé camel-case, où il commence bas et devient grand au milieu. J' adore camel-case, grand mot. Mais comme je l'ai changé ici, il doit se mettre à jour ici. Ce que je peux faire, il suffit de trouver l'un d'eux, et je sais que c'est tout au long de cette page, donc je vais cliquer dessus et dire, nous allons juste changer toutes les occurrences. Ensuite, je vais le supprimer, puis je vais taper la bonne version. Cool. Un moyen rapide de les mettre à jour tous. Je vais annuler ça parce que je ne veux pas le détruire. L' autre chose que nous pourrions faire est, elle est liée à ce que nous avons appris auparavant, est de cliquer 1 et de cliquer sur Commande D ou Ctrl D sur un PC. Il saute juste en bas rappelez-vous, et saisit la prochaine occurrence de ça. Parce que parfois vous ne voulez pas changer tout le document en même temps, vous voulez y aller, je vais juste changer ce hashtag mais pour ces trois, pas pour tous. Ce n'est pas un hashtag, juste le signe de la livre. Mais le Commandement D D n'est pas le moyen rapide et facile de les saisir tous et de dire, maintenant il va aller à la page de contact. C' est un moyen rapide et facile. Mais on l'a déjà fait. C' est le pourboire numéro 3, passons à la quatrième. Cette prochaine astuce est un moyen de sauver tous les tracas. On oublie, j'oublie tout le temps de sauvegarder ces deux documents. Fichier, Enregistrer tout, et vous allez dans vos tests, vous êtes comme si cela ne fonctionne pas alors vous oubliez que vous n'avez pas enregistré. Disons que nous voulons mettre à jour ce lien de navigation ici. Ce que nous pouvons faire, c'est que nous pouvons activer le fichier et l'activer. Il devrait être dans le code VS, et aller à l'enregistrement automatique. Maintenant, si je change ça, regarde ça, je vais tout faire en majuscules. Rendez-le en majuscules même. Réservez en ligne. Vous pouvez voir que c'est juste lentement mais sûrement toujours l'épargne automatique. De la même façon que je vais changer son h1 ici. Où est mon h1 ? Je vais le rendre noir. Mettez dans mon point-virgule. Il est automatiquement l'enregistrement et la mise à jour. Économie automatique, je vais partir pour le reste de ce cours. Je vais désactiver les changements que j'ai faits, quelques annulations. Annuler est Modifier, Annuler. C'est déjà sauvé. Je n'ai rien à faire. Reprenons ce plein écran et passons à l'étape suivante. Le suivant s'appelle Mode Zen. Tu codes, tu n'as pas besoin de tout ça et de tout le reste. Ce que vous pouvez faire, c'est vous pouvez aller à View, et vous pouvez aller à Apparence, et vous pouvez aller en Mode Zen. Alors rappelez-vous ce raccourci. Ça vaut la peine d'écrire. Sur un Mac c'est Command, K, puis Z. Sur un PC, c'est Ctrl, K, Z. Vous sentez un zen. Plein écran obtenir beaucoup plus d'espace pour mon code, et j'ai supprimé tous les panneaux sur le côté. Pour en sortir, il faut appuyer sur la touche Echap. En haut à gauche de votre clavier deux fois, bizarrement. Appuyez deux fois sur ça et vous revenez. Maintenant, cette commande de raccourci, K, Z, est bizarre. Nous ne voyons pas trop de programmes qui utilisent des raccourcis de cette façon. La façon dont cela fonctionne est ce n'est pas Command, K, et puis continuer à tenir Command, Z. Vous devez lâcher les commandes, regarder ceci. C' est la même chose pour un PC. Vous maintenez enfoncé soit votre commande, à partir du Mac, Ctrl sur un PC, pointe K, puis démarre tous les raccourcis en cours. Ça attend la seconde chose. Il y en a plusieurs. Commande, K est pour beaucoup de raccourcis, fait fonctionner. Ensuite, vous devez lâcher la touche Commande et appuyer sur Z. Vous ne pouvez pas attendre si longtemps pendant que vous discutez. Commande K, puis appuyez sur Z. Vous ne pouvez pas maintenir la touche Commande et appuyer sur ces deux touches. Idem avec la touche Ctrl sur un PC. Tu comprends ce que je veux dire ? Comment on sort ? Esc, Esc, plus de zen. La prochaine sera la chapelure. Cliquez à l'intérieur de la liste déroulante du bouton de navigation. Je vais aller voir et je veux allumer la chapelure. Où es-tu ? En bas, là. Les chapelures sont parallèles sur le dessus et c'est vraiment pratique lorsque vous essayez de construire comme des sélecteurs composés pour savoir où vous êtes dans le monde. Je vais fermer ça pour voir ma chapelure complète. Mon texte est tout aussi zoomé. Donc Commande, moins, mon clavier, c'est probablement comme ça que le tien ressemble. C' est Ctrl, moins, sur un PC, Ctrl, plus, pour zoomer, pour rendre votre code plus grand ou plus petit en fonction de ce dont vous avez besoin. Je vais quitter le mien à propos de ce gros. Il me dit que je suis à l'intérieur d'une balise qui se trouve à l'intérieur d'un bouton de navigation de code div, qui est à l'intérieur d'une liste déroulante de code div. On l'a dit très clairement ici. Vous n'êtes pas aussi drôle faire tout espacé bien donc ce n'est pas aussi facile à voir. Si je voulais un truc de stylet ici, je pourrais dire que je veux un sélecteur composé qui démarre la liste déroulante div et le bouton div qui est à l'intérieur de la balise a. C' est de la chapelure. On le laissera allumé ou éteint pour le reste, je ne suis pas sûr. Je l'utilise parfois, dépend. Si c'est mon propre site, je ne le fais souvent pas. Soit un site sur lequel je n'ai pas travaillé depuis longtemps et je suis genre, je ne sais même pas comment j'ai construit cette chose. Eh bien, comment il est construit. Où est vraiment désordonné ici. Donc il y a de la chapelure. Un autre cool pour les documents plus longs est en vue et c'est un minimap appelé. Je vais encore diviser mon écran. Donc, je vais mettre les styles ici et j'ai mon HTML ici. Vous avez un minimap pour les deux panneaux. Que tout ce que c'est, c'est le minimap. C' est très clair ce qu'il fait. Vous pouvez voir pour le CSS, c'est assez longue page. Ça veut dire que je peux sauter au fond. Le nôtre n'est pas trop grand, sérieusement, le nôtre est assez petit. Vous allez entrer dans d'énormes sites Web avec des charges de code. Vous pouvez simplement utiliser la minimap pour faire défiler. Comme ici, je veux descendre au pied de page. Je n'en ai pas besoin pour le moment parce que mon site n'est pas assez grand. Donc je vais éteindre le minimap. C' est tout pour ceux que tu n'as pas vus avant. Je vais couvrir ceux que tu as, juste qu'ils sont tous au même endroit. Emballage des étiquettes, nous l'avons fait avec divers succès tout au long du cours. Cette liste déroulante ici, je veux envelopper cette balise entière. Je vais commencer avec tous mes raccourcis, Ctrl, Commande, Maj, et la flèche droite pour saisir toute la liste déroulante. On l'a déjà appris. Rappelez-vous que c'est Ctrl, Alt, flèche droite sur un PC. Prends tout ça et puis je suis genre, je veux tout finir. Sur Mac, c'est Command, Shift, P, et vous obtenez notre ligne de commande. En fait, ça s'appelle la palette de commandes ici. C' est le raccourci là. Sur un PC, Palette de commande, je suppose que c'est Ctrl, Shift, P sur un PC. Mais regardez un peu sous la vue, palette de commandes. On veut une pellicule. Cliquez dessus. Alors je peux l'envelopper dans quelque chose. Je vais le mettre dans une nouvelle balise div. Vous pouvez utiliser votre code d'émission ici, donc vous n'avez pas à écrire des égaux de classe div. Je veux l'envelopper dans mes nouveaux blocs. Vous pouvez le voir ici, tout est assis et c'est charmant. Maintenant, il y a d'autres choses que vous pouvez obtenir cette palette de commandes à faire, j'utilise juste la balise rep très souvent. Jetons un coup d'oeil. Ouvrez la palette de commandes et vous pouvez jeter un coup d'œil ici. Il y a plein de choses ici que vous pourriez décider que c'est plus facile. Au lieu d'essayer de comprendre quel est le raccourci de ce menu est, vous pouvez vraiment aller, que voulez-vous ici ? Disons que je veux tout sauver parce que je ne peux pas penser à un bon sur le dessus de ma tête. Vous voulez tout enregistrer et vous ne voulez pas utiliser les raccourcis. Ce que vous pouvez faire est que vous pouvez dire, Commande, Shift, P, puis faire tout enregistrer. Il exécute la même commande que de cliquer dessus. Beaucoup de développeurs aimeraient faire cette méthode. cool, c'est que si j'y suis retourné, tu peux voir que c'est le dernier truc moins récemment utilisé. Cela signifie que je n'ai pas besoin d'entrer et de le taper et de le trouver à nouveau. Je peux juste aller Commande, P, puis appuyer sur « Sauvegarder tout » et ça marche. Multicursors, nous avons couvert, et mon Mac en ce moment, vous pouvez basculer ça. Mais sous sélection, ce sera soit Command click sur un Mac ou mon cas c'est Option, cliquez pour multicursor. Sur un PC, c'est la touche Alt. Option sur un Mac, Alt sur un PC, et cela signifie que je peux mettre beaucoup de différents. Je vais ajouter un cours ici. Je veux que le curseur clignote là. Je veux aussi l'ajouter à celui-ci sans raison valable. Alors je l'ajouterai pour celui-là. Je vais taper en classe, et vous pouvez voir qu'il l'applique à toutes ces choses. Donc multicurseur, utile. Un autre très pratique, au lieu de faire multi-curseur où vous devez maintenir la touche Option enfoncée, et cliquez, vous devez être très spécifique avec votre souris, et vous devez réellement utiliser votre souris. Tout le temps quand je cods, je ne veux pas toucher la souris, je veux juste utiliser mes raccourcis clavier. Disons que je veux ajouter un changement ce hashtag, donc je vais cliquer dessus et je vais, sur un Mac, je vais maintenir la touche Commande et Option enfoncée et appuyer deux fois ma flèche vers le bas. Maintenant, je peux passer par et ne nous contacter. Nous l'avons fait plusieurs fois, mais il y a des moments où vous en avez besoin. Peut-être la Commande, D ou Ctrl, D, sur un PC. Sur un PC, c'est une chose très similaire. Vous cliquez à l'endroit où vous voulez commencer. Maintenez la touche Alt enfoncée et la touche Ctrl et appuyez sur la flèche vers le bas. Je l'ai fait deux fois, et vous avez des multiccurseurs. Les deux derniers, tout nettoyer. Si vous avez des bits partout et que l' indentation ne fonctionne pas tout à fait et que vous êtes comme, j'aimerais avoir tout nettoyé, vous pouvez facilement tout saisir et aller à clic droit et vous pouvez formater le document entier, mais il est probablement plus courant juste de formater la sélection. C' est juste ranger tout. Ça a l'air indenté. Il ne correspond pas à tout, vous pouvez voir qu'il l'a poussé jusqu'au bord ici. Lorsque vous faites tout cela, vous pouvez sélectionner le morceau entier et faire cette sélection de format. Cela change un peu de ce que vous auriez naturellement voulu qu'il soit. Vous pouvez voir que tout est bien en retrait. Je trouve quand j'ouvre peut-être un document sur lequel quelqu'un d'autre travaille ou c'est un modèle, et c'est un gros gâchis. La première chose que je fais, sélectionnez tout, formatez-le, donc je peux au moins voir une certaine structure. Le dernier est Word Wrap. S'éteint à chaque fois. Rallumez-le juste pour que les lignes se cassent sur le bord ici, pas vers la fin de la ligne. Mais tu finis avec ces lacunes drôles par ici. C'est à vous de décider. C' est tout pour notre accélération des trucs et astuces feuille de triche. J' ai inséré les mots-clés dans ce titre. Mais j'espère que vous avez trouvé des trucs utiles. Comme tous les bons raccourcis, ils ne fonctionnent que si vous les pratiquez pendant un petit moment. Peut-être en choisir un ou deux par jour et y aller, aujourd'hui je vais faire le jour de multicurseurs et, juste le faire. A la fin de quelques jours, si tu es genre, mec, c'est toujours juste douloureux, alors ça n'a jamais été censé l'être. C' est un raccourci dont vous n'êtes jamais censé vous souvenir. Il suffit de choisir un autre et d'aller bien, je vais le faire aujourd'hui parce que cela va m' épargner un peu de temps chaque jour quand je codage, et je peux utiliser ce temps supplémentaire pour en faire un autre chez Dan cours, c'est ce que vous ferez. Je te vois dans la prochaine vidéo. 70. Comment ajouter une grande image d'arrière-plan à un site web ?: Salut, là. Cette vidéo, on va mettre le lion géant en arrière-plan, donc pas de lion, grand lion. Pourquoi pencherais-tu ? Parce que nous avons fait des images de fond. Nous allons faire quelque chose de légèrement différent, faire le positionnement et pas de répétition et si vous êtes intéressé, nous allons faire le codage du site Web VS pendant environ trois premières minutes. Vous remarquerez qu'il y a beaucoup plus de temps dans cette vidéo. Au cours des dernières minutes, nous allons vraiment vous montrer comment le construire dans Photoshop avec cette transparence et cette ombre portée. Ce n'est pas vraiment essentiel, alors regardez les trois premières minutes, puis sautez si vous ne vous souciez pas de Photoshop, mais si vous le faites, nous allons faire une petite excursion, donc vous aurez besoin d'une note de vos parents. Le bus arrive à trois minutes dans cette vidéo. Soyez prêt. Je te verrai là-bas. J'ai ma page d'index ouverte et mon style.css ouvert. Je veux ajouter mon image d'arrière-plan. Maintenant [inaudible] mais je ne peux pas ajouter deux images d'arrière-plan et vous êtes comme, « Nous n'avons pas d'image d'arrière-plan », mais rappelez-vous, étrangement, nous devons utiliser le dégradé comme image d'arrière-plan. On ne peut pas en faire deux sur l'étiquette du corps. Ce que nous allons faire, c'est attraper cette image de fond, qui est mon dégradé. Nous allons l'ajouter à la balise HTML. Nous ne l'utiliserons pas actuellement parce que, je pense que nous faisions 100 pour cent, donc si vous ne l'avez pas, vous devez ajouter la balise HTML et cela fonctionne très bien. Regardez un peu, fonctionne toujours, j'ai eu mon dégradé d'arrière-plan, gentil. Ici, je peux faire mon autre dégradé d'arrière-plan, arrière-plan, pas dégradé, image d'arrière-plan. Rappelez-vous son URL et j'ai besoin d'aller ajouter l'image à mon dossier local. Dans vos fichiers d'exercices sous Project 2, il y en a un qui s'appelle image lion arrière-plan. C' est un peu difficile à voir. Tu peux voir dans la vidéo ? J'ai fait ça. Je vais vous montrer comment faire ça à la fin de la vidéo, mais c'est juste une chose de fond transparent. Je vais le copier, le mettre sur mon bureau, Project 2, à l'intérieur d'Images. On va coller ici et on ira par ici. Nous allons aller à des images barre oblique ou est-ce l'image de fond lion. Assurez-vous que le point-virgule entre et voyons juste à quoi il ressemble. Un peu comme tu le veux. Vous pourriez décider que c'est génial et c'est comme ça que vous voulez le faire. Je veux juste un au milieu. Vous pouvez faire l'image d'arrière-plan ou la position d'arrière-plan. Vous pouvez faire une position arrière en haut à la place. Je vais juste aller en haut et au centre. C' est top, c'est centré, je veux que ça ne se répète pas. En fait, il suffit de désactiver ça, parce que ça aura plus de sens avec ça éteint. On va faire une répétition de fond. Je vais aller à zéro, oh non, ce n' est pas une répétition. Bonté à la suggestion. Sans répéter, il finit juste où que se trouve votre site Web, finit juste dans le côté gauche. Maintenant, je veux rallumer ça. Oh, raccourci, je n'ai pas ajouté la dernière feuille de raccourci ou la vidéo de raccourci était notre barre oblique inverse de commande. Vous le sélectionnez, maintenez le contrôle sur un PC, commandez sur un Mac et appuyez sur barre oblique avant. Ma barre oblique est descendue par le point d'interrogation. Cool. Maintenant, c'est là que je veux qu'il soit. Joli. En fait, ce que je veux faire, c'est faire demi-tour. Nous allons le faire maintenant quand nous vous montrons comment le faire parce que vous pouvez voir, c'est cool avec l'ombre portée autour du dos, mais vous pouvez voir à travers le dégradé d'arrière-plan. Maintenant, si vous n'avez pas de compétences Photoshop, pas de soucis. J' ai déjà l'image prête pour vous et vous pouvez passer à la vidéo suivante, mais si vous voulez vérifier comment cela se fait dans Photoshop, c'est là qu'il faut regarder. Je te montrerai dans une seconde. Sois de retour. J' ai Photoshop ouvert. J' utilise CC 2019. Cela fonctionnera dans presque toutes les versions de Photoshop. Pourquoi sommes-nous dans Photoshop ? J' ai l'impression qu'on avait besoin d'un voyage scolaire. Éloignez-vous de VS Code juste pour la moitié de la vidéo. Au moins, j'en avais besoin, de toute façon. Je sais que je fais des vidéos comme ça et si j'utilise des trucs comme une ligne à moitié invisible, les gens demanderont, « Comment as-tu fait ça ? » donc je suis aussi juste de répondre à leur question ici. Si tu dis : « Je me fiche de Photoshop. Je veux revenir à mon projet web », vous pouvez totalement sauter maintenant. Nous ne ferons rien de code ou basé sur le web, nous faisons juste une image. Si tu veux le faire, faisons-le. Allons à Fichier, Nouveau. Par ici, passez à Pixels et choisissez une taille. Je fais ma ligne assez grande. Rappelez-vous que mon site est d'environ 1024 à travers, donc je fais ce 1000, grand carré. résolution n'a pas vraiment d'importance, Larésolution n'a pas vraiment d'importance,ce qui compte vraiment c'est RVB. Cliquez dessus. Cliquez sur « Créer ». On a une grosse boîte blanche. On va aller à File. On va aller à Place Embedded. Nous allons apporter quelque chose de vos fichiers d'exercices dans le cadre du projet 2, et ça s'appelle, icône lion noir. Cliquez sur « Placer ». La chose cool à ce sujet, c'est qu'il s'agit d'un SVG, ce qui signifie Scalable Vector Graphic. Ça veut dire que je peux le faire. Peu importe combien il est grand, je peux le rendre plus grand. Si vous utilisez 2019 et plus, vous saurez probablement maintenant que vous prenez simplement les coins et faites glisser, vous n'avez pas besoin de maintenir les touches enfoncées. Vous pouvez maintenir enfoncée la touche d'option sur un Mac, touche alt dans un PC, pour le faire passer du centre. Si vous utilisez CS6 ou une version vraiment ancienne, vous devez maintenir la touche shift enfoncée pour vous assurer qu'elle évolue sans faire cette distorsion. Le mien va le remplir là-bas. Je vais rendre le mien un peu plus petit parce que j'ai besoin de l'ombre portée pour faire le tour de l'extérieur. J'ai touché le retour. Ce que je pourrais faire avant d'aller plus loin, c'est que je vais aller à Edit et je vais aller à, désolé, Modifier même et nous allons aller à Transformer et nous allons retourner horizontalement, parce que dans mon actuel, je J'ai l'impression qu'il ne fait pas face à la mauvaise façon. Il fait face au même logo, mais il est caché derrière tout ça. Je les ai renversés. On va lui ajouter une ombre portée. Avec cette option sélectionnée dans votre panneau Calques, accédez à FX, nous allons accéder à Ombre portée. Ouais, Drop Shadows, allons le faire monter, que nous puissions tous voir l'opacité et ensuite l'outil principal avec lequel vous allez jouer est Distance et à quelle distance cette ombre portée se sent comme si elle était loin de la sujet, puis la Taille est à quel point il est flou. Si je frappe le « Taille » vers le bas à zéro, vous pouvez voir, c'est un très fort, croustillant, bord. Dans mon cas, j'ai déjà foiré avec ça. Je veux que ce soit à la fois assez bas. La Distance est assez faible, la Taille assez faible, et c'est cette petite ombre portée et peut-être un peu plus grande en termes de taille mais plus moelleuse. Je vais avoir l'Opacité assez faible, ce qui va rendre assez difficile à suivre dans ce tutoriel, parce que ça va être super faible. Vous pouvez à peine le voir là-bas maintenant, mais c'est certainement là. Cliquez sur « OK ». Maintenant, le truc principal est, en quelque sorte, allumer, parce que nous avons permis l'opacité de cette couche. Tout s'éteint. C'est là que ça arrive. Tout le monde dans Photoshop dit : « Quelle est la différence entre ces deux-là ? » et vous dites : « Ils font la même chose, sauf quand vous avez un calque que que vous aimeriez désactiver l'opacité, mais pas l'Effet. » Vérifie ça. Mettez le remplissage vers le bas à zéro. Pouvez-vous voir le calque réel lui-même refusé, mais l'effet est toujours là, vous pouvez les voir maintenant. La prochaine chose que je veux faire avant de l'exporter, c' est que je ne veux pas de ce fond blanc, donc avec celui-ci sélectionné, je vais frapper dans ma poubelle et c'est prêt à partir. Tout ce que je dois faire, c'est m'assurer de choisir le bon format de fichier. Nous allons aller à File, je vais aller à Exporter, Exporter sous, mais JPG, pas de transparence, mauvais. Ça remet le blanc, tu dis : « Va-t'en. » Celui que je veux, c'est PNG. Pourquoi n'utilisais-je pas SVG ? Parce que SVG est bon pour les graphiques vectoriels, toutes ces choses de bord dur. Quand je commence à entrer dans ce truc de fond floue, ça ne va pas marcher. Ok, donc PNG. Maintenant, aussi, ce que je pourrais faire pour ce PNG, c'est que ce PNG a très peu d'informations dedans. Il y a quelques gris, c'est tout, et des blocs transparents. Je peux utiliser le fichier plus petit qui est juste PNG 8 bits. Il va faire les tailles de fichier, jeter un oeil, donc il va de 83 à 46, et il n'y a pas de différence visuelle. Si vous avez affaire à une image vraiment super haute qualité, vous voulez la désactiver et la valeur par défaut est, qu'est-ce que c'est, 16 bits. Désolé pour ça. Il suffit d'allumer 8 bits, tout ira bien. PNG, où est-ce que je vais le coller ? Je vais le coller sur mon bureau dans mes fichiers Project 2 dans mes Images. Je vais le renommer, image de fond de lion, c'est celui qu'on avait plus tôt. Ce type est le même, mais il est dans l'autre sens. Cliquez sur « Enregistrer » et remplacez-le. Donne-lui une seconde. Jetons un peu un coup d'oeil à notre version. Oh, regarde ça, voilà notre gars. Il est en arrière-plan et il fait face à la bonne voie ou à notre chemin. C' est comme ça que faire ce genre de chose. La chose cool à ce sujet est qu'il montre à travers le dégradé en arrière-plan. Bien sûr, si vous n'aviez pas de dégradé, juste une couleur unie, vous pourriez simplement mettre cette couleur unie dans Photoshop. J' ai fait une nouvelle couche, je l'ai mise en dessous. Vous pouvez aller à Image, désolé, Modifier, Remplir, et avec ce calque sélectionné, vous pouvez choisir une couleur et dans mon cas, je choisis « Couleur » et vous pouvez passer par et peut-être taper le nombre hexadécimal que vous utilisez. Je ne me souviens même pas de ce qu'on est, mais c'est ce que tu pourrais faire. Je pourrais le traîner. Cliquez sur « OK ». Vous pourriez mettre ça là-dedans, alors ça pourrait aller comme un JPG parce qu'il n'y a pas de transparence. Ok, notre voyage sur le terrain à l'arrière dans le bus. Passons à la prochaine vidéo. 71. Comment relier deux pages en HTML ?: Il est temps de consulter notre page Contactez-nous et nous allons la relier à la page d'accueil. Ils vont sauter à travers notre navigation. Je pense que j'ai supprimé une des lettres du bouton de contact mais fondamentalement, nous allons dupliquer la page d'accueil et je vais vous montrer ce que vous devez surveiller lorsque vous dupliquez des pages, puis je vais vous montrer comment lier ensemble dans cette petite vidéo. Allons entrer. Créons notre page Contactez-nous. Maintenant, je n'irais pas dans Fichier nouveau et commencerais à faire une nouvelle page HTML car il n'y a aucun point de taper tout cela à nouveau. Parce que notre page Contactez-nous utilise le même logo et le même nav le long du haut et ont un menu déroulant doux. Il y a beaucoup de bits que je veux réutiliser. Fondamentalement, je vais juste éteindre ce morceau au milieu. Ici, c'est. Page d'index, assurez-vous qu'elle est sélectionnée. Fichier, Enregistrer sous, donnez-lui un nouveau nom. Je vais appeler le mien Contact ou contactez-nous. Assurez-vous qu'aucun espace, trait d'union ou trait de soulignement n'est disponible. La seule page que vous devez appeler explicitement quelque chose en tant qu'index doit être appelée index. Tout le reste est à vous de décider. Cool. La première chose que vous devez faire chaque fois que vous dupliquez une page est de changer le titre. Vous ne voulez pas deux pages avec le même titre. Il est très difficile de savoir quoi mettre sur la page Contactez-nous, mettons une adresse, des détails, un numéro de téléphone, ce genre de chose. Si les gens cherchent le numéro de téléphone de Roar Cycle, ils peuvent accéder à la bonne page sans avoir à aller à la page d'accueil et revenir à nouveau. Nous devrions ajouter notre méta description. On ne l'a pas fait sur tout ce site. C' est notre énorme oubli pour moi. C' est l'une de ces choses dont vous avez besoin, où c'est vraiment bon d'avoir mais pas essentiel. Meta description n'a pas un très bon raccourci. Ce n'est pas comme si je vais juste taper meta et appuyer sur onglet pour le moment au moins, ou je ne peux pas travailler d'un moyen. La méta-description, vous venez de le voler à un ancien site. C' est ce que je fais. Mais il a la même structure que la clôture, comme celle-ci en haut ici. C' est souvent un bon moyen pour moi de tricher. Meta nom, celui-ci s'appelle description. Il a la même chose, il dit contenu, et c'est là que va la méta description. Il devrait être d'environ 150 caractères, donc nous commencerons à parler des coordonnées de, je ne sais pas comment vous écririez 150 caractères. Ce que je pourrais faire, c'est accélérer ça et je vais te montrer ce que j'ai mis. Je suis de retour. Assurez-vous qu'à la fin de votre méta-description, il y a des crochets d'angle de fermeture. Je vais allumer mon emballage. J' ai ajouté ce truc de sorte que s'il y avait un résultat de recherche, rappelez-vous, nos résultats de recherche, la meta description est cette chose, est ce truc gris ici. Vous savez que quand vous travaillez sur un site Web, souvent, vous n'avez pas besoin d'aller sur un site comme, ok. Vous pouvez trouver toutes les informations de la description. Ce qu'on a fait pour notre peuple. Je dois revenir en arrière et éditer la page d'index, ce que je ne vais pas faire, je devrais. Ce qui est intéressant, c'est qui est responsable de ça ? Disons que vous êtes le propriétaire de Roar Cycles. Vous êtes responsable de l'écriture de toutes les méta-descriptions. Je trouve que c'est facile de le faire à la volée. Ne pars pas, je le ferai plus tard. Tu ne le feras jamais. Ça a été mon expérience. Si vous travaillez avec un client, demandez-lui ou dites-lui qu'il doit dire que c'est critique, j'ai besoin du titre de chaque page et leur dire qu' il doit être court, ce doit être autant de caractères, il doit avoir ce bon et vous avez besoin d'une description correspondante pour chaque page. Il peut être un peu difficile d'obtenir des méta descriptions des clients, mais votre page peut vivre sans description, mais elle ne peut pas vivre sans titre, ou du moins, si vous vouliez réellement classer dans n'importe quel moteur de recherche. En fait, connectons les pages. Nous allons avoir besoin de deux d'entre eux ouverts. Je vais fermer mon CSS et j'aurai la page d'index et la page Contactez-nous. Je vais les séparer ici. J' ai l'un et l'autre. Connectons la page d'accueil. Connectons-le quand quelqu'un utilise ce menu déroulant, eh bien, utilise effectivement cette page, la page Contactez-nous parce que le moment ne va nulle part, il va au hachage. Nous utilisons seulement ce symbole de livre parce que cela signifie que certains navigateurs, si vous cliquez sur un bouton et qu'il n'y a rien ici, cela va arriver avec une erreur, et ce n'est pas vraiment ce que vous voulez. Vous voulez tester juste sans erreurs. Trouvons notre contact. C'est là. Au lieu de hachage, nous allons dire vous supprimer, nous allons commencer à taper le contact et j'espère, ça va, voulez-vous dire cette page ? Oui, je le fais. Sauvons. Prévisualisons cela dans le navigateur. On va cliquer dessus et regarder ça. Nous sommes allés à la page Contactez-nous. Rien n'a changé. Tu vois en haut, ça a changé. Faisons une différence évidente. Allons à Contactez-nous, et ici, ces deux boîtes de héros, je ne veux plus. Il y en a un, donc je vais me débarrasser de tout dans le principal. Au revoir. Sauvegardons ça. C' est une grande différence, regardons un peu maintenant. Retournons en arrière. Avec ma page d'index, nous pouvons cliquer sur Contact et il saute à la page Contactez-nous. Maintenant, nous voulons retourner à la page d'accueil. Certaines pages ont la maison et c'est très bien. Vous pouvez avoir un bouton d'accueil. La plupart des sites web cependant, il vous suffit de cliquer sur le logo. Vous avez peut-être vécu ça. Pour ajouter un lien à notre logo, nous allons envelopper cette image dans une balise A. On va l'achever. On va utiliser notre nouveau raccourci. Je vais allumer l'emballage, mot wrap. Je vais sélectionner tout ça. Je vais utiliser Command shift P ou Control shift P sur un PC, puis je vais envelopper avec une abréviation. Vous devrez peut-être taper Wrap et nous allons l'envelopper dans une étiquette A, et je ne vais pas lui donner autre chose. Je vais juste l'appeler une balise, appuyez sur Entrée sur mon clavier. Vous pouvez voir maintenant, cette couleur séparée, sorte qu'il est facile pour vous de voir. Cette image est maintenant enveloppée dans une balise A. Où va-t-il aller ? Ça va aller à l'index. Sauvegardons-le et faisons un petit contrôle rapide. En fait, revenons à la page d'accueil. Ça ne marche pas. Il aurait dû être sauvé automatiquement. HOFU. L'image est entourée d'une balise A. Cliquez dessus, ça marche. Nous voulons que ce soit des deux côtés. Pour le moment, vous cliquez sur le logo, sur la page d'index, il revient au logo, qui n'est pas tout à fait ce que nous voulons. On va prendre tout ça. Où est ce logo ? Le logo commence là, se termine là. Je vais le copier et le coller sur les deux pages. Où est le logo ? C' est là, ça va remplacer tout ça. C' est sur les deux. Maintenant, donnons-le un coup d'envoi. Allons à nos tests. Si je clique sur Contact, il ne s'est pas connecté. Je ne savais même pas comment je vais casser ça. Retournons à la page d'accueil. Contact, Page d'accueil. Il y a un peu de drame comme vous le faites sur un et vous devez copier et le coller sur les deux avec la navigation. C'est assez facile. Vous pouvez sélectionner toute la navigation ou tout ce morceau ou tout l'en-tête. Prenez cet en-tête entier et copiez-le et collez-le sur les deux. Ce ne sera pas énorme Java pour notre site parce que ce n'est que six boutons. Nous n'avons que six, sept ou huit pages. La prochaine chose que je veux faire est en fait ajouter du contenu à notre site Web. On va le mettre dans la principale. Maintenant, cela va se heurter à un problème. Je l'ai fait exprès, je te le promets. On a un problème où principal fait des trucs. Nous avons dit principal être une hauteur, qui est parfaitement bien pour ce que je veux, une hauteur minimale. Mais nous avons dit de faire des trucs comme la boîte flexible et les objets centraux parce que nous voulions faire des trucs amusants sur notre page d'accueil où nous voulions que ces gars s'assoient côte à côte. On a fait des trucs spécifiques à Main. Le problème est que je ne veux pas les faire à main maintenant, mais je veux continuer à utiliser main, donc nous pouvons soit appeler cette section maintenant et la section style ici, soit nous faisons ce que chaque bon concepteur web qui se perd, tout sorte de personne n'importe où sur un ordinateur fait. On finit par faire des choses comme on l'appelle Main 2, et on en a un autre qui s'appelle Main 2 ici. Tu l'as fait, tu as appelé ton truc final. Tu serais comme, c'est mon document final et tu l'appelles final, et c'est comme la malédiction de la mort. Tu ris parce que tu l'as fait. Tu l'appelles Final 2, même, tu as la Final sur ton ordinateur quelque part, je parie. Oui. Parfois, tu finis avec Main 2. Maintenant, le fait est que nous ne pouvons pas appeler ce Main 2 parce que main est une balise HTML réelle comme en-tête, c'est prédéfini, donc nous devons l'appeler. Tu dois le faire. Vous devez dire que celui-ci s'appelle Main 2, donc il doit être une classe div appelée Main 2. Il y a d'autres façons de le faire, c'est ce que nous allons faire pour le moment. C' est comme le réalisme, aussi connu sous le nom de mauvais codage. Principale 2. Que voulons-nous faire pour Main 2 ? Ici, on va le coiffer. L' autre chose que je veux vraiment pour Main 2 est de lui donner une hauteur minimale pour qu' il ne s'écrase pas lui-même. Ça ira bien. Je pense qu'on a besoin de nous contacter. On a probablement besoin d'un rembourrage en haut, mais on verra comment ça se passe. Ajoutons ici, un H1 et en dessous, une balise P. Copions du texte de notre projet dans un fichier texte. Le H1 s'appelle Contactez-nous. Encore une fois, je vais juste taper ça là-dedans. Contactez-nous, rappelez-vous, je ne vois pas mes doigts quand je tape. air sympa et bien rangé. Vérifions-le dans le navigateur, trop près du haut. Je pourrais juste ajouter Main 2, un rembourrage en haut, s'il vous plaît, mon pote. Padding-top, 150. Probablement trop. Bien trop. On y va. En fait, avant qu'on y aille, on te donner l'exemple. Ignons ça. Faisons semblant que Main 2 n'existe pas, et nous utilisons à nouveau la balise principale. Main, celui-ci ici doit se terminer avec principal, mais prédéfini, pré-fabriqué. Cela a fonctionné sur la page 1, la page d'accueil, mais voyons ce qu'il fait sur cette page. Tu vois, il fléchit, donc ça veut dire qu'il colle côte à côte et que tu es comme, ce n'est pas ce que je veux. C' est pour ça que nous avons cette boîte séparée. Je viens d'expliquer pourquoi sans vraiment vous montrer que les mauvais résultats. Principale 2. Passons à la prochaine vidéo. On va commencer à regarder les formulaires. Ça va être bon, un bon long. C' est une bonne partie de la classe. On n'a même pas besoin de le sauver. Qu' est-ce que cela économise-t-il pour nous ? Passons à la prochaine vidéo. 72. Comment faire fonctionner un simple formulaire php sur votre site HTML: Pour commencer, il y a deux parties à créer un formulaire qui vous envoie, le propriétaire du site Web, un e-mail. Le côté HTML des choses, ce qui est raisonnablement facile, nous allons apprendre cela assez rapidement. La partie la plus difficile est de savoir ce qu'il faut faire avec cette information. Quelqu' un vient sur votre site, ils remplissent le formulaire, ils tapent sur soumettre ce qui se passe ? Nous avons une petite solution de contournement et nous allons envoyer les données de formulaire que nous avons cliqué à un meilleur PHP qui est hébergé sur notre serveur et qui va nous envoyer, le propriétaire du site, un e-mail avec toutes les données. Mais c'est un peu un hack, principalement parce qu'il est assez difficile de mettre en place un bon service de messagerie. Vous avez besoin d'une base de données, vous devez cliquer sur les données et vous devez vous assurer que vous n'enfreignez aucune des règles d' envoi de messages électroniques, mais que cela ne fait pas partie du cadre de ce cours. Mais je ne voulais pas arriver à la fin juste soit ne pas faire de formulaires, vous aimez siffler ici et j'espère qu'ils ne posent pas de questions sur les formulaires et s'ils font les formulaires, nous ne faisons rien avec eux, ce n'est pas amusant. Sachez juste que c'est un peu un hack et au début, ce qui finira par arriver, c'est choses comme Gmail et Hotmail recevront un e-mail de votre part et ils partiront, hey, c'est un peu suspect et je vais le coller dans du spam. Vous en tant que propriétaire de site Web, pour les premiers e-mails que vous recevez de votre site Web, vous allez devoir aller dans votre dossier de spam, dire pas de spam, puis finalement il apprend. Bon, alors commençons. En fait, avant de commencer, l'autre chose qui extrait au début de celui-ci, est que cela doit être fait sur un hôte. Vous ne pouvez pas tester cela localement parce que PHP a besoin de vivre sur votre hôte comme Bluehost, pour qu'il envoie réellement cet e-mail. Nous pouvons tout faire ici et si vous n'avez pas de configuration d'hébergement, vous ne pouvez pas encore le tester. Tous les extraits sont faits, commençons. Tout d'abord, où on va le mettre ? Nous allons le mettre ici, juste en dessous, alors trouvons ça dans votre code. Où est-il ? Il y a mon H1, il y a mon étiquette P, juste après qu'il se ferme. Nous allons coller dans un formulaire et nous allons utiliser le formulaire post. Nous parlerons de l'action un peu plus tard, c'est là que nous mettons notre PHP mais nous le ferons ensuite. Tout ce qui se trouve dans le formulaire est ce qui sera envoyé dans l'e-mail. Si vous avez des champs de saisie comme le nom et l'e-mail en dehors du formulaire, il ne sera pas parti. Les choses qui y entrent, ils sont appelés champs d'entrée, et la plupart d'entre eux. Vous pouvez voir qu'il y en a un tas, nous en couvrirons quelques-uns dans cette vidéo et la suivante, mais nous ne les couvrirons pas tous. Faites un peu de recherche pour les entrées de formulaire HTML et vous pouvez jeter un coup d'oeil à chacun d'entre eux. Les principaux sont, nous allons commencer par un texto, nous allons utiliser celui-ci pour recueillir le nom du peuple. Vous avez le nom et l'ID, le nom, tout ce que vous mettez entre ces guillemets sera ce qui vous sera envoyé dans un e-mail. Si j'ai demandé leur adresse et que la personne la remplit, je vais recevoir un e-mail en tant que propriétaire du site Web pour dire que l'adresse est égale à ce qu'ils ont rempli. Vous pourriez écrire A, vous pourriez écrire ceci, vous allez juste recevoir un e-mail de votre site Web disant que ces données sont arrivées et qu'elles sont égales à ce qu'elles ont tapé. Maintenant, le premier sera, un nom donc je veux un nom. Nous allons utiliser le nom et l'e-mail et le bouton de soumission, véritable formulaire simple pour commencer. Maintenant, l'ID est un peu plus spécial. Cela peut être tout ce que vous voulez, assurez-vous de ne pas utiliser de traits de soulignement ou de traits d'union. L' ID est un identificateur unique que vous utilisez pour surentendre un CSS. Si je veux styler ce formulaire ou nous allons avoir un petit aperçu. C' est ce que c'est, c'est le champ. L' ID est ici, je styliserais cette chose appelée nom, nous utilisons un hachage quand nous le coiffons. Nous disons le nom que je voudrais en faire une plus grande boîte et le faire avoir une couleur de fond de rose. Les identifiants sont utilisés pour identifier ce champ d'entrée particulier. Vous pourriez être utilisé plus tard aussi si vous allez utiliser la validation pour JavaScript, l'ID est assez important. C' est la chose qui vient à vous, c'est les trucs de fond. La prochaine chose que nous ferons, c'est que nous ferons l'e-mail, saisie des e-mails où que vous écriviez, n'est-ce pas ? C'est là. Même avec le nom de sorte que vous allez recevoir un e-mail à partir de ce formulaire disant, l'e-mail est dan@sample.com. et la carte d'identité très souvent ils sont les mêmes, faire de eux la même chose. Regardons un peu comment former leur côte à côte, c'est sur notre bouton et le réparer. On va le faire vraiment grossièrement pour commencer. La prochaine entrée que nous voulons est le bouton soumettre, donc entrée soumettre, là nous allons, génial. Maintenant, la valeur dans ce cas est ce qui va apparaître sur le bouton, donc si je mets, feu, c'est la tique donc ce n'est pas si important. C' est structurellement différent de ces champs d'entrée, donc je vais laisser feu et nous devons doubler aussi. Jetons un petit coup d'oeil donc ce que nous avons ? On a le nom, l'e-mail et ça. Nous allons parler d'étiquettes et d'autres choses dans une seconde, je clique sur le bouton et ne sais pas quoi faire avec le bouton. Fondamentalement, ce que le bouton soumet est, posons cette chose et faisons cette action. On n'a rien là-dedans. Maintenant, nous allons parler du PHP requis. Ce que nous allons faire est de créer un fichier PHP. Nous ne allons pas passer par la syntaxe de la façon d'écrire PHP, comme nous avons HTML et CSS parce que nous allons juste copier et coller celui-ci, parce que c'est un tout autre cours d'apprentissage PHP. Est juste un langage différent, c'est un langage très différent, c'est un langage de programmation où c'est plus un langage appelé un langage de balisage et chacun existe et il ne fait rien, juste assis là et fait des choses et montre le , le même que le CSS. Il ne fait rien, il n'y a pas de calculs dynamiques, c'est juste très descriptif, donc PHP, faisons-en un. Allons le fichier nouveau et le sauvegarder, vous pouvez l'appeler n'importe quoi tant qu'il n'a pas espaces ou de traits d'union mais nous allons appeler celui-ci PHP. Cliquez sur « Enregistrer », il ira au document PHP. Vous voyez une petite icône change là-haut pour l'icône PHP, le petit éléphant. Très bien, et on va tricher. J' ai déjà du code pour toi. Dans vos fichiers d'exercices dans le cadre du projet 2, il y a un formulaire appelé 1 simple. On a ce type, on va le copier et le coller et je vais passer en revue les bases. Fondamentalement, il cherche dans mon document un ID de nom et ensuite il va m'envoyer le nom, quel que soit le résultat d'entrée. Il cherche également un ID d'un e-mail et ensuite il va m'envoyer l'e-mail pour continuer à les ajouter. Je vais en faire un autre dans son adresse. Je vais coller celui-ci ici et taper adresse tant que le nom de l'ID correspond. Ne le cassez pas encore. Il va prendre de ce nom ici, il va au destinataire. Celui-ci va m'envoyer, c'est là que tu mettrais ton adresse e-mail. J' ai mis Dan à des exemples pour que personne ne m'envoie des milliers d'e-mails de test. Si vous avez votre adresse, donc la vôtre pourrait être bob@gmail.com. Qui a l'adresse e-mail ? Je souhaite, mais mettre votre adresse e-mail en tant que propriétaire du site, et c'est tout. Maintenant, nous devons le connecter, donc nous allons le sauver. Fermez-le et c'est là qu'il va ici en action et dites, je voudrais qu'il aille à mail.php, s'il vous plaît appuyez sur « Enregistrer » et cela ne fonctionnera pas. Pourquoi ? Comme je l'ai dit au début, il doit être sur votre serveur. Je vais te montrer comment je vais le faire. Si vous avez configuré Bluehost, vous êtes prêt à partir. La seule chose que vous devez vérifier cela, disons que si vous hébergez et que cela ne fonctionne pas, assurez-vous juste que PHP est configuré sur le serveur. C' est assez commun. C' est très rare de ne pas le faire. Je le dis parce que j'avais un hébergement bon marché qui n'avait pas de configuration PHP ou du moins venu par inactivé. Quoi qu'il en soit, si cela ne fonctionne pas, contactez votre hôte et dites que PHP est activé sur mon serveur. Ils diront, bien sûr que c'est et c'est probablement plus un problème syntaxique. Mettons-le sur notre hôte. Pour se connecter à votre hôte, et nous l'avons connecté à notre dernier membre du projet, projet 1 nous l'avons téléchargé sur Bluehost, c'était plus excitant. Celle-ci ici, vous remarquez les icônes qui ne sont plus là. C' est parce que nous ne l'avons pas configuré pour ce nouveau dossier local. C' est sur notre bureau appelé projet 2. Vous pouvez simplement aller et utiliser la façon de l'homme des cavernes et aller dans votre compte d'hébergement Bluehost sur le site, trouver le gestionnaire de fichiers et simplement télécharger les fichiers. Vous voulez télécharger contactez-nous et mail plus probablement toutes les images et tout le reste. Mais je vais botter mes renforts, nous le ferons ensemble parce que vous aurez besoin de savoir. Ce qu'on va faire, c'est fermer tout ça. Nous allons passer du projet 2 à notre autre projet précédent. Nous allons obtenir le fichier, l'ouvrir et sur notre bureau. C' est l'autre projet sur lequel nous travaillons, le projet 1 clignote et s'ouvre. La chose que nous recherchons est cette chose appelée sftp.json, qui avait tous les détails que nous avons définis pour la connexion à notre FTP ou à notre hôte. Je vais cliquer dessus et l'édition va brouiller mes détails, sélectionner tout ce qu'il y a ici, le copier. Si tu es déjà là et que tu dis : « Hé, je n'ai pas fait cette vidéo », reviens plus tôt dans le cours. Nous avons travaillé, il y avait une vidéo sur la façon de télécharger sur un hôte, le copier, de le fermer. Revenons à notre autre du projet 2. Alors ouvrez le projet récent 2 est là-dedans. Revenez à nos fichiers réguliers et ce que nous voulons faire, c'est que nous voulons aller à nos extensions. Trouvons SFTP et il dit qu'il est activé, mais je ne vois pas cette petite icône. Allons le désactiver, activons-le. Alors, comme nous l'avons fait avant, nous devons passer par là et exécuter ça. Commande Shift P, nous avons utilisé. Rappelez-vous, nous l'avons utilisé plus tôt pour envelopper une étiquette. C' est la même chose que nous voudrions configurer notre SFTP. Fondamentalement, tu fais encore la même chose. On va faire le long chemin. Palette de commande et ici, vous devrez peut-être commencer à taper SFTP. Mais le mien est déjà là. Je vais attraper tout cela, le supprimer et coller dans mon autre, prêt pour des trucs flous. Floue. Vous allez l'enregistrer, vous allez le fermer et cliquez sur mon serveur ici. Je voulais une petite icône pour rembourser. Désactiver. Rechargement requis. Je veux le trouver à nouveau, revenir SFTP et l'activer. Il a emménagé. Il n'apparaît pas ici. C'est bon. Parfois, ces extinctions me rendent folle. Il semble que cela fonctionne maintenant, sauf pour les icônes qui ne sont pas là. Ici, et explorateur, je vais voir si je peux le télécharger. Nous allons essayer la page Contactez-nous. Nous allons cliquer avec le bouton droit de la souris et disparaît en bas. Si cela ne l'apparaît pas, vous devrez le désactiver et l'activer à nouveau, vous devrez peut-être redémarrer le code VS. Je vais le télécharger. Il va y avoir celui-là juste un test. Il vérifie en bas, il se connecte. Partis, fait. Impressionnant. De quoi d'autre avons-nous besoin ? On a besoin de ça. C' est vraiment important. Je colle aussi les images. De quoi d'autre ai-je besoin ? Je vais maintenir enfoncée la touche de commande de mon Mac Control sur un PC vous. Si on a ça, je vais déjouer les images. Quoi d'autre a besoin de monter ? Et aussi à la page d'index, le style.css. Tout le reste était juste de petites choses qu'on a faites. Toute la réinitialisation de style dont nous avons besoin. Je l'ai déjà fait à un, Cliquez avec le bouton droit sur l'un d'entre eux. Charger. Off, ça va à notre Silva. Je reviendrai dans une seconde. Je suis de retour, il est téléchargé, l'image prend pour toujours, FTPS est super lent. Mais c'est fait. Allons voir le site. Rappelez-vous que nous avons testé localement. Vous pouvez nous dire votre adresse IP locale virtuelle, d'accord, mais nous voulons trouver adarerestaurant.com. Je l'ai à moitié chargé pendant qu'il était à mi-chemin téléchargement juste au cas où vous feriez la même chose que vous aimez. Dur l'ancien côté moitié nouveau site. Je vais appuyer sur « Rafraîchir » et voir s'adapte à tous les uploadés. Maintenant, il ne l'est pas, il est en fait téléchargé. Le problème est, c'est qu'il est mis en cache, un tas de choses dont nous avons parlé la mise en cache un peu plus tôt, mais c'est vraiment bon de le couvrir à nouveau. C' est comme si le navigateur arrivait ici et va, hé, je suis allé à adarerestaurant avant. Je ne vais pas chercher l'image de fond à nouveau, parce que je l'ai déjà. À quelle fréquence cela changera-t-il ? En tant que concepteurs web, nous changeons tout le temps pendant que nous apprenons, mais régulièrement, le site Web reste le même. Ce que nous devons faire, c'est faire une de ces rafraichissements. Nous le faisons par vue. Nous allons développer, nous allons inspecter les éléments et nous faisons un clic droit et nous disons rechargement dur. Nous faisons le rechargement dur du cache vide. Il va passer à travers et laisser tomber tout ce qu'il savait avant. C'est de retour. Je vais fermer cette petite croix en bas à droite pour retourner à mon site web. Allez, allons à la page Contactez-nous. Est-ce qu'il se connectera ? Ce sont des formes vraiment basiques. Nous allons le tester. La seule chose que je vais faire avant d'aller vérifier si cela fonctionne, c'est que ici, rappelez-vous, cela peut être utilisé parce que c'est là que va aller l'e-mail. C' est là que je l'ai mis dans dan@, mon adresse e-mail. Vous indiquez votre adresse e-mail. Je te verrai dans une seconde une fois que j'aurai tapé mes détails secrets. Là, je l'ai fait. J' ai mis à jour le mail.php, puis j'ai cliqué avec le bouton droit de la souris et je l'ai téléchargé. Maintenant, elle vient à moi. Faisons-lui un test. Je regarde le site réel en direct maintenant. Ce PHP est presque serveur. Je vais mettre Daniel Scott, le nom. Je vais mettre mon adresse e-mail, mais si je clique ici, je l'ai déjà testé. Il répertorie toutes les différentes adresses e-mail que j'ai. Je ne suis pas que je ne te fasse pas confiance car je ne te fais pas confiance. Quoi qu'il en soit, les médias sociaux sont le meilleur moyen d'entrer en contact avec moi parce que je reçois trop de courriels. Je vais mettre mon adresse e-mail. Editeur, pouvez-vous flouter un peu ? Je clique loin et il arrive e-mail envoyé. C' est le chargement du formulaire PHP. Maintenant, nous attendons. Je vais passer par mon email dans une seconde. Ce que vous pourriez trouver, c'est qu'il se trouve dans votre dossier de spam. Ça pourrait arriver pour les deux premières fois. Ensuite, quelque chose comme Gmail ou Outlook va dans dire que ce n'est pas du spam. Après un peu, ça commencera à se souvenir et à partir. Le truc qui vient d'un cher serveur restaurant.com n'est pas du spam. J' ai reçu cette adresse e-mail de moi-même, de mon site web. Ça vient de l'adarerestaurant. C' était l'adresse e-mail que j'ai tapée. C' est un faux et oui, ça vient de moi. Pas de sujet. Je vais garder ce code dans le PHP, gentil et propre. Nous allons passer par et ajouter un peu plus de détails une fois que nous avons travaillé quelques uns de plus et mis des champs. Mais oui, c'est comme ça qu'il faut envoyer un e-mail. Le mien n'est pas allé au spam. C' est parfois le cas. Je n'ai pas dans mon cas, juste passé directement par Gmail, a dit qu'il y allait. Notre e-mail vient du nom que j'ai tapé, qui est mon nom. Mais vous pouvez avoir beaucoup et beaucoup de champs de texte différents, tant qu'ils ont tous leur propre nom et identifiant, vous pouvez avoir beaucoup de données à travers. Succès. Mais rappelez-vous ces deux mises en garde. Vous devez tester en direct sur votre serveur réel pour évaluer réellement le serveur en ligne PHP. Si vous rencontrez des problèmes, très souvent les gens oublient de télécharger mail.php à partir de VS Code. Assurez-vous que vous les téléchargez réellement. L' autre chose que les gens oublient c'est sur la page contactez-nous ici sur le formulaire, où fait-il d'autre ? Ceci ici, comme nous formons un post de méthode d'action et l'action ne doit pas être simplement montée en PHP, il doit être ce que vous avez appelé ok. Si vous l'avez appelé mon mail.php, mettez mon mail.php. S' assure également que ce nom est séparé. S' il y a deux noms ou deux courriels, sur deux entrées séparées, ça va avoir des problèmes et il doit y avoir un bouton parce que personne ne peut soumettre la forme de ça un bouton. C' est tout pour le moment. Une dernière chose cependant, parfois, cela peut prendre une éternité, la mienne peut [inaudible] loin. Mais je l'ai eu en fonction du serveur et en fonction de mon filtre de spam, je ne l'ai pas fait apparaître depuis une heure. Je ne sauterais pas en ce moment, ça ne marche pas. Je lui donnerais un peu de temps en fonction de, allez-vous héberger vos e-mails, si vous utilisez Outlook ou en utilisant peut-être 365 de Microsoft. Donnez-lui un peu de temps pour passer. Mais si après quelques heures, ça n'est pas arrivé, c'est probablement cassé. Ce que vous pouvez faire est que vous pouvez télécharger les fichiers complétés pour ce particulier et il devrait avoir tout ici comme il se passe en ce moment. Si cela ne fonctionne toujours pas, vous devrez peut-être contacter votre hôte. Bluehost semble fonctionner parfaitement. Si vous utilisez un autre hôte, peut-être les contacter et leur dire : «  C' est ce que j'essaie de faire. Ça ne marche pas. Peux-tu m'aider ? C'est un peu hors de la portée de leur aide normale. Mais vous pourriez obtenir une personne de support utile qui pourrait vous orienter dans la bonne direction car cela pourrait être quelque chose à voir avec le serveur. C' est pourquoi c'est une solution yucky. Cela fonctionne, mais ce n'est pas censé le faire de cette façon, mais je l'utilise tout le temps. C' est charmant. Allons dans la prochaine vidéo où nous commençons à parler de beaucoup plus de ces champs de saisie. 73. Ajout de texte et d'étiquettes de remplacement aux champs de texte des formulaires de sites Web en HTML: D' accord. Nous allons commencer par l'espace réservé et nous ferons les étiquettes en second lieu, parce que l'espace réservé, c'est super facile. Donc, si je veux que ce champ ait du texte d'espace réservé, vous écrivez juste des espaces réservés égaux et vous le mettez entre guillemets, puis vous mettez juste ce que vous voulez. Maintenant, ça peut être n'importe quoi ici. Je vais frapper « Sauver ». Parce que nous ouvrons et fermons des fichiers, assurez-vous simplement de fermer, puis rouvrir votre page de test. Assurez-vous que vous ne travaillez pas sur le live, car cela ne va pas s'ajuster ou changer, sauf si vous cliquez dessus avec le bouton droit de la souris dans votre Explorateur. Je vois ça en ligne, je vais juste le fermer pour le rendre clair, que je ne sois pas confus. Vous pouvez voir le texte de l'espace réservé, lorsque vous cliquez dessus, il va au-dessus du haut. Mais oui. Il se remplit juste là. Donc vous pouvez le faire sur n'importe lequel d'entre eux. Donc espace réservé. Espace réservé. Nous mettrons peut-être en dan@sample.com. Sauvez et vous pouvez le voir là-bas. Longueur froide. Maintenant, une étiquette est différente. C' est le texte qui va au-dessus. Ce qu'on va faire, c'est le faire pour le nom ici. Supprimons donc l'espace réservé. Vous pouvez avoir les deux, prenons les deux. Mettre des espaces entre elle, juste pour le faire clair pour moi principalement. L' étiquette peut aller n'importe où sur la page, elle peut être juste en face, parfois juste après qu'elle soit plus appropriée. Tout ce qu'il est, c'est l'étiquette. Étiquette pair et pour. C' est ainsi, parce que ce sont des choses totalement séparées. Le fait qu'ils soient au-dessus de l'autre, parce que nous pourrions juste écrire une balise p et dire en fait que c'est une balise p de votre nom. Cela fonctionnerait, il est là et il décrit cette chose. Mais nous voulons cette étiquette, parce que cette étiquette fait d'autres choses. Donc, étiqueter et assurez-vous d'utiliser l'ID. Donc, l'étiquette pour le nom, car il est associé à ce maintenant lié. C' est là que vous mettez les tiques pour cela, donc c'est Prénom. Nous allons faire du style un peu plus tard, mais dire que le prénom est pour ça, pourquoi est-ce différent ? C' est parce que principalement pour les lecteurs d'écran et l'accessibilité. Parce que je peux cliquer sur Prénom maintenant et que peut réellement voir qu'ils ont mis en évidence la boîte Prénom. C' est en fait connecté, je pourrais l'avoir partout où je veux. Je vais le couper et le mettre sur mon bouton Soumettre. Il est toujours là, mais regarde quand je clique dessus, il s'allume. ne l'ai jamais eu ici, mais je voulais juste vous montrer la connexion, tant que l'ID correspond, alors c'est associé à lui. Nous voulons une bonne pratique pour les formulaires parce que ceux-ci peuvent être probablement l'une des choses les plus difficiles pour quelqu'un qui a une déficience visuelle, c' est-à-dire l'utilisation d'un lecteur d'écran, qui a besoin d'aide. Encore une fois, nous pourrions en faire un pour ça. Toi, là. Mais celui-ci a juste besoin de s'assurer que, deux choses, le For va à l'idée d'e-mail et celui-ci va être e-mail. Bien. Cool Donc c'est des espaces réservés et des étiquettes. Avant de partir, ils sont tous sur une ligne, j'ai ignoré. Pour le moment, par défaut, ces entrées de formulaire sont un type d'affichage. Quel genre d'affichage sont-ils ? Ils ne sont pas bloqués, parce qu'ils sont sur la même ligne. Tu sais ce qu'ils sont ? Ce sont des éléments en ligne. Nous voulons changer cela. Fondamentalement ce que nous allons faire, au lieu de dire étiquette ou étiquette et entrée ou toutes sortes de choses séparées, ce que nous allons faire est de créer une balise div rapide, balises div par défaut sont au niveau du bloc. Ce qu'on va faire, c'est, que devrions-nous faire ? Je vais l'envelopper autour de ces deux. Je vais utiliser ma commande Shift P ou Control Shift P. Je vais utiliser la pellicule et je vais l'envelopper. Je vais créer une nouvelle classe appelée inputwrapper, parce que c'est un niveau de bloc et c'est à l'intérieur de celui-ci, regardez, enregistrez-le, il finit sur sa propre ligne. Nous n'avons rien à faire et je vais le faire parce que je veux le styler en ligne, en appliquant les stylers plus tard pour styler les choses à l'intérieur. Je pourrais dire faire tout le texte à l'intérieur ici plus petit ou plus grand. Je vais juste réutiliser ça quelques fois. Ces deux gars vont aller ensemble dans leur propre petit. Commande Shift P, Contrôle Shift P, envelopper. On va y aller, eh bien, celui-là était un code. Mec, s'ils sont trop longs, on le copie et le colle. Idem avec le bouton Soumettre. En fait, parce qu'il est à la fin, il n'a pas besoin d'être dans sa propre div, parce que cette div ici le pousse loin. D' accord. Ça va le rendre un peu plus agréable. En fait, séparons-les juste parce qu'ils sont trop proches ensemble. Nous allons faire le style correctement un peu plus tard. Mais juste pour le moment, juste pour ma santé mentale en tant que designer, je vais ouvrir mon CSS, pas réinitialiser. Je vais chercher styles.CSS. Déplace-le ici. Je vais styler l'inputwrapper. Je vais dire, nous allons juste avoir une certaine marge. Mettez votre marge en haut, Margin-top. J' ai commencé à faire ça, je deviens vraiment paresseux. Tu vois que je viens de mettre un martop et je l'ai eu. Je ne sais pas comment, c'est magique. Je vais mettre peut-être 20 pixels juste. Je veux mes fesses même aussi bien, pas mon haut, margin-bas. La syntaxe est incorrecte. Je pense que c'est juste, c'est bon. Non, il y a une ligne squiggly. Voilà, en bas, si mal. D'accord. On y va, donc j'ai quelques marges en dessous, juste pour le rendre un peu plus facile pour le reste des prochaines vidéos, nous allons regarder quelques-unes des autres entrées. Nous avons des ticks un est fait, ou le bouton de soumission est fait. Regardons les autres communs. Mais on va le faire dans une autre vidéo, je te verrai dans une seconde. 74. Comment ajouter une grande zone de texte à plusieurs lignes dans un formulaire HTML ?: Salut là. Cette vidéo va vous montrer comment mettre dans une grande case à cocher avec plusieurs lignes et du texte d'espace réservé. Si pour la vie de vous, vous ne pouvez pas le trouver, c' est parce que ce n'est pas une entrée comme ces autres. C' est juste appelé zone de texte ancienne. Mais nous allons trouver comment le faire ensemble maintenant dans la vidéo. abord, mettons-le dans sa propre petite div comme nous l'avons ici, le rappeur d'entrée, et gardons-le sur sa propre ligne. Comment on le trouve ? Ce qui est bizarre, c' est que ce n'est pas un type d'entrée. Il y a donc beaucoup d'entrées. Mais bizarrement, ce n'est pas un de ceux-là. C' est juste appelé zone de texte. Étrange parce que beaucoup de la même fonctionnalité, juste nom bizarre. Maintenant, le nom et l'ID sont les mêmes. Cela va être notre message et dans le même message. Colonnes et lignes est intéressant. Je vais retourner l'emballage. Colonnes et lignes. Les lignes sont faciles, il est juste de la taille et les colonnes ne sont pas des colonnes comme nous avons parlé dans cette classe est juste combien de caractères de large. Il fait 30 lettres de large. Jetons un petit coup d'oeil par défaut et allons jeter un coup d'oeil. Je n'ai pas lancé aujourd'hui. On va vivre. Voilà, c'est ma zone de texte. Réglons les lignes, jusqu'à environ cinq juste pour que nous puissions voir et nous allons aller colonnes. Des moments de folie, voilà. Vous pouvez y faire d'autres choses aussi bien qu'avant. C' est que nous sommes en fait rien ne va à l'intérieur de cela parce que c'est là que les gens réels tapent, mais juste avant qu'il ne ferme là. Après les rangées 5, je vais mettre dans l'espace, et je vais mettre dans l'espace réservé. C' est juste le texte de l'espace réservé comme avant. Là, il est là. Génial, rien d'autre. Je peux vraiment te parler de celui-là. C' est ce que nous allons le style et les tiques à l'intérieur de celui-ci plus tard, après que nous avons traversé quelques-uns d'entre eux. Je vais les garder séparés pour que vous puissiez les trouver facilement. C' est la grande zone dans laquelle vous pouvez taper plusieurs lignes, également appelée zone de texte. Prochaine vidéo. 75. Comment ajouter une case à cocher dans un formulaire HTML ?: Il est temps de faire une case à cocher, case à cocher, case, tout ce que vous voulez l'appeler, est cette chose et un spoiler est sa case à cocher d'entrée. Mais il y a quelques choses supplémentaires que vous devez faire pour celui-ci, comme une valeur. Je vais vous montrer comment faire ça maintenant dans cette vidéo. D' accord. Nous allons le mettre en dessous de ceci ici, qui est notre zone de texte, donc nous allons mettre dans notre case à cocher. Maintenant, nous mettons tout dans celui-ci juste pour qu'ils se cassent sur leur propre ligne. Si vous aimez retourner dans cette vidéo à l'avenir, pas pendant tout le parcours, ce rapide ne fait rien sauf sortir sur sa propre ligne. Ce que vous cherchez vraiment est une entrée appelée case à cocher. Il est là. On va lui donner un nom. Celui-ci va être, voulez-vous vous inscrire à mon abonnement e-mail ? Le nom dans cet identifiant, comme tous les autres l'ont fait, est souvent exactement le même. Celui dont cela a besoin qui n'est pas pré-rempli en tant que valeur parce que nous allons dire, pour le moment ce nom est la question, mais vous devez savoir s'il est vérifié ou non, et c'est la valeur. La valeur dans ce cas va être, oui, inscrivez-moi. Quand je reçois mon e-mail pour mon PHP, il va dire qu'il y a un nom appelé email inscription et il va avoir cette valeur. Il m'enregistre. Cool. Vérifions ça. Regarde, voilà ma petite coche. Là, ça va. Cool. Cochez, c'est une de ces choses qui a vraiment besoin d'une étiquette. Certains de ces autres que nous pouvons mettre en place des détenteurs pour aider à l'expliquer, donc nous n'avons pas besoin d'étiqueter potentiellement, celui-ci le fait. Maintenant, l'étiquette peut aller avant ou après parce qu'il est étrange d'avoir l'étiquette avant elle dans ce cas. La grande chose avec l'étiquette rappelez-vous, le for et l'id doivent correspondre. Dans mon cas, le nom et l'identifiant sont les mêmes, j'ai copié le mauvais. Mais tant que ces deux correspondent, ils vont correspondre. L' étiquette pour celui-ci est de s'inscrire à la newsletter par e-mail. Cool. Jetez un petit coup d'oeil. Maintenant, rappelez-vous que cette étiquette n'a pas besoin d'être au début, elle peut être juste après, tant que cela pour, c'est le même que l'identifiant de la chose réelle. Cool. Pour avoir la tique. La dernière chose que vous pouvez faire est que vous pouvez pré-ticket. Donc oui, vous êtes déjà inscrit à mon bulletin d'information électronique. Il est dans VS Code et oui, inscrivez-moi la case à cocher de type d'entrée, pas l'étiquette. Séparez ça, faites en sorte que ça soit beau. Après cette fin, il suffit d'écrire vérifié. Par défaut, il sera vérifié. D' accord. Sauvegardons ça. Jetez un petit coup d'oeil. Je vais rafraîchir la page. Regarde ça, c'est déjà vérifié. Tu l'éteins. Voilà, tu y vas. D'accord. C' est tout pour les coches. Il y a des trucs de conception que je veux faire comme aligner les choses et les tailles de police, mais ne vous inquiétez pas, nous le ferons dans une prochaine vidéo qui sera bientôt disponible. Pour le moment, sur les boutons radio. On se voit dans la vidéo suivante. 76. Comment ajouter un bouton radio rond avec un point au milieu à un formulaire HTML d'un site Web.: Salut là. On va faire un bouton radio. C' est comme une petite chose sombre bizarre que vous pouvez cliquer sur un mais vous ne pouvez pas cliquer sur les deux en même temps. C' est un tout, l'un ou l'autre. C' est une entrée de radio. Vous comprenez ? C'est juste un peu bizarre de le faire fonctionner. Sautons maintenant et apprenons comment le faire dans VS Code. Bon, mettons notre bouton radio. Comme le reste d'entre eux, nous allons le mettre à l'intérieur de seulement nos épisodes sur son en ligne. A l'intérieur de cela, nous allons faire une entrée de radio, c'est une belle simple, la radio. La radio n'a pas de piqûres. Le nom, celui-ci va être, disons « contact ». Vous avez vu au début leur préférence de contact. Ceci est un générique pour les deux options. L' identifiant est spécifique pour ce petit bouton particulier. Appelons ce téléphone. Sauvegardons ça et regardons un peu. Il nous manque des morceaux, mais jetons un coup d'oeil. J' ai notre bouton radio, je clique dessus. Le problème est que si vous n'avez qu'un seul bouton radio, il ne peut pas être décliqué. C' est ce qu'on appelle un bouton Tout. Une coche est une fin. Si vous avez plus d'une case à cocher, faisons-le rapidement. Où est ma case à cocher ? On en aura deux. Espace. Les cases à cocher sont cool. Vous pouvez avoir que je veux ça et ça et puis un peu de ça, vous pouvez les avoir tous les et's, A-N-D. Alors qu'un bouton radio doit être ou je suis ça, ou autre chose. Vous avez besoin d'au moins un autre bouton là-dedans. J' ai celui-là, et je le copie, je le colle. La grande chose dont vous avez besoin, ceux-ci doivent être les mêmes. Le nom doit être le même, mais l'idée doit être différente pour les rendre uniques. Ils ont aussi besoin de valeurs, sorte que lorsque vous recevez vos e-mails, cela va dire, mettons de la valeur, cela va dire e-mail. Je vais recevoir un e-mail disant que la préférence de contact est égale à l'e-mail, ou selon ce que l'utilisateur choisit, préférence de contact est égale au téléphone. Cela vient de cette valeur ici. Ils en ont tous les deux besoin. Celui-ci a besoin d'une valeur d'amende pour celui-ci. On y est presque. Maintenant, le gros, c' est qu'ils doivent être les mêmes ? Nom et nom, parce qu'ils basculent, ils sont tous. Celle-ci ou celle-là. Tu ne peux pas les avoir. C' est comme un bouton radio comme vous pourriez ne pas être trop vieux pour se souvenir de ces grands. Radios, tu aimes peut-être un peu avant mon heure. Il est né en 1980, donc ils étaient dans certaines voitures, mais en sortant, mais en gros, vous avez choisi une station. Si vous en avez choisi un autre, si vous le poussez, ce bouton est sorti, était déjà mécanique. C' est pourquoi ce bouton radio et cette langue continuent. Pose celui-là dedans. Celui-ci doit sortir. C' est ça ou ça. Vous pouvez avoir des charges plus nombreuses d'entre elles tant qu'elles utilisent le même nom. Tu dois leur donner des identifiants différents, sinon, tu ne sauras pas quoi. Comment est le contact et le signal de fumée. Mettre des traits d'union ici, je devrais utiliser des minuscules aussi. Mais c'est stupide, puis commun. Une chose que nous allons faire pour le ranger, c'est qu'il a besoin d'étiquettes, parce que c'est comme des boutons mystérieux. Les étiquettes, nous allons les mettre juste après, comme nous avons fait notre case à cocher. Nous allons mettre l'étiquette, l' étiquette pour et doit être la même que l'identifiant. C'est l'étiquette pour le téléphone. Qu' est-ce que ça va dire ? Ça va dire un téléphone. Je devrais utiliser des minuscules, juste vous n'avez pas à le faire, mais plus tard si j'essaie de contrôler cela avec un autre code, vous devez être cohérent avec les choses parce que sinon vous seriez comme, « Hé, pourquoi ça ne marche pas ? » C' est parce que vous avez utilisé des majuscules au hasard quand vous n'avez pas le reste du cours, parce que les gens ne voient pas ce qu'il y a dans ce truc. Ils voient entre l'étiquette ici. Vous pouvez utiliser comme dans le plus bas. L' étiquette à nouveau pour le bouton fait juste au-dessus, il va être pour le courrier électronique, correspond. Ce qui va être un e-mail. Téléphone ou e-mail. Maintenant, en termes de label plus grand, il n'y a pas de label comme maître. Ce que nous allons devoir faire est juste au-dessus de lui mettre dans une balise p qui dit, « Comment aimeriez-vous être contacté ? » C' est juste une balise p assis au-dessus pour aider à expliquer cela. Mes boutons se sont coincés là-dedans. N' allez nulle part en ce moment. C' est des boutons radio. Un peu tout, vous ou vous. Une grande chose à retenir, le gros plat à emporter à dans l'esprit est que ceux-ci doivent être les mêmes. C' est en fait vérifier si vous ne vous appelez pas eux-mêmes, alors vous appelez ça autre chose. Deux, ce qui finit par arriver, c'est que vous avez deux choses qui peuvent être activées et qui ne peuvent pas être désactivées jamais. Parce qu'il n'y a pas de bascule. Encore une chose avant de partir, j'ai fini la vidéo. J' ai dû doubler parce qu'environ une demi-heure plus tard, j'ai réalisé que c'était arrivé. Une petite ligne verte squiggly et qui vient d'un plug-in que nous avons en cours d'exécution appelé code HTML. Fondamentalement, si je clique dessus et que je passe la souris à ce sujet, l'e-mail doit être unique. Les identifiants doivent être uniques. Cet e-mail d'identification est unique pour ce petit groupe que nous avons fait parce que l'autre s'appelle téléphone. Mais rappelez-vous plus tôt, vraiment nous utilisons déjà l'e-mail d'identification. Parce que ça doit être unique. Vous voyez ce petit avertissement ici. Ça me dit que ça doit être unique. Me dire que c'est en ligne 95 et son personnage 60. Quatre-vingt-cinq et une petite ligne squiggly. Cela peut être appelé e-mail 2 tant qu'il est unique et que votre étiquette doit également la correspondre, la valeur n'a pas besoin de correspondre. Sauvez-le, maintenant nous avons fini avec les boutons radio. Passons à la prochaine. 77. Comment créer un menu déroulant pour un site web en HTML ?: Hé tout le monde. Cette vidéo va être à propos des menus déroulants. On doit en choisir un, commencer avec un. C'est très excitant. La version courte est, fondamentalement, c'est une balise appelée Select et vous avez ces valeurs d'option, et c'est ce qui construit votre menu déroulant. À la fin de cela, nous allons lancer quelques types d'entrée parce que nous ne allons pas passer par tous les types jamais créés, parce que ce serait une vidéo très longue, mais nous allons rapidement regarder le sélecteur de date et le sélecteur de couleur parce que c'est excitant. Mets-le au travail. Tu dois choisir une belle couleur. Voyons comment faire le menu déroulant. Ce n'est pas difficile, nous allons entrer maintenant et trouver comment le faire. Je vais le mettre dans mon wrapper div, wrapper d'entrée. Écrivez de cette façon trop longtemps pour le taper à chaque fois. Donc, il s'appelle Select. C' est bizarre. Pas une liste déroulante. Ce n'est pas une valeur d'entrée comme la plupart d'entre eux, il s'appelle Select. Donnez-lui un nom et un identifiant. C' est comme un nom générique pour tout ça. Le mien sera le comté dans lequel vous êtes. Différents comtés en Irlande. Même dans le comté. Je vais utiliser le même nom pour l'identification. Cool. Maintenant à l'intérieur de ceci sont les valeurs du menu déroulant. Ces options sont appelées options. Donc, les options lui donnent une valeur. C' est ce qui va vous arriver dans l'e-mail. Donc, la valeur pour celui-ci va être numérique. C'est là que je déménage. Dans ce petit espace ici, est ce que l'utilisateur va voir. On va en avoir deux. Sautez là parce que j'essayais d'utiliser mon raccourci, je me suis trompé. Je duplique donc la ligne sur laquelle mon curseur est sélectionné en maintenant la touche Maj enfoncée et la touche Option sur un Mac, et en utilisant la flèche vers le bas sur un PC. C' est Maj et Alt et utilisez la flèche vers le bas. Donc j'ai ces deux-là, Commandement D pour les obtenir tous les deux, parce que je vais utiliser le même nom. Je vais mettre à Galway. Je choisis au hasard des endroits où nos motos de rôle peuvent aller. Probablement n'importe qui pour Dublin aussi. Comté de Dublin. Ce sont des listes déroulantes. Regardons un peu. On y va. Très souvent, ce sont eux. C'est cool. Très souvent, bien que vous n'ayez pas le premier pré-rempli, vous aurez une option ici. Vous pouvez également dupliquer. Nous utilisons les deux mêmes raccourcis en utilisant la flèche vers le haut. C' est Shift Option sur un Mac, Control Shift Alt sur un PC. Je vais donner à celui-ci une valeur de non choisi, choisi, choisi, choisi. Ici, je vais utiliser celui-là pour choisir le comté. La raison pour laquelle je n'ai pas été choisi est parce que c'est la première, ce sera la valeur par défaut, et s'ils ne choisissent rien, il va le fermer au lieu de sauver. Ouvrons le dos. Passer une bonne journée. Son aperçu du navigateur. Je devrais peut-être fermer ça. Ouverture à nouveau. Alors regardons un peu. Donc pouvez-vous voir que c'est le premier, il est dit choisi, choisissez County. S' ils le laissent là-dessus, je ne veux pas qu'une valeur revienne de choisir County, je veux qu'une valeur revienne, ils n'ont rien choisi. Donc rien n'est sélectionné ou quelque chose comme ça, si je peux le trouver. Où es-tu ? Cool. Vous pouvez pré-remplir les choses, disons que vous vouliez commencer avec Galway, vous ne voulez pas utiliser cette option ici, vous avez juste une option par défaut. Vous pouvez, ici, après les guillemets, juste dire sélectionné. C' est peut-être celui qui est choisi en premier et ils peuvent y aller et le changer. Vérifie ça. Réinitialisez-le. Il est cueilli, partez. Laissez partir. Menus déroulants. Maintenant, nous pourrions passer pour toujours à travers toutes les différentes options. Donc, ce que vous pouvez faire, c'est qu' il y a plus de charges, je vais juste les écrémer rapidement. Donc, ceux que j'utilise, quelles que soient les données très rapidement, je ne vais pas remplir toutes les données parce que certaines d'entre elles n'ont pas besoin de beaucoup. Vous les utilisez juste sans rien faire, mais je suppose que je veux juste vous donner une idée rapide de ceux que vous risquez de rencontrer. Date à portée de main, alors que l'heure de la date. Sauvegardons ça. Regardons un peu. Donc date-heure. Ils peuvent choisir une date et une heure. Ils peuvent choisir une couleur. Je ne sais pas quand ils choisiront une couleur et je ne sais pas où c'est. Quel champ est celui-là ? Date-heure. J'ai utilisé la date. Je ne sais pas ce que c'est. Il doit y avoir plus de valeurs. Mais il y en a beaucoup plus. Le meilleur endroit pour aller jeter un coup d'oeil est l'endroit de l'école W3. Donc la forme de l'école W3. Donc, naviguant sur ce site en termes de formulaires, je commence par cliquer sur ce bouton ici, disons que je suis venu, Je veux des trucs sur HTML. Ensuite, en regardant le côté ici, il y a un tas de différents sous-groupes dans ce cas formulaires. Vous pouvez commencer par le haut et il vous donne la structure générale de formulaire. Ensuite, il vous donne les différents éléments qui vont à l'intérieur de celui-ci, les types d'entrée. Vous pouvez le voir et je vais les expliquer et comment sa syntaxe fonctionne. Pas dans mon joli accent Qui, juste écrit en texte clair, mais nous ne pouvons pas passer en revue chacun d'entre eux, mais vous avez l'idée de la plupart de cela. Des choses comme les noms, les valeurs, ID, sont toutes importantes. On a travaillé sur les étiquettes. Je pense que vous en avez assez maintenant pour partir et être en mesure d' implémenter tous ces autres types d'entrée. C' est tout pour les formulaires. Nous allons entrer dans le style des formes, parce qu'il ya la forme est hideuse. Regarde notre formulaire. Où est-il ? Trouvez-les. Ils sont tous pareils. Pas belle. Nous devons les coiffer et rendre la partie forme un peu plus agréable. Je te vois dans la prochaine vidéo. On va le faire. 78. Comment styliser les zones de texte et les cases à cocher d'un formulaire dans un site web HTML: Bonjour, là. Fait amusant, conception Web vous rend plus belle. Totalement le fait. Cela ne fonctionne pas vraiment pour moi personnellement, mais cela fonctionne définitivement pour ce formulaire. Forme moche, belle forme. la même forme va juste changer le CSS. Il y a un ciblage amusant que nous devons faire pour nous attacher à ces gars et les coiffer. Nous allons mettre un peu d'espacement entre les choses, des étiquettes avec des espaces. Nous allons rendre notre bouton un peu plus joli. Nous allons mettre à jour l' exemple de texte ici. Allons mieux regarder. Nous commencerons par les zones de texte ici, le texte de saisie. Comment s'appelle-t-il ? C'est le début de ma forme, donc nous allons commencer toutes les choses à l'intérieur de tout ça jusqu'à. Il devient assez gros. Voici le formulaire. C'est ma première, pas l'étiquette, nous allons parler du texte d'entrée. Pour ce faire dans notre CSS, nous devons ajouter une syntaxe spéciale. C'est une entrée, mais vous devez ensuite mettre entre crochets, pas entre crochets, et non entre crochets. Vous décidez de quel type il s'agit et, dans notre cas, c'est le type de texte. Vous pouvez le voir ici. Fondamentalement, nous ne faisons que taper ceci à l'entrée de ces deux-là, le type est égal au texte. Juste un format différent ici en CSS, puis nous ajoutons nos accolades bouclées, et c'est comme ça que nous le coiffons. Tout d'abord, je vais ajouter un peu de rembourrage à l'extérieur juste pour agrandir la zone de texte. Je veux qu'il soit 12 en haut et en bas et j'en aurai 20 et [RIRES] en haut et en bas, à gauche et à droite. Gardez-le. Jetons un petit coup d'oeil, et voilà, c'est celui-là. Maintenant, vous vous dites : « Je dois aussi le faire parce que celui-ci a un nom légèrement différent. » Il y a une entrée de type e-mail. Nous pourrions simplement copier cela et insérer une virgule. Je vais faire ces deux choses. Je dois juste m'assurer que celui-ci est un e-mail. Aussi, faites de la zone textarea pendant que nous sommes ici. Maintenant, ce n'est pas tout à fait la même chose. Il est structuré différemment. N'oubliez pas que ces types d'entrée étaient différents de cette largeur que textarea, qui n' est que sa propre balise. La même chose se passe ici. Nous ne faisons que textarea et c'est là. Que devons-nous faire ? Je veux styler la zone de texte. Pour jeter un petit coup d'oeil. air bien, j'ai eu mon rembourrage. Ça va être plus agréable. Vous pouvez donner des largeurs à ces boîtes. Tous ces types pourraient avoir une largeur de, vous pourriez utiliser des pourcentages ou des pixels, disons 40 %. On y va. Ils représentent tous 40 % de l'espace disponible. Les textes qui s'y trouvent. Il est assez petit et c'est police erronée. Nous pouvons également le faire. Nous les avons ciblés. Nous allons parler de la famille de polices, et nous utiliserons celle que nous avons déjà utilisée. Qu'est-ce que nous utilisons ? Nous utilisons Roboto, on ne le préremplit pas, je vais le voler. Le corps est Roboto. Merci beaucoup. Jetons un coup d'œil. Maintenant, Roboto a juste besoin d'être un peu plus grand, de taille de police. Regardons simplement 1rem, voyons à quoi ça ressemble. C'est la même chose que les autres. En fait, je pourrais faire ça. Est-ce que je le rends un peu plus petit ? J'ai l'impression que si c'est le cas, c'est bien en tant que designer d'avoir cela comme un peu de hiérarchie gros texte est le plus important. C'est la prochaine chose, puis ces gars abandonnent une autre taille de police. Mais les formes sont notoirement problématiques pour les personnes malvoyantes. Je le rends plus petit et c'est assez gris clair, nous faisons face à certains problèmes d'accessibilité. C'est ce que nous avons. L'une des choses qui pourrait vous rendre fou c'est que c'est dans la même ligne que celle-ci. C'est à vous de choisir. Il y a deux façons de résoudre le problème. Nous utilisons cet emballage, je pourrais dire que l'étiquette pourrait être dans son propre emballage. Nous allons le faire ensemble. Juste pour vous montrer les différentes manières car il y a des moments différents où vous en avez besoin. Cette étiquette peut juste sortir de cet emballage. Il y a là et il y a le sien. Vous montez ici. Je vais les envelopper dans mon, comment on appelle ça ? C'est ce qu'on appelle le wrapper d'entrée. Copiez-le là. Il faut d' abord envelopper l' abréviation, puis l'insérer. Maintenant, il est sur sa propre ligne. C'est sur le deuxième. Nous sommes soudainement désordonnés en termes de HTML. C'est notre façon de faire. Je vais juste vous montrer une autre façon. Ce que nous pourrions faire, mais cela ne fonctionnera probablement pas, c'est que nous pourrions attaquer ces étiquettes. Nous pourrions dire  : « Label, j'aimerais que vous soyez sur sa propre ligne. » C'est comme si je posais un quiz. Faites une pause après avoir posé la question et voyez si vous pouvez le résoudre. Je veux être sur sa propre ligne, pour le moment, c'est en ligne avec ce type. Comment pourrais-je les amener à se lancer dans sa propre ligne ? Donnez-y un coup de pouce. Si vous n'en avez aucune idée. N'oubliez pas que je vais l'afficher. Par défaut, il est en ligne, on pourrait dire bloc d'affichage. Toutes les étiquettes sont affichées en bloc. Cela va marcher, mais vous arrivez ici et vous dites : « En fait, je voulais ces gars à côté », pas tout à fait ce que je voulais. Ce que je pourrais faire, c'est que je pourrais dire, je vais laisser ça là, mais au lieu d'utiliser l' étiquette, je vais créer la mienne. Nous allons dire « saut de ligne ». Je vais l'utiliser et l'appliquer en tant que classe aux étiquettes spécifiquement. Celle-ci juste avant le petit marquage, je vais dire classe de saut de ligne. Un petit regard. Ce type a sa propre ligne. Ce que je pourrais dire, c'est qu'il a un saut de ligne avec une marge au bas de 20 pixels. Trop. Disons 10 pixels. Oui, ça marche pour moi. Assurez-vous de le fermer. L'autre chose que je pourrais faire est juste meilleure, je pense qu'avec plus d' espacement entre eux, et il faut probablement un peu d' espace après cette balise p. Nous allons examiner cela dans une seconde, mais faisons celui-ci. Je peux réutiliser celui-ci et parce que je l'ai gardé raisonnablement générique. Je pourrais utiliser newline sur l'ensemble de mon site Web, n'est pas nécessaire pour ce formulaire particulier. Je peux vous dire que je le veux aussi par e-mail. Avant que cette petite étiquette ne se ferme, vous allez avoir une classe de saut de ligne. Quelle est la prochaine étape ? pourrais centrer plus de labo, il y a quelques autres styles que je veux faire. Quarante pour cent est-il assez grand ? Vous pouvez le faire à 100 %. Où est-il ? Code VS ? Nous avons mis en place une largeur, tous ces champs pour avoir une largeur de, voilà. Ils passent à travers et c'est 100  % plus le rembourrage. N'oubliez pas que nous en avons ajouté 20 de chaque côté ou 30. Nous avons ajouté cela plus les 100 %. Il finit par aller trop loin. Un autre quiz pop. Comment pouvons-nous l'obtenir ? On pourrait juste arrêter de le détourner. Nous pourrions moins. Je peux décoller, on peut en faire 97 pour cent ou le simuler. N'oubliez pas qu'il y avait une propriété qui l'a fait par magie pour nous. Il supprime la taille globale et réduit les marges et le rembourrage. avais un nom bizarre, je vais le présenter à nouveau. Vous souvenez-vous ? Suspensez-le, réfléchissez, faites même un test. C'est vraiment difficile à retenir. J'oublie toujours que ça s'appelle la box-size, va border-box. J'espère qu'il fera le travail pour nous et voilà. Coupé en tranches du rembourrage. C'est bien, j'ai besoin d' ajouter une étiquette ici, ce que je n'ai pas encore fait, c'est bon. Une des choses que je veux faire. Tout ça semble bien. Nous allons faire quelques trucs de police dans une seconde, mais l'espacement entre ces deux-là, je suis content qu'ils soient sur leur propre ligne. Mettons-les un peu écartés. On pourrait tricher. Mon cerveau paresseux instantané dit tricher. Dans ce cours, nous sommes comme si nous ne devrions pas vous montrer comment tricher, mais je vais vous montrer le tricheur parce que vous allez le rencontrer. Une autre personne paresseuse le fera et vous les tutorerez. Vous direz : « Je n'arrive pas à croire qu'ils aient fait ça. » Vous mettez une esperluette et vous mettez un espace incassable, un point-virgule. Nous savons que si nous mettons des espaces, je le supprimerai. Si je le mets dans un espace comme celui-ci il est ignoré par le code. Il ne vous donne pas d' espaces qu'il renvoie. C'est toujours la même chose, on l' annule, on l'annule même. Je pourrais passer de l'espace incassable et je peux coller quelques-uns d'entre eux, et ça va pousser à travers. Le seul problème, c'est que vous le faites dans le HTML et les styles c'est méchant, mais cela fonctionne. [RIRES] Je l'ai mis là-dedans parce que mon cerveau m'a dit  : « C'est juste mieux. » Ensuite, j'ai pensé que je vais vous le montrer parce que vous allez rencontrer nos sites Web que les gens l'ont fait. paresseux comme moi, le font pour l'espacement. Nous devrions le faire en code. Dans ce cas, nous allons créer une nouvelle classe. J'ai quelques cours d'aide que j'utilise. Je vais appeler ça très générique. C'est ce qu' on appelle la marge. Je veux une marge à droite ou à gauche ? Je n'en suis même pas sûr. Je veux une marge, je vais l' appliquer sur l'étiquette. Marge à droite pour passer à travers. Ça va s' appeler Margin-right. Je vais l'appeler comme ça parce que je vais en faire quelques-uns. Celui-là va être, comme vous pouvez l'imaginer, une marge juste. Je vais mettre 20 pixels, juste voir ce que c'est. Je vais l'utiliser parce que je ne fais pas confiance mon orthographe ou à ma dactylographie du moins. Copiez ça et je vais aller ici et l' appliquer à cette étiquette. Juste avant qu'il ne se termine, je vais dire que vous avez une classe de celle-ci. Lorsque vous copiez et collez, veillez à ne pas saisir l'arrêt complet car l'arrêt complet n'est pas nécessaire ici. Vous le laissez pour y jeter un petit coup d'œil, n'êtes pas apparu, ça ne fonctionne pas. Parfois, il peut apparaître dans le code HTML. Quoi qu'il en soit, il y a ma petite classe là-bas, j'ai ajouté ciblé. Si vous voulez cibler, disons déjà des événements, vous disposez de nombreux boutons radio. Vous voulez dire éloigner l' espacement d'ici. Souvenez-vous de l'entrée, puis il s'agit de crochets. Ensuite, vous déterminez le type que vous essayez de cibler. Nous allons faire les radios en ce moment en tant que radio de type. C'est ainsi que vous ciblez ces camarades. Ensuite, je vais dire que je veux un peu de marge à droite aussi, à ma droite. Vous pouvez voir que vous pouvez devenir vraiment paresseux avec les aides. Il suffit de taper Mar pour le rapprocher , puis j'ai commencé à taper r et c'est tout ce dont j'avais besoin. On s'en est assez rapprochés. Je veux peut-être 10 pixels à droite. Juste pour les ouvrir un peu parce que nous n'avions pas déjà une forme simple. Vous avez peut-être une forme géante. La dernière chose que nous allons faire est de coiffer ce bouton anti-feu. Notre bouton Soumettre. Il doit s'agir de courrier, et non de mail2. Je n'ai pas de courrier. Bouton Soumettre. Vous pouvez maintenant commencer à styliser le type d'entrée soumis ici, cela fonctionnerait. On ne va pas être paresseux. Nous allons faire preuve de débrouillards. Nous allons ajouter une classe de s'appelle-t-il mybutton ? C'est il y a un petit moment maintenant, je ne m'en souviens plus. Vous y allez. Maintenant, vous remarquerez que ce n'est pas exactement comme le bouton que nous avions sur notre page d'accueil. C'est très similaire. Nous sommes proches, mais il y a certains styles que nous allons devoir désactiver en particulier pour ce bouton. Pour moi, c'est assez proche. Mais vous pouvez créer un autre style et commencer à l'appliquer. Mais le bouton Soumettre a ce contour bizarre, il va falloir désactiver et les coins arrondis que vous devrez désactiver. Vous pouvez créer une autre classe. Commencez par mybutton, puis ajoutez des styles de bordure nulle, des coins arrondis de zéro. Je vais juste quitter le mien. J'ai besoin d'un peu d'espace en dessous. Ce que je pourrais faire dans la forme en général, j'ai besoin de quelques trucs en haut et en bas. Je pourrais juste coiffer le formulaire. Je pourrais dire formulaire s'il vous plaît, pouvez-vous avoir une certaine marge ? Nous utiliserons la résolution maximale, nous saisirons la marge et nous utiliserons un raccourci. haut et le bas seront de 40 pixels et la gauche et droite seront à zéro. Vous voyez comment ça se passe ? Un peu du haut, un peu du bas. Je suis assez content de ça. Vous êtes heureux ? Je suis content. Nous avons un formulaire. Il me manque une étiquette ? C'est bon qu'on l'ait coiffé. Nous avons un menu déroulant sucré. Vous pouvez également le coiffer. Encore une fois, saisissez simplement. En fait, c'est différent qu'on appelle select, pas une entrée. Il ne s'agira que de formulaires. Nous venons de gratter le service en termes de formes. Nous avons fait un petit piratage pour certains PHP pour nous envoyer un e-mail. Mais il y en a beaucoup plus comme un lapin Warren de toutes formes. Mais j'espère que c'est un bon aperçu. Nous allons laisser les formulaires là pour l'instant et je vous verrai dans la prochaine vidéo. 79. Que signifie « conception de sites Web réactifs »" ?: Hé, mon pote. Cette vidéo est le début de notre prochain projet. C' est le projet 3. Nous allons construire un site de portefeuille très rapide et très simple et la grande chose pour celui-ci sera à propos de ce qu'on appelle le design responsive, et nous en parlerons dans une seconde. Le thème principal de notre premier était, c'était que nous commencions tout juste. C' était très simple. Je l'ai rendu très simple pour qu'on puisse juste obtenir les bases. Ensuite, nous avons appris une vraie tonne dans ce deuxième projet. Nous avons appris beaucoup de choses et le thème principal de ce premier était l'introduction. Le second était vraiment, le gros morceau de celui-ci était Flexbox, donc vous habituer à cela et nous jetons dans tant de parties différentes, ce genre de subtilité de fondations, HTML et CSS. Ce prochain projet sera au moins axé sur la réactivité. Qu' est-ce que cela signifie d'être un design réactif ? Tout à fait littéralement, cela signifie que votre site Web va répondre à différentes tailles d'appareil. Sur un écran de bureau, il va ressembler à ceci, mais quand il est chargé sur une tablette, il va faire le meilleur usage de l'écran immobilier. Oui, c'est comme ça que nous utilisons. Un écran immobilier. C' est probablement mieux pour une tablette, portrait et les changements sont que nous allons passer de trois à travers et trois vers le bas à celui-ci ici, qui est deux à travers et quatre vers le bas. Vous remarquerez que nous en manquons un parce qu'il y avait des nombres inégaux là-bas. Nous allons en éteindre un pour utiliser au mieux l'écran. L' immobilier le fera également. C'est à propos de toi qui attends. Vous dites : « Comment se fait-il qu'on n'ait pas encore fait le grand menu ? » L' image suivante arrive dans ce morceau de vidéo, Project 3, un peu plus tard. Quand nous allons concevoir celui-ci pour mon [inaudible] et qu'il va juste aller dans un flux d'un va retourner le gars sur lequel nous avons éteint, nous en avons neuf. Encore une fois, il va le marquer à l'écran. C' est un design réactif. Laisse-moi te montrer un que je m'entraîne. Regardons mon site web. Bringyourownlaptop dot com, voici à quoi il ressemble sur un écran géant. J' ai beaucoup d'espace pour jouer avec pour que je puisse avoir plein de ces petites vignettes, je les appelle cartes. Puis le fond ici beaucoup de témoignages. Mais quand il descend à une taille plus petite, allons-y. Voyez ce qui se passe, donc il y a eu une pause là-bas pour vérifier ces cartes. Peut s'adapter à six sur un grand écran. Mais quand vous descendez au plus petit écran, seulement quatre. Ça ne s'est pas amélioré, trois, deux. Finalement, si vous allez sur mobile, je ne peux pas le faire glisser sur mobile. J' ai besoin d'un clic droit, je dois inspecter le haut ici et il va, vous voyez, il est notre parole peut aller chercher iPhone 6. Vous voyez, je l'ai coupé en une des petites cartes que vous pouvez parcourir et un des petits témoignages ici. Nous avons changé beaucoup de taille de police juste pour tirer le meilleur parti de notre immobilier d'écran. Fermez-le. C'est la conception réactive juste des changements. Maintenant, pour que cela se produise, les deux choses clés que nous allons apprendre dans cette petite section est quelque chose appelé une requête média et nous allons utiliser à nouveau Flexbox et ajouter un peu plus à notre connaissance de Flexbox et dans une moindre mesure, des images réactives qui ajustent les tailles, mais vraiment les plus grandes sont les requêtes multimédia, puis Flexbox. Ajuster la structure vraiment, afin que nous sachions ce qu'est Flexbox et requête média est juste avec le site, demande au navigateur de dire quelle taille êtes-vous ? Parce qu'il doit demander chaque fois que vous avez besoin de dire : « Et vous ? » Il dit, disons, 700 pixels à travers et lance ensuite quelques CSS en fonction de sa largeur et c'est ce qu'on appelle une requête multimédia. Si ce n'était pas une excellente explication, c'est un peu plus facile juste de le faire, et c'est ce que nous allons faire sauter au début de ce tutoriel, je dois faire un peu d'image. C'est coupé dans celui-là. [ inaudible], superbe design web. Bon, donc on va construire celui-là. Ce beau site de portefeuille pour concepteur de logo. Quels sont d'autres trucs cool que vous pouvez voir des répétitions de fond ? Vraiment, il s'agit de régler les différentes tailles d'appareil. J' ai l'impression que je suis juste en train de marcher maintenant. J' espère que tu es excité. Je suis excité. C'est agréable d'entrer dans un nouveau site Web. J' en ai marre du rose. Entrons et construisons un site Web de portefeuille de logos. 80. Comment modifier la couleur de la mise en page d'un site web à différentes tailles à l'aide de media queries ?: Mettons les choses en place d'abord. Nous devons ranger notre dernier projet. Nous ne faisons plus le projet 2, nous faisons le projet 3. Je vais ouvrir un fichier, je vais faire un dossier sur mon bureau, Project 3. Cliquez sur Ouvrir, parfait. C'est une façon de commencer. Nous allons créer, je vais fermer Bienvenue, et je fermerai le contour. Je vais faire deux fichiers, nouveau fichier, enregistrer celui-ci. Tu t'habitues à ça. Tu es genre, je sais comment faire ça. Allons dans Fichier, Enregistrer, créons un autre, fichier Nouveau, enregistrez-le. Appelons-le style.css. Connectez les deux afin d'améliorer, mettre le point d'exclamation , retourner, sous le titre, nous allons écrire un lien. style CSS correspond au même nom et faites glisser ceci ici, prêt à partir. Sauf qu'on n'a pas changé le titre, je sais qu'on doit le faire. Faisons ça très vite. D'accord. Voilà mon titre, tout est prêt à rouler. Sauf Affichage, Wrap Word. Ça a l'air plus sympa. La première chose est que nous devons ajouter quelque chose au style. Dans votre balise body ici, je vais ajouter juste un h1 simple, et à l'intérieur de ce h1 juste ajouter un peu de texte. Ici, on va le coiffer. Nous allons styler notre h1 et nous allons dire que vous êtes une couleur vraiment simple de, trouver une couleur folle, des œuvres vert citron, point-virgule. Nous avons fait ce test de chargement lates dans le navigateur. Ce qui finit par se passer normalement, c'est que cela n'apparaît pas si vous démarrez un nouveau projet, vous pouvez simplement refaire cela en cliquant avec le bouton droit n'importe où dans votre HTML, et ouvrir avec le serveur live, fait la même chose sauf, où est le mien ? Là où il est parti, il est là. Cool. J'ai un gros morceau de h1 vert citron. Ce que je voudrais faire maintenant est de mettre en place un déclencheur qui dit si le navigateur est à peu près si grand, changer la couleur. Pour ce faire, vous ajoutez quelque chose appelé une requête multimédia. Donc, une requête multimédia va au moins dans votre CSS et cela ressemble à ceci. C' est cette requête multimédia, maintenant la chose étrange à propos de VS Code est normalement qu'il est vraiment utile de suggérer beaucoup de code. Je compte tellement sur elle maintenant. Il ne le fait pas pour les requêtes de médias à quelque chose qui ne figure pas dans la liste des fonctionnalités pour le moment. Espérons que le temps que vous arriverez ici, il a été mis à jour et a beaucoup de choses utiles. Parce que la syntaxe est un peu bizarre, mais ce n'est pas quelque chose comme nous l'avons fait avant. Cette chose le déclenche, le média, et ensuite il cherche une largeur maximale. Ce que nous allons utiliser deux-points et ensuite une taille. Il est à la recherche d'une largeur maximale de 768 pixels. C' est juste une taille de tablette très courante, tablette en portrait. Ensuite, mettez-le dans des accolades et mettez-le sur l'écoute, c'est tout. Il va dire, d'accord, je regarde et vérifie la taille du navigateur de zéro jusqu'à une largeur maximale de cela. Maintenant, nous choisissons 768, vous pouvez utiliser n'importe quelle taille que vous voulez. Quoi que vous ciblez, si vous regardez cela dans 10 ans, il n' y a probablement aucune chance qu'une tablette soit encore de cette taille. Ce n'est probablement même pas des tablettes, des voitures volantes espérons-le. De toute façon. Ce que nous allons dire est une fois que cela est déclenché, donc fondamentalement c'est quand tout cela est apparié, c'est de 0 à 768 déclencher tout le CSS ici. Le CSS que nous allons écrire est un h1, je vais colorer, nous allons choisir une couleur, orange foncé. Regarde ça. Faisons-lui un test d'abord. Vérifions notre navigateur. Il y a ça, il est vert, mais s'il tombe en dessous de 768, vous êtes prêt ? Cool. Il y a toutes les requêtes des médias. C' est la véritable structure laquelle nous allons construire le reste de notre site web responsive. Nous allons allumer et éteindre les choses, pelle les tailles autour, désactiver la navigation, le tout basé sur ces requêtes média. Si le vôtre fonctionne, soyez très fier de vous. Quand j'ai travaillé ça pour la première fois, j'étais comme de la fumée sainte, regarde-moi. Allons dans quelques choses. La première est, ajoutons quelques commentaires pour que nous sachions ce que nous faisons, et nous débarrassons de tous vos retours et autres choses. J' allais utiliser une bande passante, n'utilisons pas de bande passante. Tout juste au-dessus de cette requête multimédia, je vais ajouter quelques commentaires. Rappelez-vous qu'il est barre oblique avant de commande sur un Mac, Contrôle barre oblique avant sur un PC vous donne le commentaire, et cela va être ma vue tablette. Maintenant une chose que vous ne faites pas ou assurez-vous que vous avez si vous étiez comme, toujours pas de travail, pourquoi ça ne marche pas ? Vous devez vous assurer que la syntaxe est bien, parfois mes étudiants, ils taperont avec au lieu de la largeur. Il a besoin d'avoir un deux-points là, la taille, vous avez besoin de doubles crochets ainsi, pouvez-vous voir des accolades là-bas, qui se terminent là. Ce petit h1 a ses propres petits accolades. Tu pourrais juste faire ça. Eh bien, mes retours pourraient être juste, vous dépouiller. Ça a l'air un peu plus gentil comme ça. Ça marche toujours. Cool. Nous allons le faire, nous allons faire la vue mobile ensuite. Si c'est mobile et que c'est une tablette, qu'est-ce que ça fait ? Ceci est considéré comme la vision globale. Wish va obtenir que je frappe, comme celui-là. Quoi qu'il en soit, cela s'appelle la vue globale. Dans notre cas, aka la vue de bureau. Nous parlerons d'abord du mobile par rapport au bureau d'abord dans un moment, mais tout ici est comme les trucs génériques. Sauf si c'est le cas, c'était plus petit. Sept soixante huit ou moins, faites ça. Même chose pour un mobile, trichons, et appelons ça l'efficacité. Je vais le dire, mais au lieu de dire 768, nous allons utiliser un mobile vraiment commun en format portrait. Quatre cents, c'est ce que j'utilise, beaucoup de gens utilisent 360, 320, 380, c'est élevé parce que les téléphones mobiles sont tous des tailles très différentes. J' utilise 400, dans cette vidéo cependant, nous ne pouvons pas utiliser 400 à cause de ce problème. Je peux faire glisser mon navigateur plus court, assez maigre pour être 400 pixels. Je ne voulais plus me laisser. , il faisait le tour ici, mais le nouveau courant ne le fera pas. tien pourrait, tu vas peut-être bien, mais pour le moment on doit juste y aller, j'allais juste faire semblant qu'il soit 500, qu'on puisse tester ici localement. L' autre chose est que je vais vous montrer dans une vidéo à venir dans une seconde, comment tester sur tous les appareils mobiles, mais pour le moment, juste faire 500. Mais pouvez-vous colorier ? Quelque chose qui contraste tout le reste. Qu' est-ce qu'on a ? Mettons en noir, voilà. C'est très contrasté. Êtes-vous prêt à faire notre impressionnance réactive ? C' est déjà trop petit. Fais comme si tu n'avais pas vu ça. C' est un vert, orange et noir. C' est une configuration vraiment simple de celui-ci, nous allons activer et désactiver les tags div, nous allons jouer avec la taille, mais j'espère que vous êtes fier de votre petite configuration cool. Vraiment simple, pas terriblement compliqué du côté, et nous faisons trois requêtes médiatiques, c'est à vous de décider. Quand je suis paresseux et que je fais juste un site très rapidement, je vais juste faire ces deux-là. Je dirai, je ne me soucie pas de tablette, je vais juste faire global et mobile. C' est mauvais, mal pratiqué. Bonne pratique si vous travaillez dans une très grande entreprise en tant que développeur ou concepteur, et que vous pourriez être amené à faire cinq ou sept tailles différentes pour tirer le meilleur parti de chaque vue. Mais si vous faites un site web rapide pour un ami qui vous paie en cinq ans, il obtient juste un mobile et un global et je ne fais rien d'autre. Une dernière chose avant que je parte, c'est ça, va vraiment avoir besoin de ça. Cette chose est meta nom, viewport. Cela arrive pour nous par défaut lorsque nous utilisons ce point d'exclamation fantaisie, puis revenons. Il y a d'autres façons de faire des raccourcis d'image. Vous pouvez faire html5 et appuyez sur Tab. Est-ce que ça marche là-dedans ? Non, html:5, cela fera la même chose et il obtient la fenêtre à un peu différente. Non pas que je puisse voir quoi. Mais parfois cette fenêtre n'est pas mise par défaut où vous pourriez faire dans le tutoriel de quelqu'un d'autre, je défais donc ça revient, nous voilà. Assurez-vous juste que c'est là dedans. Nous devons simplement dire au navigateur quelle est la vue initiale, sorte que toute cette réactivité fonctionnera. D' accord, c'est tout. Je veux l'expliquer juste une fois de plus, donc le flux CSS va. Tout le monde est en H1. En fait, faisons un dernier petit peu juste pour le ramener à la maison. Disons que h1 va avoir une famille de polices de Courier New. Ce qui finit par se passer est, commence ici ça les gars, h1 votre couleur de vert citron, votre police de Courier arrive ici et dit, Hey, alors disons que nous allons déplacer le navigateur vers le bas à html5. C' est le remonter d'ici. Je vais laisser ça dans la classe parce que ton genre, Hey, est-ce un html5 ? Éteignez-le, allumez-le à nouveau. Hé, ça marche. Nous disons, être vert et Courrier à moins que les navigateurs changent. Ce qui se passe est, il arrive ici et dit, le navigateur est inférieur à 768, donc il dit, je vous contredis, donc je vais vous remplacer parce que je suis plus spécifique et je suis plus loin dans le CSS. Mais ça arrive à h1 et ça dit, D'accord, une famille de polices, il n'y a rien de contredire ici, donc ça flotte à travers elle. On n'a pas été touché parce qu'il n'y a rien d'autre ici qui dit font-family, ça arrive ici et dit, Hey, devrais-je être une police différente ici ? Ça dit, non, je ne vais rien te dire. S' il va au sommet, il va flotter tout le chemin. Si j'ai la famille de polices ici, ça fera quelque chose de très différent. besoin de poser mon support, presser là-dedans. Donc, l'avoir fait ici est très différent. Ça va commencer, et ça va seulement se déclencher quand est-ce que c'est cette taille ? Regardons un peu. Il arrive ici et il n'a pas encore été activé, parce que ce déclencheur, cette requête multimédia n'a pas été activée, même avec ici, mais ici, vous pouvez faire des changements vraiment importants. Si vous voulez qu'il soit global sur tout sauf indication contraire, faites-le dans ce segment supérieur ici. Il n'a pas besoin d'une requête multimédia, je viens d'ajouter ce bit pour le rendre un peu plus facile à expliquer. Bon, comment allons-nous ? Requêtes des médias ? Je suis heureuse, tu es heureuse. Si la syntaxe ne fonctionne pas, vérifiez les fichiers remplis, ils seront dans les fichiers d'exercice, et vérifiez simplement le nom de cette vidéo. Il y aura un peu de code correspondant là-dedans, qui ressemble exactement à ceci. D' accord, sur la prochaine vidéo. 81. Comment tester votre site web sur une tablette ou un téléphone portable à partir de Visual Studio Code: D' accord. On doit tester cette chose. Pendant que nous travaillons, souvent, il est juste plus facile de tester dans un navigateur, où est-il, comme nous l'avons fait, mais nous avons besoin d'un faux un peu plus. Nous allons émuler un iPhone, dans la tablette et le bureau via Chrome, nous allons le faire dans une seconde. Maintenant, une autre façon de le faire est en fait juste d'avoir comme un nom de domaine jetable et un compte d'hébergement. Allez sur Blue Host, utilisez ce même compte que vous vous asseyez par un nouveau nom de domaine appelé site de test de Dan, quelque chose plutôt. Quelque chose de professionnel si vous voulez le montrer à des clients potentiels. Blue host divisera votre compte d'hébergement en deux parties afin que vous puissiez l'utiliser. Vous obtiendrez différents détails FTP de connexion, parlez-leur à ce sujet. Dites-leur ce que vous voulez faire, deux noms de domaine, même hébergement, et ensuite vous le téléchargez comme nous l'avons fait plus tôt dans ce cours. Nous le téléchargeons simplement en utilisant leur petit FTP. Vous aurez différents détails pour cela, alors vous pouvez simplement le tester sur n'importe quoi. Vous pouvez simplement charger ce site Web sur votre téléphone ou votre iPad, votre nouvel iPad, et il suffit de le vérifier de cette façon. Une autre façon, la façon la plus officielle est d'utiliser un service de test local. Nous ne allons pas voir comment le mettre en place dans ce cours, c'est un peu hors de portée. Si vous êtes sur Mac, il est très courant d'utiliser MAMP. C' est Microsoft Apache-MySQL et PHP. J' ai lu ça d'en bas. MAMP, c'est déjà un mot. Il y a XAMPP, il y a WAMP. Sur un Mac MAMP serait le plus commun sur un PC. Est-ce le WAMP ou XAMPP, probablement XAMPP. Fondamentalement, c'est un logiciel qui est installé sur votre ordinateur et il vous permet de simuler un serveur sur votre machine comme si c'était dit, hôte bleu, mais personne d'autre dans le monde ne peut le voir pour que vous puissiez le garder agréable et proche. Mais il y avait un peu de tracas pour le mettre en place. Mais en termes de test, plupart des gens vont juste tester localement dans le navigateur et émuler alors que [inaudible] et faire seulement plus de tests officiels un peu plus tard. Au moment où nous faisions cela, nous faisons l'ancienne option de glissement et cela fonctionne. Je fais semblant d'être un ordinateur de bureau, je fais vaguement semblant sur ma tablette et maintenant je suis presque un téléphone mobile. Pour contourner cela ou l'émuler correctement est un clic droit n'importe où ou engager pour inspecter ou aller à View Developer et aller dans Outils de développement ou inspecter les éléments, ou l'autre ou ceux-ci obtenir. Ces deux, Ce que nous cherchons est quelque chose comme ça donc cette petite barre de diapositives probablement tout le chemin ici pour vous. Je ne suis pas trop sûr, mais vous pourriez avoir à faire, c'est que je ne peux pas le ramener à zéro absolu. J' ai essayé de le réinitialiser pour ce cours, mais je ne suis pas exactement sûr de ce qu'est la valeur par défaut. en haut ici, définissez un responsive si ce n'est pas déjà et vous pouvez faire glisser cette petite ligne double ici et vous pouvez voir que je peux faire glisser un passé, je peux faire glisser un minuscule minuscule donc je n'ai plus à utiliser ce 500. Je peux en fait l'obtenir à quelque chose d'un peu mieux pour tester comme plein 400. La chose cool est que vous pouvez allumer qui pourrait être utile est ici, voir ces petits points, ceux-ci sont tous utiles. activons « Montrez-moi les requêtes ». Il me montre mes requêtes média, ce sont celles que j'ai ajoutées. Vous pouvez voir si je [inaudible] au-dessus d'eux, c'est le 768, c'est 400. Vous pouvez le faire glisser au moins, vous savez exactement quand cette chose est déclenchée. Je trouve cela vraiment utile quand j'ai ouvert quelqu'un d'autre site Web et vous aimez combien de requêtes médias là-bas et vous pouvez les voir toutes. Vous pouvez cliquer sur eux aussi, pour le sauter, pour avoir un peu de regard à travers les différentes options. Quelle est l'utilité des choses ? Avoir un coup d'oeil à cela, il ressemble à un iPad Pro. Il zoome un peu cela parce qu'il veut vous montrer tout, mais c' est la bonne largeur par rapport à l'extérieur, 400, 600. Donc iPad Pro est d'environ 1000 pixels à travers 1024. Ce qu'on a d'autre, regardons, ils ne les ont pas tous ici. Vous pouvez les éditer et ajouter le vôtre. Je sais que c'est assez vieux, il y a tout le nouvel iPhone, mais pas les nouveaux pixels et pas la nouvelle galaxie, alors allons trouver X. Voici l'idée. Parce qu'il essaie de l'adapter à son échelle un peu pour que vous puissiez le garder à 100 %. Donc, vous n'êtes pas genre de ça, c'est ce que notre [inaudible] semble bizarre, zoomé sur 41 pour cent, vous pourriez dire en fait juste envie de le voir à la taille réelle sur mon iPad Pro. limitation, vous pourriez entrer dans ça. Si vous le mettez en bas dans mobile et appuyez sur reset maintenant ce qu'il va faire, c'est essayer imiter combien de temps cela prendrait sur une très mauvaise connexion Internet et c'est moi. Ou nous pouvons retourner notre iPad Pro autour. Que pouvons-nous faire d'autre ? Autres choses utiles, cadre de l'appareil. Ici, nous allons vraiment ressembler à, ils ont fait qu'ils ont, je ne sais même pas s'ils ont un cadre de l'appareil, où est-il montré, cadre de l'appareil, ne pas avoir pour l'iPad Pro, il est aller à l'iPhone 4. J' ai l'air d'avoir celle-là. Peut-être que je dois le rallumer et cacher le cadre de l'appareil. Cadre de l'appareil sûr. Ça marche chaque fois que je le fais. Il aura l'image sur un iPhone ou à l'extérieur. Zoom arrière, peut-être qu'ils ont besoin de zoomer un peu. Ça marchera pour toi, je te le promets. Ça marche peut-être une autre fois. Quoi d'autre ? Ce n'est pas si important, Il va juste ressembler à un iPhone. Vous pouvez faire des captures d'écran. Rapport de pixels, nous en parlerons plus tard. Un type d'appareil, je n'en ai pas besoin, c' est ça. Je suis juste en train de lire, vous savez comment faire ça. C' est la façon super facile d'imiter ce à quoi ça va ressembler et c'est ce que nous allons utiliser de plus en plus, surtout quand nous commençons à faire des choses comme le mobile. Maintenant, l'autre chose est que ça pourrait ne pas être exactement le même quand tu le fais. Vous le ferez peut-être à l'avenir avec les voitures volantes. Cela peut ne pas être aux bons endroits, mais il sera probablement allumé dans un endroit similaire, dans la vue et certains de ces boutons peuvent avoir changé et être mis à jour, mais le noyau de celui-ci sera là, vous pourriez décider à Google où tout est déplacé vers. Google aime bouger les choses. C' est tout pour cette vidéo. Passons à la prochaine. 82. Comment modifier la mise en page d'un site web réactif pour le mobile et le bureau ?: Hé là, dans cette vidéo, nous allons prendre nos compétences en matière de requêtes de nouveaux médias avec certaines de nos compétences flexbox passées. Pour ce faire, allez à partir de la vue Bureau où c'est trois cours, vous êtes prêt pour la tablette deux et le mobile un. Maintenant, c'est une bonne réactivité, mais nous commençons à changer la structure d' un site pour utiliser au mieux cet état médian de l'écran disponible. Sautons dans le code VS et travaillons comment le faire. Première étape, débarrassons-nous de ces trucs. Pas besoin du h1, pas besoin du style. Ensuite, laissera les requêtes des médias. Lorsque vous supprimez la requête h1 au média, ne supprimez pas les secondes crochets. Parce qu'il aura où le navigateur est assez intelligent et dit, « Wow je manque cela, mais je vais toujours travailler. Assurez-vous qu'on ne les laisse pas. On va ajouter un conteneur. Rappelez-vous les conteneurs, nous apprendrions où il semble qu'il devrait y avoir comme une balise HTML5 spécifiquement nommée comme un div et l'en-tête ne l'est pas, nous devons appeler une classe appelée conteneur. C' est là que tout va se passer. Donnons un style à ce conteneur. Nous allons faire tout ça dans le monde entier. On va dire « conteneur ». Je voudrais que tu le sois. Nous mettons une couleur d'arrière-plan et nous assurons d'abord qu'il apparaisse réellement la couleur d'arrière-plan. J' en ai marre de ces couleurs. Je vais choisir le mien en cliquant dessus et ensuite en traitant avec le sélecteur de couleurs. Couleur d'arrière-plan, nous allons prévisualiser et assurez-vous que cela fonctionne. Rien ne marche. Pourquoi pas ? Parce qu'il n'a pas de hauteur. Je le savais. Nous avons besoin d'une hauteur et nous ne allons pas utiliser comme hauteur normale et que nous allons utiliser min-height, en hauteur même nous allons jeter 500 pixels juste pour qu'il y ait quelques arrivages à elle. Là, il est là. Ce n'est pas le cas, il peut être n'importe quelle taille. En fait, je devrais probablement souvent arrêter de construire sachant qu'il apparaîtra à un moment donné, mais c'est la largeur pour les classes. Nous allons ajouter une largeur comme avant. Nous allons dire une largeur de 1 024 pixels de large. Maintenant, le problème avec cela, une largeur en soi comme ça est une taille absolue. Ça sera toujours 124. Je me fiche que tu sois un mobile ou une tablette. Ce qu'on va faire, c'est qu'on va dire que tu peux être un maximum à la hauteur parce que c'est décidé que j'aime. Oh, c'est la largeur. On y va. Avoir des problèmes informatiques. Une largeur max-va juste dire, aller jusqu'à cela mais pas plus loin, mais vous pouvez devenir plus petit parce que c'est la largeur maximale. La dernière chose qu'on fera, c'est qu'on le centrera. Tu te souviens de ce que c'était et que c'était margin-gauche et droite réglé sur auto ? On va utiliser notre raccourci. Nous allons faire la marge vers le haut et le bas va être zéro, mais la gauche et la droite, ça peut être automatique. C' est l'espace qui les sépare. Ça devrait marcher bien. C'est mon conteneur. Maintenant, à l'intérieur de ce conteneur, je vais ajouter un tas de ces blocs que vous avez vus là-dedans. Jusqu' à présent, on les appelait des cartes et des instances, des boîtes. Dans ce cas, nous allons commencer à les appeler cols, abrégé pour colonne. Pour aucune bonne raison, n'est de ne pas aimer une balise prédéfinie ici. C' est juste très commun de l'utiliser. Lorsque nous commençons à regarder les choses plus tard, quelque chose appelé bootstrap, ils utilisent le mot col comme une boîte au lieu du titre de la boîte ou de la carte. Nous avons aussi l'habitude de le faire. Je veux 10 d'entre eux et je veux à l'intérieur de ces boîtes que je veux h1. Je vais essayer de t'impressionner avec une image. Qu' est-ce qu'on veut ? On veut un col. A l'intérieur de ce col, le plus grand que le support et l'intérieur de celui-ci vont avoir un h1. Je vais te montrer une autre chose de fantaisie. Si vous mettez des accolades ici et dites boîte de cellule dedans, les accolades vont mettre à l'intérieur de ce h1 va mettre du texte en tant que texte ancien appelé boîte. C' est la moitié de ce que je veux. Les accolades et 10. C' est ce que je veux. Mais si je fais fois 10, ça ne va pas marcher parce que ça va me donner un col puis 10 h1. Souviens-toi, on l'a fait avant. Vous l'avez mis entre parenthèses. Le codage a aidé à essayer de mettre deux en eux. Tout ça pour fonctionner et vous êtes qui n'en valait pas la peine et ce n'était pas le cas. Je suppose que je vais vous habituer à cette syntaxe, vous montrant des choses utiles cool comme mettre dans des accolades bouclés. L' autre chose bizarre à ce sujet est que l'un de ceux-ci, ça me donne une belle structure, mais ça a l'air un peu plus agréable si je le fais sur le long chemin. Je vais faire col et on va utiliser la bonne affaire. Je vais juste le dupliquer. Ça semble plus facile, dans ce cas. Le col à l'intérieur est un h1 et ça va être une boîte. C'est ce que je voulais. Cool. Pour le dupliquer, maintenez la touche d'option du Mac et la touche Maj enfoncée, puis appuyez sur la flèche vers le bas. C' est l'option Maj flèche vers le bas. C'était pour un Mac. Si vous êtes sur un PC, c'est Alt, Maj flèche vers le bas et vous devriez compter. Je n'ai pas compté entre eux. Je vais leur ajouter une numérotation. Cela m'aidera et la façon fantaisie que je connais pour faire ça, sauf que je vais regarder que ça n'a pas bien fini. Laisse-moi prendre le bon numéro aussi. Il y avait juste flèche vers le bas et commencer à taper. On a un regard sur ce qu'on a. Un tas de boîtes. Maintenant, stylisons ces boîtes. Le col appelé, ici mon global, je vais dire point col. Tu vas être une couleur. Non, vous devez être une couleur d'arrière-plan. Couleur d'arrière-plan. Je vais choisir n'importe quelle couleur afin que je puisse cliquer dessus et choisir une couleur que j'aime. Cela n'a pas de véritable but d'eux. On y va. Choisissez une belle couleur dans. Nous stockons le col plusieurs regards, donnons-lui une largeur et une hauteur. Désolé, je vais tout d'abord. C' est juste parce que je ne lui ai pas donné de dimensions. Donnons-lui une hauteur minimale de, je ne sais pas, 200 pixels. Joli. Donnons-lui une largeur. Parce qu'ils prennent tout le truc, voyons si la largeur va le réparer. Au lieu de faire une largeur max-ou une min-width, nous pourrions faire des tailles absolues et arrêter de jouer avec max-width. Mais nous allons utiliser des pourcentages, ce qui est fondamentalement la même chose, parce que ce n'est pas une taille fixe. Ce que je veux dans ce cas, c'est, regardons notre marge. Il s'agit de la vue Bureau. Je veux que ce soit à propos de ça, donc trois à travers, et deux à travers et un à travers. J' ai une largeur de 100 %. Celle-ci aura 50 % de largeur, ça allait être 33.3. Je vais laisser un peu d'espacement entre eux, ça pourrait juste faire 50 pour cent de travers. Ecoute, ça ne marchera pas. La raison pour laquelle cela ne va pas fonctionner est, pourquoi sont-ils empilés les uns sur les autres et pas à côté eux-mêmes ou en ligne. Tu l'as eu. On pourrait dire que les colonnes sont affichées en ligne, et vous auriez tout à fait raison, bloc en ligne. Cela fonctionnerait, mais ce que nous allons utiliser est de retourner à notre Flexbox. Tu te souviens de ce qu'on pourrait faire avec Flexbox ? A propos de l'affichage, et nous allons utiliser Flex. Il va alimenter les choses pour nous. Oh, je suis allé à la mauvaise. Ce doit être le parent. Tu te souviens de ça alors ? Je ne peux pas tester pour toi. Faisons semblant que c'était un test. Vous l'appliquez au confinement, donc, il s'applique à tous les enfants, lequel de ces cols. Donc comme maintenant, ce genre de travail. Par défaut, il a pressé tous les 10 d'entre eux dans la même ligne, et il en a fait 100% du parent. Ce que j'aimerais faire est en fait faire flex wrap, et quel genre de wrap ? Juste la vieille pellicule ordinaire. Sauvez-le, génial. Le 30%, ils sont emballés. Ok, donc, 30, 30, 30, 30, on arrive à 90, laissant ici un écart. Donc quelques choses, en fait, avant d'y aller, enroulez à l'envers. Donc la boîte 10 est en haut, je n'utilise jamais ça, bouton il semblait. J' ai eu l'impression que je voulais partager ça là-bas. Ce que je veux faire, c'est mettre l'espacement. Nous pourrions jouer avec des marges, mais souvenez-vous de ce que nous avons appris plus tôt ? Nous pouvons justifier le contenu, et nous allons utiliser « Espace entre ». Ici, tu y vas. Tu le verras ici. Je devais vous le montrer avant, mais nous avions un fond blanc, donc l'espace autour est uniformément de chaque côté. Je ne veux même pas ça. Je veux toujours de l'espace entre les deux. Ajoutons un peu de rembourrage au fond d'entre eux. Donc, les appels, nous allons avoir un peu de rembourrage, marge inférieure de 40 pixels. D' accord, ça a l'air bien. La bonne chose à leur sujet, à cause du 30%, ils sont réactifs par eux-mêmes. Ils vont à une largeur maximale, mais ils sont autorisés à devenir plus petits. Le contenant devient plus petit, mais ils ne peuvent pas dépasser cela. Ça va marcher pour nous en ce moment. Vous pouvez concevoir pour un peu plus grand, et cela dépend de votre audience, mais vous pouvez concevoir un tout grand site Web pour les gens qui ne vont tout simplement jamais le voir. Ils peuvent ne pas être autant de personnes qui ont cette vue de bureau génial. D' accord, c'est tout pour ça. Maintenant, je suis prêt à les ajuster pour les différentes requêtes multimédias. Donc ici, je vais utiliser la même chose. Alors col, à nos accolades. Je vais dire, col, qu'allez-vous faire la largeur. Donc la largeur ici va être un pourcentage différent. Alors rappelez-vous 50% pour notre vue tablette, mais un peu moins pour cela. Donc peut-être 45%. Vous n'avez pas à répéter des choses, comme justifier, ou Flex wrap, car il est déjà appliqué globalement à tout. Alors regardons un peu. Bon, donc, utilisons notre bon fantaisie, faites un clic droit, inspectez. Allons montrer nos requêtes média, puis sur par défaut, show, show, show. Nous y sommes en bleu. Allons à cette plus grande taille. Il ne s'adapte pas. C' est à cause de ça. Je le lève à l'iPhone 4, et cela ne changera pas. Cliquez dessus pour répondre, et il va changer. Alors, lâche-toi. Grande vision, trois boîtes, allez à la petite. Ce n'est que 45. L'écart est grand au milieu là. Donc peut-être 47 est un meilleur pourcentage, mais vous comprenez l'idée. On l'a fait avec de vieux H1 avant. Maintenant, nous le faisons avec en fait la structure du site, qui est des équipes pour être plus ce que vous faites, et nous l'avons fait pour tablette. Tablette, ordinateur de bureau, tablette. Mobile, faisons-le ensuite. Alors regardons notre requête médiatique ici. Toujours toi. Mettons à 100%. Donc on n'a pas de lacunes, et ça va le combler probablement. Ici, tu y vas. Devenez un peu plus petit, plus grand. Trois, deux, un. Nous sommes bons. Très bien, et c'est le genre de très gros plats à emporter pour cette vidéo, c'est qu'on utilise exactement la même chose. Nous avons dû faire un peu de style pour que ça ressemble à un site web. Nous avons fait des boîtes, mais pour le faire avec la structure, tout ce que nous avons vraiment besoin de faire, c'est d'ajouter ces deux bits, vraiment, nous avons juste besoin de ces deux pour les mettre en ligne, puis de passer à la ligne suivante. Puis on vient de dire, à cette taille différente, que je veux changer ça. Je ne veux plus avoir 30% de largeur, ça va être 45. Donc, nous ne disons pas vraiment deux lignes, ou deux sur une rangée, nous faisons juste pour que cela arrive en lui donnant une taille qui ne permet que deux pour s'adapter. Très bien, quelques petites choses. Un que j'ai ignoré est fait ici sur mobile. Vous remarquerez que c'est toujours une ligne blanche autour de l'extérieur. C' est l'une des premières choses que je fais. Donc, par défaut, vous avez maintenant une valeur par défaut. Le H1 est noir, et c'est Times New Roman, et c'est beau, grand et audacieux. Même avec le corps. Le corps a une marge globale. Je ne sais même pas ce que c'est, mais je passe toujours, et je dis marge 2-0. Pour qu'il n'y ait pas de vue à l'extérieur. Je ne voulais pas ça pour aucun d'entre eux, et ça arrive par le haut, par les côtés, et pour le mobile, il l'obtient juste autour de l'extérieur. C' est sympa, et un peu rejoint, parce que sur mobile chaque pixel compte, donc, vous voulez obtenir autant de détails que vous pouvez dans cette largeur. On l'a fait ici, et on se bat avec les défauts. Donc, c'est une très bonne occasion de dire, en fait, je suis sur le point de construire quelques réinitialisations CSS moi-même. Que diriez-vous d'utiliser cette réinitialisation CSS que nous avons déjà ? On en a déjà un, tu te souviens ? Nous en avons un, donc, je vais supprimer ça. Donc ça va revenir. J' en ai un, rappelez-vous le [inaudible] Donc je vais juste copier, et coller ça, et utiliser ça. Donc je vais vous montrer, ce que je fais maintenant, c'est que je creuse dans mes fichiers pour un ancien dossier. Je vais entrer ici, et dire se souvenir du projet 2 sur mon bureau, il y avait cette réinitialisation CSS. Je vais le copier à partir de mon projet 3. Le mien est sur mon bureau, j'ai besoin de raccourcis pour accélérer les choses. Je vais le coller ici, et l'ajouter à mon CSS. C' est un lien, et un CSS. Si vous supprimez le texte ici, il devrait le suggérer, CSS reset. Je l'ai totalement mal fait, et vous êtes comme, il l'a mal fait. Si vous ne l'avez pas fait, nous allons discuter de ce que j'ai fait, parce qu'il a fait ce que nous voulions, s'est débarrassé de la marge autour de l'extérieur pour toutes les vues, il s'est aussi débarrassé du texte géant. C' est maintenant juste une vieille taille normale, mais ce qu'il n'a pas fait, ce qui va rencontrer des problèmes plus tard, c' est disons que je veux bloquer le H1. Donc je vais, d'accord, H1 maintenant, vous allez avoir une taille de police de 100 pixels. Impressionnant. Vérifiez-le. Vérifiez-le, ne fonctionne pas. Pourquoi cela ne fonctionne-t-il pas ? Suspendre. Il faut y penser, annuler la pause. Tu n'es pas en pause maintenant. Tu ne l'as pas interrompu, je sais que tu ne l'as pas fait. C' est cette chose. Ils sont dans le mauvais ordre. Donc mon style est appliqué. Rappelez-vous le flux, il continue, et il dit, d'accord, être un H1 de taille de police 100, alors celui-ci se charge, et si nous regardons cela, prends-le ici, il dit, H1 est une taille de police de 100%, Et les autres choses qui leur disent quoi faire, non, cette chose nous fait aller à 100% du one-in. Donc on va juste s'assurer que l'ordre est le bon chemin ? Donc c'est là. Maintenant, ce raccourci, vous devez le couper, et le coller au-dessus, mais si vous cliquez dedans n'importe où, et maintenez enfoncée la « touche Option » sur le Mac, la touche « OP » sur le PC. Non, mettez en surbrillance toute la ligne et maintenez enfoncée la touche « Option » sur le Mac, la touche « OP » sur le PC. Pouvez-vous voir, je peux juste appuyer sur ma touche d'erreur, tant que je maintiens mon option, ou PC ultime, je peux juste déplacer cette chose le long. Assurez-vous donc que la réinitialisation CSS d'abord, puis faites cela. Maintenant, ma taille de police est belle, et grande. Je ne veux pas ça. Prends l'idée. Sauvez-le. Très bien, donc c'est le genre de véritable fondement pour notre site web responsive. Il y a beaucoup plus à faire, mais c'est au cœur de tout ça. Nous utilisons Flexbox, que nous connaissons ou un peu déjà, et nous utilisons des requêtes média pour régler, mais c'est un CSS activé et désactivé. D' accord, j'espère que vous vous sentez bien à propos de la conception web réactive. Je te vois dans la prochaine vidéo. 83. Comment activer et désactiver des éléments pour les sites web réactifs pour mobiles, tablettes et ordinateurs de bureau ?: Salut là. Je peux dire de votre visage que vous souhaitez ce soit une vidéo sur l'allumage et la désactivation des choses, selon que c'était mobile ou tablette, vous avez de la chance mon ami. Sur la table de vue, nous avons les cases 1, 2, jusqu'à 10, toutes. Mais sur le bureau, parce qu'on a trois colonnes, je veux neuf, je veux 10, et c'est parti, regarde. Ensuite, sur mobile, nous voulons qu'il soit dans les cases 1, 2, 3, 4, puis assister à un morceau d'entre eux éteint et il suffit de retourner 10 allumé juste pour les coups de pied. Cette vidéo va vous montrer comment activer et désactiver les choses en utilisant CSS et les requêtes média, selon que vous êtes sur mobile ou tablette, la version courte est fondamentalement simplement appliquer une classe spéciale avec affichage, aucune application aux choses que vous voulez désactiver et il s'éteint. Mais pour la version longue et toutes les bonnes choses, accrochez-vous, nous allons entrer et travailler à la façon de le faire. Pour éditer, nous devons créer une classe dans notre CSS qui la désactive , puis appliquer cette classe à la chose que vous voulez désactiver. Le style dans notre cas est rappelez-vous sur la vue du bureau, nous allons zoomer. Est-ce que je veux que neuf d'entre eux se montrent, donc c'est sympa et même je ne veux pas que ce plus traîne, ce qui fait actuellement, c' est ce gars et je veux que tu sois là. Ceux-ci et alors quand nous arrivons à cette vue, nous pouvons accorder 10 sur même si je n'ai que huit ici 10 va le remplir encore bien. Mais sur un mobile veulent tout rallumer, car il n'a pas vraiment d'importance combien j'ai. Jetons un coup d'oeil à faire ça. On va créer un cours, d'accord ? On va appeler celui-là cacher le bureau seulement. C' est un peu long et je ne l'appellerais pas comme ça, je l'appellerais probablement H ou cacher D. Juste pour le rendre plus petit, mais nous allons essayer de le rendre vraiment explicite donc c'est vraiment facile à travailler dans cette classe, ok. Ce que nous allons faire est de dire l'affichage, nous avons fait bloc, nous avons fait inline-block, nous avons fait flex, ne peut faire aucun. Au revoir. C'est dans mes affaires globales, ce qui veut dire que je cible le bureau, ok. Si vous vouliez l'éteindre pour tablette, vous changez probablement le nom de celui-ci, l'avoir ici, en fait nous pourrions le faire dans cette vidéo juste pour vraiment expliquer ce que nous faisons. Maintenant, j'en ai besoin parce que c'est assez long, je vais juste le copier, l'appliquer à quelque chose. Case 10 ici, nous voulons ajouter deux classes. Assurez-vous donc qu'il y a un espace entre les deux classes séparées, assurez-vous qu'il est à l'intérieur de vos guillemets. Espérons que maintenant, sur cette vue ici, il va s'éteindre. Il est parti, et bien juste de vous, mais il a disparu sur ce point de vue aussi. Tablette et mobile. C' est à cause de ce genre de flux. Il circule ici et rien d'autre ne lui dit de revenir. Nous avons à faire est de nous saisir tous, y compris l'accolade et de s'assurer que lorsque vous collez ce laisser ce gars là, il doit être là avec le genre de fermeture de cette requête médiatique et je vais coller ça. Je veux tourner l'affichage pour bloquer, pour l'afficher à nouveau. Je n'ai pas besoin de le dire pour cela parce qu'il va passer sur mobile, espérons-le. Sur le bureau, j'en ai neuf et je ne peux pas faire défiler plus loin. Sur la tablette bien que nous y allons, boîte 10 est apparue, puis sur mobile, elle devrait être là aussi bien. Disons simplement que sur mobile, nous devons les éteindre parce que c'est peut-être que c'est un défilement très long. Peut-être que vous avez comme 50 et sur tablette vous avez 40, mais une utilisation mobile 10. Faisons semblant que c'est ce qu'on veut faire. Dans le code VS, nous devons créer une autre classe, et je ne veux pas l'activer sur mobile. Pour le dernier accolade là-bas, je vais dire que je veux un appelé, cacher mobile seulement. Mais devrait cacher mobile seulement, juste appelé, qui semble plus simple. Même chose, affichage, aucun. Parce qu'il est lié à ce CSS, c'est seulement à ce à quoi vous l'appliquez, que cela va prendre effet, peu de sens. Qu'est-ce que je vais faire ? Je vais faire quelques curseurs multiples, qui est Option de commande et mon Mac, ou option de contrôle sur un PC. T' en as marre que je dise [inaudible] ? L' espace et je vais nous appeler pendant que je vais l'appeler, je vais attraper un mobile à cacher. J' espère que tout ça va s'éteindre, 10 pas ça va être là parce que j'ai laissé ça à ce petit groupe. Jetons un coup d'oeil. Toute cette vue, d'accord, neuf, vue de table, j'ai tous les 10 et puis un mobile, j'ai, nous avons 1, 2, 3, 4 sur 10. On fait des trucs réactifs. Ce n'est pas très joli, mais nous savons comment ajouter des prises en images. Nous devons le faire pour le site parce que les images réactives sont très importantes. On s'en occupera ensuite. Mais j'espère que vous vous habituez à l'utilisation des requêtes de médias à la fois pour faire des changements de ticks, mais aussi pour faire des choses comme des changements structurels et activer et désactiver les choses. Nous venons de faire des choses simples comme allumer et éteindre les boîtes. Vous pouvez changer complètement votre site Web pour mobile. Il peut être important que lorsque les gens recherchent vos sites comme je l'ai fait pour mon entreprise néo-zélandaise. C' est plus comme une entreprise de salle de classe assis, non ? Les gens viennent suivre des cours Adobe ou des cours de conception Web. Mais en fait se tourner physiquement vers ce que nous faisons est quand la visualisation sur le bureau, nous leur avons montré des informations parce que nous savons que capot probable est là et ils cherchent à acheter un cours, nous leur donnons des informations à ce sujet. Mais quand ils sont sur le mobile, nous avons changé la page d'accueil pour être très claire, notre adresse et notre numéro de téléphone, parce que c'est plus utile pour quelqu'un sur leur mobile quand ils sont normalement en train d'essayer et qu'ils sont en retard pour la classe ou ils ne trouvent pas le bâtiment. Vous pouvez activer un énorme, vous pouvez activer complètement divs et désactiver qui ont une belle carte cool en elle. Ou les directions ou faire le numéro de téléphone vraiment clair sur la page d'accueil. Ce n'est pas vraiment utile sur la vue du bureau, mais soyez vraiment cool de l'avoir sur mobile. Vous avez l'idée, mais allumer et éteindre les choses en utilisant l'affichage. Aucun, celui-là. Je te vois dans la prochaine vidéo. 84. Qu'est-ce que la densité de pixels ? Images réactives de rapport de pixels dppx dans le design web: Salut là. Cette vidéo, c'est tout au sujet des images réactives. La raison pour laquelle il est si long est parce qu'il existe quelques méthodes différentes. Cette vidéo va juste être un aperçu vous montrant les avantages et les inconvénients de chacun d'eux. C' est un peu un monde sombre. Si tu trouves ça dur jusqu'ici, ne t'inquiète pas, ce n'est pas toi, c'est Internet. Les images réactives sont un peu difficiles. Nous allons parler des SVG. On va trouver des petits trucs comme régler l'image à 100 %. Nous utilisons la méthode de couverture CSS. Nous allons également regarder la méthode de jeu de sources, où nous changeons nos images en fonction de la taille du navigateur et pour comprendre tout cela, nous devons parler de quelque chose appelé densité de pixels, ou le ratio de pixels, ou les points par pixels, DPPX. Il y a plein de mots pour ça. Fondamentalement, c'est à quel point une qualité l'appareil que votre public regarde vos images sur. Parlons tout ça maintenant dans la vidéo. D' accord. Alors, d'abord, nous allons décrire pourquoi nous avons besoin d' images réactives et ensuite nous allons couvrir les différentes façons de le faire. Fondamentalement, nous voulons, lorsque notre public vient sur notre site, nous voulons leur donner la meilleure image de qualité possible pour la taille de leur appareil. Si vous êtes sur un vieux téléphone portable, ils ont seulement besoin de cette petite version itty-bitty parce que l'écran ne peut pas afficher une meilleure égalité que celle-ci, donc vous lui donnez exactement ce dont il a besoin. Pourquoi tu t'embêtes à faire ça ? Parce que les tailles de fichier. Cette chose ici est, vous pouvez le voir, énorme. Il ne sert à rien de forcer cette personne qui est sur un téléphone mobile qui utilise peut-être Internet lent à télécharger ce fichier géant alors qu'elle ne pourra voir que la qualité de quelque chose de cette taille. Nous devons trouver une façon de dire des appareils à petit budget, des écrans merdiques, vous obtenez celui-ci, mais super sexy appareils à haute densité de pixels, vous obtenez ce très grand joli. Il est beau sur l'écran sur lequel vous avez dépensé des sommes incroyables d'argent sur. Responsive signifie juste qu'il change pour les images. On l'a eu. C'est assez facile, non ? Maintenant, comment décidons-nous ? C' est là que ça devient un peu trouble. La taille physique est une chose. Nous savons tous que la taille physique ne signifie pas une qualité incroyable. Nous avons tous notre téléphone assis dans ce deuxième tiroir dans notre chambre qui a le type dessus et il est vieux et c'est budget et vous l' allumez et vous êtes surpris de voir à quel point il a l'air mauvais. Quand vous l'avez acheté, il y a plusieurs mois, ça ressemblait bien : « Man, cet iPhone 3. Regardez la qualité. » Mais maintenant, vous le comparez à des modèles plus récents et vous dites  : « Wow, vous pouvez compter les pixels. » Il ne s'agit donc pas seulement de la taille physique parce que votre ancien téléphone et votre nouveau téléphone sont physiquement, dans votre main, sont à peu près de la même taille. Ça dépend de l'âge que tu as. Si vous aviez une touche [inaudible] ou un vieux Nokia, c'est différent. Mais juste n'importe quel vieux smartphone par rapport au nouveau smartphone. Ils ont la même taille. Qu' est-ce qui est différent alors ? C'est à propos de la densité des pixels. On va en parler. C' est un mélange de densité de pixels et de taille physique et c'est une combinaison des deux pour décider quelle image est chargée. La taille physique est facile. On n'a pas vraiment besoin de discuter de celui-là. Si vous avez un très gros iPad Pro, il a besoin d'une image plus grande parce qu'il est juste plus grand. Alors que la taille physique d'un téléphone portable est beaucoup plus petite. Vous pouvez utiliser une image plus petite. La densité de pixels est l'étrange. Discutons de ça. Bon, donc je vais discuter de la densité des pixels. Il est également appelé le ratio de pixels. Certaines personnes l'appellent les points par pixels ou DPPX. C' est la version raccourcie des points par pixel. On parle tous de la même chose. Nous parlons de la qualité de cette chose sur différents écrans. Maintenant, je vais vous donner mon bon aperçu. Eh bien, du mieux que je puisse le faire. Si vous voulez descendre un peu plus dans ce trou de lapin, c'est probablement un très bon article de Peter Nowell, j'ai laissé un lien pour cela dans vos notes, dans vos fichiers d'exercices sous Project 3. Là, il est là. Medium et tu peux voir ce qu'il fait, non ? C' est un bon exemple. C' est un pouce, disons et c'est un gros bloc de couleur. Mais si je divise ce bloc de couleur en quatre parties, j'obtiens un peu plus de détails. Je peux faire des choses. Je peux colorer celui-là, pas celui-là, celui-là. J' ai un peu plus de détails avec cette densité de pixels. C' est deux fois plus que ça. Ensuite, je peux faire trois fois plus en coupant en trois pixels. Vous pouvez imaginer que si je découpe ça en 1000 petites lignes et cubes, je peux vraiment commencer à dessiner des images. Ça me donne beaucoup plus de carrés, donc je peux vraiment avoir quelques détails là-dedans. Ce n'est pas raisonnablement une bonne image. Celle-là, j'aime le mieux. Si je fais défiler vers le bas, cela le montre. C' est votre ancien téléphone, c'est votre nouveau téléphone et cela montre juste l'affichage pour un, puis deux. Ça va jusqu'à trois, certains téléphones vont quatre. Vous pouvez imaginer qu'ils continuent de couper ces petits carrés, vous pouvez juste obtenir des détails vraiment incroyables. Nous avons parlé du ratio de pixels. Parfois ça s'appelle la rétine. Mac, je pense que c'est le mot rétine. Personne d'autre ne semble l'utiliser. Google semble utiliser quelque chose appelé DPI élevé. Nous parlons tous de la même chose encore, le ratio de pixels, densité de pixels et la rétine est la façon dont Mac s'en occupe. Pré-Retina et ils sont comme mon MacBook Pro que j'ai devant moi, a un écran de rétine. Il a fallu l'ancien Mac à ce nouveau beau. Ces petits carrés sont évidemment surdimensionnés, par exemple. Maintenant, pourquoi est-ce important ? Voici mon petit exemple. Cette petite image dont nous avons parlé plus tôt. Nous pouvons avoir quelque chose qui est physiquement de cette taille, disons un téléphone portable, je vais zoomer, mais il a besoin d'une image beaucoup plus grande deux fois la taille que je peux réduire. Parce que si je zoome sur cette image, si je zoome assez près, vous commencez à voir qu'elle est faite de petits cubes, comme nous l'avons vu ici. Des petits cubes. Mais de loin, notre cerveau humain ne peut pas faire la différence entre la vraie vie et un tas de points. Ce que nous devons faire, c'est, si je veux une image donc c'est mon téléphone vraiment merdique, disons, maintenant c'est mon beau téléphone, je dois lui donner une image différente. Je ne peux pas lui donner ça, désolé. Je dois lui donner cette image qui est écrasée à environ taille parce que j'ai besoin de tous ces pixels supplémentaires et parfois cela ne fonctionne pas. Je vais essayer mon explication ici. Disons, c'est mon meilleur téléphone et j'ai besoin d'une image pour cela qui est haute DPI ou rétine ou a un ratio de pixels de deux au lieu d'un, je vais le copier et le coller et l'aligner. J' ai besoin de deux pixels. Ce que je fais, c'est que je dois l'écraser et ensuite je dois le copier et le coller pour que j'ai ceci. Vous pouvez voir le rapport. L' image est toujours de la même taille, mais j'ai beaucoup plus de points que je peux jouer avec. Est-ce que cela aide avec la densité de pixels ? Bien que cette image ici est de la même taille que l'original, Où est-il ? Mais disons qu'on a deux images, la petite et la plus grande que j'ai écrasée. Celui-ci est physiquement de la même taille, mais il a une densité de pixels plus élevée. La taille du fichier est beaucoup accablante. Lorsque je charge mon mauvais téléphone mobile, je lui donne cette image qui a une densité de pixels d'un. Mais mon téléphone fantaisie obtient quelque chose qui est physiquement de la même taille, mais il a une densité de pixels de deux, trois ou quatre. Vous pouvez imaginer que nous continuons à les saisir et nous les copions et les collons et nous en faisons une version plus petite et nous continuons à le rendre plus petit jusqu'à ce que le téléphone reçoive l'image qu'il veut. Cela signifie juste que je peux faire de meilleurs détails. J' espère que vous obtenez ce que je veux dire, la même taille physique, mais la densité de pixels est beaucoup plus étroite, sorte que la taille du fichier est beaucoup plus grande. Deux choses qui considèrent la taille physique de l'appareil juste pourrait être plus grand, mais aussi le même appareil pourrait avoir une densité de pixels de deux ou trois ou quatre et la partie folle est, vous pouvez avoir 1,5, 1,75. Il devient salissant en termes quelle image est parfaite pour quel appareil car il est tellement de périphériques. Continuons et montrons simplement comment les implémenter plutôt que de simplement parler de ce que c'est. Nous devions couvrir cela afin que nous puissions décider quelle méthode est la meilleure pour le moment. Parlons de la méthode numéro 1 pour exporter une très bonnes images réactives. Le meilleur est un SVG, c'est ce que ces petites icônes ici problème SVG il doit être un look vraiment assis, vous pouvez dire que ce sont vraiment des icônes, style clip art, logos avec vraiment bon pour SVG et ils à l'échelle, vous ne pas avoir à faire différentes tailles comme nous allons avoir à voir avec les images cependant, mettre à l'échelle pour l'infini. Ils vont devenir de plus en plus grands puis aller à la taille d'une montagne si vous le voulez, et la taille du fichier sera encore minuscule, principalement parce que ce sont plus d'une équation mathématique qu'ils ne sont réels, un groupe de pixels colorés cela ajuste les points d'ancrage dans les coordonnées x_y et ils font vraiment bien comme un SVG comme un JPEG ou un PNG, c'est juste une façon d'exporter ces gars. Je l'ai fait dans une vidéo plus tôt dans ce cours, comment les exploiter à partir de tous les différents programmes. Nous allons quitter SVG puis cette méthode suivante et celle que j'utilise le plus est la méthode d'une largeur de 100 pour cent, étirant pour s'adapter à l'appareil. Ce n'est pas la meilleure méthode la seule raison pour laquelle je l'utilise si souvent est qu' il n'y avait pas vraiment bon moyen de le faire pour le moment. Il y en aura. Personne n'a encore trouvé la règle absolue incroyable. Juste quand j'ai l'impression que ça va résoudre tous les problèmes. Soit il n'a pas un bon support de navigateur, soit c'est vraiment difficile à implémenter en toute honnêteté, je reviens beaucoup sur cette méthode. Il a quelques picks parce que c'est super facile à faire. Il a de gros inconvénients. Le principal est ceci, c'est mon site, voir ce bel homme en arrière-plan ici. Si je suis sur un grand écran, il me montre une version raisonnablement bonne qualité de celui-ci, mais si je descend à un petit écran, maintenant un clic droit pourrait inspecter, si le vôtre n'a pas activé à ce petit aperçu de l'appareil pour aller de ne pas le voir à le voir comme mon téléphone. Je vais faire un iPhone 4. Voir cette image ici est exactement la même que cette grande image qui était là. C' est ça ici. Je l'ai mis dans une autre fenêtre. Ce génome est l'image, malheureusement charge sur un très petit écran. Si cette personne est sur une connexion Internet très lente et qu'elle doit la télécharger. C' est fait sur la version géante, même s'ils ne peuvent pas l'afficher sur l'appareil. C' est juste l'image définie à 100 pour cent. Quel que soit le conteneur dans lequel il est va le remplir jusqu'à 100 pour cent. L' autre chose que nous avons fait dans ce cours est très similaire, donc un 100 pour cent est très similaire à la couverture peut-être lorsque le CSS que nous voyons dans cette image ici, nous disons, d'accord, cette image, nous voulons que vous couvrir comme une propriété CSS afin que quand j'ajuste la taille, pouvez-vous voir qu'il s'ajuste, il devient de plus en plus grand. Cover fait un 100 pour cent, mais il fait des choses fantaisistes quand il peut le déplacer au milieu et le centrer et d'autres choses. C' est la méthode numéro 2 facile, mais vous pouvez dire qu'elle a quelques inconvénients, principalement à voir avec juste charger une image pour tout le monde. Ce n'est pas vraiment bon pour la vitesse de chargement de la page. Google ne va pas aimer votre page autant qu'il le ferait si elle est aussi petite que les tailles de fichier qu'il peut obtenir. La méthode suivante est similaire à celle dont je viens de parler, une largeur de 100 pour cent, vous pouvez simplement forcer une taille. C' est le projet sur lequel nous travaillons. Je vais juste jeter une image sensible à la casse, nous allons ajouter une image, j'ai quelques images dans mon dossier. J' ai le carlin est de retour. Ce que vous pouvez faire est de regarder un peu lui comme un accrocher en bas et atteindre ce désactivé effectivement désactivé mon aperçu de l'appareil. C'est mon carlin. J' aime le carlin et il se montre à son moi géant aussi grand qu'il le peut. Malheureusement, il a une densité de pixels d'un et c'est un peu difficile à voir à l'écran, mais probablement sur votre vidéo, je peux dire qu'il n'est pas une image de bonne qualité. Vous pouvez les écraser comme nous l'avons fait ici et illustrateur. Rappelez-vous que nous avons saisi ceci et nous avons dit, allons juste rendre cela plus petit et nous les avons écrasés pour obtenir la densité de pixels de l'enchère, mais le compromis est que la taille physique devient plus petite. C' est quelque chose à considérer lorsque vous exploitez l'image, vous allez probablement devoir exploiter plus grand que vous avez besoin, deux fois la taille si vous prévoyez de l'écraser de moitié. Jetons un coup d'oeil. Vous pouvez dans votre HTML faire quelque chose d'intéressant. Vous pouvez dire que je peux ajouter un style et je peux ajouter une largeur, normalement faire cela et CSS, mais c'est hack pour faire cela et ça dit, je veux faire de quelle taille est-ce ? Je pense que c'est 500 pixels de travers. J'ai déjà vérifié. Si vous n'êtes pas sûr de savoir comment vérifier sur un Mac sous mon Projet 3 de compétition en image croix, cliquez dessus avec le bouton droit, obtenir des informations sur un PC, c'est quelque chose de similaire. Il doit y avoir de bonnes propriétés. Tu peux lui dire qu'il fait 500 pixels. Ce que je vais dire est en fait un 250 maintenant. Je vais juste le forcer à être la moitié de la taille qu'il était et j'espère maintenant. Il est la moitié de la taille, mais deux fois la qualité et mon écran que je regarde physiquement dans le monde réel a une densité de pixels de deux, c'est un haut DPI ou écran écrit. Cela semble magique si je les écrase à nouveau qui est un quart, mais la qualité n'est pas meilleure, n' est pas supplémentaire comme la profondeur du carlin. n'y a pas besoin pour moi d'aller si bas dans cet écran, c'est une belle, facile à réparer quelqu'un libre était le dernier. Je vais juste donner à la mienne une largeur et le navigateur a deviné la hauteur. La méthode suivante est celle-ci ici appelée la source. Nous avons fait la source des images. Nous allons regarder cette chose appelée source et c'est à mon avis, la meilleure façon les images d'implémentation qui change tailles en fonction de la largeur du navigateur. Il a un bon support de navigateur et en termes d'être un concepteur, il n'est pas extrêmement impactant en termes de quantité de travail que vous devez faire. Il y a d'autres méthodes que nous ne allons pas couvrir dans ce cours, et je les ai laissées de côté principalement à cause de mauvais navigateurs supportent tous les super compliqués nécessite un codage qui est en dehors de la portée de ce cours. Ce que nous ferons au lieu que cette petite vidéo devienne épiquement longue, je vais couvrir la source dans la prochaine vidéo de manière plus détaillée. Le cœur de celui-ci est que ces différentes images se chargeront sur une largeur différente de la taille du navigateur 500, 1000, 1500. Si cette source ne peut pas être utilisée par le navigateur parce qu'il s'agit d'un ancien navigateur, il utilisera simplement l'ancienne image normale que nous avons. Nous allons lui donner la petite version parce que si vous avez une vraie navigation, vous avez probablement un vraiment à l'écran, mais il est tailler cela dans sa propre vidéo et a pris à propos ainsi ensemble. 85. Comment exporter des images réactives pour un site web à partir de XD Photoshop Illustrator: Très bien, je voulais redoubler dans cette vidéo aux images. Nous avons fait des images dans une vidéo antérieure, mais je veux vraiment mettre en évidence des images réactives. Maintenant que nous comprenons ce qu'est responsive, nous allons avoir besoin d'images différentes. Maintenant, pour notre méthode d'étirement à 100 pour cent que nous ferons ensuite. Nous avons juste besoin d'une très grande image et nous allons la réduire. C'est assez facile. La méthode après cela a appelé la méthode SRC sit, c'est tout, cela va nécessiter différentes images physiques différentes à différentes tailles. Nous allons les activer et les désactiver en fonction la largeur physique et de la densité de pixels. Donc, première étape, nous allons travailler avec Photoshop. Assurez-vous que l'image que vous souhaitez redimensionner est ouverte à l'intérieur. Photoshop n'est pas le meilleur programme d'image de conception web absolu, mais il est utilisé si communément pour faire de la conception web. On couvrira ça d'abord. Allez dans Fichier. Allez à Exporter et nous allons utiliser explorer comme. Vous devrez peut-être réinitialiser le vôtre. Votre qualité est probablement à 100. Ça supprimera la dernière chose que tu as faite. Vous pouvez remettre votre échelle à 100. Tu aurais pu être allé à certains d'entre eux si tu l'avais. Ce que je veux faire, c'est que je veux que ce soit un JPG parce que c'est une image qui ressemble à un JPG. Je vais avoir la qualité à 60, ça a l'air bien. Maintenant, la plus petite taille, nous allons commencer par la plus petite. Disons que je veux que ce soit une largeur. Vous avez besoin de vos dimensions globales. Le mien est par défaut 300 pixels de large, tant qu'il est plus grand que ce que vous en avez besoin parce que je veux être la petite taille pour être 400, très petit. Le rapport fonctionne à partir de [inaudible]. Vous devez vous assurer que votre travail où s'il s'enlève un peu. Nous allons essayer de mettre notre téléphone portable sur cet écran, et ce sera notre temps un. Alors ce que je fais, c'est que j'en ajoute un de plus. Celui-ci va être le temps deux ou haut DPI. Vous pouvez voir que vous pouvez faire trois fois. Je vais dire que c'est ce que je vais faire et je vais frapper l'exportation et sur mon bureau, je vais les mettre, les empiler là. Je ne leur ai pas donné un très bon nom. Espérons que vous le ferez. Il y a cette première image et ma seconde. Maintenant, je vais les ouvrir dans Photoshop juste pour vous montrer la différence de taille. C' est le petit, et c'est le gros, deux fois plus grand. C' est ainsi que vous pouvez obtenir deux versions de Photoshop. XD est très similaire. Disons que j'ai cette image de mon Mac ici. Je le sélectionne, je double-clique dessus. J' ai la partie image de celui-ci et je vais fichier, exporter. Je vais exporter le sélectionné et ici, c'est le changement. Ici, au lieu de simplement concevoir, on va aller sur le web et ça va me donner, vous pouvez voir cette minuscule écriture. L'éditeur effectuera un zoom avant. Vous le verriez bien, mais vous pouvez voir que vous obtenez un 2_x et un 1_x si vous faites des choses pour iOS. C' est iPhones ou iPads, ils auront besoin d'une fois trois. Android exige tellement de choses. Mais on va faire une et deux fois. Je vais aussi exporter ça sur mon bureau. Donnez-lui un nom. C'est un mauvais nom. Il va traverser ça parce qu'on l'a déjà fait. Je voulais juste te montrer ça. C' est pour ça que tu finis avec celui-ci avec le 2_x jusqu'à la fin. C' est juste deux fois la taille de l'original. Je les ouvre dans Photoshop juste pour vous montrer une grande version, un petit verson. Pour une méthode à 100 pour cent, nous allons juste utiliser celle-ci et la réduire. Lorsque nous faisons la méthode sit, nous allons basculer entre ces deux images en fonction de la taille du navigateur et de la densité de pixels. Le dernier est Illustrator qui est utilisé couramment. Celui-ci ici, il n'avait pas de gradient et n'était pas, eh bien cette ombre portée, j'utilise probablement simplement SVG. Ce qu'il faut faire, c'est la fenêtre. Vous devez ouvrir vos ressources, exporter, sélectionner la chose que vous voulez exporter, faire glisser dans ce panneau, lui donner un meilleur nom que moi. Ensuite, c'est là que vous décidez. SVG ne fonctionnera pas dans ce cas. Je vais devoir choisir un JPG. Je choisis un JPG à 50 pour cent, ne me donne pas 60, donc je vais prendre 50. Il a dit qu'il avait besoin d'un suffixe. Je n'ai pas besoin de ça. Vous pouvez l'avoir, c'est juste comme ajouter au nom du fichier. Je vais avoir une version 1, je vais avoir une version que vous pouvez voir. Tu peux être vraiment défoncé. Je vais avoir juste une version 2. Il va ajouter ce suffixe à la fin pour correspondre au reste d'entre eux. Faites-le aussi celle-là. Ça frappe le moins. Il dit moins 50, vraiment dit juste que je suis à 50 % de qualité JPG. On va faire ces deux-là. Je vais le faire. Ce que nous allons faire. Je vais cliquer dessus pour qu'il devienne bleu. Ensuite, je vais cliquer sur Exporter et nous finissons au même endroit. Bureau, exportation. Je devrais avoir deux milieux cool. Il l'a même mis en petits groupes. Merci Illustrator. Je ne sais pas si c'est merci. Mais en tout cas, j'en ai deux, un, deux, je les ouvrirai tous les deux chez Photoshop afin que je puisse voir la différence de taille. Je ne sais pas pourquoi. Je ne crois pas que tu me fais confiance. Bref, petite version, version gigantesque et en fait c'est un Zoomed out. C' est la petite version à 100 pour cent et c'est l'autre version. Doublez la taille massive. On a nos images. Travaillons à travers le reste de cette section d'image réactive et nous allons commencer à les implémenter. On se voit dans une seconde. 86. Comment ajouter des images réactives à un site web en utilisant une largeur de 100 % en HTML et CSS ?: Hé là, cette vidéo parle d'images réactives. Celui-ci travaille avec une largeur de 100 pour cent. Nous l'avons fait dans le cours et je pensais, nous n'avons pas besoin d'une couverture à nouveau, mais je pense que nous devrions juste vraiment l'obtenir dans un bon endroit afin que vous puissiez le trouver plus tard dans ce cours, et aussi juste pour confirmer ce que nous savons parce que nous le prenons d'une méthode légèrement différente ici. Maintenant, j'ai ces images et vous pouvez voir qu'elles changent les différentes tailles sur différents navigateurs à cause de ce que je fais avec mes colonnes et vous pouvez vraiment voir maintenant comment fonctionne 100 pour cent. Tant que la colonne change, l'image s'ajuste pour l'adapter. Nous devons mettre une belle grande image, l' adapter à la colonne et c'est un moyen vraiment rapide et facile de faire des images réactives. Sautons dans VS Code et travaillons. Pour commencer, supprimons le BOX1 et c'est la balise h1, donc tout le truc. Parce que je ne veux plus le frapper, je vais le mettre dans une image. Maintenant, nous n'avons pas les images dans nos fichiers d'exercices. Allons aux fichiers d'exercice, trouvez votre fichier Project 3. Utilisons les images grandes. Parce que nous allons les mettre en gros et les réduire. Je vais prendre toutes ces choses, les copier, et allons sur notre bureau, allons au Projet 3 et mettre dans ce dossier d'images. A l'intérieur de ce dossier d'images, nous allons coller toutes nos images. Allons charger au moins le premier, donc IMG et SRC sont la source. Celui-ci va être un dossier d'images. Je vais appeler tous ces images1.png. Vous devez toujours ajouter votre texte. Je ne le suis pas parce que je ne le suis pas. Tu devrais. Sauvegardez-le et regardons un peu dans le navigateur. Éteignez. Rallume à nouveau. Cool, c'est une image géante. C'est beaucoup trop grand. Il est même deux fois plus grand que nécessaire. Pour le réduire, nous allons utiliser un peu de CSS. Nous avons notre vue globale, et avant que la vue du bureau ne commence, je vais le mettre là pour que je puisse le modifier ici. Ce que je veux faire, c'est que je veux faire toutes les images de la moitié de la taille. Je sais que je veux faire de ceux à l'intérieur du col la moitié de la taille, pas le com, le col. Les images seulement si elles sont à l'intérieur de cette div appelée col, je voudrais que vous soyez. Une largeur de 100 pour cent. Un point-virgule, maintenant, ça marchera surtout. Vous devez aussi mettre une hauteur. Tu as besoin d'une hauteur et je ne veux pas de la hauteur. Je veux que la hauteur soit automatique. Un 100 pour cent va essayer de l'étirer, alors que je vais juste le laisser comme auto et ça ne marche pas. Pourquoi travaillez-vous ? Réinitialiser. Ça marche. C' est une belle grande image. Il a été fait à la vie comme une densité de pixels, mais à cause de la réduction de l'échelle, il est maintenant choisit une densité de deux ou c'est le double de la résolution ou de la résolution élevée, peu importe ce que vous voulez appeler. Le problème est que vous pouvez voir ce rose ramasser le bas là-bas et quand je le redimensionne, pouvez-vous voir qu'il ne fait pas tout à fait ce que je voulais. C' est comme se rétrécir là-dedans et la boîte ne devient pas plus petite parce que je dis une hauteur physique à cette boîte. Débarrassez-vous du fond rose et de la hauteur, de cette colonne. On l'a fait plus tôt. Couleur d'arrière-plan, hauteur minimale. Au revoir. Sauvez-le. Regarde maintenant, ça marche et les boîtes se sont effondrées, et il n'y a pas de couleur dedans. Impressionnant. C'est le moyen facile de mettre en œuvre des images réactives. Il est plus grand qu'il n'a besoin et il est écrasé. Sur différents appareils, il va charger la bonne taille physique, mais il y a plus d'échelle pour qu'elle devienne une image DPI élevée ou une image PPI, comment appelent-ils cela ? Points par pixel. Le ratio de pixels peut être plus élevé. Tous ces mots signifient vraiment la même chose. Nous essayons simplement d'obtenir la bonne qualité d'image pour les différents écrans de l'appareil. Maintenant, vous pouvez sauter de l'avant parce que je vais juste ajouter toutes les images ici, à vous de décider. Tu peux t'accrocher si tu veux. Ça va être assez ennuyeux. Ils montrent qu'ils se sont trompés tout le temps. C' est l'option de commande sur un Mac ou le contrôle O sur un PC et nous allons supprimer tout cela, y compris le H1 et je vais prendre cette image. Faites la même chose, mon raccourci, collez-le, et je vais juste changer les images, image 1, image 2 parfaite. C' est un qui va être 2. La prochaine aura 3 ans. Celui-ci va avoir 4 ans. C' est douloureux de regarder, c'est douloureux de le faire. Faisons quelques images, qui est barre oblique ou le mettre sur tous. C' est un peu plus large afin que nous puissions le faire facilement et facilement et nous allons nous débarrasser de tous les chiffres et arrêter de les taper un à la fois. Qu'est-ce que tu manigances ? Un, deux, trois, quatre, cinq, six, sept, huit, neuf. J' ai oublié ce type ici. Ce n'est qu'à qui nous sommes. Prends tout ça, copie. Nous pouvons utiliser notre sélection ou nos tags you. Peut-être que c'est à l'étude et dit quand il élargit les sélections un tas de raccourcis. Commande Shift+ Control sur mon Mac, je vais coller ce type et celui-ci sera 10 ans. Toutes mes images dans, ce qui avait été tas plus facile de le faire avant que je commence à les éditer, mais hé, il ne coule pas le cours. Vérifions et veillons à ce qu'ils soient tous là-dedans. La chose cool à leur sujet est de les regarder répondre. Je dois le passer à un appareil mobile, inspecter, je dois assister à l'appareil. Basculez et c'est à ça qu'il ressemble sur un téléphone mobile. Ce n'est pas beaucoup d'entre eux, mais au moins c'est 100 pour cent. Je vais aller à responsive et y aller. Allez-y. Nous y voilà. C' est une mise à l'échelle de 100 %. Dans le suivant, nous allons regarder l'autre méthode, l'autre méthode principale est d'utiliser le sit source. Je te vois dans une seconde. 87. Comment utiliser srcset pour modifier les images en HTML pour un site web réactif ?: Salut là. Cette vidéo va couvrir srcset. C' est une façon de faire face à des images réactives comme ce petit gars ici. Regardez ce qui se passe quand j'arrive à un appareil plus grand, hey ça devient une vision de taille moyenne. Ce qui se passe, c'est que nous changeons l'image plutôt que de la redimensionner parce qu'il avait un chapeau rose, maintenant il a un chapeau vert. Prêt pour un chapeau orange ? Chapeau orange géant. L' image est en fait commutée en fonction de la largeur du navigateur. Il est assez facile à implémenter en HTML un peu plus difficile à tester dans Chrome, mais nous allons comprendre les deux de ceux maintenant dans la vidéo. Pour commencer, nous allons fermer tous les autres documents et nous allons créer un fichier jetable juste pour garder ce joli et isolé. On va le sauver, lui donner un nom, l'appeler image-srcset. Peu importe ce qu'il s'appelle, va être un fichier HTML. Peut-être que nous n'avons pas besoin de SCSS pour que cela fonctionne, pour cette partie particulière du srcset, nous avons besoin de toutes les données de succès. Doctype, la langue anglaise laissera, le principal est celui-ci. Vous ne pouvez pas vivre sans que la clôture soit définie, alors assurez-vous qu'elle se trouve dans votre document. La prochaine chose que nous allons faire est de mettre dans une balise d'image réelle simple, et j'ai une copie de quelques images à travers, donc dans vos fichiers d'exercice et le projet trois sous votre carlin. Carlin est ici, j'en ai fait trois qu'on va utiliser. Voici l'original, ceci est de Charles, de Unsplash, Si vous avez besoin d'un ramasser moi. Va ici, Unsplash et cherche le travail de Charles avec son carlin. Ce que je veux, c'est petit, moyen et grand. Je vais les copier, les mettre dans mon dossier local dans le dossier Images. Regardons ces images que vous savez ce qui se passe. C' est une petite vision, c'est une vision moyenne et une grande vision. Je vais faire du texte et changer la couleur du chapeau. Normalement, vous ne feriez pas cela ; vous laissez juste la même image, mais je voulais que cela soit très clair quand ces choses changent. VSCode ce que nous faisons ? Mettons tout d'abord dans l'image, dossier des images et je vais commencer par carlin petit. Tu as mis ton texte. Donnons-lui un aperçu et jetons un coup d'oeil dans le navigateur. Je vais laisser le fichier aller et l'éteindre, allumer à nouveau. Il y a là. Cool, donc on commence par ça, c'est ce qu'on a fait jusqu'à présent, donc on n'a rien fait de fantaisie. Maintenant vient pour le nicksport ». Après notre tout texte. Nous allons mettre dans srcset et ici est l'endroit où nous mettons dans toutes les différentes tailles. Vraiment, il ne fait pas de texte prédictif très utile ici, donc je vais tricher et aller, prendre cette copie et la mettre à l'intérieur d'ici. Maintenant, nous devons lui donner une largeur. Nous allons dire que vous activez à une largeur de 500 pixels. Il y a beaucoup de mesures différentes. Nous avons fait ems et rems, pixels et pourcents. Il y en a un autre, la largeur W4 va fonctionner pour cette affaire. Maintenant, tout ce que j'ai besoin de faire est de mettre dans les différentes tailles. Cela ne fait pas bien les choses prédictives à nouveau, nous allons le copier et vous les séparer par des virgules. Collez-le dans une virgule, collez-le dans. J' ai trois visions, mes trois images, ça va changer deux choses. On a un moyen, et celui-ci sera de 1 000 pixels, pas de 10 000. Celle-ci s'appelle Big, JPG Check, et celle-ci sera 1.500. On regarde ce que je les appelais. Grand, moyen, petit, super. Donnons-lui un test, va marcher. Vérification du navigateur, il fonctionne techniquement, mais il est difficile de prévisualiser dans un navigateur parce que ce qui finit par se passer est le navigateur télécharge le HTML et dire, génial, obtenu. Il ne sert à rien d'aller et de vérifier l'écran avec, il le fait en charge. La page de cache doit être chargée et ensuite elle la vérifiera, si je la baisse assez petite et que j'appuie sur « Reload », cela ne fonctionne toujours pas car elle est mise en cache. mise en cache signifie simplement qu'une fois que le navigateur a téléchargé une image, il ne la télécharge pas à nouveau, il va. J' ai déjà cette image. Ça s'appelle le même nom. Je ne vais pas m'embêter à le faire. On va le forcer à le faire. Il y a deux façons que nous l'avons examiné auparavant, Si vous cliquez dessus avec le bouton droit, allez à Inspecter. Selon l'aperçu de votre appareil peut ne pas être activé ; ce petit bouton ici. Vous ne pouvez pas continuer à cliquer avec le bouton droit de la souris et aller cation vide avait recharger, pour dire parfois, a obtenu un réseau et activer cela, désactiver le cache. Nous allons le réinitialiser maintenant, faire un clic droit dessus, réinitialiser le cache afin qu'il ne le sauve pas. Chaque fois que nous le rechargeons ou redimensionnons la page, il va essayer de chercher l'image à nouveau. Ce que nous allons faire, c'est d'activer l'aperçu de notre appareil. Nous allons aller à responsive en haut, et nous allons commencer à le faire glisser. Si vous commencez grand, il ne va pas devenir plus petit largement. Oui, ce petit, quelque chose à peu près de taille mobile. Je regarde ici, il fait environ 300'. Je vais rafraîchir la page et cela fonctionne très bien. La page se charge, elle n'a pas déjà d'image. Il va et regarde, il vérifie, fait quelques calculs et dit, c'est la largeur dont j'ai besoin, donc je vais utiliser cette image particulière. Commençant petit, je peux faire glisser un plus grand, montre. Tu vois, j'ai passé un certain point et c'est devenu plus grand. Je suis allé un peu plus loin et finalement il va à la grande image. C' est comme ça que les éteignent. Une chose que vous avez peut-être remarqué ici en termes de pixels, si je descend à nouveau à quelque chose de petit, appuyez sur « Rafraîchir » pour revenir au petit. Rappelez-vous, nous voyons en direct à 500, nous voyons aller en direct à 500. Regarde ça quand je traîne. Regarde quand il passe là, c'est la moitié où on l'avait. Je me demande ce qui se passe ? C' est comment la densité de pixels, ou un ratio de pixels ou les points par pixel, DPPX, DPI élevé, écrans de rétine, il y a beaucoup de mots pour la même chose. Je suis sûr qu'ils ne sont pas identiques, mais ils font référence à faire la même chose avec nos images. C' est parce que l'écran que je regarde a une densité de pixels de deux. Vous pouvez le simuler ici, dire que vous voulez le remettre à un ; c'est la base. Vous pouvez entrer dans ces trois petits points, pas celui-là, celui-là. Je veux montrer le ratio de pixels de l'appareil. Ici, la valeur par défaut est deux, je vais le mettre à un et faire exactement la même chose. Commencez petit, appuyez sur « Rafraîchir ». Vous pouvez voir maintenant est si petit jusqu'à ce que j'arrive à 500. Maintenant, ce n'est jamais parfait parce qu'il fait un calcul et regarde ce qu'il devrait être, mais voilà, est passé à 100. Je sors à 1000 et regarde ça changer, tu as le gros carlin géant. Parfois ça aide. Je trouve parfois en classe le dicton dans ce cas, nous pouvons voir les pixels par rapport au ratio de pixels et vous pouvez imiter. J' ai eu un téléphone LG là pendant un petit moment et c'était une densité de pixels de quatre. Il était assez fou de regarder aussi bien, donc c'était ultra vie, donc trois serait vraiment commun pour dire, votre iPhone si vous avez un iPhone 10. Je vais cliquer sur celui-ci. Descendez petit et ce que vous remarquerez, c'est si j'appuie sur « Rafraîchir », c'est déjà moyen à cette minuscule taille. Ecoute, quand je me lève juste un roulé régulier. Voir jusqu'à ça va. Tu vois là, ton iPhone X à quoi ça va ? Je ne connais pas la largeur de celui-ci, mais c'est déjà un gros à cette taille de fichier vraiment petite parce qu'il est brouillant et tellement de petits pixels parce que le ratio de pixels de l'appareil. Les gens qui ont beaucoup de noms pour ce truc, est vraiment élevé et il peut devenir plus élevé. C' est pourquoi, si vous prévisualisez un MacBook Pro, son DPI est deux, mais si vous prévisualisez un iPhone X, c'est trois, et vous dites  : « Comment ce MacBook Pro peut-il être inférieur à trois ? » Je pensais que aussi, mais il s'avère que c'est parce que votre téléphone que vous tenez vraiment près de votre visage, donc vous remarquez vraiment la qualité supplémentaire. Alors que l'iPad est conçu pour s'asseoir sur vos genoux ou au moins à longueur de bras afin qu'il puisse s'en sortir avec un look incroyable avec un ratio de pixels moins. De plus, je suis sûr qu'il y a des considérations pour l'autonomie et le coût de la batterie, toutes sortes de choses. Était-ce utile ? Un petit trou de lapin. Maintenant, il y a plus à ce srcset, est-ce 90 pour cent ? Je veux dire que je t'ai donné 90 % des règles pour ça. Il y a d'autres choses que vous pouvez faire. Vous pouvez ignorer le tout aussi bien et travailler, je n'ai pas aimé vous soulever avec quelque chose qui ne marche pas. Vous pourriez simplement rencontrer des instances où vous devez en apprendre un peu plus. Cet article ici était probablement le meilleur que j'ai lu à ce sujet. C' est un autre de Chris Coyier aux tours CSS, certainement un homme à suivre. Cela passe par l'ensemble de l'image avec un peu plus des écrous et des boulons. L' autre chose cool que vous pouvez faire avec c'est parce que dans les images réactives, ils continuent de changer. Chaque fois que je refais un cours et je me dis : « Ok, maintenant on fait parfois aussi, maintenant on fait cette autre chose, maintenant on fait cette nouvelle chose. » Au lieu de revenir à cet article, vous pouvez aller à cette chose appelée images réactives et c'est une parcelle de la sienne. Il balise des articles basés sur des images réactives. Quand vous regardez ce cours, c'est 2019, ce sera 2020 d'ici le moment où vous regardez ceci, probablement. Va lire ça, juste voir ce que sont les dernières choses. Je ne sais pas ce que c'est. Je vais chercher ce qu' est FUIF et juste passer par et de voir parce qu'ils pourraient dire, vous pourriez trouver un article appelé Sources Dead, pourquoi vous ne devriez jamais l'utiliser. Cette chose évolue, ne cesse de changer, mais je vous ai donné une bonne compréhension à Jim de cette source. C' est assez pratique, vous oblige à créer plusieurs images et cela nous fait regarder des choses comme la densité de pixels dans un peu plus de détails et, espérons-le, jeter un peu de lumière sur elle peut-être. C' est difficile à franchir. Ça va être tout pour les images. Nous allons quitter notre site. On ne va pas sauver celui-là. Ce sera dans vos dossiers remplis. Je vais quitter cette méthode. Nous avons juste l'échelle de haut en bas et encore une fois j'en continue un. Je vais voir dans la vidéo suivante. 88. Comment ajouter un style css à la première ligne d'une balise p sur un site web: Hé là, dans cette vidéo, nous allons regarder ajouter une classe CSS pour rendre les choses audacieuses pour la première ligne seulement. Peu importe ce qui est dans la ligne, tout deviendra audacieux. Vous pouvez le faire pour la première lettre ou la première ligne, c'est un peu drôle de CSS. Voyons comment le faire maintenant dans VS Code. En regardant ma marque, c'est ce que je veux faire. Je veux faire la première ligne en gras, puis la deuxième ou le reste des lignes pas en gras. Nous allons regarder ce que nous avons fait, notre petite classe CSS donc Visual Studio Code. La première chose que nous devons faire est d'ajouter un peu de texte, au cas où nous allons l'ajouter à toutes les petites boîtes pour le moment, nous n'avons rien. Pour tout nettoyer, débarrassons-nous de la couleur de fond. Je vais l'utiliser pour en main sur en arrière-plan. Je vais aller à VS Code, mon conteneur a une couleur que je veux voler, puis retourner aux colonnes. Avant de vouloir m'en débarrasser, maintenant je veux éditer. C' est choisir en bas, mais tout va bien, je vais ajouter du texte et le rendre vraiment grand. Ce qu'on va faire, on va le faire. La colonne ici va avoir du texte à l'intérieur. Le moment où il a une image après l'image, donc ma balise d'image se termine là, je vais mettre une balise p, et je vais mettre un peu de Lorem Ipsum sur quelques mots et je veux le début ici. Je mets le mot branding. C' est ce que je veux mettre en vedette, je veux cibler ça. Jetons un coup d'oeil ici. Vous pouvez voir ce que j'ai fait ici, j'ai fait la colonne. Il n'a pas de hauteur donc il se dilate pour que les choses s'intègrent. C' est une image dedans parce qu'ils ne peuvent pas tenir ensemble, ils s'écroulent et la colonne devient un peu plus grande. Je pourrais le faire couler en dessous, appeler le nom, installer le vert et les arrière-plans, mais de cette façon est un peu plus simple. Je veux aller et le coiffer, tout en regardant vraiment bien, mais mettons en avant l'audacieux parce que c'est ce que vous êtes venu pour. La façon de l'attaquer est que nous allons le mettre dans nos styles globaux. Ce n'est pas une syntaxe différente folle, sauf que nous utilisons deux deux-points pour les rejoindre. Je veux styler la première ligne, vous pouvez faire la première lettre, la ligne, je veux vraiment le premier mot, mais ce n'est pas une option. Je vais faire la première ligne, je vais faire le poids de la police. Je vais le rendre audacieux. Je devrais mettre en 700, est une taille en gras très normale, mais je n'ai pas encore choisi une police. On utilise Times New Roman. Vous pouvez mettre n'importe quel style que vous aimez tant que c'est le style de texte et que ça va fonctionner, regardons, parfaites. La raison pour laquelle je dis un peu de est que j'attaque toutes les balises p premières lignes et dans notre maquette ici, nous allons avoir plus d'un bit de cas de texte. Il va y avoir du texte ici, ici, ici, je suis obligé d'avoir une autre page, je n'ai en fait qu'une balise p sur ce site, mais si je vais à la page de contact dush et je construis cela et nous utilisons beaucoup de balises p. Je ne veux pas qu'ils soient tous audacieux. Nous allons être très spécifiques, donc nous allons dire seulement la première ligne des balises P qui sont à l'intérieur des colonnes. Espace entre ces deux colonnes pour rejoindre ces deux colonnes. C' est comme ça qu'il faut faire ça. Passons à travers et installons une police, nous allons la faire ressembler à ceci. On va couvrir quelque chose de nouveau ? Non. Nous allons juste mettre un peu de rembourrage, la rendre large, en faire la bonne police, vous pouvez sauter le long si cela vous semble facile, mais si cela ne continue pas, le fera ensemble. Tout d'abord une police, je vais aller à Google Fonts, google.com/fonts. La police que j'ai décidé est quelque chose appelé ASP. Juste un très bon polyvalent gratuit, vient en, condensé aussi, ce qui est vraiment cool. Je vais juste utiliser le habitué. Il va avoir plus, nous l'avons fait avant, mais il est bon de récupérer ces choses, peu moins, vous pouvez les télécharger maintenant tout simplement pas en utilisant sur votre ordinateur, mais pour les utiliser sur votre site Web, vous utilisez l'intégration. Personnalisez-le parce que j'ai décidé d'utiliser régulière et audacieuse et aucun des autres. Je vais l'intégrer, je vais vous attraper, copier ça parce que jusqu'à ce que je touche tag. Tant que c'est avant la fermeture de la tête et que vous allez, vous remarquerez dans ce site combien, je suppose que c'est un site simple. Mais j'ai décidé d'utiliser à la place comme un affichage pour la police Honduras Serif, j'utilise juste la version gras et la version légère pour sortir avec essayer d'organiser la hiérarchie de l'information. J' ai les polices, appliquons-les. Ce que je vais faire, c'est que je vais m'appliquer à tout. Tu te rappelles comment faire ça. Tout dans ce document, je veux être ASP. Tu le fais au corps. La balise corporelle ici va être une famille de polices, et je vais prendre ça de la famille, sauver. Jetons un petit coup d'oeil, et je vais prévisualiser, là vous allez est la bonne police au moins. Choisissons une taille et une couleur et un peu de pagaie. Je vais vérifier mon balisage, vous avez la taille de la police de 14. Maintenant, je vais en créer ma propre, parce que je ne veux pas que les anciennes balises p, ceci, je veux que les balises p qui sont à l'intérieur des colonnes fassent cette chose. En fait, vous pourriez probablement le faire à la colonne, tout ce qui est à l'intérieur d'eux, mais nous le ferons de cette façon. Allons colorier. Il va être blanc et c'est faire la taille de la police. Rappelez-vous, la calculatrice va être 14 fois 0,0625 aléatoire, et ça va être tout, et ça va être des anneaux, nous allons faire du rembourrage, et nous allons faire notre fantaisie tout le chemin, donc top ne sera pas une idée et côte à côte ne sera pas une idée. Juste de bonnes suppositions, jetons un coup d'oeil. C' est bon, ça ne semble pas aussi défini que ça, alors ajoutons un peu plus. Je suppose que je te montre ça parce que je pourrais passer et avant le cours et je suppose que j'écris ça pour moi pour que ça paraisse plus lisse, mais c'est ce que je finis par faire et je suis comme , non ici, non, de retour ici. d'essai, peut-être 25 pour la hauteur. Ça fera pour moi. Vous remarquerez qu'un audacieux est parti. Vous l'avez peut-être déjà remarqué. Remarquez simplement que k est y parce que nous essayons d'appliquer un poids de police qui n'existe pas. Celui-ci utilise 700, pas la vague en gras. Certaines polices utilisent le gras. Je suppose que c'était tout, s'assure juste que je vais rafraîchir, Cliquez avec le bouton droit de la souris. Pourquoi tu ne charges pas maintenant ? P appel de première ligne, tout est toujours vrai. Au moment de la confession, j'étais parti pour un grand comptage rapide de cinq minutes, que s'est-il passé ? Vous l'avez peut-être déjà remarqué. C' est un problème de syntaxe. Le problème, c'est que ce type manquait son petit, je suis une classe complète devant lui. Cela m'a pris un peu de temps, et je suppose que je veux partir de la même chose parce que ça arrive à tout le monde. Je vais me donner la version maigre de ce que j'ai essayé de le défaire, comment je l'ai finalement fait. Fondamentalement, qu'en arrière et que vous sortiez, quelle était la dernière chose que j'ai faite ? J' étais comme si c'était la dernière chose que j'avais faite. Allons juste éteindre ça. Rappelez-vous la barre oblique de police de commande sur Mac, la barre oblique de police de contrôle de p et l'ajoute au commentaire, cela signifie qu'il l'éteint afin qu'il ne soit plus lu par le navigateur. C' est aussi bon que de le supprimer, sauf qu'il est toujours là. Vous allez être super. En fait, nous allons ajouter ce problème résolu. C' était ça le problème. On va l'ignorer. Je l'ai éteint et il ne le faisait toujours pas. J'étais comme d'accord. Donc avec ça, ça ne marche pas, avec ça ne marche pas. Ce n'est pas toi. Ça dit que, peut-être que j'ai besoin d' y aller et que je continue d'éteindre les choses, et ensuite je suis comme là-haut, peut-être que j'ai besoin d'asseoir les poids de police ici pour être 400 poing. Quatre cents, puis plus tard, tournez à 700. Ça n'a pas marché non plus. Je manquais juste un rebond, finalement j'arrive au point où je suis comme aucune idée, rien visuellement donc j'ai juste commencé à taper. Allumez et éteignez ça, n'a pas fonctionné et je me suis  : « Ok, nous allons le retaper. » Je viens de passer et j'ai commencé à taper, et instantanément vous pouvez commencer à voir, c'est déjà un personnage et j'étais comme [inaudible]. C'était ça. Ne perdez pas votre arrêt complet, donc vos règles. On est de retour ? On est de retour. Je vais tourner le dos à vos exercices gentiment. Il suffit d'allumer ces trucs et de t'enlever le dos, on a l'air bien. Une autre chose que nous allons faire est qu'il est coincé ensemble, parce que nous utilisons une réinitialisation CSS donc cette colonne p va avoir une hauteur de ligne aussi. C' est presque, c'est au-dessus d'une ligne. C' est un bon endroit pour commencer, 1.5 rem à big 1.25, génial. En fait, dans ce cas aussi longtemps qu'il est au-dessus de cela, pas un. Tant qu'il est au-dessus de la taille de la police est en cours de démarrage. Tant que c'est au-dessus de 0,8, ça va grossir. Rien de moins que ça, et ça va devenir plus petit. Hauteur de ligne négative. Ce n'est pas quelque chose que j'ai fait. Maintenant, je vais passer à travers et juste continuer à ajouter à ces boîtes pour que vous puissiez sauter le long. Je vais juste copier et coller, mais on peut traîner si tu veux. Vous ne savez jamais ce qui va déterrer en termes de raccourcis ou de se perdre et de le réparer. Je vais avoir une vue, je suis en fait pourrait fermer ça maintenant, avoir une vue complète, rendre ça un peu plus facile. Je vais utiliser cette balise p répétitive. Je vais le copier. Permettez-moi d'utiliser mon curseur multiple pour aller maintenir ma touche Option enfoncée sur un Mac ou maintenir la touche sur PC. J' attrape tous ces types, ce type là et les colle dedans. Espérons que vous devriez toujours travailler si je le colle au bon endroit. Joli. L'avantage de la première classe de ligne, plutôt que d'envelopper cette première balise p et peut-être d'avoir à p tags ici et juste de mettre un décrochage dans la première est que si les tiques deviennent plus longues ou changent, donc l'image de marque. Faisons en fait ça. Si vous mettez plus d'un ipsum Lorem, alors Lorem, nous faisons un test ensemble. Si je mets huit mots à nouveau, est-ce que tu deviens différent, Lorem ipsum ? Non, exactement la même chose à chaque fois. Mon cours de dactylographie au lycée, tu as embrassé. bon et c'est dur, je ne vois pas mes doigts. Mais nous avons ce troisième et nous y voilà parce que c'est faire la première ligne, peu importe ce que vous tapez là-dedans. Ça va être en vrac, ce qui est pratique. Sois doux. Si vous pouviez faire un style de préhension. Style où vous pouvez obtenir le premier mot. C' est tout ce qu'on voulait faire. Une petite vidéo de production bien que nous commencions à apprendre CSS cool et ensuite nous sommes allés sur un peu d'un jury. Mais nous sommes là, nous l'avons fait. Allez sur la prochaine vidéo. 89. Comment faire en sorte que l'en-tête et le bas de page soient de pleine largeur mais que l'intérieur soit centré ?: Salut là. Cette vidéo nous allons faire une navigation le long du haut ici, cette partie de celui-ci s'étend jusqu'à l'extérieur, mais une partie de celui-ci est alignée. Le logo et la navigation ici s'alignent sur la structure du reste de ce site. Le codage n'est pas particulièrement difficile. Nous venons d'avoir un conteneur d'emballage qui va à 100%, imbriqué à l'intérieur est son enfant, et il est juste réparé avec boîte. Ça semble simple, mais je suis méchant quand j'ai essayé de le faire. C' est un vieux genre d'inscription bizarre où, qui va où ? Où est quoi ? A l'intérieur de quoi ? Ici ? Toute cette folie est expliquée dans cette simple vidéo. Je te vois dans une seconde. Tu peux voir mon dilemme. J' ai deux choses. Je veux que ça aille jusqu'aux bords, mais les parties intérieures restent ici. Fondamentalement, c'est juste deux divs imbriqués, rien à voir avec ce gars ici, ce gars ne pouvait pas exister et ça fonctionnerait toujours. Nous allons oublier le conteneur, et nous allons le déplacer vers le bas, et nous allons prendre un peu et le rendre joli. Va juste, pour ma sélection, on y va. Il est maintenant bien mis en retrait. C' est le début de la page. Je vais ajouter un autre conteneur appelé conteneur d'en-tête. Ce type, tout ce qu'il va faire, c'est étirer 100 % de largeur, qui est exactement ce qu'il fait de toute façon. Je vais juste le mettre bien au-dessus de l'axe qui commence. Ce type est un conteneur d'en-tête. Constamment orthographié que l'un a tort. Nous n'avons pas besoin de faire une largeur, car par défaut il devrait atteindre la gauche et la droite. Mettons une couleur de fond. J' allais choisir le gris, choisir le noir et faire glisser ça autour. Ouais, ça va faire. Nous avons un gris là-dedans et nous avons besoin d'un peu de hauteur, donc nous allons juste le mettre en hauteur pour le moment, juste pour que nous puissions le voir, mettre dans un 100 pixels. Jetons un coup d'oeil dans le navigateur. On y va. Par défaut, il va s'étirer tout le long. C' est un élément de niveau bloc parce que c'est un div de sorte que cela le pousse vers le bas, et il a une couleur d'arrière-plan. Mettons un peu de marge dessus pendant qu'on est là. On va aller marge, en bas. Je vais mettre, je ne suis même pas sûr, 40 pixels, jetons un coup d'oeil. Je garde [inaudible] le mauvais, ouais 40 pixels, c'est bien. Maintenant, nous devons mettre ce conteneur interne, donc nous avons juste besoin à l'intérieur de notre conteneur. En fait, nous n'allons pas utiliser l'en-tête, donc nous pouvons utiliser la balise pré-faite. Tu peux aller ici et on va le coiffer. Que devons-nous faire pour ce type ? Trouvons juste une couleur de fond pour lui d'abord. Un en-tête, n'a pas besoin du stock complet, rappelez-vous, parce que c'est une vieille balise HTML5 régulière, et je vais faire deux choses. Je vais lui donner une largeur, donc on va correspondre à ce qu'on a dans le conteneur, alors on va le voler. Nous allons faire de la largeur, donnons-lui une couleur de fond. Pas pour une bonne raison. Juste parce que je veux te montrer où ça finit. On va utiliser le violet bleu, ça va être excitant. Jetons un petit coup d'oeil. Bien sûr, même si ce n'est pas le cas. Il a besoin d'une hauteur minimale. Je vais me débarrasser de ces hauteurs minimales, les deux en une seconde parce que je n'en ai pas besoin et c'est presque là, donc c'est la bonne largeur. C' est à l'intérieur de ceci, mais il doit être synthétisé. Tu te souviens comment faire ça ? Ces en-têtes doivent être marge, la gauche doit être automatique et la droite doit être automatique, mais le haut et le bas doivent être zéro, donc zéro, auto devrait le faire. On y va, maintenant on met des trucs ici et ça sera au centre. Mais si nous nous débarrassons de la couleur de fond, il ne sera pas visuellement visible. Ce n'est pas un mot, je sais, mais ce que nous allons faire pour le reste de la vidéo, c'est que vous faites la même chose pour le pied de page, juste besoin d'être à l'extérieur du conteneur. Nous ne le voulons pas à l'intérieur de là parce que ce conteneur le force à être une largeur alors assurez-vous juste que c'est force à être une largeur alors assurez-vous juste que c' l'extérieur de ce gars et mettez-le dans un pied de page au lieu d'en-tête, faites exactement la même chose. Nous avons besoin d'un conteneur de pied de page, puis de votre pied de page à l'intérieur. Ce que je veux faire maintenant, c'est ajouter quelques éléments de base afin que je puisse définir des tâches que vous devez faire vous-même dans la vidéo suivante, alors mettons-nous quelques parties cool. Pour le moment, nous avons un en-tête avec un grand fond violet, dont nous n'avons plus besoin. Au revoir. En fait, je vais laisser ça à la fin commenté, sorte qu'au cas où le tien ne fonctionnait pas, vous pouvez vérifier le mien. À l'intérieur de l'en-tête, je veux deux balises, mais rappelez-vous qu'il n'y a pas de logo, comme un logo prédéfini comme en-tête, donc vous devez ajouter notre propre classe. A l'intérieur de ça, il va y avoir du texte. Eh bien, c'est juste mon nom, collé là-bas et aussi là juste après va être une autre balise div appelée nav mais rappelez-vous qu'il y a un nom spécifique pour ce code nav. Et si tu ne l'avais pas. Ça n'aurait pas d'importance. Cela fonctionnerait tout aussi bien, mais nous devrions essayer d'utiliser le balisage sémantique correct. Il y a du texte sur le contact de prix. Vous pouvez simplement les taper. À quoi ça ressemble maintenant ? Assez pour de bon, mais c'est assez pour nous faire aller pour notre prochain projet, préparer le temps de devoirs dans la prochaine vidéo, je te verrai dans une seconde. 90. Projet de cours 05 - Conception de l'en-tête: Très bien, c'est encore un projet de classe. Nous allons prendre notre regard laide à, oh, regarde ça, le changement de couleur de fond, nous avons un impact différent ici, nous venons de le coiffer. Les exigences sont comme toujours dans nos fichiers d'exercice dans un dossier appelé Projets de classe et ouvrir, qui serait ancrer, et ce sont les exigences. C' est ce que nous faisons. Le texte devrait être blanc au moment où il est noir. Cette chose ici est un projet de recherche. Nous n'avons pas couvert les balises de span ou les classes de span auparavant, mais je veux que vous jetiez un oeil en ligne, voyez ce que vous pouvez savoir à ce sujet, et voyez si vous pouvez implémenter cela. Fondamentalement, le haut ici, et vous pouvez voir une partie de celui-ci est audacieux et une partie de celui-ci n'est pas gras. Il va être très utile d'apprendre des balises de portée pour faire des choses comme ça. Une balise terme span & span classe sont les mêmes, regardez les deux. Le gros, c'est qu'ils sont sur la même ligne. Attendu que, je pourrais faire CSS, deux balises différentes et elles seront sur des lignes séparées et ensuite je pourrais les fuger pour les faire aligner ensemble, mais les balises span ou les classes span sont vraiment utiles pour cela. C' est toute l'aide que tu reçois. Je veux que vous voyez si vous pouvez le trouver et le mettre en œuvre. Les prochaines choses que vous allez faire sont des choses que nous avons déjà faites. Le logo doit être à gauche et la navigation ici sur le côté droit, donc à gauche et à droite. Qu'est-ce qu'on va faire d'autre ? Je veux que vous les centriez, au centre du frappeur, pas le long du haut, verticalement, centré sur le cas bien. Fais ça pour les deux. Installez les boutons comme nous l'avons fait. On l'a fait plusieurs fois maintenant. Vous pouvez voir ce sont huit tags qui sont réalisables, j'ai un survol au-dessus d'eux, je peux cliquer dessus, et ils ont une doublure à l'extérieur. Je veux que tu fasses ça. Le dernier est d'asseoir tout le fond à cette couleur ici. Vous voyez la différence avant la lumière, celui-ci va juste en gris clair pour séparer ces choses. Quand vous l'aurez fait, envoyez-moi une capture d'écran, votre preuve que je l'ai fait et que ça a l'air bien. Avant de passer à la vidéo suivante, n'oubliez pas que vous pouvez les placer dans la section des affectations de ce site Web selon qu'il l'a ou non. Tous les commentaires sur cette page similaires à une capture d'écran, pouces vers le haut, visage souriant ou visage en colère si cela ne fonctionne pas. En voyant aussi cette même image, tagvez-moi sur Instagram, tagvez-moi sur twitter, utilisez ces hashtags, hashtag B-Y-O-L, c'est ce que j'utilise pour séparer les différents groupes de cours que je fais, et rejoignez le Groupe Facebook. Il s'agit d'une invitation seulement, alors demandez à être accepté et vous serez accepté, puis publiez votre capture d'écran. Va le faire. Si vous ne voulez pas, nous allons tout faire dans la prochaine vidéo, comme nous le faisons. Mais je connais les gens, ils prennent la peine de prendre ce temps supplémentaire et de déconner avec elle et se perdre et trouver le chemin, sont d'autres personnes qui vont vraiment trouver le design web, ça va coller beaucoup mieux quand vous devez vraiment aller et l' implémenter plutôt que de me suivre étape par étape. J' essaie de te culpabiliser en le faisant cette fois, j'ai essayé de menacer, de décevoir, j'ai eu mon visage décevant, je l'ai appris plusieurs fois, celui-là je vais pour une culpabilité directe. D' accord. Off, fais ton travail et je te verrai dans la prochaine vidéo. 91. Projet de cours 05 - Conception de l'en-tête COMPLET: Comment ça s'est passé ? Je me demande où tu es resté coincé, quels morceaux étaient faciles, comment tu es allé avec ton petit projet de recherche ? Je vais le faire avec toi maintenant, et tu peux comparer les notes. Ma façon ne sera pas la meilleure façon de le faire, ce sera un moyen de le faire. Voyons voir. Nous allons commencer par le simple, rendre le texte blanc. texte est blanc, mais celui-ci est blanc, ce que je pourrais faire, c'est d'être intelligent et dire en fait, au lieu d'essayer de leur dire tous d'être blancs, je vais trouver ce gars, débarrasser de lui, et ils deviennent tous noirs. Je vais dire ici mon étiquette de corps, en fait, vous pouvez tous être blancs, s'il vous plaît. Joli, facile. Maintenant, nous devons séparer ces gars parce que ce sont des étiquettes roulées régulières, ils sont assis les uns sur les autres, nous voulons les diviser. De quelle façon avez-vous utilisé ? De quelle façon je vais faire ? Nous allons utiliser Flexbox. Il doit aller sur le parent, et le parent dans ce cas est conteneur d'en-tête. Nous allons dire, afficher, et nous allons utiliser flex. Voyons comment ça va. Qu' est-ce qu'il fait ? Ça n'a pas marché. Vous avez peut-être commencé de la même façon, regardons un peu. C'est pour ça. Je l'ai mis en tant que parent, j'ai ajouté Flexbox à ce gars, conteneur d'en-tête. En fait, cela affectera tout ce qu'il contient ou les enfants directs, et dans ce cas c'est l'en-tête. Je veux que ces gars soient attaqués, pas ce type, donc nous devons le mettre sur l'en-tête, pas sur cet emballage extérieur. Désolé mon pote, tu as tort. Il doit être en-tête, il doit être flex. Voyons voir comment fonctionne. Mieux, le côte à côte, maintenant nous voulons que l'espacement fonctionne et nous allons utiliser le même que ici, justifier le contenu. Vous devriez tout diviser, justifier le contenu, l'espace entre. Jetons un coup d'oeil à ça, à gauche et à droite. Nous allons maintenant les amener au centre au milieu. Donc, nous allons aligner les éléments, et nous allons faire le centre. Voyons comment ça se passe, gentil. Nous allons laisser la balise span à la fin, principalement parce que je veux la séparer dans sa propre vidéo, juste à la fin pour que nous puissions pleinement psychisme mémorable. Lorsque vous revenez à ce cours vidéo sur la façon de les faire, ils seront leur propre vidéo séparée. Ce que nous allons faire maintenant, c'est les styles. On l'a déjà fait. Si tu as triché et que tu es allé à ton ancienne mission et que tu les attrapes, je suis fier de toi. C' est l'efficacité. Mais on va le faire ensemble. Avant que nous puissions réellement les bloquer, nous devons les séparer parce que le moment et la balise nav ici qui ne sont que des morceaux de texte. Ce qu'on va faire, c'est mettre quelques retours, puis les vider. Je veux trois balises A, et j'utiliserai mes petits raccourcis, Option de commande, Flèche vers le bas sur un Mac, et c'est Alt, Ctrl, Flèche vers le bas sur un PC. Je vais mettre dans mes hashtags, et en fait je vais juste travailler sur ceux-ci un à la fois, je viens de les copier et de les coller ici, ici, et ici. Mon balise de navigation remonte, viens ici mon pote. En alignant enfin. Ça a l'air sympa. Maintenant, je peux les attaquer en bas ici avant la vue de ma tablette, je vais les styler maintenant. Je ne vais pas arrêter toutes les étiquettes A dans mon cas. Vous pourriez faire nav A, donc vous pourriez dire que je veux toutes les balises A qui sont à l'intérieur de nav, et nous pourrions le faire. Donc tu as pu aller comme ça, c'est très bien. Vous pourriez aller ici et dire, je vais créer une classe parce que peut-être vous allez réutiliser ce bouton. Donc tu appelles ça « mon bouton ». En fait, nous le faisons pour les trois en même temps. Donc la classe va être mon bouton, et nous allons arrêter ça ici. Quoi qu'il en soit, ça n'a pas d'importance. Cela dépend vraiment si vous prévoyez d'utiliser ces boutons ailleurs, alors cette méthode particulière pourrait être un peu meilleure. Regardons-les d'abord. Ils sont par ici, pourpre. Je vais d'abord rendre la couleur blanche. Ce que je pourrais faire est de rendre tous les liens actifs de couleur blanche et d'éteindre le sous-jacent. Vous ne l'avez peut-être pas fait de cette façon, vous pouvez le faire dans la classe sur laquelle nous travaillons. Tu n'as qu'à le faire une fois parce que je te parie que je dois faire ça quelques fois. Toutes les balises A vont avoir une couleur de blanc et la décoration de texte n'en a pas, ce qui se débarrasse du soulignement. Ici, tu y vas. Tu aurais pu le faire ici, ça aurait marché. Rembourrage dans ce cas, peu importe ce que vous avez deviné. Je crois que j'ai fait 10 en haut et en bas et 25 à gauche et à droite. Jetons un coup d'oeil. Cela ne fonctionne pas vraiment tant que vous n'avez pas ajouté la bordure. Dans ce cas, le style de bordure va être solide, et nous aurons une taille de bordure. Il me donne à chaque fois la largeur de la bordure, et nous allons avoir juste un pixel. Jetons un petit coup d'oeil. C' est à peu près ce que je veux. A quoi ça ressemblera dans ma maquette ? avais un peu plus d'espacement, donc je vais juste mettre un peu de marge à gauche de tous. Mettons un peu de marge à gauche. Combien ai-je ? Peut-être environ 20 pixels. Jetons un coup d'oeil. Sauvez-le, ça a l'air bien. Cliquable, vous pouvez aller n'importe où en ce moment. Quelque chose d'autre dans notre liste ? Balise Span, nous le ferons dans une seconde. Le logo doit être aligné à gauche, ils doivent être centrés verticalement dans l'en-tête. bouton Nav devrait fonctionner. Tout l'arrière-plan, faisons-le. C' est la couleur que je veux qu'elle soit, et tout ce qu'on a à faire, c'est dire : « Mon pote, tu es une couleur de fond de ça. » N' oubliez pas les points-virgules à la fin, et j'espère que c'est cette couleur gris clair. Pourquoi ça ne marche pas ? Parce que j'ai oublié mon hachage. Voilà, tu y vas. C'est ça ? Maintenant, c'est l'heure de notre balise span. Je vous verrai dans une seconde dans la prochaine vidéo où nous expliquons tags de span dans sa propre petite vidéo savoureuse. On se voit dans une seconde. 92. Comment utiliser une balise span ou une classe span en HTML pour modifier le texte ?: Salut là. Dans cette vidéo, nous allons rendre cette partie de la ligne unique en gras, en laissant cela non gras, en utilisant quelque chose appelé une balise span. Ok, il semble que nous utilisons une classe de span dans ce cas, il enroule juste autour des mots que nous voulons changer. Il ne casse pas sur deux lignes, et vous le stylisez dans votre CSS. Sautons dans le travail. Comment le faire, et pourquoi on voudrait le faire ? De plus, si vous avez déjà fait une balise span, vous n'avez pas besoin de celle-ci. Retournez à la fin de cette vidéo, j'ai comme un petit peu plus secret que nous allons faire en termes de changement de nos préférences. Petit régal savoureux à la fin. Commençons. Ok, donc parlons d'enveloppement de mots, je veux enrouler juste autour de cette ligne ici avec juste ces mots ici. Voyons comment le faire. Il y a deux façons, donc selon votre projet de recherche, cela dépend de qui vous avez. Je vais vous montrer dans les deux sens, alors d'abord, trouvez le texte. Ok ici, et on doit l'envelopper dans une balise span. Ok, donc je vais utiliser mon doux changement de commande P, ou le changement de contrôle P Ok, et je vais taper une enveloppe. Nous allons envelopper sans abréviation, et nous allons taper span. Chaque côté a besoin de travée, S-P-A-N, c'est mon ascension. Vous n'avez pas à l'envelopper, vous pouvez simplement le taper de chaque côté. Maintenant, vous avez deux façons de l'implémenter. Vous avez le CSS en ligne droite, ou vous pouvez faire ce qu'on appelle une classe de span, donc nous allons faire le CSS droit ici. Ce que vous faites, c'est que vous le coiffez, et que vous commencez à faire, qu'est-ce que c'est ? Il s'appelle CSS en ligne, nous allons aller à notre audacieux, et nous espérons que cela devrait le faire. Regardons un peu, rafraîchissons, ou si ça ne marche pas, allez en direct. Maintenant, ça marche, génial. Très bien, donc toute version, ne sais pas pourquoi ça est mort, mais de toute façon nous sommes de retour, et cela a rendu ça audacieux, et c'est parfaitement beau travail fait. Si tu l'as fait comme ça, on est en affaires. Le seul problème avec cette façon est, disons, nous voulons aussi la colorer, donc nous allons changer la couleur, donc vous devez mettre un point-virgule, vous tapez la couleur comme, normalement, deux-points, et je vais choisir un couleur écran loin, enregistrez-le. Regardons un peu, et c'est pour l'écran. Disons que nous voulons aussi faire autre chose, et vous pouvez voir comment. Moche, c'est le mot. Ça fait longtemps, et il se passe tellement de choses ici. Cela devrait être ici dans notre CSS. L' autre problème est qu'il n'est pas réutilisable. Dis que je veux refaire ça, ok, je veux envelopper autre chose, donc je vais devoir prendre ce morceau. Ok, et disons que je voulais le faire à ce dernier mot dans notre premier onglet ici. Je vais envelopper le début là, et ça me donne automatiquement ma portée, et la fin de la fermeture des travées. Il s'ouvre, il dit autoriser les choses. Ces vers l'extérieur, se ferme avec une barre oblique, et cela fonctionne, mais je l'ai maintenant deux fois, et il commence à devenir grand, et lourd. Essentiellement rien de mal à cela, mais nous allons vous montrer une façon plus classifiée de le faire, et c'est un bon mot à classe, parce que sa classe, voir ce que j'ai fait là-bas. D' accord, on va donner un nom à cette classe. Nous allons l'appeler audacieux, et ici, nous allons le styliser, peut-être juste avant que les tablettes ne commencent. Ok, donc la fin de mon global, donc celui-ci va être appelé audacieux, et un peu voir la gentillesse de ceci, alors qu'est-ce que c'est, poids des polices, et nous allons choisir 700, et c'est juste une façon plus classifiée. Tu ne peux pas utiliser la cruche deux fois, allez. Juste une meilleure façon de l'appliquer, au lieu d'en ligne, c'est ceci, et le truc cool à ce sujet, c' il est réutilisable, parce que nous pourrions appeler ça audacieux, et donc nous pouvons appeler celui-ci comme un point culminant. Ensuite, on va y ajouter un tas de trucs. Surlignez, et on pourrait dire, d'accord, ça va être une couleur aléatoire. C' est quoi aujourd'hui ? Violet moyen, et nous pouvons faire la taille de la police. Tu comprends ce que je veux dire, 20 pixels juste pour rigoler, donc c'est plutôt sympa. C' est un peu plus lourd par ici. Jetons un petit coup d'oeil à ce que ça va. Ok, mais je peux le réutiliser aussi, donc je peux dire ici, vous allez aussi être une balise span de raccourcis aléatoires. Voilà, vous allez avoir mon décalage de commande P, le décalage contrôle P. Vous allez avoir une balise span, et vous allez avoir un span plus de surbrillance. Regardons un peu. On y va. D' accord, je vais revenir en gras, et une chose que nous ferons avant d'aller un peu savoureuse à la fin de cette vidéo, je vais vous montrer quelque chose de cool, alors laissez-moi juste récupérer ça aussi. Je vais laisser ça comme point culminant. Ok, et débarrasse-toi de ça. Comment ça a l'air maintenant ? Parfait, mais les derniers sont audacieux. Je suis d'accord avec ça, mais c'était la chose que je voulais faire. Une chose avant d'y aller est expliquer pourquoi nous ne le faisons pas comme, disons deux classes séparées, ou des balises P, regardons juste un peu, et je vais fermer le style pour le moment juste pour vous montrer comment il On dirait. Je vais le dupliquer. Je clique n'importe où dans la div, et j'utilise son option flèche vers le bas sur un mac, et ce sera ALT shift flèche vers le bas sur un PC, et je vais regarder le faire de cette façon, et nous allons les imprimer, afin que vous puissiez voir. Disons, nous allons nous débarrasser de notre classe de travée, et nous allons faire une façon légèrement différente, et je vais faire semblant que j'aime seulement le mot Daniel, et que je le fais audacieux de Daniel. Ce que je pourrais faire, c'est que je pourrais créer une balise div pour le logo. Je peux faire deux étiquettes P. Je vais l'envelopper dans une étiquette P. Non, mauvais. Allons [inaudible] P, envelopper avec l'abréviation P tag. Super. C'est plutôt gentil. Ok, je vais finir ça. Le premier gros problème est, même si c'est sur la même ligne, parce qu'une balise P est une balise de niveau bloc, même si elle est sur sa propre ligne. Ok, nous allons envelopper cela dans une autre étiquette P, et allons envelopper, et étiqueter précédent. Rangons ça. Maintenant, quand je bouge dans ces gros morceaux, certains sur un Mac, je ne sais pas si c'est vrai sur un PC, je l'ai probablement. Je l'avais sur la touche d'option, et utilisez ma flèche gauche et droite, voilà comment sauter à travers ces lignes. Sur un PC, essayez-le. Peut être ALT, flèche gauche ou droite, et si je maintiens la touche Maj enfoncée en même temps, donc mon Mac c'est l'option shift, il sélectionne ce gros saut, donc je peux maintenir l'option et le décalage, et cliquer sur ma gauche vous pouvez le voir juste met en évidence tout cela. Ce n'était pas ce que je disais, mais ce sont deux balises P distinctes, et maintenant je peux styler ceci avec une classe de surbrillance. Ça marchera, sauf ici, il y a mon deuxième là-bas. Il est sur deux lignes distinctes. Donc, je voulais être sur une ligne, et une balise span fait cela est en ligne, pas en bloc. Je pourrais maintenant aller, et trouver ma balise P, et dire si c'est la balise p à l'intérieur de l'affichage du logo, ligne ou en ligne, afin qu'elle ne tombe pas dans ses propres lignes, et cela fonctionnerait. Mon problème avec cela cependant est que Google, son moteur de recherche verra que comme un peu de contenu distinct de cela, alors disons que nous l'avons fait pour le logo, donc le logo était gras, mais ce n'était pas. Cela finissent sur deux lignes séparées, et Google ne serait pas connecter les deux facilement. Je ne sais pas que vous êtes tout au sujet de la conception du logo. Il sait que vous êtes tout au sujet de la conception du logo. Donc, les deux types distincts de parties à la page, donc j'aime m'assurer comme, surtout pour des choses comme les H et les chauffages, très souvent tous sur deux lignes, et je veux faire un style différent à ces deux juste, parce que je suis un concepteur, et malheureusement se séparer avec des balises P, ou 2H1s va briser le contenu, sorte qu'il pourrait ne pas chaîner ensemble pour le moteur de recherche, et c'est juste un peu plus agréable. Au revoir, sortons de vos genoux. Oh, j'ai promis une petite friandise à la fin. Je vais ouvrir mes styles, double-cliquer dessus, faites-le glisser ici. Chaque fois que j'ai fermé VS Code pour aller déjeuner ou dormir, je me réveille, et je dois le faire. Vous remarquez cela avant d'aller voir. Nous sommes comme, c'est un raccourci, mais imaginez si nous l'avons allumé pour toujours, alors je vais vous montrer quelques parties de passer à travers et éditer ce truc, et changer les préférences. C' est bizarre par rapport à d'autres programmes, alors ce que vous faites, c'est que vous allez voir la commande pellet. Nous avons utilisé un raccourci, commande shift P sur un Mac. C' est le décalage de contrôle P sur un PC, et vous finissez à cela, et nous l'avons utilisé pour émettre des enveloppements. Ce qu'on veut faire, c'est aller aux séances. Ok, et de toutes ces choses, nous voulons aller à celui-ci qui dit, paramètres utilisateur, alors ouvrez ça, et ici, ça vaut la peine de prendre un peu de temps pour y jeter un coup d'oeil. Les choses que vous étiez, j'aimerais changer ça. Celui que je veux, c'est le mot wrap, donc cette petite boîte de recherche ici cherche les séances, et je peux dire, une enveloppe. Ces contrôles et enveloppements de mots sont désactivés par défaut, nous allons l'activer par défaut, et nous pouvons le désactiver si nous n'en avons pas besoin. Il y a aussi d'autres trucs amusants là-dedans, mais c'est celui que je voulais en ce moment. C' est fermer les paramètres, et maintenant à chaque fois que je l'ouvre pour le reste de ce cours, c'est Wrap, j'espère. C' est ça. Span tags, nous avons étendu CSS en ligne. Donc juste une balise span, et maintenant nous avons fait une classe span. Si vous avez fait quelque chose de légèrement différent, comment auriez-vous pu le faire autrement. Si vous avez fait quelque chose d'autre, et que cela fonctionne, envoyez-moi une capture d'écran du code que vous avez fait fonctionner. Mettez-le dans les commentaires, ou étiquez-moi sur les médias sociaux, je serais intéressé de voir quelles sont les façons créatives que vous avez fait fonctionner. C' est tout pour les balises span. 93. Comment épingler la navigation en haut d'un site web - nav fixe: Salut là. Nous allons fixer notre navigation au sommet. Nous allons commencer par là où il fait défiler et disparaît, et ensuite nous allons le faire, où il reste fixe et tout glisse en dessous. C' est super facile à faire. Sautons et faisons-le maintenant en CSS. Tout d'abord, nous devons identifier notre truc que nous allons épingler. On ne veut pas épingler juste ce petit morceau ici. On veut toute la grande boîte grise. Jetons un coup d'oeil à la façon de le faire. La grande boîte grise est qu'on l'appelle le conteneur d'en-tête, c'est ce type. Conteneur d'en-tête, a déjà un style ici. Tout ce que nous allons faire est d'ajouter deux bits, le bit principal est la position et fixe. Super simple. Donnons-lui un aperçu, et ça marche. Tu es comme, wow, ça n'a pas marché du tout. Il a aussi besoin d'une largeur. Parce que par défaut, c'était une largeur de 100 pour cent, mais évidemment la position fait des choses étranges à elle, pas des veuves, nous avons besoin de largeur. Nous ferons la largeur et nous dirons 100 pour cent. Maintenant, ça devrait marcher. Quand je fais défiler, il ne se passe pas grand-chose. Vous devez simuler le défilement pour monter et descendre. Tu es genre, oui, ça marche. C' est ignorer que tout est glissé en dessous. En le mettant réparé, cela signifie qu'il est sorti du flux et ne bloque plus. Ça ne bloque pas les autres gars et les pousse vers le bas. Donc on va devoir simuler l'écart là-dedans. Je veux que vous mettiez la vidéo en pause maintenant et que vous ayez juste une petite réflexion, peut-être tester quelques idées sur la façon dont vous pourriez résoudre cela. Parce que ce que j'aime le plus dans le design web, c' est qu'il s' agit d'un gros vieux puzzle et qu'il y a une solution pour tout cela. Si vous l'avez vu sur le site Web d'une autre personne, cela signifie qu'il existe. Nous savons tous qu'il peut arriver que vous puissiez avoir un en-tête en haut et des choses qui ne glissent pas en dessous. Tu vas juste réfléchir et essayer de trouver comment le faire. Quoi qu'il en soit, c'est ce que j'aime dans le design web. C' est un Rubik's Cube solvable. Passe une pause, réfléchis, et je le ferai avec toi dans une seconde. Tu l'as mise en pause ? Tu as réfléchi ? Tu l'as fait marcher ? Ou vous avez parlé de bonnes suppositions ? Regardons un peu. La façon dont j'ai pensé à le faire est que le conteneur est en dessous. Il a juste besoin d'être poussé un peu vers le bas. Si je trouve le conteneur et ajoute des trucs en haut, rembourrage ou marge, je pense que les deux fonctionneront. Nous allons essayer les deux juste au cas où, mais un peu de rembourrage vers le haut. Dans ma tête, ils devraient tous les deux travailler. Mettons comme 150 pixels. Jetez un coup d'oeil. On y va. Ça a très bien fonctionné. Est-ce suffisant ? Oui. Cent cinquante pixels. Super. Il glisse en dessous, mais commence par un peu d'espace. Fondamentalement, nous mettons aussi haut que ce soit. Eh bien, quelle était la hauteur du conteneur d'en-tête ? Il avait une hauteur moyenne de 100 plus un rembourrage au fond. Disons que 140 devrait correspondre exactement à ce que nous avions l'habitude. Donc ces deux-là ensemble. De combien avons-nous besoin pour Margin-bottom ? Nous n'en avons plus besoin du tout. Est-ce que nous ? Non. Toujours quand vous réparez une chose, essayez de supprimer les autres choses, parce que plus tard, vous seriez comme, y a-t-il une raison pour que je mette en bas de la marge ? Est-ce essentiel ? Pendant que vous êtes au milieu de ça, vous êtes comme, en fait, je n'ai pas besoin de ça. C' est ainsi que nous faisons une navigation fixe vers le haut. Assez facile. N'oublie pas la largeur. Passé à la vidéo suivante. 94. Comment créer un menu mobile simple et réactif en utilisant uniquement CSS: D' accord. Nous allons faire un menu réactif. Ce ne sera pas le grand menu déroulant, nous allons le faire dans la prochaine vidéo, nous allons regarder un CSS simple, simple et simple, pas de compétences supplémentaires basées sur ce que nous avons appris jusqu'à présent, juste remaniement des choses. Parce qu'au moment où il fait ça, il descend et va, Oh ouais cool, et il arrive à entendre va, Ah aussi mauvais. Nous allons le changer dans cette vidéo, sorte qu'il change de format à partir de là quand il descend à un certain niveau, boom. C' est bon sur mobile. On va changer ça, donc ce n'est pas fixé au sommet. Les boutons sont faciles à cliquer, et ce n'est qu'un simple remaniement de CSS basé sur une requête multimédia. Allons entrer maintenant et travailler à la façon de le faire. Notre menu que vous avez vu, nous le faisons à cause de cela. Il descend à la taille d'une tablette ou d'une taille mobile et tombe juste en morceaux. Nous devons décider quand cela s'effondre. Présentons un aperçu sur un iPad et le téléphone. Nous allons cliquer avec le bouton droit de la souris, aller à Inspecter, nous allons allumer ici, un petit aperçu de l'appareil, et en haut nous allons regarder l'iPad. Sur iPad, il regarde 50 pour cent, passons à 100. En fait, c'est bien sur un iPad. Je pourrais pousser un peu ce logo, mais c'est totalement utilisable. Jetons un coup d'oeil à ma boîte iPhone et il n'est totalement pas utilisable. Tout est en train de s'effondrer et de tomber en morceaux. C' est ce que nous allons cibler, notre téléphone portable, c'est à peu près 375. Jetons un coup d'oeil à notre requête média. Où est-il ? Notre requête sur tablette multimédia va être celle-ci, sur la vue mobile. On va travailler à l'intérieur de ces accolades. Juste après notre petit mobile de cache-cache, on va commencer à s'en débarrasser. La première chose que nous allons faire, c'est qu'il faut remplacer. Plus tôt, nous avons dit affichage flex se méfier. Notre en-tête, non pas celui-là, celui-là. Nous avons dit comment en-tête, qui a notre logo et notre navigation dedans, je veux qu'il affiche flex et qui a fait la ligne à côté de l'autre. Ce que nous pourrions faire pour cette vidéo, c'est je ne vais pas toucher au HTML, donc je vais l'arrêter, et je vais juste faire glisser ça, et je bouge ça, le luxe de travailler de ma part signifie qu'on peut le voir par ici. Je vais le déplacer à 100 pour cent et je pourrais le rapprocher pour l'utiliser afin que l'éditeur n'ait pas à zoomer trop loin. Essayons ça. La première chose que nous voulons faire, c'est que nous ne voulons pas côte à côte. Il y a plein de choses à faire, ce n'est pas forcément le premier. Cet en-tête de camarade affiche flex, remplaçons cela dans mon mobile. Ici, je vais dire, en-tête, non ce n'est pas une classe, c'est une balise HTML prédéfinie, donc l'en-tête va s'afficher, au lieu de flex, nous allons revenir à un bon vieux bloc, donc ils empilent au-dessus de l'un l'autre. Le logo est là maintenant le nav est en dessous. Maintenant, ces petits gars nav n'affichent pas non plus bloc, même si l'en-tête dit les éléments nav voient ces petits a-tags que nous avons utilisés, ils semblent faire leurs propres choses. On va dire, et qu'est-ce qu'on veut ? Les a-tags qui sont à l'intérieur du nav pouvez-vous afficher le bloc aussi ? Bloc d'affichage. Maintenant, ils sont tous au-dessus de l'autre. Parfait. C'est d'abord pour que tout soit centré. Je pourrais le faire pour le nav et l'en-tête, mais nous devons aussi le faire pour chaque chose, eh bien le logo, donc nous le faisons pour l'en-tête parce que cela fera à la fois le texte du logo et, espérons-le, tout le texte à l'intérieur des boutons. Allons aligner le texte et nous allons essayer de le garder au centre. On y va, gentil. Le logo, nous dirons .logo, rappelez-vous que ce n'est pas une balise HTML prédéfinie, même s'il semble qu'il devrait l'être. On va lui donner une hauteur moyenne de 50 pixels. Nous voulons aussi un peu de rembourrage en haut. En fait, nous pourrions faire le rembourrage en haut et en bas plutôt qu'une hauteur minimale, faisons ça. Nous faisons le rembourrage et nous le ferons, en haut et en bas, nous allons faire 40 pixels, et gauche et droite va être zéro. Vous n'avez pas vraiment besoin de mettre px, vous mettez juste zéro et zéro est quelle que soit la mesure que vous allez utiliser, point-virgule. 40 en haut et en bas et zéro à gauche et à droite. Ça nous a donné de l'espace. La seule autre chose, c'est que cela doit passer à notre verbage. Il y a une marge de largeur sur ces gars. J' ai pensé que ce serait une marge pour ces gars. Marge à gauche, je vais le mettre à zéro. Cela n'a pas fonctionné, donc j'ai essayé parce que j'avais déjà regardé le HTML, à la fois c'est une balise a à l'intérieur d'un nav, mais nous avons aussi cette classe appliquée. C' est ce que j'essaierai ensuite. Au lieu d'être sur celui-là, je dirai, et notre classe a appelé le bouton de navigation, nous allons essayer la même chose ici. On dira que Margin-gauche est zéro. Est-ce que ça marche ? Ça ne marche pas. Je l'ai appelé la bonne chose, mais nav, ça s'appelle mon bouton, et l'a étiré. Que mes amis est une belle façon simple de le redéfinir juste sur mobile. Ce n'est pas grand, je veux dire que vous le ferez dans la prochaine vidéo, mais c' est assez facile à mettre en œuvre. Jetons un coup d'oeil. Ipad, je tape loin je peux cliquer sur toutes ces choses, faisons-le 100 pour cent. Je peux les taper tous, mais quand je descends sur mon téléphone, il éteint la mise en page, semble toujours bien, une chose qui n'a pas l'air bien, ça cache beaucoup de morceaux donc on a besoin de le pousser vers le bas, ou dans ce cas, Je veux probablement éteindre le menu fixe parce qu'il occupe une énorme quantité de l'immobilier sur mon téléphone. Jetons un coup d'oeil à faire ça. Qu' est-ce qui le contrôle en haut ? On l'appelait le correctif de position, il est là. Mon conteneur principal avait la position fixée ici sur mon conteneur d'en-tête. Ai-je un conteneur d'en-tête ? Je ne le fais pas. On va faire celui-là. Conteneur d'en-tête, je ne veux pas répéter tout cela. Je veux me débarrasser de ça. Au lieu de la position fixe, nous allons les rendre relatifs. parent signifie que je suis par rapport à toutes les autres personnes sur la page, donc je suis conscient de ce qu'ils font. En ce moment, peux-tu voir ce gros écart ? Cela vient de plus tôt, rappelez-vous que nous avons dit conteneur, mettre un énorme gros rembourrage en haut. Maintenant, je dois dire que le rembourrage du conteneur en haut, s'il vous plaît partez. En bas, je ne mets pas d'ordre réel, essaie juste de mettre une hiérarchie dedans. On va faire le rembourrage. Je pense que ça peut être nul. Mettons-le à zéro. Jetons un coup d'oeil. Il fait défiler ce qui est cool, mais je veux un peu de rembourrage, peut-être juste 40 pixels pour correspondre à l'écart en dessous, et c'est un vrai simple. Jetons un coup d'oeil en responsive. Mobile, il y a un peu bizarre écart qui se passe ici. Ce que je pourrais avoir à faire est de mettre en œuvre tout cela beaucoup plus tôt que je ne le pensais. Ipad, mais il n'y a pas de terre d'homme de téléphone probablement horizontal. Allons réparer ça. Tout ce que j'ai à faire, c'est que je veux que tu viennes plus tôt et c'est ce qu'on a fait. Je vais dire que tu sors, tu vas en fait mieux avant la fermeture des accolades de celui-ci, ce sera probablement mieux le faire là-bas. Descends Poof, et entre dans un joli gros bouton géant. Ça a l'air bien jusqu'à la petite terre. Impressionnant. Joli CSS simple seulement, changeant la mise en page du CSS, mais ce n'est pas ce que vous êtes venu ici pour. Vous voulez faire ce petit menu plus grand, nous cliquons dessus et faisons un petit truc déroulant cool sur notre téléphone mobile. Souviens-toi que tu n'as pas besoin de ça, mais c'est plutôt cool. Pour ce faire, nous allons apprendre un peu de jQuery et nous le ferons dans la prochaine vidéo. 95. Qu'est-ce que Javascript et Jquery dans la conception de sites Web ?: Bonjour, je ne m'ai pas vu depuis un petit moment en face à face, nous sommes coincés derrière l'écran depuis très longtemps. Cette vidéo va parler de quelques choses. Nous allons parler de ce que fait JavaScript, la différence entre JavaScript et jQuery. Nous allons voir pourquoi nous ne pouvons pas utiliser CSS, comme nous l'avons fait jusqu'à présent, et ensuite nous allons examiner des alternatives pour jQuery. Il existe différentes bibliothèques concurrentes. Alors, allons entrer et parler de ça. Première étape, qu'est-ce que JavaScript ? C' est facile à comprendre quand on le compare à ce que nous savons déjà. Nous avons HTML, CSS, nous sommes d'accord avec ceux-ci. HTML sont les choses. Ce sont les en-têtes qui sont sur la page, les balises div, les boîtes, les éléments nav, le pied de page, sont les choses qui sont sur la page et ils ne font pas grand-chose, ils sont très statiques. CSS est le blocage de ces choses. Nous les faisons bleu ou 100 de large. Nous stockons donc ces blocs HTML. Maintenant, où JavaScript s'insère, c'est l'interaction entre le site et moi en tant qu'être humain, parce qu'à l'heure actuelle notre site ne fait pas vraiment grand-chose. Vous pouvez cliquer sur les liens et sauter autour, mais tout est très excitant. C' est quoi ? JavaScript le fait. Dans ce cas particulier, nous allons regarder créer Mobile Menu et cliquer dessus, et l' amener à la liste déroulante. C' est une interaction indirectionnelle. Nous l'avons fait en CSS cependant, et je vais discuter pourquoi nous ne pouvons pas le faire dans ce cas, mais c'est un peu d'interaction humaine. Il peut s'agir d'un curseur d'image. Donc, cliquez à gauche et à droite, vous faites défiler les images. Nous le ferons plus tard dans le cours aussi. Laissons JavaScript faire ces clics, tirer des images, puis les faire glisser, faisant partie de l'interaction humaine. Menus à onglets. Quoi d'autre ? Modaux pop-up [inaudibles] sur les écrans. C' est tout JavaScript. C' est ce que JavaScript est. Maintenant, qu'est-ce que jQuery par rapport à cela ? Vous le voyez en ligne beaucoup, qu'ils peuvent être pliés ensemble. JavaScript est le hard core dans les coulisses, vision big boy de ce langage de programmation. C' est ce que les gens utilisent depuis longtemps, pour faire toutes ces choses interactives, les curseurs d'image et les modèles pop-up. Certains design intelligent est les développeurs Web ont décidé en fait d' écrire un menu mobile, liste déroulante ici. Pour activer et désactiver cela, nous avons dû écrire peut-être, 5-6 lignes de code pour obtenir ce travail. Le truc, c'est que ce qu'ils ont vu, c'est comme si on faisait ça à chaque fois. Pourquoi devons-nous exploiter tout ça ? Donc, ce qu'ils ont décidé est, faisons cette autre chose, va arriver à coder jQuery, et c'est une bibliothèque de, nous allons prendre les six lignes, nous allons les écraser tous et nous allons les mettre dans une petite fonction ou une petite classe. Cette classe s'appelle ici un bascule. Pour moi en tant que concepteur web, je dois juste dire la petite icône pour le menu, je veux que vous basculez. Ce que le navigateur voit, il voit bascule, puis décompresse tout le code qui est entassé en bascule, et il lit les six lignes de code. Donc, c'est juste qu'une abréviation du plus grand langage de programmation, qui est JavaScript. J'espère que cela a expliqué. D' accord, j'ai fini cette vidéo et j'ai pensé que c'était une explication moyenne. Nous allons juste vous montrer rapidement à quoi ressemble le code. Je veux également vous montrer ce site jquery.com. C' est le pied de base à la maison et vous pouvez aller dans la documentation de l'API, et je vais faire défiler. Ce sont toutes les choses différentes qu'il peut faire. Je vais faire défiler vers le bas pour basculer. Trouvons le vieux bascule habituel. A l'intérieur d'un bascule, que nous allons utiliser pour notre menu, ça va être, où est la version longue ? C' est donc la version longue de celui-ci. Ce que je dis est, je veux que cette balise div appelée « foo » bascule l'affichage. C' est facile à écrire. C' est ce qui se passe réellement dans le JavaScript. Vous pouvez voir que la syntaxe est plus facile, cela a plus de sens, ce n'est pas autant d'égaux, et le langage est juste plus facile à comprendre. Donc, jQuery est juste emballer cela et l'attacher dans une syntaxe légèrement plus petite, plus facile à comprendre. Tu l'as maintenant, non ? Retour au mec non rasé dans ses cours de lecture. Une des autres choses que je veux que nous discutions est pourquoi ne pouvons-nous pas simplement utiliser CSS ? Parce que nous avons fait un menu déroulant plus tôt. Rappelez-vous, et nous utilisons pour notre vélo, un atelier de réparation de vélos. Nous avons juste plané au-dessus et la liste déroulante est venue. Que puis-je faire pour le volley-ball ? Maintenant, l'une des raisons est que je peux planer comme si je pouvais prendre mon téléphone juste là. Je peux passer la souris avec la souris, je peux obtenir ma souris et passer la souris, mais je ne peux pas passer la souris avec mon téléphone. Il ne sait pas que vos doigts planent, donc nous ne pouvons pas utiliser cette fonction simple. Nous devons effectivement cliquer dessus. CSS n'aime pas le faire. C'est un code de style. Nous pouvons demander à CSS de morceaux pour essayer de le faire faire faire ce que nous voulons, mais c'est pour cela que JavaScript est construit. Ce genre d'interaction humaine, donc nous allons l'utiliser. Mais toujours en utilisant JavaScript nous allons tricher un peu et utiliser l'une des bibliothèques. Nous allons utiliser jQuery dans ce cas. C' est pourquoi nous ne pouvons pas utiliser le survol ou le retournement CSS doux. Bon, point suivant. La dernière chose que je veux couvrir est jQuery est juste une option. Donc JavaScript est toujours là en bas, et en plus de cela est construit jQuery. Il a été autour depuis longtemps, fait exactement ce que je devais faire en tant que concepteur web. Mais d'autres personnes intelligentes j'aime jQuery, mais je veux faire quelque chose de légèrement différent. Donc quelque chose comme React est plus récent et il fait des choses différentes pour jQuery. Il est juste une comparaison, ce n'est pas la bonne façon, mais c' juste une façon différente d'interagir avec le JavaScript. Il existe également des cadres comme Angular et View. Ils utilisent tous JavaScript et facilitent la construction d'autres choses comme, c'est incroyable ce que vous pouvez faire avec JavaScript en termes de produits SAS ou dans les logiciels de navigateur. C' est ce que jQuery est, une option que vous pouvez utiliser pour interagir avec JavaScript. C'est ça. Je dois me raser ici, c'est là que je tire pendant que je m'entraîne. Qu'en est-il ? Sautons derrière l'écran et construisons le menu réel. 96. Comment faire un menu de burger en 3 lignes de navigation mobile pour un site web: Salut là. Dans cette vidéo, nous allons créer un Mobile Nav Sandwich que lorsque vous cliquez dessus, un mobile apparaît. Il clique en arrière lorsque vous cliquez à nouveau dessus. Nous sommes gong d'utiliser jQuery pour tout faire dans VS Code. Allons entrer maintenant et travailler à la façon de le faire. Pour celui-ci, nous allons fermer notre site actuel et nous allons le coller dans ses propres pages juste pour que vous ayez une version de ceci, comme une version vanille. Parce que si vous commencez à l'implémenter maintenant sur notre site, d'accord ? Il y a beaucoup de ces réinitialisations que nous pourrions avoir à traiter et beaucoup de choses que vous pourriez ne pas donc il va en faire une belle version pure. Ensuite, dans la prochaine vidéo, nous l'intégrerons à nouveau dans notre site Web. Faisons un nouveau document, d'accord ? Fichier, Nouveau. Celui-ci va le sauver. Je vais l'appeler, comment allons-nous l'appeler ? Nous allons appeler celui-ci Jquery-nav.html. Ok, on va le sauver. Nous allons mettre dans notre étiquette de tête normale et nous allons lier deux fichiers à elle. On va avoir du CSS. Allons à New File. Je vais sauver ceci et nous l'appellerons jquery.nav.css. Bien, et on aura un autre dossier, d'accord ? Ce que nous n'avons pas eu auparavant est un fichier JavaScript. Je vais l'appeler this.js. Il est probablement plus courant de l'appeler peut-être script ou scripts pluriel k.js. Peu importe ce que vous appelez ça. Ok, c'est à propos de trois dossiers. Laisons-les tous ensemble au HTML. En haut ici avant la fermeture du HID, nous allons lier CSS, donc un lien CSS. Comme ce n'est pas le style froid, il s'appelle j. Laissez-moi aller, jquery.css. Maintenant, nous voulons lier notre JavaScript, d'accord ? Dans ce cas, ce n'est pas un lien, c'est appelé script. On veut ça appelé la source de script, ok ? La source va être, donc maintenant le dossier racine et il s'appelle jquery.js. Bien, donc nous avons connecté ces trois pages. Séparons-les un peu. C' est une petite option cool. Maintenant qu'on a trois dossiers, ok ? Je peux faire glisser celui-ci et dire que je le veux ici, puis attraper JS et l'avoir ici. Je vais à trois. Regardez ça donc la première chose que nous devons faire est que nous allons mettre dans la petite icône de navigation. Tu peux avoir n'importe quoi. Il peut s'agir d'un bouton, il peut s'agir de texte. Nous allons juste avoir dans notre corps ici, nous aurons une image. Ok, donc on va utiliser une image et ça va, j'ai celle-là pour toi dans tes dossiers d'exercice, ok ? Il y en a un ici. Projet 3 c'est une icône ici appelée Icône Burger Menu. Ça ressemble à ça, ok ? Maintenant, je l'ai obtenu de la police génial. Je viens de télécharger le SVG et vous pourriez décider d'utiliser la version de l'icône. Rappelez-vous, nous avons appris à faire des icônes sur une page où nous le mettons dans la balise head et le lien vers elle en utilisant la balise i. Ne vous inquiétez pas. J'utilise juste une image, tu peux utiliser tout ce que tu veux. Je vais le copier, trouver mon dossier local, et nous allons le coller dans mes images. Mauvais, bureau, projet 3, mettre des images et coller et là il est là. Ok, alors allons-y trouver celui-là. C' est dans les images. Images/icon-menu Burger, d'accord ? Cela va être mon icône de menu mobile. Prendre l'habitude d'écrire un vieux texte. Maintenant, nous allons prévisualiser dans un navigateur. Éteignez-le, allumez-le à nouveau. Icône géante. Ok, parce que c'est un SVG peut s'adapter aux limites du document et maintenant le document se trouve être aussi large, ok ? Ça va jusqu'au bout. Ce que nous allons faire, c'est que nous allons dire en fait, avant que cela ne ferme la balise image, nous allons ajouter un style de largeur, ok ? Nous dirons votre largeur de 20 pixels. Sauvez-le, regardons, 20 pixels. Je vais rendre le mien un peu plus grand parce que nous faisons un tutoriel, il pourrait être un peu plus facile à voir plutôt que l'éditeur adjacent d'avoir à zoomer avant et arrière à nouveau. Ça n'aidera probablement pas du tout. Mais de toute façon, donc on a notre icône, ok ? Ce pourrait être juste un texte avec une balise autour. Ça n'a pas d'importance. Maintenant, nous avons besoin séparément de ça, d'accord ? Nous avons besoin des éléments de menu réels. Je vais les mettre dans une balise de navigation, d'accord ? Celui-ci doit entrer dans une balise de navigation, mais c'est une bonne pratique HTML5, ok ? Je veux combien d'étiquettes ? Je vais avoir peut-être trois étiquettes, on va correspondre à ce qu'on fait dans la prochaine. [ inaudible] raccourcis là ? Il va aller au hachage et à l'intérieur de ceci nous allons correspondre à ce que nous faisions avant dans le dernier projet. Aller à propos des prix et contactez-nous, cool. Regardons un peu ce qu'on a. On ne va pas le styliser, ce sera des choses bleues moches, mais on sait comment les coiffer en de beaux boutons. Les hommes, j'ai du brouillard dans ma traversée, je ne peux pas m'en débarrasser alors je vais paraître un peu rusé dans cette vidéo. Qu' est-ce qu'on va faire ? On veut éteindre ça parce que je ne veux pas qu'ils apparaissent. Je veux seulement qu'ils apparaissent lorsque nous cliquons sur le bouton et c'est ce que JavaScript va faire. Il dit, « Quand ce bouton est activé, cela va apparaître et se refermer à nouveau. » Ce que nous allons faire est de l'éteindre avec du CSS. J'ai besoin de le contrôler. Cela va avoir une classe de navigation de, je vais appeler ce mobile-nav. Bien. Ce que j'aimerais, c'est j'aimerais styler ce mobile-nav. Mobile- Nav juste pour être éteint, ok ? On l'a déjà fait avant. Nous n'avons affiché aucun pour désactiver les choses et nous l'avons activé avec des requêtes média. Maintenant, nous allons l'activer et désactiver en utilisant JavaScript. Il ne devrait pas apparaître maintenant. Génial, rien ne marche maintenant, comme si rien n'était connecté, non ? C' est le JavaScript qui va connecter le à donc au moment où nous avons juste icône assis par lui-même, nous avons un nav en dessous qu'il est désactivé par défaut, pas connecté. La partie suivante, nous devons appeler notre bibliothèque JavaScript ou jQuery. Parce que JavaScript est compris par défaut dans le navigateur, mais jQuery a besoin d'un peu d'édition de bibliothèque en haut ici donc tout comme nous avons chargé rappelez-vous les polices Google en haut, parce que le navigateur ne sait pas ce que Google polices pour commencer. Il doit être chargé en haut ici. Même chose avec CSS reçu, nous le chargeons en haut. Nous devons aller le trouver et code.jquery.com est un bon endroit. Il existe d'autres CDN donc un réseau de diffusion de contenu, mais jQuery est un grand. C' est ce que la plupart des gens utilisent et nous devons le charger dans la page. Pour le moment, nous sommes à jQuery 3, ok ? Avec 3.4.1 à l'avenir, ce sera 3.5.1 ou quoi que ce soit, d'accord ? Mettez à niveau cette dernière version, mais vous n'avez pas besoin de continuer à la mettre à niveau, d'accord ? Ce qu'on va faire en ce moment, c'est des choses qui y sont restées depuis des siècles. Nous pouvons utiliser n'importe lequel de ces éléments. Nous allons utiliser la version non compressée et ici elle dit : « C'est le script à mettre dans votre site Web. » On va cliquer sur ce petit presse-papiers. Si tu n'as pas tout ça, j'ai essayé de le rendre plus facile. Dans vos fichiers d'exercices, le projet 3 que j'ai, comment ça s'appelait ? JQuery Mobile Nav. Ouvrez ça et c'est le CDN. C' est le lien auquel nous sommes, d'accord ? C' est ce que je viens de copier. Tu peux aller prendre ça si tu veux. Collez ceci dans le code, nous allons écrire si vous voulez tricher. En fait, c'est le deux fois. Le tien aura l'air plus agréable, d'accord ? Nous devons coller ça dans la tête de notre document. Je pourrais juste rendre ça un peu plus grand. Ce qu'on va faire, c'est en dessous, on va le coller. Maintenant, nous ne sommes pas, attrapés la mauvaise chose. Copier dans le presse-papiers. Copié, permet de le mettre dans le code VS. Ce n'est pas une copie, vous mentez. Je vais prendre cette version, et elle va dans la balise de script. Tout comme le script devient froid, le script devient froid ensuite. Maintenant, c'est un gros problème parce que ça fait froid après. C' est la bibliothèque, cela dit au navigateur tout ce qu'il doit savoir sur jQuery afin qu'il puisse l'exécuter mais il le charge dans le mauvais sens. Il a besoin de tout apprendre avant de pouvoir exécuter le vôtre. Cela doit être au-dessus, et puis cela va en dessous. Je vais fermer le panneau CSS ici parce que nous n'en avons plus besoin, et regardons le JavaScript qui est requis. Tout d'abord, je vais commencer à écrire ce JavaScript, et nous voulons lui dire tout d'abord que nous avons affaire à jQuery. Pour que cela fonctionne correctement, nous devons nous assurer qu'avant de commencer à faire l'une des choses que je veux faire, comme le bascule, je dois m'assurer que la page est chargée. Nous devons donc dire que le document doit être prêt avant d'exécuter, une fonction, ou la fonction que je vais écrire. Une fonction est juste un espace réservé pour la chose que je veux faire. Vous lui donnez quelques paramètres en mettant quelques parenthèses, et à l'intérieur, vous pouvez exécuter des paramètres, nous le laisserons vide juste après cela, mais avant que le dernier crochet soit où nous mettons dans nos accolades, et à l'intérieur de ces accolades est l'endroit où toute la magie doit aller. À la fin, vous mettez un point-virgule comme CSS pour dire que j'ai fini. Pour le moment, tout ce qu'il fait est de dire, oui, j'utilise jQuery. Ce que j'aimerais que vous fassiez, c'est de ne pas exécuter toutes les choses dans ces accolades tant que la page n'est pas chargée. Comme CSS, nous allons mettre dans un retour juste pour les séparer, vous ne pouvez pas tout avoir ensemble. Ce que j'aimerais faire est, encore une fois, je veux m'assurer qu'il sait que nous exécutons jQuery, mais le raccourci pour jQuery est juste un signe $. Donc, personne n'écrit jQuery, ils écrivent juste $ signe. Ce que nous aimerions faire est à l'intérieur des parenthèses, nous aimerions le faire , puis à l'intérieur des parenthèses, voulez-vous dire que des guillemets avec des petits points simples. Je veux maintenant m'attacher à l'icône. Au moment où nous avons une image, il y a une icône et SVG, nous avons un moyen de nous y connecter donc nous allons lui donner un nom de classe. Nous allons dire que vous avez une classe de, nous appellerons ça menu burger. Lorsque le document est prêt, je veux que vous cherchiez le menu burger et quand il est en cours de clic, j'aimerais que vous exécutiez cette fonction. Même chose encore, nous mettons dans les parenthèses, juste après et entre les deux derniers, nous mettons dans un accolades mais conservons dans. Nous disons, attendez que le document se charge, puis exécutez cette fonction. C' est la fonction parce qu'il est juste à l'intérieur des accolades donc quand il est prêt, faites-le. Qu'est-ce qu'il fait ? Cela dit, cherchez le menu burger et attendez un clic, puis faites cette autre fonction. Cette fonction, même syntaxe, signe $, disons que c'est jQuery à l'intérieur de nos virgules inversées, j'ai besoin de déterminer quel est le nom de cela. Ce que j'aimerais que vous fassiez, c'est trouver sur ma page, mon mobile nav et l'allumer. Assurez-vous que c'est mobile nav, j'aimerais que vous le basculez. Basculez les supports, puis terminez cela. Je ne veux rien faire d'autre. Maintenant, bascule ne fait rien d'autre qu'il va chercher le CSS que nous avons, et l'accorder à son opposé. Au moment où il voit n'afficher aucun, il va basculer cela et devenir bloc d'affichage. Génial, ça devrait marcher. Gardez-le, regardons un peu. Vous basculez, et que mes amis est une navigation mobile super simple, super efficace en utilisant JavaScript, vraiment juste jQuery. Maintenant, quelques autres choses, des choses importantes à savoir sur l'utilisation de JavaScript sont dans le code Visual Studio ici, et il est très fréquent d'avoir les balises de script, c'est tout ce qui est JavaScript donc nous avons deux parties, nous j'ai mon que nous avons fait et puis nous avons ce qui est le CDN qui est livré par Code.jQuery.com. C' est tout JavaScript, il est préférable de l'avoir en bas de la page juste avant la fermeture du corps. C' est bizarre, tu crois que tu le verras sur la page ? Jetons un coup d'oeil. Rien ne change, cela fonctionne toujours et il ne peut pas être vu parce qu'il est à l'intérieur de ces balises de script. C' est juste une pratique courante que vous ne pouvez pas l'avoir en haut, et c'est juste une pratique courante de l'avoir en bas. La raison principale est la vitesse de chargement de la page. C' est en fait une grande bibliothèque à télécharger, donc ce qui peut arriver, c'est que le navigateur peut charger toutes les choses sur la page super rapide afin que l'utilisateur puisse les voir, puis plus tard, quand il arrive enfin à charger les pages, il peut charger les scripts et peut prendre le temps de le faire, mais nous parlons comme quelques secondes ici, millisecondes donc c'est bien de l'avoir en haut. Mais si vous avez des gens qui courent à travers votre site comme cliquer, cliquer, cliquer, cliquer, ce qui pourrait arriver est que je vais accéder à une page, essayer de cliquer sur quelque chose et rien n' apparaîtra parce qu'il essaie toujours de travailler son chemin à travers cela. L' autre chose importante est juste de s'assurer que l'ordre est correct. Donc, vous devez d'abord charger la bibliothèque, puis votre script. Nous avons les bases et quelques petites choses que vous pouvez faire pour modifier le jQuery, ce bascule et la valeur ici, nous pouvons réellement y ajouter quelques attributs. On peut dire entre guillemets, on peut dire « aller lentement », « sauver ». Prévisualisons ça. Cliquons dessus, ça va très lentement. Vous pouvez imaginer si vous pouviez taper rapidement. C' est vrai, vous pouvez le faire aller vite. Cliquez sur celui-là, beau et rapide. Si vous êtes vraiment particulier, vous pouvez taper en millisecondes. Vous vous débarrassez des guillemets et tapez simplement directement. C' est une seconde, 1 000 millisecondes, donc je pourrais le mettre pendant trois secondes. Jetons un coup d'oeil. Extrêmement lent. On y va, quoi d'autre ? Je vais revenir à la laisser. Par défaut, c'est joli. Nous venons d'utiliser un vieux bascule simple. Il existe d'autres façons similaires de l'allumer et de l'éteindre, en basculant. Je suis juste à W3Schools.com, c'est vraiment agréable et clairement décrit et placé comme les tutoriels. Nous allons regarder JavaScript, jQuery, et nous regardons ces effets ici. Je pense que la façon dont il montre juste notre vieux bascule régulier, et est ici. Vous pouvez faire un fondu jQuery. Jetons un coup d'oeil. Vous pouvez voir que c'est un jQuery FadeToggle. Ce doit être cette affaire de chameau, ce qui est étrange. Nous ne l'avons pas encore fait parce que vous pouvez comprendre pourquoi son camélisé, a une grosse bosse au milieu ou il y a des dessus là-dedans donc il doit être écrit exactement comme ça. Je peux dire fondu, T majuscule pour bascule et regardons un peu. Retournez à mon menu, il est là, FadeToggle. Il y a une diapositive bascule, et diapositive bascule capital T. Excitant. Nous ne allons pas passer en revue et commencer à coiffer ces menus parce que nous avons cette structure qui fonctionne, mais maintenant nous devons l'implémenter dans notre grand site parce que pour le moment nous avons seulement un mobile nav. Nous voulons faire tout le basculement du bureau au mobile, nous le ferons dans la vidéo suivante mais fondamentalement tout ce groupe, nous allons le désactiver et seulement allumer tout pour mobile et nous allons avoir un menu complètement séparé pour ordinateur de bureau. Facile à dire, allons-y et mettez-le en œuvre dans la prochaine vidéo. 97. Comment faire passer un menu nav d'un ordinateur de bureau à un téléphone portable ?: Salut, là. Cette vidéo, nous allons implémenter notre MobileNav vraiment simple que nous avons construit dans la dernière vidéo dans notre site complet, où il va de ce à bureau au mobile avec un petit menu déroulant doux. Maintenant, nous avons gardé celui-ci séparé afin que nous puissions vraiment nous concentrer sur l'implémentation jQuery, mais maintenant, nous allons le plier dans notre plus grand site et comme ce site ici, c'est ce que nous avons actuellement. Nous avons des boutons et ce que nous faisons est d'ajuster l'espacement sur tablette et mobile et j'aime ça parce que cela va vraiment nous montrer ce qui se passe dans le monde réel quand vous essayez d'implémenter des choses et c'est jamais aussi simple où vous venez d'avoir ce propre, clair. Vous devez vous battre avec des bits de code existants comme notre cas, nous avons ce petit truc déroulant bizarre ici. On va devoir désélectionner ça pour essayer de faire en sorte que ça marche. C' est plus un exemple pratique du monde réel des choses que vous pourriez rencontrer lorsque vous essayez de l'implémenter. C' est une très longue intro faite, commençons. Nous allons ouvrir notre site existant et ouvrir index.html, double-cliquer dessus, ouvrir style.css, faire glisser le style ici et commençons. La première chose que je veux faire est que nous allons éteindre le NAV quand il arrive à l'écran de la tablette. Ma maquette a décidé d'aller à ce menu mobile même sur tablette. Ça va être allumé pour les deux. Allons et éteignons ce que nous avons actuellement et faisons juste un aperçu, ce que nous avons ? Il apparaît sur la mauvaise page et il descend à ici et il se désactive, c'est ce que nous avons fait précédemment. Que c'est certainement un moyen facile de le faire. Nous allons le faire sans JavaScript maintenant. Ce que je veux faire, c'est au lieu de clignoter, je veux juste éteindre tous ces boutons et nous allons allumer notre version mobile. Dans le code VS, nous allons trouver notre nav. Ce nav ici va s'éteindre quand il arrive à tablette. J' arrive à la vue tablette, je vais vérifier que je n'ai rien d'autre essayant de contrôler nav ceci ici. Je vais dire, juste en haut, je vais dire, « Nav », et vous arrivez au mode tablette, « n'afficher aucun ». Maintenant et tu dis : « Hey, et celui-là ? » Nous avons fait tout cela étonnant dans les dernières vidéos pour le faire faire faire tous ces changements d'affichage bizarres pour mobile. Cette chose est redondante. Il y a beaucoup de choses qui sont redondantes et je laisse ça à moitié dans le cours parce que ce n'est pas aussi facile que faire ce que j'ai fait dans cette première vidéo et de l'ajouter, il y a toujours genre, « oh, ce bit contrôle tout, ce bit manque avec lui. Celui-ci va être un peu désordonné », mais pour une bonne raison, que nous puissions apprendre à le réparer. On va ignorer tout ça. Faisons en sorte qu'il s'éteigne pour, prêt ? Ici, tu y vas. Quand il passe en mode tablette et en mode mobile, il s'éteint. Ce que nous voulons faire maintenant, c'est avoir quelque chose d'autre à ajouter sur une petite ligne stripy. Revenons au code VS. Sous nav, nous allons créer une autre balise, et nous appellerons ceci .mob-wrapper. On va tout mettre à l'intérieur de ça. À l'intérieur de mon mob-wrapper, nous allons ajouter notre icône des trois petites lignes stripy de mon GPS mobile plus un autre ensemble de ceux-ci. Trichons, attrapons notre image, ouvrons jQuery nav, et c'est le morceau que nous voulons. C' est l'icône que nous avons apporté dans l'image, SVG, nous avons ajouté un petit texte. Nous avons ajouté une largeur et nous lui avons donné une classe de burgermenu. Nous allons juste tricher parce que nous sommes comme, « déjà fait ça ». On a un domaine, il se trouve que c'est mal, on y va. Vérifions qu'il apparaît, nettoie tout. Il est là. Il est sur la page, mais je veux les éteindre parce qu'il apparaît tout le temps. Je veux qu'il apparaisse seulement quand on sera au mobile. Ce qu'on fait, c'est qu'on a trois pots, tu te souviens du monde entier ? Ce qui est dans notre cas ce haut. Ensuite, on passe à la vue Tablet View, puis on a la vue mobile et parce qu'on l'a éteint pour, on l'allume sur une tablette. Trouvons le fond ici, mais nous évitons la dernière accolade bouclée. Toute la classe moyenne est enveloppée et ouvre l'accolade et elle se ferme tout le chemin en bas. Donc vous en aurez toujours deux à la fin, si vous ne le faites pas, les choses vont mal tourner. Nous allons dire, qui voulons-nous au .mob-wrapper ? Je voudrais que vous, mon ami et tout ce qui est à l'intérieur de vous vous tourniez. En fait, on ne veut rien faire pour lui. Je veux les découper et je veux qu'il s'éteigne en vue du bureau. Juste avant la fermeture ou l'ouverture de la tablette, je vais dire, « Mob-wrapper vous êtes un affichage de aucun s'il vous plaît. » Il est sur le bureau, ce qui est parfait, mais il ne se retourne jamais. Maintenant, nous devons dire, « donc il est éteint sur le bureau et ensuite, au fur à mesure, il va dire, « Bien, sur tablette, cependant, j'aimerais les allumer. » bas du fond ici avant que je vais accoler bouclés, vous allez dire, « Bloc d'affichage » et il est de retour sur. Il est éteint sur le bureau, puis sur mobile, ou au moins tablette dans ce cas et parce que nous ne disons pas éteindre à nouveau, il circule simplement vers mobile, donc nous n'avons pas à le dire à nouveau dans mobile. La prochaine chose est que je veux tous les bits sur le côté que nous allons éteindre à peu près tous ces boutons qui vont sauter, que nous voulons activer par ce petit clic. Ce qu'il nous faut, c'est qu'on puisse aller voler tout ça. Tous ces boutons ici, en fait, on va prendre ces boutons. Il y a mon image sous mon image avant que notre emballage ne se ferme. Il y a mon emballage, se termine là, juste après l'image que je vais mettre dans ces gars, ces gars doivent être dans leur propre <div> étiquette. Pourquoi ? parce qu'ils flottent un peu en ce moment, ils n'ont pas de rainurage. Ce type est seul. Ces gars, ces trois, ces gars doivent être liés ensemble. Commande Shift P, Control Shift P. Commencez à taper wrap et en regardant cette abréviation de wrap. Je vais les envelopper dans quelque chose appelé, quelque chose que je vais inventer en ce moment appelé, mob-nav, nav venir sur Dan ne peut pas voir les clés, mob-nav et il doit avoir une période en face de lui. abréviation.mob-nav. Ces gars ici regardons un peu, ils devraient être éteints sur le bureau parce qu'ils sont tous enveloppés dans ce truc appelé mob-wrap qu'ils allumaient et éteignaient, si vous les voyez toujours, il Ça veut dire que tu as probablement ces gars après cette fermeture, <div> ça doit être à l'intérieur. Ouvrez le bureau, la tablette ils s'allument tous les deux. La structure est bizarre. Nous allons arranger ça pour la dernière chose que nous voulons faire, c'est juste obtenir cette chose pour cliquer sur et enlever le poing. Arrêtons-le par défaut. Ouvrons le mob-nav, c'est pour ça qu'il y a un wrapper parce qu'on ne les a pas tous retirés d'une seule fois. Je vais dire sur la vue de la tablette, » .mob-nav. Je voudrais que vous soyez tout simplement hors affichage, affichage, aucun. » Je ne peux pas les voir. Je voudrais les activer avec JavaScript quand on clique sur cette chose. Pour implémenter notre JavaScript ou notre jQuery, dans ce cas, nous devons faire deux choses, rappelez-vous que nous avons besoin de charger la bibliothèque, qui est toutes les règles autour JavaScript ou jQuery et ensuite nous devons réellement mettre autour du codage personnalisé. Comme on l'a fait avant, on va aller à nos dossiers d'exercices. Dans vos fichiers d'exercice, il y a le projet trois, il y en a un ici appelé jQuery Mobile Nav. Ouvrez ça et c'est le CDN, qui relie la bibliothèque pour dire à notre navigateur comment tout cela fonctionne et rappelez-vous où nous l'avons mis, nous ne pouvons pas le mettre ici dans la tête, mais il est plus courant de le mettre ici dans le corps. Nous avons parlé des raisons pour lesquelles avant et l'une des choses qui se passe est quand je le colle, pouvez-vous voir mon fichier devient vert ici et un tas d'erreurs apparaissent en bas ici. C' est parce que nous utilisons une aide, une petite extension pour nous donner la vérification des erreurs pour HTML et il ne reconnaît tout simplement pas cela. C' est tout à fait bien et légitime. Il cherche un crochet d'angle de fermeture après le script, mais nous l'implémentons légèrement différemment et cela fonctionne très bien, mais donc nous allons juste devoir ignorer cela. Les extensions sont grandes, elles sont construites par d'autres personnes. C' est un bug dans celui-ci en particulier. Est-ce que cette personne qui gère cette extension va le réparer, Mike ? Je ne suis pas sûr. Peut-être que c'est quelque chose qui ne peut pas être réparé parce qu'il a juste besoin de vérifier ces choses différentes. Je suppose que c'est juste une ou deux choses. La première est, vous verrez qu'il est vert ici, et il a trois erreurs que vous devriez aller vérifier et dans notre cas, dans mon cas, cela fonctionne très bien. On a chargé la bibliothèque. Maintenant, nous voulons charger le JavaScript personnalisé. Nous allons créer notre propre fichier, Nouveau fichier, je vais l'enregistrer et j'appelle celui-ci scripts.js et je vais coller dans mon texte. C' est ce que nous avons dactylographié dans le dernier, nous ne le referons pas. Ce que vous devrez faire c'est que je n'aime pas glisser et qu'on doit basculer. Vous remarquerez que le bascule en soi n'est pas en majuscules, c'est l'affaire Camel. Le premier est toujours en minuscules et en majuscules du milieu. L' autre chose que je veux faire est de m'assurer que ceux-ci correspondent. Rappelez-vous lorsque le document est chargé, je voudrais que vous cherchiez un clic sur cette chose. Ce burgermenu classique, qui dans notre cas va être cette petite icône rayée. Quand il voit ce clic sur l'icône stripy, basculez le NAV mobile. Vous devez vous assurer que ceci et ceci correspondent. Modifions d'abord, puis assurez-vous qu'ils correspondent. Dans index.html, nous allons charger notre script. On va aller au script. Vous allez avoir un tas d'erreurs et nous allons dire qu'il est assis dans, il s'appelle juste script.js, il est là. Nous devons le faire, il est chargé. La prochaine chose que je veux faire est de m'assurer que ce burgermenu correspond à l'emballage que j'ai. La classe que j'ai appliquer à mon icône c'est mon icône et appliquer ce burgermenu classique parfait. Ça correspond à ça. Le suivant s'appelle Mobile-Nav. Je veux allumer et éteindre ça. Je ne l'ai pas appelé mob-nav, je l'ai appelé MobileNav. J' ai mélangé le nom, je dois juste m'assurer que la navigation mafia est là. Je vais juste basculer ça pour l'emporter et le retirer. Voyons si ça marche. J'ai de grands espoirs. Allons-y. Où sommes-nous ? Nous y voilà, bascule. Il l'allume et éteint, les couches sont toutes cassées, mais c'est bon, la mécanique fonctionne et c'est ce qui est le plus important pour l'instant. Maintenant, la raison pour laquelle cela se produit, et si vous suivez exactement avec moi dans ce cours, vous allez probablement avoir le même problème. Vous pourriez ne pas. Parce que je veux ce gars à côté de lui, et c' est dans cette implémentation pouvez-vous voir ces gars sont coincés l'un à côté de l'autre mais quand ils sont en panne, ils s'effondrent. La seule raison pour laquelle ils font ça, c'est parce que je l'ai compris et je vais vous montrer mon processus. Quelque chose les rend pas coller et il devrait parce que plus tôt, j'ai dit, rappelez-vous que frappeur, J'ai dit flex d'affichage et s'il y a deux objets dedans, et dans ce cas emballage mob et un logo. Ils devraient par défaut s'asseoir l'un à côté de l'autre. Mais plus tôt, quand on essaie de le faire, souvenez-vous de ce gars. Lorsque nous avons fait une implémentation légèrement différente où nous venons de le changer par tablette de pierre. Voici ma tablette et je viens de lire tout ce qui pourrait être en train de jouer avec elle. Ok, donc dans mon cas, n'importe quoi dans le conteneur d'en-tête. Donc, dans la tablette, je vais bien et frapper un conteneur ou ci-dessous pour appeler rien à voir avec elle. High Desktop ne semble pas avoir quoi que ce soit ici avec le même nom. Hit Il pourrait être, et c'est là que le problème est. Nous avons dit plus tôt que nous voulons que l'en-tête et tout à l'intérieur de l'en-tête affiche bloc, et cela signifie qu'ils s'empilent les uns sur les autres. On pourrait se débarrasser de tout ça. Nous utilisons cela juste pour et construire cet autre style de menu et c'est là que les problèmes entrent en jeu. C' est bizarre que je l'aie inclus dans la classe, je suppose. Je sais très bien quand je travaille sur un site qu'il y a tellement de choses qui se rapportent à d'autres choses. Tu fais une chose pour résoudre un problème et ça détruit autre chose. Donc, si j'ai un cours qui fonctionne toujours parfaitement, je sens que c'est faux. Voilà notre truc, maintenant ça se résume à ça, éteignez-le, allumez-le. Donc, l'affichage à côté de l'autre, ce qui est cool. Donc celle-là qui fait ce que je veux. Maintenant, je veux faire est quand cela clique, n'est pas sauter nous allons faire un peu plus de style, mais les bases sont là. Qui se souvient de ce qu'on a fait pour ça ? Nous l'avons fait dans un menu précédent, notre menu déroulant. Souviens-toi que c'était juste se pousser. Allons, tout d'abord empilons ces boutons et en fait n'utilisons pas le bouton mon parce que bien, je voulais changer le style de ceux-ci et je veux les laisser ressembler à ça sur le bureau. Je ne veux pas changer mon bouton. Alors appelons celui-ci et navbutton. Commande D, contrôle D sur le PC, collez-les tous. Jetons un coup d'oeil maintenant. Donc, ils ressemblent juste à un vieux texte. Alors nous allons les empiler les uns sur les autres parce qu'en ce moment ils sont dans le bloc de ligne, donc nous devons les faire empiler les uns sur les autres. Ces gars sur la vue de la tablette, avant la fermeture du support bouclé, je vais dire navbutton mobile. Je voudrais que vous affichiez le bloc. Merci beaucoup. Espérons, hé mec un autre haut l'un de l'autre. L' autre chose étrange est que faire est là quand ils empilent ils poussent le bouton mobile, nous voulons laisser ça comme il était. Donc, ce que nous voulons faire, c'est que nous voulons rendre la position absolue. Donc ce gars ici, au lieu d'être parent à tous ses amis. Quand il apparaît, il dit : « Hé les gars. Nous sommes des parents, je suis proche de toi, alors je vais te pousser pour que je m'adapte. » Donc ce que nous disons ici, c'est que vous dites mafia nav en fait, je veux être un positionnement, pas un parent. Absolu veut dire que j'ignore tout le monde. Tous mes amis, tous mes parents, et j'ai seulement reconnu mon parent, qui dans ce cas est qui est un parent ? Emballage de la foule. Il ignore tout le reste des choses et dans notre cas il n'y a qu'une autre chose, c'est cette image, donc elle l'ignore et revient à la case 1, qui est ce wrapper. D'accord. Alors regardez, pouvez-vous voir qu'il l'ignore, mais il reconnaît l'emballage, parent qui l'entoure, mais il ignore tous ses amis à l'intérieur. Cool, ça marche. Nous devons le pousser et encore. Une des autres choses est que nav est coincé sur le côté là, ce qui est ennuyeux. Trouvons ce type. Donc mob wrapper inclut l'icône, donc nous devons les pousser partout. C' est un emballage mafia et nous dirons, prenons un peu de rembourrage. Un peu de rembourrage sur la, Je l'ai tapé dans pa-, ce qui n'est rien proche de lui, mais il m'a vraiment près de rembourrage droit. Allons au rembourrage sur la droite, je vais dire 30 pixels. Oui. Jetez un coup d'oeil. Il l'a assez poussé dessus. Commençons en fait l'aperçu, cliquez avec le bouton droit de la souris et inspectons et regardons le. Sur mon cas, je vais sur l'iPhone X ou peut-être s'il ne peut pas le voir, cliquez sur cette petite icône en bas ici, et nous allons utiliser celui-ci. Que voulons-nous faire d'autre ? Donc c'est de l'autre côté, ce qui est cool et peut-être plus loin. Mais commençons les boutons. Donc, mon bouton de navigation, faisons quelques choses. Donnons-lui une couleur de fond qui fera l'affaire. Choisissez une couleur. Tu choisis le corail travaille avec ce que je fais. Jetons un coup d'oeil. Mettons un peu de rembourrage autour et parce que c'est mobile, vous voulez vous assurer qu'ils sont vraiment faciles à cliquer. Rembourrage, je vais en haut et en bas, un peu plus haut que ce que nous avons fait pour le reste d'entre eux. Donc 15 pixels en haut et en bas et fera peut-être 30 à gauche et à droite. Quand je dis peut-être que je pratique ça, j'ai fait ça avant le cours et j'étais oui, c'est assez grand. Maintenant, ça marche, mais je veux le faire passer. Nous éditons tout d'abord tout notre rembourrage, donc nous savons jusqu'où le déplacer. Nous ajouterons une marge négative. Faire marge à gauche et nous allons faire marge droite ne fonctionne pas simplement parce que nous avons défini la position à absolu. On va utiliser une gauche négative plutôt qu'une certaine positive, droite. Dans ce cas, je vais dire neuf pixels négatifs de 60 qui le ramènent à sa fin. Peut-être aller un peu plus loin. En supposant. Ça a l'air sympa, bascule joliment et le texte, nous allons le centrer. Donc, aligner le texte, nous allons le centrer. Très bien, au centre et à proximité. Joli. Je veux peut-être le pousser un peu vers le bas de ce gars. Donc, tout l'emballage, je pourrais ajouter un peu de rembourrage au sommet. Donc, tout le wrapper et mon cas s'appelle nav. Mob nav va avoir, ajouter un peu de rembourrage. Haut de 10 pixels. Trop maintenant semble bien. Ça marche bien. L' iPad fonctionne. Maintenant l'iPad est aperçu à 50 pour cent parce que cela semble un peu bizarre. Les boutons sont peut-être un peu gros sur l'iPad et dire avec cela nous pouvons changer la taille de cela. Évidemment, en bas. Pour mettre quelque chose de plus petit et les boutons n'ont peut-être pas besoin d'autant de rembourrage que je le pensais. Une chose qui m'ennuie, c'est qu'il s'agit d'une ligne rayée noire. Vous avez quelques options, vous pouvez les ouvrir. Nous avons utilisé plus tôt, rappelez-vous que nous avions nos dossiers d'exercices, nous avions le projet 3. Nous avions ce bugger svg signifie que vous et c'est une ligne rayée noire. Je pourrais juste ouvrir ceci, dire Illustrator serait le plus facile, ou XD et juste le changer en blanc et l'enregistrer. C'est une façon. Je vais te montrer une chose bizarre, ce sera la dernière chose avant dans cette vidéo. Est SVG sont une chose étrange bizarre, mais pas un fichier image comme nous le connaissons. Le code est réellement activé sur le Web et vous pouvez réellement voir comment un SVG est construit. Jetons un peu un coup d'oeil, il a un dossier et il va ouvrir. Trouvons dans notre dossier images, c'est un dossier de trois images de projet. Je suis dans mon dossier local, pas dans le fichier d'exercice. Voici le SVG avec lequel je travaille. Lorsque je clique sur Ouvrir, il s'ouvre en tant que script réel. Là, c'est là. Fermons ces gars juste pour que tu puisses voir et que j'arrive à la confusion. Il vous montre en fait tous les styles juste enveloppés dans cela. C' est un peu différent d'un JPEG parce que vous pouvez commencer à voir quoi, comment il est construit et il est construit sur la syntaxe web pour que vous puissiez réellement le comprendre. Celui que nous voulons, donc c'est le POS, si vous êtes du monde Victor, sont en fait les coordonnées XY de tout. D' accord. Il en a, ça peut voir que tout vient de ces gars ici. Il y a ajouté des classes, ce qui est bizarre à l'intérieur d'un fichier. C' est font-génial. Rappelez-vous ces classes, polices barres fa, et ce que nous voulons est que nous recherchons la couleur, ne peut pas le voir là, rempli de couleur actuelle. On va changer ça en blanc. Appuyez sur Sauvegarder. Jetez un oeil, maintenant c'est blanc. Vous pouvez utiliser des hachages réguliers. Donc blanc est f, f, f, f, f, f ou choisir n'importe quelle couleur aléatoire que vous voulez corail, peut-être une cravate avec le nav, et voilà, gentil. Notre navigation mab fonctionne là où nous éteignons le bureau puis réglons le menu mobile et c'est la partie la plus simple. suffit d'allumer et de désactiver et de faire fonctionner le JavaScript, alors il y a beaucoup de tracas à essayer de déterminer quels styles peuvent les empiler, comment les pousser à travers et c'est le vrai sous parties difficiles de la mise en place d'un NAV mobile et c'est pourquoi les tests sont vraiment importants. Parce que ce que je vais faire, c'est que je vais le faire dès le début, puis vais commencer à travailler avec des trucs et puis commencer à ajuster des choses comme les étiquettes de tête pour faire des choses différentes pour différentes raisons. Puis plus tard, un jour plus tard, je vérifie dans le GPS mobile ne fonctionne pas vous devez revenir en arrière et comprendre ce qui s'est passé et résoudre le problème de cette façon. Si tu te trouves dans ça et que tu es genre, mec, je suis un concepteur de web horrible. Non, tu n'es qu'un web designer. Il y a beaucoup de chasse à la queue, surtout quand vous êtes nouveau et que vous ne pouvez pas prédire les problèmes. Je trouve que mon plus gros problème est quand j'essaie de réutiliser des choses, au lieu de créer une classe séparée ou une classe composée, je vais juste essayer de superposer des choses ensemble pour essayer d'être intelligent et de ruiner les choses. D' accord, ce sera tout. Je te verrai dans la prochaine vidéo. 98. Aperçu de ce qu'est Bootstrap 4 dans la conception de sites web: Hé, les potes. Il est temps pour le projet 4. Ceci est nixed morceau est consacré à la compréhension bootstrap. Cette vidéo va expliquer ce que bootstrap est, espérons-le. Bootstrap est, penses-y, le grand mot est framework et je vais vous raconter une histoire. Imaginez, parce que nous avons passé beaucoup de temps à construire ce dernier site, notre site de portefeuille. Mais il y avait des tas de choses que vous avez faites à plusieurs reprises. Nous démarrons les boutons, la navigation, rappelez-vous cela. Il y avait beaucoup de choses comme, « bloc d'affichage, désactiver les requêtes de médias, obtenir des requêtes de médias en cours, charger JavaScript ». Maintenant, si vous avez construit un autre site, vous allez probablement rencontrer toutes ces choses à nouveau. Si vous avez construit 100 sites ou 1 000 sites. Vous allez courir vers eux à peu près tous. Ils auront tous des boutons. Ils vont avoir des images. Ils vont tous avoir besoin de faire une chose très similaire. Au lieu de commencer à chaque fois à partir de ce que vous allez réinitialiser CSS. Là où tout est vide et tout y ajouter. Vous pouvez être doué, mais vous vous ennuyez. Ou du moins vous êtes aux prises avec la répétitivité de [inaudible]. Déjà a juste besoin de se faire pour chaque site. C' est là que Bootstrap entre en jeu. Les gens intelligents de Twitter ont décidé  : « Nous fabriquons tous ces sites et ce que nous ferons, c'est que nous ajouterons une certaine cohérence à tous, mais aussi que nous le rendons vraiment facile à utiliser. » Je le divise en trois parties : il y a la structure, il y a les composants, puis il y a les styles. Fondamentalement, les structures disent, « nous allons toujours avoir des questions dans les médias. Nous allons toujours les faire décomposer de différentes manières sur mobile, tablette et bureau et nous allons en faire une feuille CSS qui existe déjà. Commencez par celle-là. Il y a des appareils mobiles, des tablettes toutes soignées et elles sont toutes là. C' est comme la structure de base » et ensuite ils sont allés, « avons quelques composants qui sont réutilisables. Nous avons construit le menu déroulant jQuery à partir du mobile ». Ils ont dit : « Faisons ça. Tout ce que vous avez à faire en tant que concepteur est mettre un extrait de HTML dans votre site Web et que Nav fonctionnera. Ce sera Dropdown. Ce sera bon sur tous les navigateurs. Vous n'aurez pas à faire toutes les requêtes des médias. Là où nous le bloquons et n'affichons aucun et tout ce genre de trucs amusants. » Ils disent juste, « nous allons le faire » et c'est un composant. Aussi comme un curseur d'image. Si vous voulez ajouter un curseur Image, vous pouvez certainement le faire dans jQuery. Ce n'est pas dur, mais il y avait beaucoup de violons. Ce qu'on avait à faire. Ce qu'ils ont fait pour dire, « voilà, prêt à partir, Ajoutez le mot carrousel à votre HTML et nous ferons tout le CSS et tout le jQuery prêt à partir. » C' est pourquoi c'est un cadre. C'est comme quelque chose pour te mettre en route. Vous pouvez changer tout le style mais ils vont faire le dur lifting en termes de HTML, CSS et JavaScript. Composants de grille tels que les curseurs Navigation et Image. Le suivant est le style. nous avons fait les charges où nous aimons, « Je veux que les liens ne soient pas si terribles, bleus et soulignés ». Ils ont déjà fait ce style pour toi. Vous pouvez l'écraser facilement, mais ils ont fait beaucoup de style pour que les choses ne semblent pas craquer pour commencer. Ils ont l'air plutôt bons. Bootstrap a un aspect très spécifique. Je peux aller sur le site et aller, « Bootstrap ». Parce que le concepteur ou développeur a été très paresseux et juste utilisé tous les styles de la fin. La bonne chose à ce sujet est que vous pouvez être paresseux et vous pouvez avoir très peu de connaissances en conception et avoir un bon site à la recherche. Mais ils ont un certain regard pour eux, mais vous pouvez les écraser. Bootstrap nous aide avec la grille, ainsi la structure du site, puis ils nous aident avec les composants et ensuite ils font tout le style. Tout cela peut être écrasé, mais il est là pour aller et c'est un bon endroit pour s'arrêter pour un site Web. Votre prochaine question pourrait être  : « Pourquoi n'avons-nous pas fait ça au début et sauté un peu de choses ? » Deux raisons. L' un est que pour utiliser réellement Bootstrap, vous avez besoin de fondations en HTML et CSS et comprenez cela avant de pouvoir réellement faire des modifications à Bootstrap. Vous ne pouvez pas simplement sauter dans Bootstrap vraiment, et commencer à essayer de le gâcher. C' est pour les gens qui ont déjà ces compétences d'aller vite. Vous devez avoir ces compétences pour pouvoir utiliser Bootstrap. L' autre question pourrait être, « devons-nous utiliser Bootstrap ? » La réponse est, non. Bootstrap est juste une option pour les gens qui, vous pourriez arriver à ce point : « En fait, j'aime toutes ces choses et je vais m'entraîner beaucoup plus longtemps avant de commencer utiliser Bootstrap et je peux revenir à cette partie du cours dense ». Je l'utilise parfois et parfois pas. Les fois que je ne l'utiliserais pas, c'est que je regarde l'un de mes designs et je suis vraiment assez, j'aime personnaliser cela beaucoup. Je veux tout changer. Je regarde et je me dis : « En fait, je vais juste finir par changer chaque chose que je l'ai mise via Bootstrap. Je ne vais pas me sauver à tout moment. Je vais juste ignorer Bootstrap dans cette construction web particulière construite. » Mais alors je pourrais le regarder. En fait, je dis  : « Je dois le faire rapidement. Ça doit avoir l'air bien. Je vais compter sur Bootstrap juste pour construire un front end vraiment rapide ». C' est peut-être un prototype ou quelque chose où je le fais pour l'amour ou les seignets. Là où je n'ai pas de temps ou d'argent à dépenser dessus. J' ai juste besoin d'être fait rapidement et ça a l'air plutôt bon. C' est là que Bootstrap pourrait entrer. Tu dois l'utiliser ? Non. Pourquoi on n'a pas déjà commencé ? C' est parce que nous avons besoin cette connaissance de base sur HTML et CSS avant de commencer à utiliser Bootstrap. Maintenant, une autre bonne raison d'utiliser Bootstrap est, ou au moins apprendre Bootstrap est qu'il y aura beaucoup d'autres choses qui l'utilisent. Nous construisons notre propre site client en utilisant Bootstrap. Mais disons que vous commencez à utiliser Wordpress plus tard ou Shopify ou Drupal ou Joomla ou essayer de penser aux CMS. Ils feront tout le poids lourd en termes de création de site web. Ils vous enlèveront ça. Mais ce qu'ils vont faire, c'est qu'ils diront, « J'utilise un thème Bootstrap ». La chose cool à ce sujet est que parce que vous comprendrez Bootstrap, vous pouvez passer par et ajuster Wordpress et le déplacer et le changer et le faire vôtre. Il y a beaucoup d'autres choses comme CMS qui utilisent Bootstrap. Nous utilisons dans ce cas ou le reste de ce cours pour concevoir nos propres sites. Mais il est utilisé pour styliser beaucoup d'autres sites CMS aussi. Une autre chose à mentionner est que Bootstrap est juste une option. Il existe des alternatives de Bootstrap, quelque chose comme la fondation serait une bonne alternative pour cela. Bootstrap serait, à mon avis, l'option la plus courante. Il y a d'autres jeux sur le bloc. Ce n'est pas le dicton, n'est-ce pas ? Il y a d'autres choses, des concurrents à Bootstrap. Ce n'est pas le seul. Qu' est-ce qu'on va faire d'autre ? Ce qu'on va faire, c'est que Bootstrap est trois gros pots. C' est le système de grille, qui est la structure. Il y a des composants, qui sont des choses comme le Nav et les curseurs d'image et le pied de page ; fait ceux pour vous. Ensuite, il y a la partie coiffante. Ces trois. Ce que nous allons faire dans les prochaines vidéos, nous allons installer Bootstrap pour commencer. Ensuite, je ne ferai pas un bref aperçu de ces trois aspects avant de nous plonger dans la construction d'un site web complet. Parce que j'ai l'impression d'essayer de tout expliquer dans cette première vidéo. Mais je sais que c'est un peu dur et abstrait. Couvrons ces trois, il y aura trois vidéos d'aperçu de ces trois composants. Allons-y, commençons à les faire maintenant, et je te verrai dans la prochaine vidéo. 99. Comment installer Bootstrap 4 sur un site web à l'aide de Visual Studio Code: Salut là. Dans cette vidéo, nous allons installer Bootstrap 4 sur notre site Web en utilisant VS Code. C' est super simple, entrons maintenant et travaillons. Première étape, créons notre propre dossier local. Nous en avons fini avec le projet 3. Merci beaucoup. Maintenant, c'est l'heure de Bootstrap. Nous allons obtenir un fichier, nous allons ouvrir et nous allons créer sur notre bureau un nouveau dossier local. Dans ce cas, nous allons l'appeler Projet 4 sans surprise. Cliquez sur Ouvrir, et fermons l' onglet d'accueil qui s'ouvre et nous allons juste attacher cela. Débarrassez-vous de cette ligne et créons un fichier alphas. Nous allons créer un index. Nous avons passé File New, et ça marche bien. Je vais vous montrer juste un clic droit dans cette zone ici, vous pouvez aller à un nouveau fichier et c'est une façon différente, je voudrais que ça soit plus agréable. créé mon index, il est ouvert ici, je vais l'ouvrir, je n'aime pas non plus cette chose ouverte, juste ce que nous apprenons au moins. Le fichier HTML a besoin de toutes les choses de base. Nous avons besoin d'un point d'exclamation, appuyez sur Retour et ça nous donnera la plupart du type de document et tous les bits dont nous avons besoin. Maintenant, je vais vous présenter le site Bootstrap. Ça s'appelle getbootstrap.com. Ceci est la page officielle et la documentation et quelle était la bonté qui nous aidera avec Bootstrap. Maintenant, nous utilisons Bootstrap 4, le moment si vous regardez cela dans le futur et que c'est à Bootstrap 5, cela va sembler complètement différent, mais l'essentiel sera probablement le même. Ce que nous voulons, c'est que nous voulons commencer. Vous pouvez le télécharger localement sur votre machine. On va le faire d'une manière différente. On va commencer, et en gros, il va dire que vous avez besoin de deux groupes de choses. Vous avez besoin, le CSS et le JavaScript. Si vous prévoyez juste d'utiliser say, le framework comme la grille, peut-être que nous avons parlé avec la grille, la structure, tout ce dont vous avez besoin est le CSS. Si vous n'avez pas l'intention de faire les menus déroulants du charbon ou les curseurs d'image, vous n'avez pas besoin de ces trucs vers le bas ou vers le bas. Mais, installons tout à fait juste au cas où nous allons l'utiliser plus tard. Si vous ne prévoyez pas de l'utiliser, ne le mettez pas car cela va simplement augmenter le temps de chargement. Nous allons copier le CSS et il vous indique où le mettre mettre. Mettez-le dans un lien dans votre tête, mais ils vous ont donné le code prêt à partir. Je l'ai copié. Ici, il dit, « mettez-le à la tête », et c'est là. Nous l'avons fait plusieurs fois avec différents CSS. Nous l'avons fait avec Google Fonts. La dernière fois que nous avons traité. C' est tout ce dont je me souviens. L'autre chose à retenir est que si vous créez votre propre feuille de style, ce que nous ferons dans une seconde, il doit être au-dessus de cela. C' est en haut, Bootstrap, toujours en haut et votre style juste en dessous. On ne l'a pas encore. Le prochain morceau est ce JavaScript ici. Il y a trois parties. Copions tous les trois et nous allons les coller. Si vous lisez la documentation, il est dit, « il y a un bon exemple de modèle de démarrage. Vous pouvez simplement copier tout cela et le coller dans VS Code aussi bien. Mais il est dit de s'assurer qu'il va au fond. Comme JavaScript, comme nous l'avons discuté plus tôt. J' allais le coller en bas juste avant la fermeture du corps. Je vais mettre le mien ici. On y va. Ici, je vais mettre quelques commentaires. Souvenez-vous de la barre oblique complète ou de la barre oblique de contrôle complète sur un PC, et ajoutez simplement quelques notes. Juste pour vérifier que le CSS fonctionne réellement, nous allons prévisualiser la page, puis commencer à travailler là-bas, donc il va répliquer et dire ouvrir le serveur live. Il va s'ouvrir sur l'écran de droite aujourd'hui. Rien là-bas. Cela ne fonctionne pas, voyons la façon de vérifier si cela fonctionne est juste de jeter dans un h1, et tapez à nouveau dans le monde Hello, et juste vérifier. Vous savez que le CSS fonctionne parce qu'il ne ressemble pas à notre ancien h1 habituel. Il y avait un vieux H1 ressemble à ce que je vais commenter ce truc. l'intérieur, ça ressemble à ça, jolie. Maintenant, la seule chose dans laquelle VS Code ne le met pas, et maintenant rappelez-vous que nous avons utilisé un point d'exclamation pour mettre la plupart des informations pour la page. Il y a une chose qu'il suggère ici qui ne fait pas partie de ce code VS initial. Peut-être qu'il y a différent. Nous avons examiné les différents éditeurs de code et leur implémentation. On va juste en tête. C' est un ici. Le psy pour s'adapter, non, est manquant. On a tout ça, mais on a besoin d'une virgule et d'un psy pour tenir non. Qu'est-ce que ça fait ? Mettez-le en premier, donc il va ici avant la fermeture des guillemets et je pense qu'il a désactivé quelque chose est une séance bizarre dans Safari qui manque avec Bootstrap afin que vous puissiez l'éteindre. Cela signifie simplement que vous allez avoir de la cohérence entre les différents navigateurs. Cool, et c'est il installé. Maintenant, le truc fou est que si nous regardons sur notre bureau, c'est que dans Project 4, nous avons juste la page d'index. Rappelez-vous qu'ils sont chargés comme pour mon réseau de diffusion de contenu. Bootstrap contrôlent cela. Ils l'ont sur ces serveurs, la même chose que tout ça. Que juste se charger au fur et à mesure que la page se charge, vous pouvez les télécharger à partir de getbootstrap. Le seul problème est que le navigateur devra les charger à partir de votre site alors probablement la personne visitant votre site a probablement déjà téléchargé la version CDN à partir d'un autre site Web, donc il faut à nouveau, et cela rendra le chargement de la page agréable et rapide. Qu' est-ce que ceux-là ? jquery, nous avons parlé pour avoir ça. Cela le charge à partir de jquery. On l'a déjà fait avant. C' est une version mince légèrement différente minimisée. Même chose, celui-ci ici, popper, est un peu vraiment utile de JavaScript qui s'utilise pour le positionnement, choses comme les info-bulles et les modaux pop-up et toutes les notifications qui apparaissent à l'intérieur des sites Web. Celui-ci ici est JavaScript spécifique à Bootstraps. C' est un peu s'habituer et vous, mes amis, avez installé Bootstrap. Maintenant, nous allons continuer avec le cours, quelques notes sont que assurez-vous que le CSS pour Bootstrap est au-dessus du vôtre. Tu mettrais maintenant lien, CSS, donc tu mettrais le tien en dessous. Si tu arrêtes de faire, on n'a pas encore ça, alors je vais m'en débarrasser. Vous allez faire votre propre JavaScript. Vous devez vous assurer que la balise de script se termine en dessous de ceux-ci. Celles-ci entrent d'abord puis les vôtres après. Sinon, le vôtre peut toujours commencer à entrer en conflit avec ces et maintenant un gros gâchis. Sauvegardez-le et passons à la vidéo suivante. 100. Aperçu rapide du fonctionnement de la grille Bootstrap dans VS Code: Bonjour là. Bienvenue dans la vue d'ensemble du système de mise en page Bootstrap, ok, aussi connu sous le nom de système de grille ou peut-être de structure. Ce sont les boîtes qui composent notre site Web. La chose cool à ce sujet est que nous allons écrire juste un petit peu de code, un conteneur avec quelques balises div dedans, fondamentalement pas de CSS du tout, juste une couleur de fond. Regarde ce qu'on est capable de faire. Nous avons des boîtes qui ajustent les tailles frittées. On n'a rien fait de tout ça. Les requêtes des médias sont déjà là. Je vais essayer de vous étonner avec Bootstrap et c'est un système de mise en page incroyable. Commençons. D' abord, on va fermer notre page d'index. Nous allons le sauver pour notre site Web principal que nous allons construire vers la fin de cette section. Nous allons créer quelques fichiers jetables. Nous allons cliquer avec le bouton droit de la souris sur « Nouveau fichier » et nous allons dire que celui-ci est un aperçu. Celui-ci va l'être, maintenant Grid est un mot clair Greeley de ce que nous faisons. Structure est un autre bon mot, bootstrap s'y réfère comme la mise en page. On va l'appeler comme ça. Layout.html. Ajoutons nos trucs. Point d'exclamation. Assurez-vous qu'ici nous ajoutons notre coma Shrink pour s'adapter. Non, il y a d'autres parties qu'on veut. Où le veut-on ? On veut ça. Le CSS pop juste sous le titre. Nous n'avons pas besoin du JavaScript pour le moment parce que nous ne l'utilisons pas. Vous pouvez utiliser toutes ces requêtes multimédia étonnantes dans le système de grille sans toucher à l'un des JavaScript. C' est seulement si vous voulez que la miniature de fantaisie pop up choses. Tout d'abord, dans notre corps, mettons-nous dans un récipient. Maintenant, mettons dans .container. C' est un bon cours. Ajoutons un peu de style à cela. Maintenant, parce qu'on fait un joli document jetable, je ne vais pas prendre la peine de mettre le style dans sa propre feuille. Je vais juste le mettre dans la tête. C' est la même chose, mais remarquez que je dis par feuille. Je vais dire, donnons au conteneur le talon complet. Qu' est-ce qu'on va faire ? Juste une couleur d'arrière-plan. La couleur de fond va être aléatoire. Aujourd'hui, c'est le chardon, ce n'est pas assez bon pour voir à l'écran. Il faut quelque chose de plus sombre. Filature aléatoire, désactivée à nouveau, revenez pour commencer à taper en couleur et il devrait le pré-remplir. Tu as du magenta, une belle couleur rose. Jetons un petit coup d'oeil dans le navigateur, il y en a. Ce n'est pas ça, parce que c'est ma page d'index. Allons l'éteindre, rallumer à nouveau. Rien ne se passe, j'ai besoin de mettre quelque chose dans le conteneur, donc ici mettons notre h1. H1, mets quelque chose là-dedans. Tu es étonné ? De quoi es-tu étonné ? Tu aimes ça, dit le conteneur. Mais c'est aussi une largeur. Il a une largeur dessus. On ne lui a pas donné une largeur. Il a aussi fritté. C' est fritté. Le h1 est en train d'être coiffé. On a déjà travaillé ça. C' est un grand avantage d'utiliser Bootstrap vous. Même si vous l'utilisez simplement pour ce système de mise en page de grille, c'est tout simplement génial. L' autre chose cool, c'est que ce qui se passe quand je le rétrécit. Allons à inspecter avec le bouton droit de la souris. Laissez-le basculer pour vous assurer que c'est activé. L' appareil était un dispositif enroulé, barre d'outils à bascule. Allumez cela et assurez-vous qu'il est réactif en haut, parce que nous voulons aller comme ça. Regardez. Je l'ai donné, mais regardez, il s'ajuste déjà pour beaucoup de requêtes médiatiques. Vous pouvez les voir le long du sommet là-bas, ils sont déjà prêts à aller et même mobile. Vous pouvez voir qu'il y a déjà du rembourrage à côté du conteneur. C' est Bootstrap dire personne jamais, une fois qu'ils prennent coincé contre le côté et que vous êtes comme c'est vrai.Merci Bootstrap. L' autre chose qu'il dit est, mettons ce conteneur sur les bords des appareils mobiles. Mais ici vous donnera un peu de rumeurs à l'extérieur. Vous pouvez faire un bon design plutôt que d'essayer de tout étirer. Il y a juste quelques belles choses que Bootstrap fait. Maintenant, pour utiliser Bootstrap, vous devez vraiment vous assurer que vous utilisez la bonne langue. Ce que nous allons faire dans cette section est de vous habituer à utiliser la bonne langue. J' ai essayé de te préparer pour le reste du cours. C' est pourquoi nous l'avons appelé plus tôt un conteneur ou un emballage, comme certains l'appellent. Parce qu'ici, passons à notre mise en page. Nous allons utiliser la documentation de plus en plus. Mais sous la disposition, il est dit, vous pouvez voir un conteneur est le mot qu'ils utilisent pour cette chose. Les récipients de fluides que nous examinerons plus tard. On va aller et venir à travers les documentations, juste pour vous y habituer. La prochaine chose que je veux te montrer, c'est ce que tu peux faire à l'intérieur d'ici. Débarrassons-nous de ce h1. A l'intérieur du conteneur, mettons-nous dans une rangée. Les lignes sont ce qu'ils utilisent comme les conteneurs d'emballage qui parcourent tout ce qui contient un conteneur a une utilisation vraiment spécifique qui est sainté à chaque fois. Alors que c'est comme un conteneur mais est utilisé à l'intérieur du conteneur principal, beaucoup d'orthographe sont ce mal. Ne le comprenons pas. Vous devez avoir une rangée tout seul. Il y a toujours des choses à l'intérieur. Ces choses à l'intérieur sont normalement toujours appelées cols pour les colonnes, les lignes et les colonnes. Combien en veut-on ? On en aura trois. Rappelez-vous qu'il est l'option Maj flèche vers le bas sur mon Mac, et il est alt-shift flèche vers le bas sur un PC. C'est trois buts. Tapons des trucs à l'intérieur. Celui-ci va être un, celui-là sera deux, et vous l'avez deviné trois. Maintenant, c'est quoi de fantaisie ? Il faut s'assurer que les rangées de l'autre Rapa et ces colonnes sont les choses qui vont à l'intérieur de lui. Sauvegardez-le. Regardons un peu. Dans notre document ici, voyez-vous, je me suis débarrassé du h1. Il y a un conteneur qui a encore mon onglet d'imagerie. Mais vous voyez ce qu'il a fait, il les a séparés, il les a mis dans un joli petit groupe. Ce qu'il fait ici, rappelez-vous avant que tous les parents Rapa, nous devions ajouter un flex d'affichage. Bootstrap par lui-même sans demander, suppose que si vous utilisez la ligne et à l'intérieur d'une rangée, tous les enfants vont fléchir. C' est quelque chose de pratique. C'est juste une autre chose qu'il est coupé. Vous remarquerez que notre feuille de style pour le moment a juste un conteneur et il n'a même pas besoin de ce fond de conteneur. Vous pouvez voir jusqu'où nous avons sans avoir touché CSS comme arrière-plan ici c'est juste pour que vous puissiez le voir au milieu. Maintenant c'était cool. En les séparant en trois groupes pairs, ils ont d'autres choses qui le rendent vraiment cool. Disons que nous voulons que la première boîte soit à huit. On a la même grille à 12 colonnes. Vous pouvez diviser votre site web en 12 petits groupes ou 12 colonnes. Je peux dire -8 sous ce col, donc col -8. Jetons un coup d'oeil. Vous voyez ça mis à jour, c'est huit, et ces gars, parce qu'ils n'ont pas de numéro, ils supposent qu'ils correspondent au reste. Donc 8-19, donc ce sont deux rangées et 11,12 ici. On n'avait rien à faire. Souviens-toi avant qu'on ait les pourcentages et des trucs comme ça. C' était dur. C' est incroyable. Est-ce que ça peut aller mieux ? Il ne, [inaudible] pas utiliser seulement les huit anciens. Nous pouvons utiliser un peu plus spécifique de requête média. Qu' est-ce que je veux dire par là ? Je veux dire que dans nous regardons dans notre aperçu ici. Nous avons regardé l'engouement médiatique avant. Ils sont tous ici par défaut. Ce que nous pouvons faire est de dire facilement, d'ici vers l'extérieur s'appelle Excel. C' est ce qu'on appelle ici grand. Ce petit espace ici est appelé moyen. Celui-ci s'appelle Petit. Partout en dessous, je pense qu'il était 5, 7, 6 est considéré comme extra petit. Nous pouvons utiliser ce langage pour les identifier. Parce qu'au moment où ils font la même chose sur tous. Rien ne change vraiment. Disons que je veux mettre sur mon questionnaire multiple, je vais juste le faire. Ce premier ici, je vais faire -lg. On va dire, on va en faire 10. Cette première colonne va essayer d'occuper 10 colonnes. C' est sympa et simple, mais vous devez utiliser cette syntaxe. Lg est pour grand et ces deux autres camarades commande et maintenez enfoncée la touche d'option et l'utiliser flèche vers le bas pour faire plusieurs curseurs. Sur un PC, c'est le contrôle et la flèche alt et bas. Dans ce cas, je vais dire grand. Je vais juste remplir ces deux autres. Non, il faut en remplir un. Bien que l'égal 12. Laissez-le vérifier dans le navigateur, et vous pouvez voir ici. Je suis petit en ce moment et il y a celui-là, non il y a moyen et grand. Il va 11, pas 10 puis 11, 12. Je peux en cibler plus d'un. Dans l'ensemble, c'est faire cela, mais je voudrais laisser dire, en mettant en plusieurs suppositions. Sur mon Mac, je maintiens la touche d'option enfoncée et je clique sur PC, c'est alt. Je vais le dire sur celui-là, donc il n'y a qu'un espace. Vous devez utiliser des minuscules. Nous allons dire que l'appel pour, disons que le petit, sera six, alors ces deux seront trois et trois tous égaux 12. Jetez un petit coup d'oeil. Ici, il fait encore mes 10, 11. Maintenant, en bas, vous pouvez le voir là-bas. Ça va six, puis trois et trois. Vous pouvez voir par défaut, juste Bootstrap veut vraiment qu'il s'empile les uns sur les autres quand il est en bas à extra petit. Vous remarquerez que quelque chose que nous avons essayé de faire beaucoup lorsque nous construisons notre site Web, tout était empilé horizontalement jusqu'à ce qu'il arrive ici et nous les empilons les uns sur les autres. Vous pouvez remplacer cela. Ce qui est bizarre, et je suppose qu'une bonne chose à mentionner, c'est qu'il n'y a pas de XS, [inaudible] XS ici. XS même. Il suppose que si vous n'écrivez rien, alors si je l' ai fait et que ça va être quatre, ça suppose XS. C' est ce qu'on appelle le poing mobile. Nous avons construit notre dernier site Web disant que nous supposons que tout est de bureau sauf indication contraire, Bootstrap est construit dans l'inverse. Il suppose que tout est mobile. Si je viens de mettre un appel sans aucune indication, il suppose un téléphone mobile. Nous y allons, 3, 4, 4, 4. Cool. Comment était-ce ? C' était une brève introduction. Il y en a beaucoup plus. Mais j'espère que vous pouvez voir la puissance de ça comme, surtout parce que notre style est comme ça. cool, c'est que tout le monde a le même style. Si vous prenez le thème de quelqu'un d'autre ou le CMS de quelqu' un d'autre ou le site Web de quelqu'un d'autre et qu'il est construit sur Bootstrap, vous seriez comme oui, parce que vous savez ce que ces choses font et ils sont écrits de la même manière. De plus, beaucoup de choses sont faites comme ce conteneur. Les requêtes des médias sont déjà à l'intérieur. Ils font de belles choses par défaut. Vous pouvez les remplacer tous, mais pour la plupart, ils font exactement ce que vous voulez qu'ils fassent. Très bien, c'est donc la vue d'ensemble rapide de la grille. On va faire plus, mais j'ai l'impression qu'on devrait passer par les trois parties avant d'entrer dans les écrous et les boulons de la construction de notre site. Je te vois dans la prochaine vidéo. 101. Aperçu rapide du fonctionnement des composants Bootstrap dans VS Code: Salut là. Dans cette vidéo, nous allons regarder un aperçu des composants de Bootstrap. Les parties les plus excitantes de Bootstrap montre diapositive est déplacer, Je vais donner à ce. Nous avons un menu déroulant jumbotron très facile. Le menu change en mobile quand il est plus petit, nous avons mis ces cartes en marche, et littéralement, nous le faisons dans cette vidéo. Regarde la longueur, c'est autour, quoi ? 12 minutes, je suppose. On a fait tout ça très vite. Les composants sont incroyables. Allons à l'intérieur et travaillons. Nous avons terminé avec notre aperçu de la mise en page. Fermons ça. Revenons à la page d'index. Ce que nous allons faire, c'est, nous allons tout jeter, nous allons nous débarrasser de h1, et nous allons jeter tous les composants que nous allons utiliser pour construire notre Projet 4. La première chose que je veux faire est d'ajouter notre conteneur. Alors allons-y point conteneur. Membre doit être orthographié exactement correctement, sorte qu'il correspond à l'utilisation Bootstraps d'un conteneur, et à l'intérieur de cela, nous allons jeter dans nos composants. Maintenant, nous parlons brièvement des composants. Ce sont des choses comme des curseurs d'images et des navigations. Regardons un peu d'où les obtenir. Dans Bootstrap, nous allons aller à la documentation, nous allons passer beaucoup de cette section du cours. Nous avons examiné la mise en page, nous avons examiné les composants ensuite. Alors cliquez sur ça. Il y a beaucoup de choses ici, excitantes, cool. On ne va pas passer par chacun d'eux. En ce moment, on va juste jeter les trucs qu'on va utiliser. On va commencer par un Navbar. Pas Nevs, Navbar. Ensuite, ici, fondamentalement, vous pouvez faire défiler vers le bas et juste chercher celui que vous voulez. Celui-ci a, je pense que c'est la version évier de cuisine, il a tout. Beaucoup d'options différentes, juste avec des ticks, juste avec la navigation. On va prendre la version évier de cuisine, juste en haut. Donc c'est le premier. Juste en dessous, prenons ceci, cliquez sur « Copier ». Il y a un peu de code qui va, dans le HTML. Mais regardez ceci, passons au code VS, à l'intérieur d'un conteneur. Collons-le, sauvegardons-le, prévisualisons-le dans un navigateur. Je vais l'éteindre, le rallumer à nouveau. Regardons un peu. Regardez ça, nous avons une navigation et une liste déroulante. Peut-être que nous sommes ici pour faire une navigation. Il y a une barre de recherche qui ne fonctionne pas, bouton avec des survols, toutes ces choses qui sont prêtes à aller. Maintenant, sur votre HTML, nous ne allons pas tout faire exactement maintenant, mais vous pouvez passer par et dire, « Au lieu du mot maison, nous pouvons appeler celui-ci le bouton Dan. » Tu vois que tu as un bouton Dan. Nous allons avoir quelques manquants avec la mise en page, ou déplacer et ajouter des choses plus tard, mais, je suppose que je veux vous exciter avec ce que Bootstrap peut faire très rapidement. Maintenant, la prochaine chose que nous voulons ajouter, est que nous voulons ajouter quelque chose qui, le menu déroulant fonctionne-t-il dans celui-ci ? C' est le cas. Parce que nous n'avons pas ajouté dans notre page d'index, nous l'avons fait, c'est pourquoi cela fonctionne. Nous nous souvenons que nous avons ajouté ce code JS ici, ou cela dit, « code JavaScript ». Dans notre petit aperçu jetable, nous avons seulement ajouté le CSS et nous n'avons pas mis dans le JavaScript. Cette page d'index, si vous étiez juste suivi avec un fichier jetable, vous devez vous assurer que le CSS est dans le cache, et tout le JavaScript est dans la partie inférieure ici, c'est là que tous ces composants fonctionnent. Donc, il y a mon conteneur, qui va être mon Nav. Je vais ajouter un petit commentaire, c'est la Navigation. Cool. La prochaine chose que je veux ajouter, c'est mon carrousel. Carrousel, c'est proche ? Bref, allons trouver le carrousel. Donc si on veut un carrousel, on va chercher les composants, et on trouve le carrousel. Ok, ? Même chose. Jetez un coup d'œil à certains des exemples. n'est qu'une simple vieille diapositive, celle-ci a quelques flèches, on peut cliquer dessus. Décidez lequel vous voulez. J' ai toujours des petits boutons ici. Celui-ci a des tiques en tout. Alors décidez sur lequel vous voulez. Je vais aller pour le premier, parce que ça correspond à mon design. Vous cliquez sur « Copier » du code ci-dessous, puis collez-le simplement dans ce code. Vous aimeriez encore une copie aussi facile. Oui, c'est des amis. Il cherche des images, un tas d'images qui ne sont pas là. Donc, nous allons prendre quelques images de nos fichiers d'exercices et les jeter dans. Donc on va aller aux dossiers d'exercices, on va regarder le projet 4 maintenant, notre petit projet de yogourt. Les images, au lieu de les copier une par une, fonctionnent-elles [inaudible] ? Tu dis : « Pourquoi tu ne les as pas copiés partout en single go ? » C'est ce que je vais faire maintenant. Je vais prendre le dossier des images et le copier. Allez sur mon bureau, sur mon Projet 4, je vais le coller ici, tout le truc. Toutes les images pour le projet. Maintenant, ce que nous pouvons dire, au lieu de charger cette image appelée point, point, point, nous allons dire images et produit 1. Je ne me souviens pas lequel nous devons utiliser. Non, yogourt 1. Donc yogourts 1 parfait. Faisons ça. Je devrais faire les deux en même temps, maintenant « Option » sur un Mac. Là, nous allons, en maintenant « Option » sur le Mac et en cliquant deux fois sur un PC, c'est « Alt » pour obtenir le curseur multiple. Tapons des images. Je vais mettre du yogourt deux fois, ce qui est juste [inaudible] trois. Maintenant, allez certainement passer par et changer votre texte tout pour décrire l'image. Regardons un peu maintenant. Maintenant, c'est aussi facile que ça. Attendez, a-t-il un défilement automatique ? Attendez. On attend Dan. Il est là. Il y a de petites erreurs là-bas, mais elles sont blanches. Tu ne peux pas les voir. On va devoir changer la couleur de ceux-là. Tu peux les voir clignoter là-dedans ? Mais [inaudible] Regardez à quel point c'est cool, c'était facile à mettre en œuvre. Il y a comme un auto-minuteur va, parce que jQuerry bonté sans nous faire de jQuerry. Donc, fondamentalement, c'est un extrait de code que nous collons, et nous pouvons l'ajouter plus tard sans compétences CSS et HTML folles, ce qui nous rend super bon, super rapide. D' accord, la prochaine. Au-dessus du carrousel, j' ai oublié que je veux le jumbotron. Donc juste au-dessus, je vais le mettre dans mon CSS, vous êtes comme, « Le quoi ? » Le jumbotron. Ne pas être d'Amérique, je devais Google ce que le Jumbotron était, et a un sens parfait maintenant. C' est un grand panneau d'affichage géant qui va au milieu. Alors regardons un jumbotron. C' est ton image de héros. C' est vous, « Bienvenue dans le monde. Voici ce que nous faisons, acheter nos affaires. » Trouvez celui qui fonctionne pour vous, ce bouton supérieur est. Ok, je vais le copier et le coller. Jumbotron est là. Vous pouvez voir h1, je ne sais pas comment faire ça. Il y a des cours spéciaux pour Bootstrap, que nous apprendrons au fur et à mesure. Mais le truc cool à leur sujet est, quand ils ont été mis en œuvre, regardons un peu. Vous pouvez voir, c'est de beaux boutons sont sympas, il y a un joli petit hover là. Quand je le décompose pour devenir plus petit, il se décompose bien. Oh, et le plus excitant que j'ai failli manquer, la navigation était prête ? Vous êtes genre, « Oh, c'est beaucoup plus facile que la vidéo de cours JQuery de Dan qu'il a fait. C' est comme 25 minutes, mais on doit le savoir pour pouvoir faire des ajustements et le réparer s'il est cassé. Pour les gens, il y a beaucoup de gens qui ne veulent pas utiliser Bootstrap, et vous dites : « Pourquoi ne le ferais-tu pas ? » C' est parce que je veux tout personnaliser, mais je suis excité à la scène quand c'est agréable et facile, et on commence à vomir des choses, et je me dis, « Ouais, je devrais utiliser Bootstrap plus. » Bon, prochain projet, définitivement Bootstrap. Revenons dans VS Code. Ajoutons une chose de plus, pour cette introduction. Nous avons un bâtiment de côté, donc je vais ajouter quelque chose appelé une carte. Cartes plurielles dans ce cas. Jetons un coup d'oeil. Bootstrap, je vais le rendre plus grand, pour qu'on puisse voir tous les bits, et je veux ajouter une de ces cartes. Peut penser à eux comme une tuile, juste agréable et facile, chose réutilisable et une copie eux. Je vais les jeter trois d'entre eux, revenir entre eux. Ils font quelque chose de bizarre, de mon retour. Je vais m'assurer qu'ils s'alignent tous en les sélectionnant. Accédez à la sélection de format. Joli. Jetons un coup d'oeil aux cartes. Document en bas ici, ils s'empilent les uns sur les autres, les images sont un peu cassées. On les change en ce moment. Donc ici, pendant que nous sommes ici, je vais utiliser mon curseur multiple [inaudible] en me donnant le raccourci maintenant. C' est « Option » sur le Mac, « Alt » sur un PC, je l'aime, faire un rêve des raccourcis. D'accord. Ensuite, on change celui-ci à deux, trois. D' accord, regardons ça, et tu peux commencer à voir notre maquette est là. Donc, la navigation et certaines listes déroulantes, nous allons rendre les choses simples, il est facile d'enlever les choses, commençant par le menu de l'évier de la cuisine, et en allant regarder en arrière. Ça va être mon jumbotron. Donc, je vais devoir styler ça assez lourdement. Ça, je vais faire sur mesure. Cette chose ici est mon petit truc de curseur, va à gauche et à droite. Mais vous pouvez voir avec quelle rapidité nous implémentons cela. Ces petites cartes en bas, on les a assez proches pour commencer. Donc, Bootstrap est un moyen agréable et rapide de jeter ensemble un site. Donc, tout le genre de fonctionnalité est intégré, prêt à l'emploi, et vous pouvez simplement le changer. Très bien, les composants sont probablement la partie la plus excitante de Bootstrap, et nous ne allons pas les parcourir tous maintenant, mais vous pouvez commencer à jeter un oeil à travers toutes les différentes choses que vous pouvez implémenter. Le truc cool à ce sujet, c'est qu'ils le vendent à votre client en tant que fonctionnalité, sachant que vous pouvez utiliser Bootstrap pour faire beaucoup de travail acharné. C' est donc le bref aperçu des composants de Bootstrap. Regardons le dernier morceau. Nous avons donc fait un aperçu de la mise en page, puis nous avons examiné cette vue d'ensemble des composants. J' en ai un de plus à y aller. Eh bien, regardez les styles. 102. Aperçu rapide du fonctionnement des styles CSS de Bootstrap dans VS Code: Salut là. Dans cette vidéo, nous allons regarder un aperçu des styles de Bootstrap. Nous avons examiné sa mise en page, nous avons examiné ses composants, maintenant nous allons examiner cette troisième option, pour ses styles. Tout ce qu'il est, ce sont des styles pré-faits que Bootstrap a faits pour nous que nous pouvons appliquer avec des classes simples qui vont faire des choses fastidieuses pour nous rapidement. Comme un bouton géant qui a des coins arrondis dans une ligne autour de l'extérieur et un vol stationnaire, nous pouvons l'appliquer rapidement. Il y a beaucoup d'options et de styles différents à choisir, Bootstrap a fait tout le travail acharné, nous avons juste à déterminer quelle classe à Ed. Laissez-moi vous montrer comment tout fonctionne maintenant dans VS Code. Pour cette vidéo, nous allons tout fermer et travailler sur une chute jetable. Ce que nous pourrions faire est d'aller à l'index et en fait simplement saisir tout cela, copier afin qu'il ne soit pas nécessaire de faire le rétrécissement pour tenir non et ajouter le JavaScript à nouveau. On va voler ça fera un nouveau dossier ici. Nous allons appeler celui-ci aperçu et nous appellerons celui-ci styles.html. Coller et nous allons supprimer tout ce qui se trouve à l'intérieur de ce conteneur. J' espère que vous venez avec moi, vous êtes là. Tout ce qu'on a, c'est un conteneur ici. Jetons juste quelques balises html de base pour que commencer par un h1, dessous ou laisse mettre des choses à l'intérieur de celui-ci, une balise P. Mettons de l'ipsum Loren, peut-être juste 10 mots. Mettons un bouton et soumettons même mettons une balise A. Ça ne va nulle part. Mais nous allons y mettre du texte. Il va être nous contacter page juste quelques trucs génériques et voyons juste ce que Bootstrap fait par défaut. Après avoir fermé ça, ouvrez-le. Vous pouvez voir qu'il y a un regard pour un look bootstrap. La bonne chose à ce sujet est, surtout si vous êtes nouveau dans le design ou que ce n'est pas vraiment ce que vous aimez faire. Vous aimez la construction, mais pas tellement que choisir des polices ou au moins vous n'êtes pas bon à elle. Bootstrap peut vraiment aider dans juste instantanément le rendre agréable. L' autre chose cool, c'est que ce n'est pas juste laissé comme ça. Ce que vous pouvez faire est que vous pouvez aller dans votre getbootstrap.com et commencer à regarder à travers la documentation. Il faut un peu de temps pour s'habituer à tout. Mais il y a des trucs super pratiques ici. Jetons un coup d'oeil. Styles nous avons pris sur la mise en page. Il a son propre bit, ses composants, a son propre bit. Mais quand il s'agit des styles que Bootstrap utilise, il est étalé sur beaucoup d'entre eux. Beaucoup d'entre eux sont à l'intérieur des services publics. Mais certains d'entre eux sont des composants. Je vais vous montrer ce que je veux dire en traversant. Maintenant, si tu parles à d'autres personnes, ils pourront te dire exactement quand tu diras, « Hé, parle-moi de la mise en page Bootstrap. » Ils sauront exactement de quoi tu parles. Idem avec les composants. Quand il s'agit des styles, c'est quelque chose que j'ai inventé pour englober toutes les autres choses qu'il fait. Tous les utilitaires et les bits supplémentaires, tous les styles qui ajoutent de la liberté pour vous. Est-ce que ça veut dire que tu es au courant ? Les utilitaires commencent par les bordures. Vous pouvez voir que vous pouvez ajouter des bordures très rapidement en ajoutant seulement ces classes. Nous ne les examinerons pas tous, mais regardons le texte. Joli, facile. Alignement du texte, super facile. Vous pouvez le faire pour les requêtes de médias aussi en utilisant, si je veux qu'il s'applique, du texte sur les petits appareils à gauche, mais à nouveau à droite. Pour les appareils plus volumineux, vous pouvez simplement ajouter cette classe plutôt que d'essayer de modifier deux requêtes multimédias différentes. Faisons quelque chose en fait. Jetons un coup d'oeil et disons que nous voulons tous en majuscules. Vous pouvez voir ici ma classe P peut être une classe de majuscules et c'est tout ce que j'ai besoin de faire. Allons jeter ça. Dans le code VS, je vais dire que ma balise p a une classe même de texte dans un cas. Jetons un coup d'oeil dans le navigateur et vous pouvez voir, espérons qu'il fait en majuscules et ne jamais rien faire. Disons que je veux que ce soit autre chose. Jetons un coup d'oeil. On a des tiques pour le poids. Disons que nous regardons la classe P. Nous n'avons pas besoin de créer une classe en gras, puis de l'appliquer à elle. Il est prêt à y aller déjà. Vous pouvez voir gras, italique. Copiez ça et allez là-dedans. Je vais dire que je veux aussi que ce soit majuscules et disons que je vais y mettre un espace. Je veux que ce soit un poids de police de gras aussi. Ça va être majuscule et audacieux. Vous pouvez voir la déclaration des ticks par défaut est désactivée ou le sous-jacent. Il est juste assis là bien. Les boutons ont de belles choses. Regardons ici, c'est là que ça devient désordonné, mais mon Dieu, Grand, mais mon Dieu, Grand, eh bien c'est une sorte de personnel de style est sur les utilitaires, mais puis les boutons sont sous les composants, les boutons. Vous pouvez voir si j'ajoute une classe de btn-primary, ça va ressembler à ça, pré-fait avec des couleurs et tout. Nous allons avoir un bouton de recherche et primaire. Où est mon bouton, d'accord, il va avoir une classe de bouton et de primaire. Jetons un coup d'oeil. Il est prêt à partir. Il a des coins arrondis, il est à HAVA Rico. Pas aussi excitant que la grille, certainement pas aussi excitant que les composants. Mais la bonne chose à ce sujet, c'est que beaucoup de choses sont prêtes à partir. C' est très clair ce qu'il fait. Souvent, ils sont tous prêts pour s'assurer qu'ils sont prêts pour différentes requêtes multimédias et différents appareils comme celui-ci. Il y a aussi un contour primaire de bouton. Il y a un grand bouton alors regardons. Il y a juste ajouter un peu plus. J'essaie de rendre ça plus excitant. Comme peut-être pas, mais vous pouvez voir que c'est juste que vous n'avez pas à travailler sur ce que le style de bordure de mauvaises herbes solide, puis un pixel, puis juste ajouter cela à cela. Il a des valeurs par défaut. Quand nous commencerons à construire notre site, je vous montrerai comment le remplacer. Mais vous pouvez voir là je peux faire un bouton grand ou petit en ajoutant simplement un autre. Il a dit ce dernier. Tu seras comme, on l'aura dans le dernier. Je vais en faire le gros bouton. Je n'ai pas à aller choisir la taille est juste un bouton géant avec une couleur primaire avec doublure à l'extérieur. Le troisième mais pas aussi excitant partie de Bootstrap. C' est quoi ce truc ? Pré-fabriqué, prêt à l'emploi. Je termine vite avant qu'on y aille. L' aperçu de la grille était la structure réelle du site Web. Les boîtes dans lesquelles nous mettons des choses et il incluait toutes les choses comme les requêtes des médias. Ensuite, nous avons fait le Super 61 où nous avions des composants. Nous avions un curseur de carrousel qui fente à travers l'écran dans une navigation qui est tombée en panne pour mobile et de retour dans une navigation principale pour le bureau. Puis ce gars, où il y a juste beaucoup et beaucoup de cours pré-faits pour vous aider à construire un site rapidement. Le problème a disparu en essayant de se souvenir de la taupe. La chose cool sur le site Bootstraps, getbootstrap.com, la chose de recherche fonctionne raisonnablement bien. Si j'ai besoin de trouver mon carrousel parce que tu ne peux le trouver nulle part, d'accord ? Vous pouvez voir si je le tape, ça me prend deux exemples de carousels et je peux sauter là et y aller. Parfois, tu dois essayer de deviner le mot que tu aimes. Comment est la chose qui a le bit avec le type gras, ok ? Vous pouvez simplement le taper et juste voir où vous pouvez obtenir et ce cas, a échoué. Bordures sur l'un ou l'autre ce sont leurs poids de police, l'audace. Ce que nous allons souvent faire et peut être un peu déroutant lorsque vous commencez à utiliser le site, c' est qu'il est venu à lui. Il y a toute une page sur les poids des polices. Il est en fait juste de venir à cette page sur les tiques que nous étions avant et a glissé vers le bas de la page à ce marqueur, poids de police complets en fait à cette page où nous étions avant. Parfois, vous cliquez dessus et il vous amène à une page globale, puis vous faites glisser vers le bas et vous vous perdez un peu, parfois. L' autre chose à faire, c'est juste y aller. En fait, comment puis-je faire Bootstrap et m'assurer d'utiliser Bootstrap pour la dernière version et comment puis-je soulever la ligne ? Bootstraps moteur de recherche dans son site est correct, mais souvent il est facile d'aller ici et Google le trouvera dans le site Bootstrap pour vous, ou bon vieux Stack Overflow. Très bien, c'est tout pour les aperçus, allons dans ce bâtiment. 103. Comment personnaliser les styles css par défaut de Bootstrap 4: Bonjour tout le monde. Aujourd'hui, nous allons regarder comment remplacer les styles Bootstrap. Il semble très bootstrappy pour commencer. Nous allons le personnaliser un peu pour le changer pour ressembler à ceci. On y va, beaucoup moins bootstrappy. On va faire quelques choses. Nous allons vous montrer comment remplacer les styles, mais aussi comment simplement travailler dans les styles que Bootstrap a créés. Souvent, il y a des styles qui ont été appliqués que nous voulons changer, et Bootstrap est assez utile et a réellement créé des alternatives pour eux, donc nous allons faire un mélange de substituts et juste de trouver des alternatives, ou dans où j'ai la voix la plus croquante que je puisse me débarrasser parce que c'est très tôt. se voit dans la vidéo. Pour remplacer nos styles, nous allons fermer et je vais jeter HTML que nous utilisions. Nous allons ouvrir notre page d'index en la doublant. Cool. Jetons un petit coup d'oeil au CSS. Vous pouvez effectivement cliquer sur ce lien ici si vous passez le curseur au-dessus. Sur mon Mac, c'est Commande et cliquez sur. Je suis sûr que sur un PC c'est Contrôle et cliquez. Vous allez cliquer dessus, l'ouvrir, et que mes amis sont le CSS Bootstrap. Ça nous donne de la fumée sacrée. La version agrandie, qui semble plus compliquée qu'elle ne l'est, mais tout est là-dedans. Coupons simplement à la plus petite taille possible. Si je vais « trouver », donc j'utilise juste mon « trouver », et allons chercher notre h1. Vous pouvez voir qu'il y a cinq occurrences, un, deux, trois, quatre, cinq, et ce premier est plus de mettre à zéro le code par son apparence. Beaucoup de choses obtient ses marges assis juste un peu. Marge supérieure zéro, marge inférieure est remplacée. Ici la police une, la taille h1 l'obtient à 2.5. Il y a des choses qui se passent que je peux comprendre et ensuite commencer à remplacer. Maintenant, ce que vous ne voulez pas faire est de commencer à ajuster ce fichier, car vous pouvez télécharger bootstrap.min.css et commencer à le modifier. Get Bootstrap a en fait une version non minifiée que vous pouvez commencer à ajuster, mais il est préférable de laisser bootstrap faire sa propre chose et de le remplacer. Cela devient beaucoup trop compliqué pour commencer à ajuster le fichier spécifique, donc ce que nous faisons dans Visual Studio Code est que vous créez votre propre feuille CSS. Donc créons d'abord ici, cliquez avec le bouton droit, Nouveau fichier, appelons-le Styles. Appelez-le simplement style.css, je vais le faire glisser ici, et en HTML, je vais sous mon Bootstrap CSS, je vais ajouter mon propre lien. Donc lien : CSS, et il a heureusement appelé style.css. Pas par défaut, juste par chance. Donc, le gros est qu'il doit être sous Bootstrap pour qu'il fonctionne correctement. Allons changer quelque chose. Donc, pour le moment, jetons un coup d'oeil, je vais commencer le navigateur. Il est défini sur une police spécifique. Allons changer la police de la copie du corps. Donc ici, nous pouvons dire corps, nous allons choisir un style de police pour le moment. Je vais juste choisir l'une des polices, pas le style de police, la famille de polices. On va choisir une des valeurs par défaut, et celle-ci va être quelque chose d'étrange. Nous allons utiliser Impact. Je vais prévisualiser sur le navigateur, et vous verrez tout est parti et changé. Donc, nous allons laisser le CSS tout seul et juste travailler sur le dessus. Nous allons devoir parfois comprendre ce que Bootstrap a appelé des choses pour le remplacer correctement, et je vais vous montrer comment le faire un peu plus tard. Laissez-moi vous montrer ce qui se passera et ce que vous devrez vous battre si vous obtenez ceci sous votre style.css. Vous pouvez voir, comme c'était, et vous êtes, « Mais j'ai dit être corps, être Impact » ou ce mot. Donc tu dois juste t'assurer que c'est par là. Donc c'est surpasser un style. Très souvent cependant, vous n'aurez pas à remplacer un style, vous trouverez simplement un autre style Bootstrap approprié car ils vous donnent des charges. Donc ce que tu finis par faire, c'est que je vais l'amener ici. truc qui glisse dans le fond m'ennuie. Mais disons que c'est le h1. Cette chose ici, voyons ce que c'est avant tout. Il y a un petit truc que vous pouvez faire dans Chrome. Vous pouvez cliquer avec le bouton droit de la souris et aller à Inspecter, et peu importe ce que vous avez mis en évidence, il vous montrera dans le HTML ce qu'il est réellement. Vous pouvez voir que c'est un « p » avec une classe de plomb dessus, alors allons-y jeter un oeil à notre HTML. Où est-il ? Donc Navigation, c'est sous Navigation, Jumbotron. Donc classe « p » avec du plomb dessus. En fait, je veux juste que ce soit une classe « p » régulière, donc au lieu d'essayer de styliser la classe principale, et vous voulez faire ressembler à ceci, juste l'ancienne balise « p » régulière,il juste l'ancienne balise « p » régulière, suffit d'entrer et de supprimer ceci ou Découvrez ce qu'il fait et voyez s'il y a une alternative que vous aimeriez. Alors saisissez-le, copiez-le, et regardons le site Get Bootstrap. Documentation, et voyons si on peut chercher leur piste. Un peu plus vite, c'est là. Donc c'est sur leur typographie, donc c'est sous Contenu, Typographie, et il y a un tas d'options différentes en termes de style. Donc ce sont les h1s par défaut, et c'est vraiment une classe « p » avec un style de h1 appliqué. Donc, vous n'avez pas vraiment besoin d'avoir le titre 1 pour être un bon gros peu de type. D' autres choses, il y a une classe ici pour un texte en sourdine, vous pouvez voir ici qu'il a fait tout disparaître. C' est là que vous commencez à explorer Bootstrap et à trouver des choses qui vous plaisent. Une option d'affichage, donc un h1 avec un affichage d'un devient énorme. Plomb, fait une paire de se démarquer par le plomb. Vous pouvez l'ajuster, vous pouvez aller maintenant et styliser cette classe parce que vous voulez que toutes les pistes et toutes les pages soient légèrement différentes. Il est mis en italique ou quelque chose, ou vous pouvez le passer en revue et dire simplement, « Je veux l'enlever ». Alors allons-y, et dans notre cas, supprimez simplement la classe, donc tout sauf les crochets. Maintenant, il devrait juste être un vieux morceau de texte régulier comme le haut, ou nous pouvons dire, utilisons l'un des autres que nous avons trouvés. Qu' est-ce qu'on a trouvé ? Utilisons Display 1. Je ne suis pas sûr de ce qui se passe lorsque vous mettez Display 1 sur une balise « p ». C' est excitant, faisons-le. Ici, ma balise « p », ça va avoir une classe. Classe de ? Pas de plomb, comment s'appelait-on ? Affichage -1. Vérifions-le dans le navigateur. C' est un gros premier paragraphe, et puis la police que nous avons choisie, ne vous inquiétez pas, nous ne restons pas avec cette police, c'était juste un, par exemple, Impact. Il doit y avoir un peu de temps au début où vous êtes, « Combien de temps est-ce que je veux passer à apprendre ce genre de choses plutôt qu'à le remplacer ? » n'y a rien de mal à remplacer et simplement dire que je vais ajouter ma propre classe et le faire, mais il est pratique de commencer à comprendre ce que ces choses font, savoir si une partie du travail acharné est fait pour vous. Mais dans notre cas, le plomb n'est pas super excitant. Vous pouvez simplement le remplacer ou en faire votre propre. Mais regardez un peu le reste de tout ça. Typographie 1, vous pouvez voir qu'il y a plein de trucs cool ici, gras, italique. Vous pouvez voir tous les raccourcis pour tout cela, vous pouvez voir qu'il y a un surlignement. Vous pouvez ajouter cela comme une petite balise span, enroule autour de l'extérieur, et il le mettra en évidence, fantaisie. On ne va pas tous les fouiller. Ce que je voulais vraiment souligner, c'est que parfois vous le surpassez en fait juste d'aller et de le faire au-dessus du dessus, et puis parfois vous comprenez simplement ce que la classe qu'il est actuellement appliqué, et puis allez le changer. Il y a plein de choses que nous allons couvrir plus tard dans le cours. C' est un bizarre cool, vraiment comme ça. Ceci ajoute une marge de quatre anneaux à l'axe des y, donc de haut en bas. Donc il y a une règle horizontale, qui est ce type ici. Où est mon souverain ? Où est allé le souverain ? Là, il est là. Voyez cette ligne qui traverse le centre là-bas, vous devez zoomer là-dedans parce qu'il est assez petit et mince, mais il y a un rembourrage de quatre anneaux, haut et bas. Pas à gauche et à droite, en haut et en bas, car il utilise l'axe y. Il y a des conventions de nommage auxquelles nous allons nous habituer au fur et à mesure. Donc pour le reste de cette vidéo, je vais juste faire des choses qu'on a déjà faites. Juste pour ranger ce truc. Tout d'abord, je vais me débarrasser de ma classe d'affichage et rajouter ma piste. Je vais apporter des polices. On l'a déjà fait, mais si vous voulez vous entraîner, suivez-moi. Donc google.com/fonts, et vous vous retrouvez sur fonts.google.com. Je suis à la recherche de deux polices pour ce site particulier. Donc ceux que je veux est celui ici appelé Abril Fatface et le reste du texte sera Open Sans Light. Probablement Open Sans Light plus avec un peu d'Open Sans Bold. Je pense que c'est les deux seuls que j'ai utilisés. Bon, alors faisons-le. Faisons Abril Fatface, je vais l'ajouter, et je vais faire Open Sans. Jetons un coup d'oeil ici et disons Open Sans, personnalisons-le. Je ne pense pas avoir utilisé régulièrement, j'ai juste utilisé ça en gras, et quand j'arrive à Abril Fatface, je me perds. Donc c'est Open Sans, et en dessous il y a Abril. Juste il n'y a qu'une seule taille pour cette police, donc nous allons juste utiliser le standard. Ce que nous allons faire, c'est que nous allons l'intégrer. Nous allons saisir ceci en haut, le copier, assurez-vous qu' il va au-dessus de notre feuille CSS.. Vous vous souvenez, est-ce qu'il va au-dessus de Bootstrap ou en dessous de Bootstrap ? Ça marche dans les deux sens. Sauvegardons ça et de quoi d'autre nous avons besoin ? Nous devons réellement appliquer cela à nos styles, alors saisissons les deux parce que nous allons les utiliser tous les deux. Donc ici, je vais juste les jeter ici, bon gré, parce que je veux que toute ma famille de polices soit une valeur par défaut d'Open Sans, et je vais en faire une valeur par défaut. Je dois le changer en blanc, mais probablement un peu plus tard une fois que je commence à colorier mon site. Comment ça ressemble en ce moment ? Si je fais du blanc trop tôt, je ne pourrai pas voir tout ce texte. Nous allons le changer un peu plus tard, mais je veux que ce soit une police blanche de la Lumière que j'utilisais, et ici c'est décrit comme 300. C' est la lumière pour celle-là, cool. Une autre police que je veux faire, je veux qu'elle fasse un h1, et c'est pour ça que je veux utiliser mon Abril. En fait, j'ai supprimé le mauvais, retournez à l'époque. Rappelez-vous, notre police dit simplement, « Je veux que vous soyez Abril, et si vous ne pouvez pas la trouver, allez trouver la police cursive par défaut. » C' est celui qui va être le plus chic de votre machine. Celui-ci dit : « Ouvrez Sans, si vous ne pouvez pas le trouver, quel que soit le Sans Serif par défaut » qui sera probablement Aerial ou Helvetica. Mais il devrait se charger parce que nous l'avons dit ici, « Charger à partir de Google », et Google est assez cohérent. Donc, nous avons remplacé quelques bits, regardons un peu le document. Là, il est là. Donc tout ce qui n'est pas notre h1 est maintenant Open Sans Light, et notre cap ici est Abril. Une dernière chose que je veux faire est d'ajouter un dégradé d'arrière-plan. On va sauter ici et je vais vous dire, vous arrêtez maintenant, et pensez, et voyez si vous pouvez le faire. Tu te souviens de notre dégradé de fond ? J' ai les couleurs dans vos fichiers d'exercices dans Project 4. Il y a un document qui s'appelle Project 4 Text. Ouvrez ça, et ce sont les deux couleurs que je veux que vous alliez. Voyez si vous pouvez le faire sans vérifier et voyez simplement comment vous allez si vous pouvez vous en souvenir. Alors allez-y et mettez-le en pause maintenant. Bon, comment ça s'est passé ? Tu te souviens où le mettre sur le corps ? Tu te souviens comment ça s'appelait parce que c'est bizarre. C' est l'image de fond. Alors tu décides où ça va. Nous allons utiliser le gradient linéaire, et à l'intérieur de ces parenthèses ici, nous décidons de la direction. J' adore ça. C' est tout des trucs abrégés. En bas à droite, cela signifie que ça va aller de haut à gauche en bas à droite, virgule, et ensuite nous allons le mettre dans nos deux couleurs, donc ces deux. Vous ne pouvez pas utiliser le trait d'union, je vais juste éditer ça là-dedans. Je devrais le sortir du texte en fait, c'est déroutant, et juste une virgule entre eux. Donc je n'ai pas besoin de ce petit trait d'union. Ce sont les deux couleurs. vais juste m'assurer que je le ferme, ne vois pas le côté. C' est tout le chemin par ici. Lancez le bord là-bas. Maintenant que l'on le fait par défaut, pourquoi n'est pas enveloppé de ce côté ? C' est juste au bord de l'endroit où il devrait envelopper. On y va, rallume-le. D' accord, sauvegardons ça. Regardons un peu, et on y va. Regarde ça, magnifique. Très bien, donc nous avons personnalisé notre feuille de style, un peu plus de choses, et aussi, vous allez passer beaucoup plus de temps probablement à comprendre quelles sont ces classes. Qu' est-ce que ce « bg-light » et que fait-il ? Y a-t-il un « bg-dark » ? Je vous parie qu'il y en a, et en regardant la documentation et en trouvant quelque chose qui existe déjà, ou au moins près de ce que vous voulez, puis en faisant un léger ajustement au-dessus du dessus. Que mes amis, c'est la vie de Bootstrap. D' accord, passez à la vidéo suivante. 104. Comment utiliser Bootstrap Layout Grid Experience 1: Salut, là. Dans cette vidéo, nous allons regarder la mise en page Bootstraps un peu plus. On va se moquer de celui-là. Ça va se transformer en ça par ici. Il va y avoir quelques points à retenir que nous devons apprendre avant de commencer à construire un plus grand site Web. Allons entrer, et apprenons à le faire. Pour commencer notre première expérience de mise en page Bootstrap, nous allons fermer notre site principal et créer un peu de fichier jetable. Nous allons appeler celui-ci layout-a.html. Ajoutons dans nos trucs html en haut, et rappelez-vous, nous devons mettre à jour celui-ci ici. Vous pouvez toujours revenir aux choses précédentes que nous avons faites dans vos fichiers d'exercices bien que dans Project 4, dans votre document de ticks qui ont fait. Il y a un tas de trucs ici pour nous aider. Il s'agit donc de la clôture mise à jour. Ici, et nous ajoutons juste que le rétrécissement supplémentaire est égal à non pour Safari. Qu'est-ce que j'ai mis d'autre ici ? Le CSS, et je devrais l'obtenir de obtenir Bootstrap au cas où les choses changent, mais j'en ai un ici pour vous. Rappelez-vous, en allant au sommet, nous n'allons pas mettre dans tout le JavaScript pour le moment, parce que nous n'en avons pas besoin pour la grille. C' est juste tous ces curseurs fantaisistes, et tout ça. Nous allons mettre dans notre propre CSS, et en fait nous pourrions juste être paresseux dans ce cas, et simplement le styliser dans ce document au lieu d'une forme externe. Il doit toujours être en dessous de ce CSS, donc, nous pouvons toujours le faire, mais il doit être en dessous. Très bien, mettons-nous dans notre conteneur. Ici, nous allons mettre .container, et à l'intérieur de celui-ci, nous allons juste mettre des choses, parce que je veux avoir un petit aperçu rapide. Assurez-vous que tout fonctionne, Bootstrap est connecté, donc, je vais l'éteindre, l'allumer à nouveau. Il va se charger dans un document différent sur un écran différent. Vous pouvez voir que ça marche, parce que je sais que c'est fritté. Il est fritté sur ces grands écrans, il y a un écart par ici. C' est l'un des aspects de l'utilisation de Bootstrap, mais nous avons déjà lié celui-ci. Supprimons donc le texte pour nommer, nous avons prouvé que cela fonctionne. Nous allons mettre dans notre partie supérieure. Alors je vais me moquer ici. Vous auriez vu que le début, c'est dans votre projet 4, il s'appelle filaire. C' est ce que nous allons construire dans ce cas. C' est Bootstrap mise en page A, nous allons mettre une séparation 50-50 du logo, et NAV. Il va y avoir une boîte à 100%, et il y aura trois boîtes ici. Alors mettons-le dans ces deux premiers le logo, et le NAV. La façon dont cela fonctionne est les lignes et les conteneurs. Tu ne peux jamais sauter la rangée. Donc point ligne, et à l'intérieur de cela vous mettez vos deux colonnes. Rappelez-vous que le nom de ligne est la chose qui donne aux colonnes la puissance flexbox, et c'est un joli wrapper pour elles afin qu'elles ne se cassent pas dans d'autres parties, ou d'autres lignes, ou ne se connectent pas. Donc je veux une colonne, mais je veux deux fois. Impressionnant. Alors maintenant, nous mettons notre texte. Celui-ci sera le logo, et celui-ci sera le NAV. Impressionnant. Regardons un peu, et partagez-les bien. Disons maintenant que je veux ajouter de la couleur à ces boîtes. Cela va soulever un très bon point, et une très bonne explication de la façon d'utiliser Bootstrap, est que nous ne devrions pas simplement compter sur le « col ». Le « col » utilise un wrapper, et vous ne devriez pas commencer à le coiffer. Si je commence à ajouter du rembourrage au « col », et faire des couleurs d'arrière-plan ne le fera probablement pas mal, mais il y a aussi des choses qui le feront. Cette petite chose ici n'essaie pas, et remplacer, juste laisser Bootstrap contrôler celui-ci, et à l'intérieur de ces camarades, ajoutez votre propre classe. Donc vous allez avoir comme un triple truc imbriqué. Ok, donc, à l'intérieur de « col » ici, on va mettre dans notre propre classe. Je vais lui donner un nom de « mybox ». En fait, je vais mettre ça sur sa propre ligne. On va le faire pour deux d'affilée. Commande, option flèche vers le bas ou Contrôle Alt flèche vers le bas pour obtenir deux d'entre eux. Je vais vraiment le mettre dans la routine, et ensuite je vais mettre dans « mybox ». Ok, j'appelle les choses ma boîte, ou mon truc quand je fais affaire avec Bootstrap, si je voulais faire une colonne, je l'appelle ma colonne, juste au cas où, parce que Bootstrap a un tas de trucs déjà nommés. Beaucoup de classes, et vous êtes comme, si vous commencez à être intelligent, comme appeler quelque chose d'audacieux, vous êtes susceptible de remplacer, ou de commencer à manquer avec l'une des classes de Bootstrap. Donc je mets toujours mon devant, que je sache lesquels sont les miens, et lesquels sont ceux-ci ? Ils n'ont pas de cours qui commence par mon dans Bootstrap. Donc cela signifie juste que je suis en sécurité, parce que j'installerais des choses, et ça ne marche pas, et puis vous découvrez que Bootstrap a obtenu quelque chose qui s'appelle exactement le même, essayant de faire une chose différente. Maintenant à l'intérieur de ça, c'est là que je peux commencer à faire mes affaires. Donc plusieurs cas, j'utilise la « touche Alt », ou « touche Option » sur le Mac, « touche OP » dans PC pour cliquer deux fois, regardons un peu maintenant. Ça va ressembler, mais maintenant je peux partir, et commencer à coiffer ma boîte. Donc ici, dans mon petit truc de style, je vais dire « point ma boîte ». Ça va, ajoutons juste des trucs de base. Ajoutons une couleur d'arrière-plan pour que nous puissions voir. Ok, SV, minuscules, couleur de fond. Tu peux écraser [inaudible] et c'est plutôt bon. Nous allons utiliser le rose chaud pour correspondre à notre petite maquette là-bas. Nous ajouterons un peu de rembourrage. Eh bien, c'est une hauteur minimale aussi. Hauteur minimale de 200 pixels. J' ai toujours ma voix grinçante. Ça a commencé trop tôt ce matin, et le café n'aide même pas. Donc, nous allons faire en haut et en bas d'environ 20 pixels, juste pour les écarter, donc il y a un peu d'espace blanc entre eux, et nous allons faire haut, et en bas de 10 pixels. Regardons un peu, et on y va. air bien, peut-être du rembourrage à l'intérieur de ces gars. Donc un peu de rembourrage tout le chemin autour d'environ 20 pixels. D' accord, tout montage de ces trucs ici, il n'a pas besoin d'être là du tout. Je veux juste te montrer quoi faire. Si vous voulez styliser les colonnes, ne stylisez pas réellement les colonnes. Tu pourrais mettre le col de points ici, et commencer à jouer avec ça, et ça va s'effondrer. Nous l'ajoutons pour que nous puissions réellement le voir, plutôt que moi, dire : « Ne vous inquiétez pas, c'est là, croyez-moi. » Ok, la prochaine chose que je veux faire, c'est avec ma maquette. Je veux cette boîte de héros au milieu. Cela amène une autre bonne étrangeté Bootstrap. Ce que je vais faire est de mettre quelques retours ici pour que je sois vraiment clair sur l'emballage extérieur, et tous ces emballages internes. Donc je veux une ligne, je ne peux pas la mettre dans un col, et commencer à coiffer ça. Il doit aller à l'intérieur d'une rangée même si vous avez juste besoin d'un d'eux, parce que rappelez-vous que l'emballage de ligne donne le col c'est superbe maison, avec sa bonté flexboxy, plus sinon, ces gars, si je mets un autre col en dessous, ils vont commencer à rouler ensemble, et nous allons essayer de serrer sur les mêmes lignes. Donc notre ligne est un peu comme un saut de ligne aussi. Dans ce cas, ça va être ma boîte de héros. Regardons un peu. Ça ne marchera pas. Eh bien, ça va marcher. Je veux mettre ce « div » à l'intérieur. Donc ici, je vais en avoir une qui s'appelle « mybox », et ici j'appellerai celle-là une boîte de héros. Joli. D'accord, la dernière partie de notre maquette , c' est de les regarder. C' est un, deux, trois, tous espacés uniformément. Ok, c'est un joli, facile pour commencer avec Bootstrap. Bon, donc, encore une fois pour faire une rangée, mais faisons un peu de fantaisie. Faisons une rangée, à l'intérieur de celui-ci un peu moins, plus grand que. A l'intérieur de ça, je veux un enfant de col. Combien est-ce que je veux ? J' en veux trois. Une ligne, trois colonnes, et ce sera la fonction 1, 2 et 3. Jetons un petit coup d'oeil à ce qu'on a fait. Ok, supprimons. Débarrassons-nous de ces trucs. Disons que je veux mettre mes points, ma boîte, et ensuite je veux le multiplier par trois. Ce n'est pas ce que je veux faire. Je ne pense pas, il est tôt. Disons que je veux tout faire en une seule fois que tu veux, montre-moi comment tu fais tout ça en une seule fois. Alors, débarrassons-nous de ça aussi. On veut une rangée. A l'intérieur de cette rangée, on veut mettre col. A l'intérieur de ce col, on veut mettre « mybox », mais je veux trois d'entre eux. Si je le fais comme ça, ça me donnera ce que je veux. Donc, ce que je veux faire est d'envelopper cette partie entre parenthèses. C' est prédictif, et essaie de mettre dans la parenthèse de fermeture aussi. Donc je veux que tout cela soit emballé ensemble, et ensuite le multiplie par trois. Parfois, tu dois recommencer. D' accord, je vais mettre mon curseur clignotant ici, et je vais faire les fonctionnalités 1, 2 et 3. Jetons un petit coup d'oeil, cloué. C' est notre maquette. C' est ça dans Bootstrap. Super facile, mais les choses à emporter pour celui-ci est de s'assurer, vous utilisez des lignes même si vous voulez utiliser juste des lignes par lui-même. Juste une seule colonne, ou s'étirant tout le chemin à travers. L' autre chose à emporter est de vous assurer que vous ne stylisez pas la ligne, la colonne, ou le conteneur. Il est préférable d'y ajouter vos propres classes et de le laisser faire son truc. Je pourrais styler le conteneur ici, mais ce serait peut-être bien d'ajouter une deuxième classe appelée mon conteneur, ou autre chose, quoi que vous vouliez l'appeler. Donc ces deux choses s'appliquent, et vous n'essayez pas de mélanger avec celle-ci, ce qui est une bonne règle générale pour Bootstrap. Pourquoi on aime ça ? A, il a fait les trucs flexbox pour nous, et c'est éditer les requêtes de médias pour nous, et il se décompose bien sur les appareils plus petits. Allons faire un clic droit, inspecter, voir s'il se déplace tout par défaut. Assurez-vous que l'aperçu de votre appareil, petit commutateur à bascule est activé. Je vais descendre à l'iPhone X, et il se décompose bien. C' est notre première expérience. Passons à la suivante. 105. Comment créer un en-tête à 100 % et des largeurs inégales dans Bootstrap 4: Bonjour, là. Nous allons construire cet autre groupe aléatoire de boîtes. Pourquoi ? Pour que nous puissions apprendre diverses parties de la mise en page de Bootstrap. La première partie du sujet de cette vidéo va être, vous pouvez voir que cette bordure grise va jusqu'au bord du navigateur, mais ensuite ces boîtes internes sont imbriquées et ils sont tous au centre. C' est le résultat final, va jusqu'à l'extérieur, et quand elles deviennent plus petites, les belles petites boîtes réagissent aux requêtes des médias, mais elles sont toutes piégées à l'intérieur de ce conteneur interne. Le raccourci pour celui-ci, si vous revenez à cette vidéo, est fondamentalement l'enveloppe externe a besoin conteneur fluide, puis d'un conteneur à l'intérieur. Parlons un peu plus dans la vidéo. Commençons. D'abord, fermez tout ce que vous avez ouvert. Nous avons travaillé sur layout-a avant, faisons une deuxième version, autre fichier jetable juste pour apprendre des choses, et gardez-le bien rangé pour que vous puissiez le trouver plus tard. Celui-ci va s'appeler « layout-b ». Nous allons ajouter tout le texte. On va juste le voler à la mise en page a. Sélectionnez tout, copiez-le, fermez-le, allez dans layout-b, collez-le dans, et supprimez les choses dont nous n'avons pas besoin. Tout d'abord, nous allons commencer dans la tête, je vais probablement utiliser beaucoup de la même chose, les choses principales. Débarrassons-nous de tout dans le corps pour le moment. Pour savoir que vous avez tout, cliquez sur le haut. Vous pouvez voir là que c'est fait là, est partiellement mis en évidence. Donc on a tout perdu dans le corps. Je vais créer quelques styles. Celui-ci va avoir plus d'un style. Donc, nous allons avoir mybox1 et 2. Nous utiliserons tout d'avant, la même hauteur minimale, les marges, le rembourrage. Nous allons juste choisir différentes couleurs pour correspondre, où est notre Wireframe Layout B. Donc « Exercice Files », « Project 4" [inaudible] et celui-ci appelé « Layout B ». Donc c'est ce qu'on fait. On va avoir besoin de quelques couleurs. Nous allons avoir besoin de ce rouge, nous avons besoin d'un vert et d'un gris. Le premier, j'ai utilisé « tomate ». On va en faire une seconde. Copier, coller. Ce sera mybox2, et celui-ci sera « vert printanier ». J'aime le vert printanier. Donc deux boîtes, et j'ai juste besoin de cela juste parce que je vais mettre une couleur de fond sur cela, voir cette couleur de fond ici, sur le gris, je vais ajouter une couleur de fond de gris à ce titre toute grande pleine largeur. Au lieu de l'appeler « cap », je vais juste l'appeler « dot bg1" ou « mybg1". Ce ne sera que mon expérience. Parce que je pourrais l'utiliser à d'autres endroits. Je suis réticent à l'appeler « header gray background » car il pourrait être utilisé pour quelque chose d'autre que l'en-tête et il pourrait ne pas être gris. Donc mybg1, au cas où j'ai besoin d'un fond de deux, et cela va avoir une couleur de fond, je vais utiliser gris ardoise, y a-t-il un gris ardoise foncé ? Il y a un gris ardoise foncé. On va les utiliser pour faire notre style. Tout d'abord, nous avons fait le conteneur, et notre conteneur se trouve au milieu. Jetons un coup d'oeil aux documentations Bootstrap. Cliquez sur l'onglet « Documentation » et cliquez sur « Mise en page ». Il vous donnera une brève introduction. C' est pour ça que je suis là. Nous avons utilisé « conteneur de points » et il le centre dans le site Web. Ce « liquide conteneur-liquide » est ce qui le fait aller jusqu'aux bords. Alors regardons un peu, regardons rapidement la structure. Nous allons d'abord avoir ce récipient de liquide, et à l'intérieur nous allons mettre le conteneur. Nous avons fait quelque chose de similaire plus tôt, en nichant à l'intérieur des choses. Mais au lieu d'utiliser notre auto de marge des deux côtés pour placer les choses au centre, nous allons utiliser notre conteneur et notre conteneur de liquide. Créons un div ici appelé « container-fluid ». Appliquons plus d'une classe. Alors juste après ce « liquide contenant », nous allons ajouter « mybg1". Mettons juste « du texte » juste pour que nous puissions le voir, assurez-vous juste que cela fonctionne réellement. On va regarder, aller en direct. Donc on a un récipient de liquide, ça va jusqu'au bout. Il y a « du texte » là-dedans, juste en le maintenant ouvert pour le moment. Je n'ajouterai pas de hauteur. Je vais laisser l'en-tête à l'intérieur faire ça. Donc, à l'intérieur de celui-ci, nous allons mettre une autre balise div, mais celle-ci va être appelée « conteneur ». Espérons que nous pouvons mettre un texte ici, « du texte ». En fait, je voulais jeter un coup d'oeil, m' assurer qu'il est centré. Aperçu dans le navigateur, le texte est un peu difficile à voir, vous le voyez en quelque sorte là. Il est coupé jusqu'à l'extérieur. Donc, il y a un conteneur de fluide externe qui va vers le bord, et à l'intérieur de celui-ci est un qui fonctionne sur les requêtes média que Bootstrap a. Ensuite, à l'intérieur de ce conteneur, nous allons nous débarrasser de « quelque texte », et nous allons mettre dans une « rangée ». A l'intérieur de cette rangée, regardons notre maquette, on a deux colonnes, les met en premier. Je vais avoir un « col » fois par deux, et j'allais mettre un message. En fait, nous n'allons pas mettre du texte directement dans celui-ci, nous allons y mettre un autre style. Parce que rappelez-vous, je veux les faire de cette couleur, je veux les rendre rouges. Je ne veux pas l'ajouter à cette colonne d'enveloppe extérieure car elle finit par fosser les choses. Donc nous allons le mettre comme une autre chose imbriquée. Nous allons mettre dans un div, nous allons utiliser « mybox1" dans ce cas. Il nous faut deux d'entre eux. On a besoin d'un conteneur. Dans notre cas, nous avions besoin de deux, parce que nous voulions faire deux choses très différentes. Nous voulions qu'il s'étire sur les bords, mais aussi un conteneur qui est imbriqué à l'intérieur. C' est ce qu'on a. Nous avons ce conteneur, ancien, qui a une largeur à l'intérieur de ce conteneur extensible, qui est le fluide. A l'intérieur de ça, je voulais mes deux boîtes. Ces deux colonnes ici ne peuvent pas exister sans une ligne. Donc ces deux colonnes doivent être à l'intérieur de cette rangée, parce que rappelez-vous que la rangée lui donne toute sa puissance. Ensuite, je veux faire un style de fantaisie, gâcher avec les marges et le rembourrage. Si je n'en avais pas besoin, je pourrais juste styler mon logo à l'intérieur de ce « col » ici. Mais parce que je veux faire quelque chose avec les marges, les paddings, et les hauteurs, il est préférable de ne pas gâcher trop le « col ». Donc je vais le faire à l'intérieur de celui-ci. C' est là que ça se passe comme s'il y avait beaucoup de choses là-dedans, mais j'espère que tu le comprendras. Jetons un coup d'oeil dans le navigateur. Comment ça va ? Super. En raison de la magie de Bootstrap, nous devrions être en mesure de cliquer avec le bouton droit de la souris sur « Inspecter ». Si vous ne l'avez pas activé, activez l'icône « Device Preview » à bascule, puis vous allez à Responsive et il devrait sauter de haut en bas en termes de tailles, mien est réglé à 100 pour cent. Vous pouvez voir les requêtes multimédias cassées. Beau travail, Bootstrap. Passons à la prochaine vidéo. 106. Comment créer des largeurs de cols inégales dans Bootstrap 4: Salut les gars. L'objectif de cette classe est de remplir cette navigation supérieure ou de la terminer au moins. Pour le moment, ils sont uniformément espacés. Je veux que le LOGO soit plus petit que le NAV. Mon dessin n'est pas génial, mais celui-ci est ici, la largeur est juste plus courte que celui-ci. Je vais vous montrer comment avoir des boîtes de différentes tailles. Ensuite, je vais vous montrer juste un exemple de l'endroit où ces choses imbriquées à l'intérieur des choses qui sont imbriquées, à l'intérieur sont des choses qui sont imbriquées. Ils ont juste une très bonne compréhension de cela avant de passer à autre chose. J' espère que vous êtes prêt. Je suis prêt. Allons-y. Ce qu'on va faire, c'est construire aussi cette partie centrale et on fait des boîtes inégales ici. Mon dessin ici signifie dire que c'est plus petit que cette boîte. Je ne suis pas sûr de l'avoir assez exagéré. Nous allons faire des largeurs de boîte inégales et nous allons également faire imbrication à l'intérieur de l'imbrication juste pour vous montrer ce que tout cela fait et ressemble. Appuyez d'abord sur le code VS. Les boîtes inégales. On en a deux ici, non. Nous avons ma première ligne, qui va être mon LOGO, et mettons du texte dedans pour que nous sachions lequel, qui est ce qui. Va être LOGO et celui-ci va être la navigation. Mon dessin ici montre environ quatre, donc le reste sera six. Ici, on a regardé un peu plus tôt, mais je veux mettre ça dans sa propre petite pièce et une petite vidéo et vous montrer quelques façons différentes. Si je dis que ce premier est un « col-4">, il doit être écrit exactement comme ça. Il fera des trucs incroyables flexbox et sera 4 et cela va juste deviner et remplir le reste, parce que c' est dans la même rangée qui est à l'intérieur du récipient, qui à l'intérieur du liquide du récipient. Toute cette imbrication est utile, bien qu'elle semble un peu désordonnée dans le HTML. Vous n'avez pas besoin d'écrire explicitement que c'est la largeur de 6, vous avez juste besoin de dire que c'est 4. Une autre chose que vous pouvez faire est que vous n'avez pas à utiliser les colonnes juste pour que vous sachiez, vous allez rencontrer des sites Web qui le font, ok. Au lieu de « col-4">, vous pouvez dire que c'est une largeur de, disons 25 pour cent. W pour la largeur 25. Sauvegardons, et il obtiendra un genre de résultat similaire. Largeur 75, bandes qui sont de l'autre côté. Peu importe si vous voulez utiliser des pourcentages ou ces colonnes, j'utilise des colonnes. Certaines personnes utilisent des pourcentages, le seul problème avec les pourcentages est qu'ils n'ont que quelques valeurs par défaut de base réelles. Dans la documentation sous utilitaires, sous espacement, vous pouvez faire une largeur de 25 pour cent, 50, 75, 100, il n'y a pas comme entre les deux. Si tu essaies de taper 52, ça va flipper. Il y a une option pour la hauteur aussi, sorte que vous pouvez faire H 25 pour cent, une hauteur de 50 pour cent, 75, c'est le parent. Si vous l'avez fait à l'intérieur de notre en-tête ou à l'intérieur de quelle partie ? A l'intérieur, on lui a donné une hauteur de 200. Il utilisera ça car c'est comme 25 pour cent de ce conteneur de salle dans lequel il est. Je l'ai remis à « col-4">, et je veux vous montrer quelques autres choses. Nous allons mettre dans ce grand héros div, et nous allons mettre ces deux gars à l'intérieur pour vous montrer comment fonctionne ce genre de nidification. Ce n'est pas terriblement compliqué, mais c'est parfois bon de le voir. Nous avons notre récipient de liquide et il s'ouvre là, et rappelez-vous que si vous cliquez à l'intérieur, le met en évidence ici. C' est là que je veux qu'ils finissent. Je ne veux pas arrêter de mettre ma partie de nid à l'intérieur du liquide contenu, sinon, ça deviendra gris ici et je veux laisser cette boîte grise finie juste là. On va commencer un nouveau conteneur par la suite. Je n'ai pas besoin que ça soit fluide. Je n'ai pas besoin d'une couleur allant à l'extérieur s'étirant à travers, et même si je le faisais, je pourrais probablement juste colorer la balise du corps, qui est en dessous de tout. Juste probablement la couleur que si vous vouliez faire ça. Je suis dans le conteneur et il n'y a qu'une seule boîte dedans. On va le faire dans une seconde. Nous avons une rangée, peut-être que vous devez avoir une rangée, et à l'intérieur de ça, nous allons avoir une colonne. Vous avez toujours une ligne même si vous ne voulez qu'une seule colonne. A l'intérieur de ça, nous allons mettre de l'ipsum Lorem et nous allons mettre 100 mots. Ils doivent entrer dans la balise P, donc ce que je pourrais faire est de faire la première balise P et ensuite de faire l'alarme 100. Jetons un petit coup d'oeil dans le navigateur, parfait. Ça correspond au moins à mon design. Aussi ce que je veux faire, c'est que je veux le rendre rouge. Je vais tout envelopper dans ma boîte 1. Vous allez tous aller à l'intérieur de cela et commande+Maj+P, sur un contrôle [inaudible] +Maj+P sur un PC, puis un représentant avec abréviation. Celui-ci va être un point, ma boîte 1. Regardons un peu maintenant. On y va. Il y a beaucoup de nidification qui se passe, mais ce n'est pas trop mal. Là où ça devient encore plus compliqué, c'est l'endroit où nous voulons diviser ma boîte en quelques parties supplémentaires. On veut amener ces deux gars verts à l'intérieur. Ils seront également divisés même si mon mauvais dessin semble être plus grand que l'autre. Tu peux faire ce que tu veux. Encore imbriquer. Où est-ce que ça va ? Il doit entrer dans ma boîte, parce que ce type est en train de faire un peu de rouge. Ma boîte dit être cette couleur tomate. Je veux à l'intérieur de ça. Je vais cliquer sur la div. Ça me dit que c'est là que ça finit. Ça doit être à l'intérieur de ça. Je vais mettre une retenue et je vais mettre dans une autre rangée et deux colonnes. Mais nous avons une ligne, chaque colonne doit être le descendant direct d'une ligne pour que cela fonctionne, comme nous l'avons fait dans flexbox. C' est pourquoi nous avons passé un peu de temps à vous apprendre la flexbox. Nous avons besoin d'une rangée, nous allons essayer de faire de la fantaisie ici, et à l'intérieur de cette rangée, j'ai besoin de deux cols. Mais on en aura deux, gentil. Je vais effectivement appliquer une classe à cette option de commande flèche vers le bas pour que votre type de curseur double vers le haut ou Ctrl+Alt+flèche vers le bas. Tu en as marre des raccourcis, non ? Mais tu vas rêver des raccourcis, mais tu ne vas pas les oublier. Celui-ci va utiliser l'autre classe verte. Celle-ci s'appellera ma boîte 2. À l'intérieur d'eux, je vais taper la fonctionnalité. Non, qu'est-ce que celle-là ? Un imbriqué, est appelé nid 1. Je regarde mon petit dessin que j'ai dessiné à la main pour vous les gars. Nid 1, nid 2 Jetons un coup d'oeil dans le navigateur. On y va, c'est bizarre, non ? Imbrication à l'intérieur d'autres colonnes existantes. Tu as besoin de la deuxième rangée, c'est ce dont ils ont besoin. Qu' ils obtiennent leur pouvoir, et de sorte que vous pouvez plus tard peut-être sur mobile empiler ces gars les uns sur les autres et c'est vraiment facile à faire quand ces colonnes sont à l'intérieur d'une rangée. Les gros plats à emporter pour cette vidéo sont des tailles inégales, d'accord ? Parce que si vous le laissez par défaut, ils seront assis côte à côte. Cinquante pour cent occupant l'espace, à moins que vous en mettiez trois, ils n'occuperont que trois places, soit environ 33 pour cent chacune. Ils seront divisés entre eux. Si vous voulez les forcer, il suffit de forcer le premier. Dans notre cas, nous avons fait le « col-4">, mais vous pourriez faire W-25 pour obtenir quelque chose de similaire. Mes amis, je vous verrai dans la prochaine vidéo. 107. Comment ajouter du remplissage et des marges en utilisant Bootstrap 4 dans VS Code: Salut là. Cette vidéo, nous allons parler de l'espacement dans Bootstrap. C' est similaire à ce que nous avons fait avant quand nous avons fait la marge supérieure égale à 16 pixels, marge inférieure égale à 16 pixels, ce type de chose, sauf que la syntaxe est beaucoup simplifiée, m pour la marge, p pour le remplissage, t pour le haut, b pour en bas. C' est très bon. Regardons comment l'appliquer maintenant dans Bootstrap. Dans cette vidéo, je veux que nous commencions à travailler avec le remplissage et la marge de la façon Bootstrap. Disons que je veux ajouter un bel écart blanc entre le récipient de fluide gris et cette boîte rouge en dessous. La vieille école, tout ce que nous avons fait précédemment est dans vos styles CSS, vous pourriez dire, je veux prendre le liquide de conteneur et je veux lui donner une marge en bas, marge inférieure de x, y, z, peut-être 20 pixels. C' est comme ça. Ça marche toujours, ça marche totalement. Ce que nous allons faire, c'est utiliser la méthode Bootstrap, et laissez-moi vous montrer la documentation. Chez getbootstrap.com sous documentation, sous utilitaires, c'est un espacement appelé. espacement fonctionne comme ça, je viens de faire un raccourci donc j'ai dit, au lieu d'écrire la marge, il suffit de taper m et pour le rembourrage est p. Ensuite, pour les différents côtés, vous avez le haut, bas, la gauche et la droite montrer en t, b , l, r. Si vous voulez faire x, qui est à gauche et à droite en même temps, ou haut et bas est y en même temps. Maintenant, en termes de taille, vous avez six options, 0, 1, 2, 3, 4, 5. Regardons un peu comment ils sont appliqués. La syntaxe est importante. Ce que je veux faire, c'est, disons ce récipient de liquide, je veux ajouter une marge au fond. Ce que je fais est une autre classe. C' est un prédéfini. Marge, nous allons faire en bas, b, trait d'union et puis la taille. On va faire le maximum de cinq. Nous allons en avoir un aperçu dans le navigateur. Espérons que vous pouvez voir que Margin-bottom a été prolongé de cinq, et vous êtes comme, qu'est-ce que cinq ? Fondamentalement, ils utilisent l'espacement de ms. Nous savons que par défaut, le m est d'environ 16 pixels. Si vous utilisez trois, c'est en utilisant un m. entier. N'oubliez pas la taille de police par défaut est de 16 pixels. Si quelqu'un va dans Chrome et dans leur navigateur et l'ajuste, ces tailles vont ajuster ainsi. Cinq est le plus grand et certains de ces plus petits se trouve à zéro évidemment, mais vous trouverez certains des composants. Rappelez-vous nos carousels et nos cartes que nous avons faites plus tôt, ils en auront par défaut. La valeur par défaut sera toujours trois dans Bootstrap. Si vous trouvez un composant dont les marges ou le remplissage ont déjà été ajoutés, c'est trois. Si j'en mets un sur quelque chose qui existe déjà dans Bootstrap, il va en fait le réduire de 25 pour cent. Ou à 25 % de cet espaceur par défaut, qui est les 16 pixels. Ça a du sens ? Si vous l'ajoutez par vous-même, tout ce qui est au-dessus de zéro sera plus grand. Mais si vous trouvez quelque chose qui a déjà une marge appliquée, vous ajoutez trois en fait rien ne va se passer. Ce sera juste la même chose. Si j'y vais deux, ça va être un peu plus petit. Quatre va être un peu plus grand. Un des problèmes cependant, des ennuis pour moi, je suppose, ça n'arrive pas très souvent mais, il n'y a pas six, comme 6, 7, 8, 9, 10. Vous pouvez ajuster les espacements pour ajouter d'autres mesures, mais vous devez entrer dans le fichier Sass qui est utilisé dans Bootstrap. C' est un moyen de sortir de la portée de cette classe. Si vous le faites comme, si c'est impératif et que vous voulez vraiment y aller, vous pouvez regarder ce style Sass. C' est ce qu'on appelle un pré-processeur CSS, et c'est une façon de prendre, au lieu de juste un vieux tout CSS, les choses ici, juste un vrai balisage de base dans le CSS programmable réel. Ça devient un peu plus nerveux, mais si tu veux descendre ce trou de lapin, tu peux aller voir. J' ai un cours ou pas un cours, une vidéo que j'ai faite pour Adobe. Ils m'ont demandé d'en faire un, et si vous allez sur helpx.adobe.com et recherchez mon nom dans le pré-processeur, cela va apparaître. Je passe du temps à le parcourir ici si tu veux rattraper. J' ai mis un lien vers cela dans vos fichiers d'exercice également sous le texte du projet 4. Mais encore une fois, hors de la portée de ce cours, vous n'en avez pas besoin. Ils sont pratiques quand on a affaire à de très grosses diapositives, principalement. Très bien, ajoutons maintenant nos trois boîtes de fonctionnalités et ajoutons un peu de rembourrage et de marges. Je voulais être à l'intérieur du conteneur. Mon récipient de liquide s'arrête là. Ce conteneur, je voulais être à l'intérieur de ça parce que je voulais qu'il soit centré. Je vais avoir une rangée et à l'intérieur de cette rangée, je vais avoir une colonne. A l'intérieur de cette colonne, je vais avoir mybox, et j'en ai besoin trois. En fait, j'ai besoin de les mettre entre parenthèses. Merci. Le code aide, et je veux trois d'entre eux. A l'intérieur de ces gens, je vais dire, je voudrais les fonctionnalités 1, 2 et 3. Bon, regardons un peu comment ça se passe. Je les ai ici. Ça ne s'appelle pas mybox, c'est mybox1. D' accord, donc ça va correspondre. Disons que je veux un peu de rembourrage au bas de cette fonctionnalité, toutes ces boîtes de fonctionnalités, je pourrais le faire pour l'un d'eux. Je le fais aussi à la ligne dans laquelle il est. La rangée, je vais dire, je veux un rembourrage ou une marge. Ça ne va pas avoir d'importance dans ce cas parce qu'il n'y a pas de couleur sur le rang. Je pourrais utiliser padding-bottom ou margin-bottom, et je vais utiliser les bons big five. Ecoute, j'ai un gros morceau en bas, ce que je pourrais faire pour celui-là aussi, c'est que je veux que les côtés deviennent un peu petits, un peu plus grands, parce qu'ils sont juste un peu trop petits de chaque côté. Ces boîtes Nest sont appelées mybox2. Ce que nous allons faire, c'est mettre une marge de x, ce qui va faire à gauche et à droite de peut-être trois. Je vais le faire pour les deux, mx_3. Étonnamment difficile à taper lorsque vous ne pouvez pas voir le clavier. Ça devrait vous montrer que mon gros micro est dans le chemin. Jetez un coup d'oeil, voilà. Trois ne suffit pas. C' est la même chose que la valeur par défaut, puis cinq, voilà. Bien trop grand. Quatre ? L'une des autres choses que je veux vous montrer est de dire que vous voulez ajouter. Ici, nous allons travailler parce qu'il y a une marge négative. Je ne suis pas sûr quand j'ai besoin de marge négative. Mais nous vous le montrons de toute façon. Disons que nous voulons avoir une marge négative sur cette boîte Nest ici. Dans celui-ci, je vais me débarrasser du mx_5, je vais dire, je voudrais une marge, disons est une marge de cinq, ce qui va le rendre beaucoup plus petit. Vous voyez qu'il y a une marge à l'extérieur qui la pousse. Une marge négative va saisir cette même boîte verte, au lieu de la pousser, elle va la repousser. Ce qui est étrange. Tout ce que vous devez faire est de mettre un n devant les cinq, ce qui signifie que c'est un négatif. C' est la base de la syntaxe pour l'espacement. Jetons un coup d'oeil, m, n , p, k, t, b, l, r, x , y, pour les différentes tailles , et il y a d'autres choses à lire ici. Mais c'est tout pour le moment. D' accord, j'ai menti, il y a deux autres choses que je veux couvrir. L' une est les requêtes des médias. Pour le moment, nous allons faire la propriété, qui est le, soit le rembourrage marginal, puis vous ajoutez les côtés, qui est en haut, en bas, à gauche ou à droite, puis le point de rupture, puis la taille. Nous allons ajouter ce point d'arrêt que nous n'avons pas avant. Signifie simplement nos requêtes médias, rappelez-vous de travailler avec notre document ici. Je vais inspecter et activer l'aperçu de l'appareil. Rappelez-vous que ce sont les points d'arrêt. C' est très grand, grand, moyen, petit, et il n'y a pas de requête média pour extra small, il suppose juste. C' est quelque chose appelé mobile d'abord, il suppose juste tout ce qui n'est pas spécifié, suppose que c'est cet excès ou ce extra petit, mais quand vous l'écrivez réellement. Faisons en sorte que ça arrive. Jouons avec un rembourrage pour ce P-tag. Juste pour rigoler. Jetons un coup d'oeil. Mon P-tag ici, je vais ajouter une classe de, disons pour, mais une chose que je n'ai pas couvert est si je mets un m_5 sans haut ou bas ou x et y, il suppose que les quatre coins. C' est l'autre chose que je voulais couvrir. Disons que je veux une marge de cinq autour. Jetons un petit coup d'oeil. Il y a une marge de cinq à tous les points d'arrêt. Il suppose que vous utilisez petit et parce que rien ne contredit, il coule pour tous. Mais mettons un espace et disons que je veux une marge de, disons zéro, mais je ne veux pas mettre le zéro et je veux dire quand il obtient un médium, je veux arriver à zéro. Vous ajoutez simplement ce bit supplémentaire interne. Je vais [inaudible] les marges vers le bas. Disons à cinq. Mais quand je me lève à moyen, pas celui-là , ça revient à sa taille normalisée. Ils pourraient vouloir faire, c'est quand il devient grand, peut-être là, est de faire quelque chose de fou. Marges sur grand. Je veux faire cinq négatifs. Dan fou, vivant d'un bord, voilà. Petit ou très petit. Small est le même, et il arrive à moyen, et moyen change à zéro. Quand il arrive à grand, boom, et parce que je n'ai pas spécifié extra large, il coule à travers l'extra large. Ça commence à partir du centre, mobile d'abord sorti. Est-ce que ça a du sens ? J' espère que réitère l'ensemble extra petit est celui et puis parce que je n'ai pas changé petit, il se jette dans ce. n'y a pas de différence entre ces deux requêtes média. Je n'ai changé que quand je suis arrivé au moyen, ce qui est le gars là-bas. Il va à zéro. Très bien, donc deux, c'est un peu, si vous ne mettez pas la propriété, que ce soit mettre les côtés, il suppose que les quatre coins. Ensuite, vous pouvez cibler différentes requêtes multimédias. Maintenant, la dernière chose que je veux faire avant de passer à autre est que j'ai utilisé la ligne et la colonne et cela se termine dans ces classes div. Plus tôt dans le cours, nous avons travaillé peut-être un en-tête est vraiment utile, nav est vraiment utile, article de la section principale, pas si utile, mais ce sont les balises HTML5 spécifiques que nous devrions utiliser pour marquer nos documents. Pour les rendre bons pour les lecteurs d'écran et les malvoyants que Google sait quoi. Disons que je veux faire de cela mon en-tête parce que tout le truc d'en-tête va dans ce. Il a mon logo dedans, il a ma navigation. C' est normalement ce que nous mettons dans l'en-tête. On l'a appelé liquide de conteneur. Ce qu'on peut faire, c'est qu'on l'appelle div, liquide de conteneur. Ne l'appelons pas div. Appelons ça l'en-tête. Ici, vous avez changé la barre oblique de div en en-têtes donc sur l'ouverture et la fermeture à l'en-tête. Rien ne va vraiment changer sur notre site. Jetons un coup d'oeil, ressemble exactement à ce qu'il faisait avant. Laissez-moi revenir à 100 pour cent. Mais maintenant, il est marqué correctement. Même avec notre navigation, les navigations ici, au lieu de l'appeler div, je vais l'appeler nav. dois m'assurer que j'ai changé le GPS de fermeture. C' est ainsi que je l'ai gardé séparé pour cette classe juste pour le rendre agréable et facile. Mais maintenant que nous nous y habituons, nous allons mettre dans notre bon conteneur, tout est spécifique pour HTML5. J' ai besoin d'une étiquette principale. En fait, je vais laisser la balise principale. L' en-tête, la navigation, le pied de page, vraiment clair et utile. Il y en a un principal ici. C'est utile. Mais vous avez bien l'idée. Vous pouvez simplement vous assurer que vous utilisez des classes nav. Atteignez une classe avec un liquide de conteneur ou une classe div. Cela n'a pas vraiment d'importance, mais nous devrions utiliser un balisage HTML5 spécifique. D' accord, c'est tout pour cette vidéo, je te verrai dans la prochaine. 108. Comment changer la mise en page de Bootstrap en fonction du mobile ou de l'ordinateur de bureau: Hé, là. Dans cette vidéo, nous allons examiner la mise en page Bootstrap ou la grille en fonction de la taille de l'appareil. Donc, pour le moment, nous sommes sur un très beau, grand écran. Nous avons quatre boîtes de fonctionnalités en bas et deux, le logo et le nav côte à côte. Vous voulez descendre un peu plus bas, pouvez-vous voir qu'il se casse en trois zones de fonctionnalités ? Ces gars sont toujours côte à côte. Mais quand il arrive sur le très petit écran, ils vont tous juste pleine largeur. Donc logo, nav, et toutes les fonctionnalités empilent les uns sur les autres. C' est l'objectif de cette vidéo. Allons entrer et travailler sur la façon de faire des boîtes de fonctionnalités. Très bien, si vous suivez, fermons notre dernier petit projet et en faisons un nouveau. Cela va s'appeler layout-c.html. Dans ce cas, nous allons également faire un fichier CSS de mise en page C parce que nous allons aller un peu plus loin dans des choses comme les requêtes de médias. Donc, nous allons faire layout-c.css. Nous allons relier les deux dans une seconde. Donc je vais les séparer pour qu'ils soient côte à côte. Nous allons travailler sur le HTML. En fait, laisse aller tricher et attraper la plupart des choses de la mise en page B. Copiez tout, déplacez-le à travers, collez-le. Nous allons supprimer les styles. En fait, on pourrait garder la box1, on le réutilisera. Mais tout le reste dans la balise de style que nous allons supprimer. Tout ce qui se trouve dans le body tag va aller aussi bien. Vous êtes vraiment juste à une belle page simple qui comprend un lien vers le CSS Bootstrap. Maintenant, nous voulons créer un lien vers notre propre CSS. Nous allons donc établir un lien avec celui qu'on vient de faire là-bas. prédictive peut être utile et parfois douloureuse. Il essayait d'ajouter la citation, l'ouverture et la fermeture, qui est cool, mais pas vraiment ce que je voulais alors. Layout-c.css. Vérifiez juste que c'est avant de partir. Appelons celui-ci H1 avec mybox appliquée. Donc H1 avec une classe de mybox1. Je vais mettre un SMS ici. Il est préférable de le faire, surtout quand vous apprenez parce que vous pourriez aller assez loin et vous êtes genre, « Hey, je suis assez bon pour ça », puis quelque chose est cassé et vous dites, « Où est-ce que j'ai cassé ça , à quel stade ? » Tu vas commencer le déballage. D' accord. Alors on y va. Je sais que ça marche parce qu'on est en H1 avec un gros fond de tomate. Donc ça marche. C' est pour ça que je le voulais. Regardons notre maquette. Il est dans votre projet quatre fichiers d'exercices. C' est le dernier ici. Tu diras : « Tu ne l'as pas dessiné. » J' ai commencé à le dessiner et j'ai dit : « En fait, c'est facile de te montrer comme ça, principalement à cause des espacements et des trucs bizarres ici et de les montrer en comparaison les uns aux autres. » Ma page est trop petite. Nous allons donc avoir une version grande, moyenne et mobile. C' est vraiment important quand il s'agit de, ça devient plus facile, je le sais. Donc, j'ai fait mon design dans XD ou disons Photoshop ou Adobe Illustrator, quoi que vous l'ayez fait, vous allez devoir réfléchir à ce qui se passe sur cet appareil mobile en particulier. Vous pouvez voir ce que nous avons fait sur ce logo haut, logo côte à côte. Sur la tablette, nous avons décidé que l'effet est bien encore, mais sur mobile, nous allons le diviser pour que le logo soit au-dessus de la navigation. C' est vraiment important parce que je veux que ça soit d'affilée ici, mais pas d'affilée ici. Je vais te montrer comment diviser ça. Ouais, c'est la raison pour laquelle celui-ci, celui-ci et ce troisième ne sont pas d'affilée. Ils doivent être séparés parce qu'à aucun stade à travers toutes ces différentes conceptions, la boîte de héros ne se joint à ces trois. C' est là que vous devez penser  : « Puis-je mettre un élastique autour de tout ça à n'importe quel moment, sur une ligne ? » Aucun d'entre eux. Ils sont tous séparés. Alors que les boîtes de fonctionnalités, tous ces gars, même s'ils sont séparés ici, ils sont tous ensemble sur celui-ci. Donc ils doivent être dans une rangée et nous allons juste les faire 12 colonnes de large. Donc ils remplissent tout le truc sur mobile. Ne vous inquiétez pas si vous ne le faites pas la première fois, mais vous pouvez commencer à le regarder et dire : « Ok, donc si tout va être de ce côté, alors je vais les mettre dans une rangée et coller les petites colonnes et les séparer plus tard. » Bon, alors faisons ce premier morceau d'abord. Il réitère ce que nous avons fait. Nous ferons quelques petits raccourcis au fur et à mesure. Donc nous allons commencer avec un conteneur à points parce que nous n'avons pas besoin qu'il soit fluide. A l'intérieur d'ici, nous allons mettre notre ligne et à l'intérieur de cette rangée va avoir deux fois deux colonnes et à l'intérieur de cela nous allons ajouter la mybox. Donc nous allons faire un autre conteneur appelé mybox1 donc « Enter ». Si cette syntaxe et que tu dis  : « Mec, je n'aurai jamais ça. Ça prend une éternité. » C'est le cas. Je ne suis même pas douée. Je sais que ça me sauve beaucoup, donc ça vaut la peine de m'y habituer. Comme ça marche, j'ai un conteneur avec une rangée. Il y a deux appels à l'intérieur avec mybox div à l'intérieur de ceux-ci. Jetons un coup d'oeil dans le navigateur. Éteignez-le, allumez-le à nouveau. Il est là. On va passer de la tomate à une autre couleur aléatoire. En fait, il suffit de cliquer sur la tomate. Je vais choisir. On n'a pas encore utilisé le jaune. Utilisons un soleil chaud, appelons cette couleur. On a la première partie. Que devons-nous faire d'autre ? Nous devons faire la boîte de héros pour que cela puisse être dans sa propre rangée, sur sa propre colonne. Donc disons en dessous, donc conteneur avant que ça ne se ferme, je vais mettre quelques espaces juste pour que je sache où tout est, comme toi. Bien. Je vais vous montrer un peu de syntaxe de codage. Donc nous avons fait ça. Row, je veux juste une colonne à l'intérieur, mais je veux du texte à l'intérieur, au lieu d'avoir à l'écrire. Tu le mets dans les accolades. Avons-nous couvert ça avant ? Je ne sais pas. ne me souviens pas si je l'ai fait. Les accolades à la fin de cela signifie qu'il va mettre dans un texte d'espace réservé. On va dire « boîte de héros ». À la fin de tout ça, on va frapper le retour, non. On va encore mettre une accolade bouclée. Vous avez besoin de cela pour activer à chaque fois, ce qui est un peu ennuyeux. Donc je l'ai supprimé et recommencé et il a dit  : « Oh, vous voulez dire les raccourcis de l'image. » Tu es genre, « Ouais ». Vous pouvez voir qu'il est mis dans le texte affiche le texte automatique si vous avez des crochets à la fin. Jetons un coup d'oeil à notre navigateur. On a une autre boîte. En fait, j'ai oublié. Tu dis : « Ça n'a pas marché à l'époque. » Je sais. Bon, maintenant nous allons mettre dans mybox1 avec les accolades à l'intérieur appelé boîte de héros. Pas beaucoup de raccourci maintenant, mais tu comprends ce que je veux dire. D' accord, j'ai un quiz pour toi. Je veux que vous l'arrêtiez et que vous voyez si vous pouvez faire ces quatre, tous dans la même rangée. Ça va être une rangée, quatre colonnes. À l'intérieur de ces quatre colonnes va être notre div mybox et à l'intérieur de la div mybox je veux du texte tout disant fonctionnalité. Ne mets pas un, deux et trois. Ça mettra la même chose sur tout le monde. Il suffit d'écrire la fonction de mot et vous pouvez ajouter un, deux et trois par la suite. Alors arrêtez-le maintenant et soyez frustré et essayez de voir si vous pouvez le faire fonctionner avec la syntaxe de la suite. Vous pouvez simplement le taper. Je te montrerai dans une seconde. Va le faire. Tu l'as fait ? Si tu ne l'es pas, je vais essayer de le faire avec toi. C' est là que c'est un peu un brin de l'esprit. Donc je veux une rangée. A l'intérieur de cette rangée, je veux une colonne, je veux quatre colonnes. C' est là que la plupart des gens se trompent. Ils ajoutent les temps quatre plus loin, après la mybox. Donc je veux quatre d'entre eux. Parfois, même quatre. Ok, à l'intérieur même si je veux une .mybox et à l'intérieur de ces mybox, je veux le mot « Feature ». Je vais appuyer sur retour sur le clavier parce que c'est joli. Vous pouvez voir le petit point pour accéder à l'écran. Vous ne pouvez pas me voir pointer, mais vous pouvez voir le petit prédictif. Je vais bouger ma souris. C'est là, là. Il est prêt à partir. Est-ce que ça a marché ? En quelque sorte. Je vais le laisser. Je ne sais pas, son aspect exotique. Regardons un peu. Ça n'a pas marché du tout. Je l'ai appelé mybox et non mybox1. C'est bon. C' est un arrosage dehors, je ne suis pas sûr que vous puissiez vraiment entendre ça, c'est assez cool. Un peu de pluie. Ce que nous voulons faire, c'est simplement ajouter le texte à notre logo. Je vais l'ajouter à notre Nav et regarder, et nous voulons faire quelques choses. Nous voulons, regardons notre exemple, au bureau, il est divisé en deux, mais ici ce n'est pas le cas. Il est à cent pour cent de largeur, ils se divisent sur le dessus il y a les lignes. Vous commencez toujours à travailler avec le mobile d'abord à l'esprit, lorsque vous travaillez avec bootstrap. Disons que je veux que ces deux appels soient 12 ans. Je n'ai pas besoin de dire à celui-ci d'avoir 12 ans, mais nous le ferons quand même, juste pour être cohérent. Pourquoi je ne mets pas, disons, xs ? Parce que je voulais être un vrai petit, rappelez-vous, ils supposent que si vous ne lui donnez pas de mesure, ils supposent que vous voulez dire la plus petite taille possible qui est xs, ou la vue mobile regardons et faisons un clic droit, allez à Inspecter, assurez-vous que les aperçus de l'appareil sont activés, et passons à responsive, passons à la plus petite, et c'est vrai. Il en a fait douze parce que tout le chemin en travers. Mais parce que nous aurions pu faire 12 sur le bas et qu'il coule vers le haut, ils ont tous 12. Ce que nous devons faire à un moment donné, nous devons décider qu'il doit être plus grand. Ce que nous allons faire, c'est que nous allons le laisser à cent pour cent là-bas, mais une fois que nous aurons cette vue, qui est le xs, sm, md pour medium, c'est là que je voulais changer, une taille de tablette. Je vais vous dire que vous aurez douze ans jusqu'à ce que vous appeliez MD, et je veux que vous ayez six ans, ce qui est la moitié des 12. L' autre chose bizarre, c'est que tu n'as pas besoin de faire, et je n'ai pas besoin de quoi que ce soit là-dedans. Je peux laisser ça comme appel, parce qu'on va jeter un coup d'oeil en premier. Nous allons regarder la petite version, il est 12 à travers, puis j'arrive à ce médium, et il se divise en deux. La raison pour laquelle je n'ai rien à faire avec le Nav, c'est que le Nav va juste, je ferai tout ce qu'on me dit en se basant sur le gars en face de moi. Ce gars ou cette fille dit, « Je suis des gars sexy, je vais remplir le reste de la rangée, si celui-ci dit, « J'ai 12 ans », dit-il, « Eh bien, je vais descendre à la rangée suivante parce qu'il n'y a pas de place », très obéissant. Deuxième enfant, ce n'est pas vrai dans ma famille, mais hé hoo. La prochaine chose que je veux faire est que je veux gâcher avec ces boîtes de fonctionnalités, et ici la boîte n'a pas besoin de rien faire, c'est 12, 12, 12, ce sont ces gars de fonctionnalité, donc par défaut, je veux qu'ils soient 12 à travers, donc ils remplir sur mon appareil mobile, mais plus tard, je veux qu'ils soient trois dans une rangée, puis quatre dans une rangée. Il en manque un, qui s' éteindra un peu plus tard. Nous devons entrer et nous devons dire, « boîtes de fonctionnalités ». Nous devons dire : « Oh, je t'aime bien », voyons ce qu'il fait par défaut et parfois, regardons, descendons. Pouvez-vous voir, quand il descend à une taille vraiment minuscule, il dit en fait, « Je ne peux pas pirater » vos boîtes de fonctionnalités doivent aller à cent pour cent parce qu'il n'y a tout simplement pas assez de place pour que le texte s'adapte. Le texte dit, il est juste quand le texte va, si vous aviez un gros peu de texte ici le long de la route, il se casserait plus tôt, et vous êtes comme, oh, je peux le laisser comme ça, et vous êtes comme, non, soyons vraiment spécifique avec elle. Dis-le quand il est à Xs. Je n'avais pas besoin d'écrire des xs, je veux qu'il soit 12, et en fait c'est 12 pour eux. Multi curser, maintenant enfoncée la touche Option sur Mac, touche Alt PC, et nous allons dire, j'aimerais que l'appel soit 12 ans. Tous ces types vont avoir douze ans par défaut. En vérifiant le navigateur tout le chemin vers le haut, et ce n'est pas vrai ce qu'il fait, j'ai fait quelque chose de mal. Ma boîte, cet appel, je l'ai fait sur la mauvaise chose. Je l'ai fait ici à l'intérieur de ma petite boîte intérieure, tu dois le faire ce type. Nous allons passer à la commande D juste pour lancer plus de raccourcis. Commande D sur Mac, Contrôle D sur PC parce que j'ai, col, col, col, col, et je vais dire en fait qu'il s'agit d'un trait d'union 12. Jetons un coup d'oeil à l'aperçu et vous pouvez voir là, il est fonctionnalité est tout le chemin à travers, 12 sur chacun d'eux. Maintenant, ce que je veux dire, j'ai un flux de flub et donc quand j'arrive à MD, dire appeler MD, j'aimerais faire ce qu'on fait avec celui-là ? Nous devons diviser 12 par 3, c'est 4, je pense, regardons un peu, voilà. Donc c'est petit, il est 12, mais quand j'arrive à ce médium là, ils se divisent en trois unités, parce que j'ai divisé les 12 rangs par 3, ce qui équivaut à 4, et nous allons éteindre celui-ci et dans une seconde, faisons le dernier quand il devient grand, qui est celui-ci, je veux le passer à quatre lignes, il va appeler lg, et il doit être 3, 3, 3, 3, 3, 3, 12, ça devrait fonctionner. Douze en travers, quatre en travers, trois en croix. Je parle de colonnes ici, de devenir confus, mais vous obtenez ce que je veux dire juste et tout ce que nous devons faire est juste de nous assurer que nous utilisons cette syntaxe. Quelques choses que vous voulez faire, éteignons d'abord et éteignons ce type, en fait, et nous le ferons dans la prochaine vidéo, je veux résumer avant de partir, c'est que, hé Dan, tu ne fais que concevoir pour ces trois. Pourquoi n'en avez-vous pas fait un pour xl, ou sm, parce qu'il y a cinq requêtes média. Il y a très petit, petit, moyen, grand, extra grand. Pourquoi n'as-tu pas moqué de ceux-là dans ta maquette ? Je trouve que je ne peux pas prendre vraiment bonnes décisions de conception sans vraiment le voir être réactif, donc je fais de gros arrêts, je vais faire des petites, moyennes, grandes, et seulement une fois que je vendrai le client sur cela et puis je vais ajuster pour les autres seulement si j'en ai besoin. Je ne prendrai pas vraiment de grandes décisions conscientes parce qu'il y a tellement de tailles différentes, donc je me moque pour ça, et alors seulement maintenant ou quand je commencerai à obtenir des images et du texte, je commencerai à faire, en fait, ça fait des trucs bizarres entre celui-ci et celui-ci, et je vais juste le faire à la volée, au lieu de retourner à mes outils maquettes comme xt, ou un croquis, je vais juste le faire sur le code de vol et aller bien, que l'image ressemble à elle aurait nourri mais il ne le fait pas ou il prend bizarre, donc je vais ajouter pour cette boîte de fonctionnalités particulière, je vais dire que je vais faire le, peut-être le xl parce que je peux adapter cinq d'entre eux à travers. C' est pourquoi j'ignore les autres requêtes des médias, vous pouvez les ignorer et simplement utiliser des appels, ok, et supposons juste que o mobile sera pour votre site, mais vous avez probablement besoin d'un minimum de traiter l'extra petit, la petite taille, et la grande. Ce sont les deux comme les minimums font de grandes versions, petite version, et puis tout ce qui se trouve entre les deux, c'est à vous de décider si vous voulez aimer combien de temps vous voulez passer et les différents entre les deux. Mais probablement, ils sont vraiment communs un est petit ou extra petit et moyen pour les tablettes, puis grand pour les trucs de bureau et puis ne vous inquiétez pas des écrans géants, ou le téléphone mobile de paysage bizarre, qui est sm, le petit. Ce ne sont que les rôles de Dan. ne pense pas que je pourrais regarder une plus grande entreprise. Ils diront, utiliser toutes les requêtes des médias et ils pourraient en fait ajouter quelques-unes de leurs propres requêtes. Ils pourraient ajouter sept d'entre eux, dix d'entre eux. Juste pour s'assurer que leur navigateur fonctionne le mieux. Amazon va s'inquiéter à ce sujet. Ils veulent plein écran, les meilleures utilisations de l'écran, pour moi et mes clients, je vais faire de petits travaux pour les petites entreprises, donc je finis par faire juste assez et ne pas faire une utilisation basée exacte de toutes les tailles d'écran différentes, simplement parce que je n'ai pas non plus la capacité ou le budget pour le faire. C' est mon loyer. Loyer, sur la prochaine vidéo. 109. Comment activer et désactiver des éléments sur votre site web à l'aide de Bootstrap 4: Salut là. Dans cette vidéo, nous allons vous montrer comment activer et désactiver les boîtes en utilisant Bootstrap 4. Vous avez quatre boîtes de fonctionnalités en bas. On va le rendre plus petit. Il est encore quatre. Une tablette est seulement trois parce que c'est ce qui correspond à base. Mais on passe au mobile. Le quatrième est de retour. Nous allons vous montrer comment activer et désactiver l'affichage pour différentes boîtes en utilisant Bootstrap. Nous voulons désactiver l'une de ces fonctionnalités dans la vue Tablette, sur notre MD. Parce qu'en ce moment, vous pouvez le voir ici sur MD. J' ai ce quatrième gars qui a besoin de disparaître. C'est super simple. La documentation est des utilitaires de documentation getbootstrap.com, et elle est affichée. faisant défiler vers le bas, vous vous retrouvez avec celui-ci appelé des éléments cachés. C' est simple et en flexion cérébrale en même temps. Ce qu'ils ont fait heureux, c'est qu'ils vous ont donné comme tous ces cas d'utilisation. Demandez-vous, qu'est-ce que vous voulez faire ? Lisez à travers eux, choisissez lequel, appliquez-les. Fondamentalement est à d, est court pour l'affichage. Nous l'avons fait dans les cours précédents, je veux dire que nous n'affichons aucun et bloc d'affichage. Nous allons basculer entre ces deux-là. Si je n'écris pas l'extinction immédiate de la requête comme petite, j'écris juste d-none. Il va supposer qu'ils ne sont pas tous. Donc d-none est fondamentalement la version du téléphone mobile. Parce qu'il circule d'abord mobile, il va circuler à travers les petits, moyens, grands et excellents. C' est si tu les éteins tous. Vous pouvez voir ici caché seulement sur l'extra petit. Il est désactivé pour tous, y compris les extra petits. Mais alors le tout prochain code média que vous l'avez réactivé en disant sur le petit bloc et parce qu'il est MD et plus grand par la suite, ils deviennent tous blocs et tous sont visibles. Ça devient un peu déroutant. Faisons-le juste pour notre exemple dans le code VS. C' est ce quatrième. Je vais leur ajouter des chiffres. Rendons ça un peu plus facile, 2, 3, 4. On vient d'ajouter un autre cours pour dire, qu'allons-nous faire ? D pour l'affichage. Lequel on va faire pour medium ? On ne va rien faire. Gardez-le pour avoir un petit coup d'oeil. Dans mon exemple, il est parti. Au petit, il est là. Notre extra petit est là. Ensuite, un petit, qui est cette requête multimédia ici. C'est là. Mais un médium, il a disparu. Mais en général, est aussi parti. Parce qu'il coule en aval et parce qu'il commence au mobile d'abord, vous avez l'idée. On va l'allumer après le médium parce qu'on s'est occupé d'un médium, on va le retourner en général. Disons à l'écran, chez LG est de retour pour bloquer. Espérons, boum. Il est allumé ici, éteint ce médium et incorpore en général. Puis à nouveau à extra large , il est toujours là à cause de ce beau flux. Une dernière chose que je veux mentionner juste pendant que nous sommes ici est que certains des liens que j'ai eus, ou certaines des recherches que vous faites sur Google, vous pourriez finir sur getbootstrap.com et les docs. Il a en fait le numéro de version ici. C' est la toute première version de quand il est allé à 4.0, a pris une éternité pour y arriver, mais est passé de 3-4. Nous sommes en fait prêts, si vous avez une maison. Quand j'ai fait cette vidéo, on est à, où était-on ? 4.3.1, vous allez probablement être beaucoup plus haut. Probablement tu es toujours debout à 4 heures. C' est 2019. Si tu regardes dans les prochaines années, je n'en ai aucune idée. Mais tu vas vérifier ça et je parie que c'est toujours à 4 heures, mais ça va changer. Le document, lorsqu'ils le modifient, ils doivent en fait mettre à jour la documentation. Vous pourriez finir dans une vieille meilleure documentation comme celle-ci. Ce lien que j'ai trouvé m'envoyer à 4. Si je vais au lieu d'utiliser une recherche Google pour le trouver, je vais à Bootstrap et je vais la documentation. Je vais le long chemin. Au lieu d'utiliser Google pour le trouver, je vais dans Utilitaires, Display. Puis plus bas ici, il cache des éléments. Il semble exactement le même, mais vous pouvez voir que nous sommes à 0.3 parce qu'un de ces changements de peut-être 4.2-3 pourrait être, nous allons changer cette chose d'affichage parce que cela ne fonctionne pas. Cet index peut être complètement différent, ou vous travaillez peut-être sur un site plus ancien. Vous travaillez sur le site de quelqu'un d'autre, et ils ont construit ce site sur une ancienne version de Bootstrap. Vous pouvez voir ici notre vision de Bootstrap est que nous référençons le CSS à partir de leur site Web appelé 4.3.1. Si je ne fais que 0, certaines des nouvelles choses qui ont été mises à jour depuis pourraient ne pas fonctionner, auront des problèmes. Fondamentalement, la règle est, je suppose que c'est juste quelque chose dont il faut être conscient. Ça ne va pas t'attraper, probablement. Parce que ce que vous faites est lorsque vous construisez le site, vous allez le construire sur n'importe quelle version et vous l'avez écrit ici explicitement. Ce qui se passe est, il va à Bootstrap à la recherche de cette version et utilise votre site Web en fonction de toutes les règles qui s'appliquaient quand cela a été fait. Cela pourrait être 10 ans dans maintenant que presque les sites Web de Bootstrap vont toujours, ils auront le 4.3.1 là-haut qui fera référence à utiliser ce site, donc il va continuer à fonctionner. Même s'ils pourraient être après la vision 20 par eux. Est-ce que ça a du sens ? Tout ce que je veux faire, c'est juste m'assurer, parcourir le long chemin, juste pour m'assurer de cliquer sur la documentation, de savoir où elle est, ou au moins de garder un œil ici pour voir quelle version vous interagissez réellement avec . Très bien, ça suffit pour cette vidéo. Allons dans la prochaine. 110. Comment recréer les media queries de Bootstrap dans votre propre CSS ?: Bonjour, là. Dans cette vidéo, nous allons recréer toutes les requêtes média que Bootstrap utilise dans notre propre CSS que nous pouvons faire nos propres petits réglages. Parce que Bootstrap en a des prédéfinis, regarde dans les requêtes média en haut ici, nous voulons les recréer parce que nous voulons faire passer ce texte ici du rose au bleu au rouge. Recréons les requêtes des médias et obtenons une chanson coincée dans notre tête pour le reste de la journée. Pour cette vidéo, nous voulons recréer les requêtes média afin que nous puissions les remplacer. Nous voulons faire correspondre le bootstrap une fois, vous n'avez pas besoin, vous pouvez faire vos propres requêtes média, mais ce serait bizarre et difficile parce que vous auriez Bootstrap se battre contre vous. Alors si vous ne voulez pas le faire, alors vous pourriez considérer comme Bootstrap la bonne chose à utiliser, ou devrais-je juste faire mon propre truc ? Ils disent que nous aimons le MD, et nous aimons le SM et l'ILG et il y avait du bien, mais il y a juste des choses que Bootstrap ne peut pas faire ou ne fera pas que nous ne pouvons pas trouver comment faire. Nous devons recréer les requêtes de médias CSS ici. C' est assez facile à faire. Je vais à getbootstrap.com. et la documentation. Il est en dessous ne se souvient pas. Contenu ? Non, c'est sous la mise en page. Faites défiler un peu vers le bas. Ici, je vais les points de rupture. Vous pouvez simplement saisir tout cela, le copier, le coller dans du code VS. Nous allons le coller dans quelques choses bizarres que nous devons faire est qu'il utilise un commentaire qui est, cette barre oblique, est un commentaire à une seule ligne et ne fonctionne pas pour ce que nous faisons. Nous allons tout attraper et juste l'envelopper dans l, comme des commentaires CSS appropriés. J' utilise la barre oblique avant de la commande de raccourci, et vous avez juste besoin de vous assurer que le hachage de barre oblique directe va de chaque côté de celui-ci. Ce sera la même chose pour toi, mon ami. Je pense que c'est pour le fichier CSS. Je n'ai jamais utilisé ce commentaire de toute façon. L' autre chose que cela doit arriver, c'est que cela doit vraiment être au sommet parce que c'est le monde entier. Non, on l'a fait au niveau mondial avant. Très petit, considéré comme global. Nous avons fait bureau plus tôt sur Bootstrap aime faire bureau mobile. Cool les autres choses sont ces points juste des espaces réservés. Je vais leur commander. J' ai tous eux contrôleront D sur un PC et les supprimer, mettre leur dix sur de sorte que j'ai tous mes périphériques multimédia séparés prêts à aller. Pour prouver leur travail, allons dans notre boîte à logo héros. La boîte de héros mis est dans un H1 à l'intérieur de cette boîte un frappeur classique. Je vais dire que la valeur par défaut pour cela va être un certain H1 va être, disons la couleur du rouge. Nous allons juste travailler notre chemin à travers les questions des médias. Vous savez comment cela fonctionne donc c'est par défaut. Si je ne le change nulle part ailleurs, il va circuler dans le document et ce sera peu importe la taille de l'appareil sur lequel il est, il va être rouge à moins que je dise sur petit. Je vais te faire boucler. Faisons-le sur quelques-uns d'entre eux. Passons le moyen. Faisons celui-là. Choisissons une couleur plus exotique. Vous allez rose et extra-large ignorera aussi. Ça devrait marcher. Avoir un peu de regard sur devrait commencer au rouge puis être remplacé au bleu, puis va au rose sur mon grand. Vous pouvez avoir ceci ici, il correspond parfaitement à bootstrap, donc ça va changer avec le, disons, comme dans ce cas L j'essayerais de changer la structure. En tant que tel, vous devrez peut-être rendre le H1 une taille plus petite ou une couleur différente , il y a quelques tailles par défaut que vous pouvez utiliser pour le texte. Nous pouvons regarder cela un peu plus tard, mais il y aura le temps de manger comme je l'aime. Fais ce que je dis, s'il te plaît. Quelques choses à ranger avant de partir, on devrait vraiment appeler celui-là ce conteneur. On devrait appeler ça au lieu d'un div, on devrait l'appeler un tueur. Celui-ci devrait être un coup de barre oblique. Avec mon nav c'est la boîte à l'intérieur du frappeur devrait être ceci et devrait être cela. Ma boîte de héros ici je devrais appeler ceci est un principal. La fermeture de la principale. Je n'ai pas de photo pour le moment. Je veux m'y habituer parce que nous avons fait des lignes et des colonnes en le gardant séparé, mais vous trouverez cette classe appliquée à toutes sortes de balises différentes en HTML. Ça va être tout. Merci d'avoir regardé. Merci d'avoir mordé la médulla. Je te vois dans la prochaine vidéo. 111. Comment utiliser Google Chrome Inspect - Suppression des styles Bootstrap superflus: Hé, là. Cette vidéo est tout sur la façon dont les mains dois-je savoir ce qui rend ce fond gris et ce bouton bleu et taille des textes et Bootstrap quand je ne l'ai pas créé. Je vais vous montrer comment utiliser l'inspection de Chrome pour creuser autour de savoir ce que c'est CSS, puis décider s'il faut remplacer ou non. Telle est la question. La partie principale est d'utiliser l'extension de Chrome ou les outils de développement de Chrome. Mais nous allons en fait supprimer l'arrière-plan et changer la taille et la couleur du H1 pendant que nous sommes ici. D' accord. Mettons-nous coincés dedans. D'accord. Avant de commencer, nous allons parler de la bataille devant nous. Ce sera notre plus grand test ici, et va être la dernière chose pour ce cours est le projet 4 notre bonté medi yogourt. Maintenant, cela va mettre bien que inconnu à l'épreuve, ok, parce que nous ne nous contentons pas de construire sur nous-mêmes, avec des choses que nous savons, nous allons réellement commencer à interagir avec Bootstrap. Nous avons commencé à construire juste jeter et tous les morceaux, peut-être un Jumbotron et tombé là-bas, et donc nous avons tout jeté là-dedans, était super rapide. Maintenant, nous allons nous battre avec Bootstrap en utilisant toutes les connaissances que nous avons apprises plus tôt dans le cours, et peut-être que vous ne pensez pas à cela comme une bataille, considérez ça comme un puzzle. Tout peut être résolu, et je vais vous donner des trucs dans cette section mixte du cours pour les comprendre, et nous allons travailler un peu plus Bootstrapiness. D'accord. Occupez-vous. Revenons dans le code VS. J' ai fermé ce que nous travaillions avant et rouvert notre index et style.css. On dirait ça pour le moment, et juste au cas où parce qu'on a sauté dans ce dossier un peu en devenant copain et en jouant avec ça. Si vous trouvez un peu à travers ce cours ou du moins à travers cette vidéo, vous êtes comme le mien ne fait pas la même chose. Vous voudrez peut-être aller aux fichiers terminés et ouvrir le mien. J' en ai fait un spécial, au lieu de l'enregistrer à la fin de la vidéo, j'ai fait celui-ci qui dit commencer. Les fichiers remplis seront dans un dossier dans vos fichiers d'exercice, cherchez celui qui dit commencer si vous voulez juste aimer, commençons simplement avec la version de Dan afin que lorsque je suis le long, rien ne va mal. D' accord. La première chose que je veux faire est que nous allons sauter le NAV parce que c'est un peu plus compliqué, et si nous apprenons certaines des parties les plus faciles comme ce Jumbotron et ces cartes, alors nous pouvons revenir à la barre de navigation et ce sera beaucoup plus facile. On va commencer par un Jumbotron, ce qui est une grosse chose ici. Allons au code VS. Ce que je veux faire, c'est que je veux d'abord me débarrasser du fond gris. Parce que je l'ai regardé, ce n'est pas ce que je veux dans mon design, donc je vérifie. Vous avez une maquette dans vos dossiers d'exercices pour voir ce que nous faisons. Exercice Fichiers, projet pour le yogourt et il y a une maquette. Il y a un PDF dedans avec la version mobile et la version de bureau. Je vais ouvrir le fichier réel dans XD. Il n'y a pas de couleur de fond, je vais voir à travers l'arrière-plan. Nous avons déjà ajouté le dégradé plus tôt, donc nous devons maintenant supprimer la couleur d'arrière-plan. Cela soulève un très bon point comme comment puis-je savoir ce qui contrôle la couleur d'arrière-plan d'un jumbotron ? Nous allons utiliser Google Chrome. On va utiliser cette inspection. Cette chose va me rendre folle. Ça va continuer à scintiller, tout le long du chemin, n'est-ce pas ? Il l'est. D'accord. On va vivre avec. Ici, nous allons cliquer avec le bouton droit de la souris n'importe où dans le fond gris. On va aller à celui-là dit inspecter. Ce que je vais faire, c'est que je vais désactiver l'aperçu de mon appareil, donc ça me montre tout. Je vais devoir déplacer un peu mon application. Je vais cacher ce petit truc, parce que ça m'ennuie. Nous allons cliquer sur ce bouton ici. Cette chose ici est comme un bouton interactif qui va commencer à mettre en évidence les choses. Pouvez-vous voir le HTML, gardez un oeil sur ici. Il saute juste et s'ouvre en fonction de ce que j'ai plané au-dessus. Je vais cliquer là où j'ai l'impression d'avoir l'arrière-plan du jumbotron. Il vous indique quelles classes sont appliquées à la div, donc quelque chose appelé jumbotron. Ici, il est dit que la classe jumbotron et l'utilisation de ces petites tailles lui donne des caresses. En outre, Jumbotron en général, sans requête média lui dit d'avoir une marge au bas de deux rames, et une couleur d'arrière-plan de ce gris. C' est ce que je veux aborder. Je veux aborder le jumbotron, la couleur de fond et changer cela. C' est la façon de creuser dans le Bootstrap et de travailler sur ce que vous devez changer. Vous pouvez parcourir la documentation et essayer de le comprendre, mais souvent plus facile est juste un clic droit et inspecter, puis activer celui-ci, puis cliquez dessus. Allons trouver ça, faisons une classe appelée jumbotron, alors maintenant CSS. Je vais dire que Dot Jumbotron va avoir une couleur de fond. Couleur d'arrière-plan de. Je vais juste choisir n'importe quelle vieille couleur, puis mettre dans mon point-virgule de fermeture, puis un pointeur au-dessus et obtenir cette chose aléatoire qui surgit, puis je vais juste aller directement vers le bas pour voir complètement à travers. Peu importe la couleur qu'il est, tant qu'il est complètement transparent. Ce dernier doit être nul. Vérifions-le dans le navigateur, et nous y allons. On a enlevé l'arrière-plan, ce petit gars qui glisse toujours, mais on a enlevé la couleur de fond. D' accord. La prochaine chose est cette H1, nous allons gâcher avec la taille. La taille et la couleur, et il ne correspond pas tout à fait à ma maquette. Ma maquette, je veux qu'il soit d'environ 70 pixels, et ici, ce que je peux faire à nouveau, je peux cliquer sur ce petit élément inspecter puis cliquer dessus. En fait, je peux juste passer au-dessus. [ inaudible] Il dit sa police, pouvez-vous voir juste au-dessus ? Je ne peux pas vraiment cliquer dessus. Mais il dit que la police est de 56 pixels, ce qui est bizarre. Tu es comme, hé, je pensais que c'était, tu peux le voir ici, j'ai cliqué dessus. Il dit être affiché plein, ce qui fait 1,5 rames. Comme pourquoi c'est 50 par ici, ou 54 ? C' est parce qu'en fait, c'est comme dire au navigateur qu'il devrait être 3,5 fois la taille par défaut. Le navigateur fait le calcul et il finit par être 54. C' est ce que dit le CSS, le navigateur voit le résultat final. Je veux qu'il soit exactement 70. Ce serait un bon cas d'aller plus et dire en fait que je vais juste remplacer le H1 et je dis que votre H1 est une taille de police spécifique de 70. La taille de la police 70 pixels est ce qui est égal. Il est 70 fois était un 0,0625. Tu te rappelles encore, tu l'as écrit quelque part ? C' est un 4.3, donc ça va un peu plus haut. Je pourrais dire que maintenant, je veux que ce soit quatre points. Je pourrais juste dire 4.3 rames. Travailleraient-ils ? Probablement pas. Parce que ce qu'il y a dedans, jetons un coup d'oeil. Je peux cliquer avec le bouton droit de la souris, inspecter. Vous pouvez voir ici qu'il est encore 3,5, et ça me dit ici, écoute, votre H1 essaie de dire qu'il est 4.3, mais il a été barré et remplacé par celui-ci. Pourquoi ? Revenons à cette chose appelée spécificité. Ici, H1 est très vague, vous pouvez voir H1 est ce qui s'applique à cela. Mais il y a une classe en plus qui est beaucoup plus spécifique à dire, faites cette autre chose. C'est le dessus. Si nous voulons que cela prenne effet, nous devons supprimer cette classe et cela fonctionnera, alors jetez un coup d'oeil. Maintenant, vous pouvez voir qu'il est 4.3 rames ou jantes, et un clic droit dessus ici, inspecter utilise réellement cette option, et vous pouvez voir qu'il est 68.8 pixels cas parce que j'ai laissé une partie de cela aurait dû mettre en 3.75 pour l'obtenir Exact. C' est peut-être un cas, on est comme si c'était une bonne idée. Je vais me débarrasser de tout ça. Mais pour surcharger ou ne pas surcharger, cela fonctionne tout à fait. Disons que je ne veux pas faire ça. Je veux le garder propre et propre. Parce qu'on a travaillé ici et qu'on l'a défaite. Ce plein était proche, si je pouvais aller jusqu'à cinq. Qu' est-ce que l'affichage cinq va vérifier dans une seconde, mais nous allons juste aller. C' est beaucoup plus petit. C'est l'autre façon que nous voulons aller trois devient un peu plus grand. Vous pouvez le voir, c'est en fait à 72 pixels maintenant, ce qui est comme si c'était bien comme 68 l'était en termes d'être un peu désactivé, donc il y a beaucoup de classes pour contrôler des choses comme la taille des polices. Regardons un peu. Notre documentation d'amorçage, sachant où elle se trouve, est un problème dans la documentation. Vous pouvez commencer par la recherche, peut-être faire une recherche google, mais vous finirez sous le contenu et la typographie. Voici nos H1, 2 et 3, c'est à quoi ils ressemblent par défaut. Puis en dessous un peu plus bas, sont les affichages, nous avons abordé cela plus tôt. Vous pouvez voir 1, 2, 3, 4. Il n'y a pas cinq, il peut juste revenir par défaut à aucun quand je mets sur cinq. Tu peux travailler avec ça. Si ceux-ci fonctionnent, parfaits, votre façon, ils ne le font pas, alors vous devrez arrêter de le remplacer avec vos propres styles personnalisés. En disant avec la couleur de la police, disons que je veux passer par, je pourrais styler ceci et lui donner une couleur, afin que je puisse aller la couleur de la police blanche, mais y a-t-il une classe ? Puis en ce qui concerne la typographie, je pense que je l'ai mentionné en bas, couleur, la couleur, quelque part ici. Où est-il ? Je pense qu'il est en fait sous Utilities. Couleurs, il est là. Les ticks primaires couleurs, vous pouvez voir qu'il y a un tas d' entre eux il y a primaire, succès secondaire. Nous cherchons du blanc, donc des tiques blanches, va marcher. Allons-y et attrapons ça. Au lieu de créer une classe ici, en le rendant blanc, on peut juste vous dire en fait avec ça, et vous cochez ce qu'il dit ? Texte de point blanc. Jetez un oeil à notre navigateur et il est blanc. C'est un très bon point. Vous êtes comme, pourquoi je l'ai fait, est-ce , lequel ? C'est important. Vous allez à moitié habitué à cela si vous allez embrasser bootstrap, parce que vous allez travailler sur d'autres sites potentiellement dotés de Bootstrap. Alors que faire les tiques blanches n'est pas si important, ce qui a tendance à se produire est ceux-ci se faire cuire dans d'autres choses, ils ne font pas seulement blanc ou dans ce cas, il fait. Mais rappelons-nous que nous utilisons la couleur, pour les colonnes. Nous savons qu'il y a beaucoup d'autres choses qui se passent là où il se décompose sur différentes requêtes des médias, et aussi d'autres choses cool. En règle générale, j'essaierais de le faire dans votre HTML en utilisant des classes préfabriquées, vous allez rencontrer moins de problèmes, jusqu'à ce que parce que si vous commencez à essayer de remplacer beaucoup de choses, cela peut causer comme des effets de frappe . D' accord. Nous avons supprimé la couleur de fond du jumbotron, nous avons changé le H1 ici, en utilisant des trucs Bootstrap. Je suppose, la grande raison pour laquelle nous avons fait cette vidéo est de vous montrer comment utiliser l'inspection de Google Chrome. Montrons une autre petite chose cool que vous pouvez faire est, disons que ça continue, est-ce que c'est, qu'est-ce que ça contrôle ? Nous allons cliquer avec le bouton droit de la souris, aller à Inspecter, et il va le mettre en évidence et dire que c'est le cas. Qu'est-ce qu'il a dit ici ? Il est mis en évidence en bleu, et il dit que c'est la classe appelée carousel-control-next-icon. C'est ce que ça fait. Tu es comme comment je le fais ? Maintenant, vous pouvez aller chercher cette classe et faire remplacer les amines ou trouver d'autres options en utilisant la documentation de Bootstrap. Que ferions nous si nous tapions, je sais que c'est précédent pas précédent, et je clique ailleurs. Pouvez-vous voir ici, c'est déplacé pour être l'inverse. C' est juste un bon exemple de je peux réellement éditer le code ici et ici pendant que je suis dans Chrome juste pour goûter les choses plutôt que de revenir ici, faire ici dans ma copie de travail comme, puis le tester puis l'annuler. Vous pouvez le faire dans le navigateur à l'aide de Google Chrome Inspect. Disons, nous voulons changer la couleur de ceci, ou la couleur de cette chose bleue. Je vais cliquer avec le bouton droit de la souris et l'inspecter. Au lieu de revenir en arrière et de trouver quel est le bouton primaire, je peux aller ici et dire, d'accord, il y a une couleur qui s'appelle ceci. Je vais l'éteindre pour m'assurer que je prends la bonne chose. Il ne semble pas le changer du tout, la couleur de la bordure est éteinte. Attendu que, il obtient sa couleur à partir de maintenant parce que c'était le vol stationnaire. Voir en bas. C'est là. Je ne veux pas jouer avec le vol stationnaire, je veux jouer avec celui-ci, parce que c'est de là qu'il tire sa couleur initiale, et je peux la changer ici. Je peux dire en fait votre, si blanc, blanc prend sur un fond blanc, bon travail alors. Mais je suppose que je continue, je veux vous montrer comment vous pouvez juste gâcher avec les choses ici et juste les tester en utilisant l'inspection de Google avant d'aller et de travailler sur votre propre document. D' accord. C'est tout pour cette vidéo. Google Chrome Inspect, les outils de développement, super-utile. Passons à la prochaine vidéo. 112. Comment ajouter des ombres au texte et aux boîtes dans Bootstrap 4: Salut là. Dans cette vidéo, nous allons ajouter du texte au bord le long du haut ici. Belle petite subtile. Nous allons également changer ce texte principal pour qu'il soit plus grand et blanc. Nous allons déplacer le bouton vers le haut, supprimer un morceau de choses dont nous n'avons pas besoin de notre site actuel. Mais ce que nous voulons faire dans cette vidéo, c'est vous montrer comment travailler. C'est dans Bootstrap ? Ai-je besoin de faire mon propre style personnalisé ? Les processus de cela, au moins ceux que j'utilise. Allons-y. Cette vidéo est un très bon exemple de ce qui se passe quand Bootstrap ne fait pas tout ça et que vous devez faire vos propres affaires. Ce sont les endroits que je passe par où il obtenir bootstrap.com. Vous êtes comme, quand je dépose des ombres, je vais obtenir une documentation, et je vais taper, attendre qu'elle fasse maintenant tomber des ombres. Je vais essayer de faire de l'ombre portée. On y va, on a des ombres, des exemples, des utilitaires. Essayons un de ceux-ci. Impressionnant. Des ombres préfabriquées. Tu es genre, « Excellent ». Dans ce cas, il y a des exemples et vous pouvez les voir ici. Ombre, petite. ombre doit être la normale, puis l'ombre grande. Mettons dans le grand est allé juste pour voir. Attrapons-le et c'est entendu. Tu es genre, « Facile, mec. » Bon travail. Bootstrap. Tu sais que c'est un coup de poing. Supprimez cela. Il se brise en deux lignes. Cool. Regardons un petit coup d'oeil et boum. Ce n'est pas ce que je veux, je veux exécuter un texte pas exécuter le bloc, le bloc H1. [ inaudible] Je ne trouve pas de vision du texte. J' ai fait une recherche Google et personne n'a eu de réponse. Donc, vous finissez par arriver au point que vous êtes comme, « C'est comme quelque chose qu'il devrait avoir », mais il n'a pas pour le moment, au moins à 4.3 ou du moins que je peux suivre ou trouver. C' est quand c'est une bonne affaire comme, « D'accord. Nous allons faire notre propre truc. » Nous allons créer une classe [inaudible]. On va créer quelque chose qui s'appelle ombre portée. Il n'existe pas pour le moment, donc nous allons le créer ici. On va l'appeler Ombre portée, Collude et Ombres tombantes avant. Maintenant, nous pouvons utiliser Bootstrap pour aller vite, mais nous pouvons utiliser nos propres écoles de conception web suite pour étendre le bootstrap. As-tu une idée de ce qu'on appelait ? Tu fais ce que je fais. Vous devriez revenir à l'ancien document que vous aviez l'ombre portée dessus et aller trouver la classe qui le fait fonctionner. Nous faisons la recherche Google. Je me souviens que je prends de l'ombre à cause de l'enseignement et parce que nous utilisons beaucoup d'ombres. Rappelez-vous, c'est à quel point il est flou d'abord, rappelez-vous qu'il est x, y, puis flou, puis couleur. Pour le X, je ne veux pas qu'il aille nulle part. Signifiant zéro. Pour le y, je veux descendre juste quelques pixels. Comme vous voulez floue le genre d'ombre portée. Je vais l'avoir comme deux pixels flous. J' ai déjà pratiqué ça. Je vais taper la couleur pour le noir seulement parce que je veux revenir tout droit et cliquer dessus et descendre ici quelque part. J' ai utilisé 15 pour cent, donc 0.153, ça marche pour moi. Alors nous allons voir si tout cela a fonctionné et regarder que Bootstrap et vous-même travailler ensemble pour faire un peu de site Web. Deux autres choses que je veux faire avant de partir, c'est, tu te souviens de ça ? Ça s'appelait, je crois que Lead. Je l'ai rendu un peu plus grand. Je veux le changer, je veux le rendre blanc et peut-être un peu plus grand parce que je veux qu'il corresponde à mon balisage ici avec de vrais morceaux de viande. Je n'ai pas reconnu le yogourt à la viande. Je ne pensais pas que c'était une bonne idée. J' ai trouvé que c'était une drôle d'idée. Vous êtes maintenant coincé avec elle comme un projet de cours. Je passe beaucoup trop de temps à concevoir des logos et des produits. [ inaudible] est, je suis totalement végétarien, mais ça semblait drôle à l'époque. Nous voulons rendre ce blanc et plus grand. Ce que vous faites, c'est que je vais vous montrer le processus parce que nous avons vu ça, que pouvons-nous en faire ? Rappelez-vous que nous avons cliqué dessus. Je vais aller à l'Inspection. Je vais vérifier et il utilise ce truc appelé plomb. Nous allons à Bootstrap et nous allons ici et nous disons LED, dites-moi plus sur un bootstrap. On dit que ça sonne bien. Typographie, plomb. Il dit que le plomb fait tout ça. Alors il n'y a rien d'autre. Tu dis : « Il n'y a pas de pub comme le plomb 1, le plomb 2. Je sais que je vais devoir faire un truc personnalisé. Alors je vais aller dans mon ici. Je vais dire. Lead. Je vais t'utiliser surtout, mais j'aimerais que tu sois une couleur blanche, pas du blé. Blanc même. Je veux changer la taille. J' ai travaillé sur la taille de la police en utilisant mon calcul fou est d'environ 2.2 rems. Nous devons changer le style de texte, nous ferions ça, et nous allons nous débarrasser de certaines des lignes ici. Dans votre document texte que je vous ai donné, vous pouvez taper ceci. Épais et crémeux, il va aller au lieu de bonjour monde. Épais et crémeux et avec de vrais morceaux de viande. Débarrassez-vous de tous ces prétextes. Assurez-vous qu'on ne perde aucun des dossiers. On y va. Sauvez-le. Maintenant, regardons un peu. Il se rapproche de notre balisage. Où est notre balisage, il est là. Nous y arrivons. Une autre chose que je veux faire est que je veux le bouton parce que c'est dans mon balisage là-bas, est le bouton que nous allons le changer, mais il n'y a pas de ligne et pas de texte, donc je voulais me débarrasser de ceux-ci. D' abord, quiz pop. Qu'est-ce que c'est ? Pause, regardez-la un peu. Quelle est l'heure et il y a mon [inaudible] ? J'attends. Vous l'avez mis en pause ? Tu es revenu ? Toi de retour. Donc hr rappelez-vous est une règle horizontale. Cela disparaît, même si j'ai dit dans un tutoriel précédent qu'il n'est plus utilisé comme une hr comme une règle, dans Bootstrap, ils ignorent ce rôle et l'utilisent à nouveau. Qu' est-ce que je représente ? Tu te rappelles ? Tu l'as eu. C' est la marge et c'est le haut et le bas, l'axe y et quatre est juste la taille de celui-ci. Donc si on le rend plus grand, il aura plus d'espace. Si on en fait un plus petit, il aura plus d'espace. Mais on n'en veut pas. Nous ne voulons pas de vous tous. Au revoir. Nous allons laisser le bouton là-dedans, mais au lieu de dire en savoir plus, il dit, qu'est-ce que ça dit ? Ça dit la tarification. Cela sera le cas pour cette vidéo et c'est le moins vous montrer tout ce que Bootstrap fait et plus sur la façon dont vous vous entraînez, ce que Bootstrap fait, ce que vous pourriez avoir à faire vous-même comme notre ombre portée et notre piste et vous pouvez commencer à voir comment [inaudible] compétences pré-bootstrap un vraiment utile maintenant. Dans les cours, ce n'est pas chose de créer nos propres classes personnalisées et un tas de drame, nous allons être bons pour ça, toi et moi. Nous irons encore mieux dans la prochaine vidéo. Je te vois dans une seconde. 113. Comment modifier la taille et la couleur par défaut des boutons Bootstrap 4: Bonjour là. Nous allons nous attaquer à ce bouton ici. Nous allons passer du bleu et du solide au blanc et esquissé et plus grand et mieux. Il va avoir un petit vol stationnaire cool aussi. Nous allons faire tout cela maintenant en utilisant un mélange de notre propre CSS et la bonté de Bootstrap. D' accord. Que voulons-nous faire à ce bouton ? Tout d'abord, je veux le faire baisser un peu parce que sur mon balisage ici, c'est un peu plus loin. Je veux y aller et faire ça. Joli, facile. Ok, alors le bouton ici, où est-il ? Jumbotron est à l'intérieur, il y a le bouton. Nous allons ajouter une classe de. Rappelez-vous qu'il était marginalisé et je veux l'ajouter en haut. Je veux que ce soit. Pas sûr. Je vais essayer quatre. C' est bon d'y aller. Différemment, un plus grand écart. Ça fera pour moi. D' accord. La prochaine chose que je veux faire est de le décrire. Parce que c'est une couleur bleu uni, je veux en faire un contour blanc comme ma maquette ici. Instantanément, j'étais comme, pas moyen que Bootstrap fasse ça. Quel bon bouton de contour. Ok, donc j'ai commencé à faire ma propre classe seulement pour découvrir plus tard en faisant ce tutoriel comme ils le font. Une bonne. Ok, donc parfois tu peux être comme s'ils ne faisaient pas ça. Parfois, vous avez juste besoin de vérifier. Ok, donc ici j'ai tapé des boutons. D' accord. Qu'est-ce qu'on a ? Boutons, étiquettes de boutons. Oh, regarde, il y a un bouton de contour. Allons cliquer sur le bouton, les boutons. Ok et allez à la bonne page. Il y en a beaucoup. D' accord. Il y a des boutons décrits. J' ai donc juste besoin d'utiliser la classe outline de. Je veux celui-là. Ok, donc je veux le contour du bouton de blanc probablement. On a un léger. Ils ont du blanc là-bas ? Ils ne semblent pas l'avoir là ? Laissez-nous le tester. Peut-être qu'ils ne pouvaient pas l'avoir parce que vous ne pouviez pas le voir. Donnons-lui un rouleau. Donc, nous allons dire BTN, en fait pas là et je veux séparer la classe. J' en ai déjà un il y a déjà quelque chose qui s'y applique appelé BTN primaire, BTN contour. Nous allons deviner pour les blancs pour voir s'ils le font. Laissez-nous vérifier. Ce n'est pas faire blanc parce qu'il est flippé. D' accord. Il fait une version légère et maintenant vous devez décider combien. Parce qu'il est léger, combien est-ce que je veux vraiment qu'il soit blanc ? Pourquoi ils n'en avaient pas un blanc ? Ok, alors jetons un coup d'oeil maintenant. Lumière. Oui. Comme maintenant, il faut être blanc. D' accord. Comment on va le changer ? Maintenant, nous allons passer à travers et dire en fait ce genre de penser à travers. Donc, il y a quelques choses qui s'appliquent à ce bouton est quelque chose appelé comme une balise A, il y a quelque chose appelé un BTN, il y a quelque chose appelé un contour BTN. Ok, alors il y a un bouton Lodge par son apparence. Ok, donc je mesure et je peux mettre un SEM pour en obtenir un petit et on a ajouté la marge au sommet des quatre. Donc ici, nous pourrions dire, d'accord, laissez-nous juste faire tous les boutons est de faire BTN. Ok, bien point BTN. Allez Daniel, BTN. Disons que je veux la couleur. Ou est-ce que je veux la couleur ou faire un arrière-plan ? Alors regardons un peu. Couleur d'arrière-plan. Je sais ce que c'est, mais j'essaie d'aimer raconter une histoire ici. Couleur de fond blanc. C'est vrai ? Comme si ce n'était pas ce que je veux. Je veux que le contour soit blanc. L' autre problème est que le fond BTN blanc. Laissez-nous le changer en rouge juste pour vous montrer. Je pense que c'est trop générique parce que c'est comme s'habituer là-bas et ici. Ok, donc nous devons nous assurer que peut-être attaquer le bouton n'est pas tout à fait ce que nous voulons faire. Donc, au lieu de juste le bouton, nous allons le faire un peu plus spécifique. Ok, lumière de contour BTN. Donc ce type va être ça et ce ne sera pas la couleur de fond. Donc, nous allons supprimer cela, ce sera la couleur de bordure du blanc. Merci beaucoup. Joli. Donc c'est un peu génial. Ils l'ont. Alors vous êtes comme, pas la bonne couleur. Donc un peu des deux. Pour moi, un bootstrap high-5, on fait des trucs. L' une des autres choses que nous pourrions inclure ici est le vol stationnaire. Ok et c'est je suppose que l'un des avantages de l'utilisation de Bootstrap est que vous auriez pu décider. Vous entendrez comme pourquoi vous embêtez à utiliser cette classe quand elle ne fait rien ou vraiment ce que vous voulez, elle a fait la ligne. D' accord. Mais l'autre chose que ce genre d'invoque est qu' il traverse comme la classe hover parce que rappelez-vous quand j'ai commencé à l'utiliser, il était bleu avec un fond bleu foncé. Donc, quand j'ai refroidi sur celui-ci, la version légère, ok, son genre de commutation des classes de vol stationnaire, bien que des pseudo-classes aussi bien. Donc Bootstrap fait beaucoup de choses. D' accord. Que voulons-nous faire d'autre ? Nous voulons faire une pseudo-classe. Donc nous allons attraper tout ça et vous émettez une pseudo-classe, n'est-ce pas ? Ok, donc tu écrase un deux-points à la fin sans espace et tu tapes en vol stationnaire. Ok, donc je veux que ce cours soit attaqué. Donc, je veux que cette classe particulière soit regardée et je veux que la pseudo-classe hover fonctionne avec elle. Donc je ne veux pas de ça. Ce que je veux faire, c'est peut-être cette couleur de fond maintenant, sa couleur de fond. Je veux qu'il soit blanc, mais je veux que ce soit. Je clique dessus et dis blanc mais assez transparent. Ok, si temporaire comme ça, 20%. Donc, il va regarder, maintenant un vol stationnaire. Tu vois que tu fais juste allusion là, c'est une bonne allusion à Dan. Examinons quelques autres choses boutonnières. Ok, donc les tailles. J' étais déjà un gros bouton. Il semble être seulement bouton grand et petit. Je veux que le mien soit très gros. n'y a pas de gros supplémentaire ici. Ok, donc on va devoir faire un peu plus de style. Donc, il y a un saut en arrière et vous êtes comme, Ok, je vais juste l'ajouter à celui-ci ici, ajouter un peu de rembourrage que nous n'avons pas de cours pour ça, pour Bootstrap. Pas moyen. Ok, on a une marge supérieure. Ok, peut-être qu'on peut ajouter un peu de rembourrage et la gauche et la droite, alors il y a X et je veux que ça soit cinq. Je voudrais que le haut et le bas soient quelque chose qui est un peu plus petit de Y. Ok, donc rembourrage, gauche et droite, cinq, haut et bas, trois. On peut faire un bouton géant. Encore une fois, le travail d'équipe, moi et Bootstrap faire des choses ensemble, être rapide, faire toutes les choses difficiles. Mais alors Dan le designer passe des âges à essayer de se battre avec Bootstrap pour lui faire faire ce qu'il veut. Mais avec tous les freins et contrepoids pour ce que j'ai pu le jeter très rapidement, surtout avec la navigation et toutes les requêtes des médias, je pense que nous sommes slung à un gagnant avec Bootstrap. Merci Bootstrap. 114. Comment rendre les images réactives et extensibles dans Bootstrap 4: Bonjour, là. Nous allons travailler avec des images réactives. Nous l'avons fait avant, plus tôt, donc nous allons utiliser ces nouvelles compétences pour travailler avec Bootstrap. Nous allons éditer cette image ici, nous allons l'obtenir pour qu'elle soit extensible. Vous pouvez voir qu'il change de tailles et une montre de requêtes de médias différente, il colle en dessous. Nous allons travailler à travers toutes les différentes options avec Bootstrap 4 dans VS Code en ce moment. On regarde la maquette maintenant. Nous avons notre texte et je veux mettre cette image sur le côté. Il y a quelques façons de le faire, et nous allons les couvrir dans cette vidéo et cela dépend vraiment de la mise en œuvre. Ce que je veux vraiment faire, c'est que cette image se décompose sur sa propre ligne après qu'elle descende à ma balle. Vous pouvez voir ici qu'il est passé en dessous. La même chose avec le message du fondateur, ça commence là-haut, descend. Mais ces petits curseurs, je vais m'éteindre. Il y a beaucoup d'implémentations différentes en fonction de ce que vous voulez faire. Ajoutons l'image au code VS. Je veux être à l'intérieur de mon Jumbotron, qui se termine là, ce qui n'est pas tout à fait aligné. On y va. Je veux juste après, et je vais le taper ici. Je vais dire, nous allons nous aligner avec tout le reste là-dedans. Source de l'image, celle-ci va à images/ et celle-ci s'appelle hero1.png car elle a besoin d'un fond transparent. Je vais m'assurer de mettre mon vieux texte là-dedans. yaourts de viande de Dan. Vous pouvez épeler quelques façons, je suis destiné à échouer sur ce mot. Mais il y a mon vieux texte, j'ai une image. Voyons à quoi ça ressemble naturellement. C' est massif. Par défaut, dans les images Bootstrap, essayez d'étirer tout le chemin. Tu es genre, ce n'est pas ce que je veux. J'en veux un petit ici. Il y a quelques choses qu'on peut faire. Regardons la documentation Bootstrap. Regardons le contenu. Je sais que c'est sous le contenu et les images. Vous allez devoir cliquer pendant une longue période ou faire une recherche. D' accord. Dans les images, il vous indique ce que vous devez faire. Dans notre cas, si nous voulons faire une image réactive, nous devons ajouter cette balise appelée image ou img-fluid pour qu'elle se déplace. Il y a d'autres moyens. Nous pouvons tourner les vignettes en l'appelant. Jetez un coup d'oeil à ça juste parce que c'est intéressant. Nous ajoutons la vignette img de classe à cette chose. Nous vous avons, avant la fermeture de la balise image, nous avons mis en classe img-thumbnail. Regardons les maintenant. Vous y allez. C' est dans une grande boîte blanche, fond blanc, avec des coins arrondis, encore trop grand. Mais juste pour que vous sachiez, il y a des classes plus étranges, mais juste d'autres cas d'utilisation. On n'en a pas plus pour ça. Ça pourrait être intéressant. D' accord. Je veux qu'il soit dans la classe de peut-être retourné à droite. Je peux le pousser sur le côté droit. Voyons comment ça marche. Faisons celui-là et voyons ce qui se passe. D' accord. Toujours pas parce que c'est trop grand. Ce que beaucoup de gens font avec Bootstrap, c'est qu'ils vont juste lui donner une largeur ici. Disons que c'est une largeur de, disons 500 pixels. Il s'adapte sur le côté, et je vais lui donner une hauteur automatique pour résoudre ça, oui, la largeur que vous définissez et ce sera juste n'importe quel rapport équivalent est pour la hauteur. C' est une façon de le faire. Tu es genre, ok, on y arrive. Maintenant, je sais que dans ce cas, je voulais me connecter. Nous allons devoir ajouter comme des marges négatives et essayer de le tirer de cette façon, peut-être un positionnement absolu. Je vais vous montrer une autre façon parce que vous pourriez être exactement ce que vous devez être. Vous avez une image, elle répond à différentes tailles. Jetez un oeil. Allons le descendre. D' accord. Il ne descend pas assez petit pour s'adapter. Je n'ai pas réellement ajouté l'image responsive. D' accord. Allons là-bas et faisons ça. Je l'ai plié vers la droite, mais je veux aussi, donc le fluide img-fluid. Il change réellement la taille. D' accord. Vous pouvez voir qu'ils deviennent de plus en plus petits. Allons en fait allumer l'inspection. Examinons l'aperçu de l'appareil. Maintenant, nous allons le faire glisser et vous pouvez voir l'image. Laisse-moi bouger un peu. D' accord. Il devient de plus en plus petit parce que j'ai ajouté cette image responsive. Ça marche pour nous, non ? Il arrive ici et je veux juste le faire apparaître comme ça. Vous pourriez chasser la marge négative pour la tirer vers le haut, peut-être absolument la positionner. Il oublie cela et se déplace vers le haut. Mais je sais que ça va me causer des problèmes quand je veux sur mobile, rappelez-vous, décomposer en sa propre ligne pour le séparer ici. Ce que je veux faire, c'est juste le mettre dans une rangée comme si nous avions fait beaucoup de choses. Mettez-le dans une rangée et ensuite avoir deux colonnes que je peux casser sur ces deux parties. Comme celui-ci semble un peu plus large que celui-ci. Cela peut être, peut être sur un sept et celui-ci peut être cinq colonnes. Ensuite, je peux juste sur les appareils mobiles faire 12 et 12. Donnons ça un coup de pouce. Jetons un coup d'oeil. Souvent, vous n'arrivez qu'à ce point, nous aimons faire mieux en deux colonnes après avoir eu un combat avec des marges à droite et négatives et vous aimez, j'abandonne. Tu es genre, en fait. Débarrassons-nous de la hauteur, la largeur, d'accord, ce truc. On va garder l'image fluide et on va se débarrasser du blanc flottant. On est de retour à l'avoir assis là. Pas de hauteur, pas de largeur. Nous allons laisser la largeur de la colonne décider de sa taille. Tout d'abord, nous allons avoir besoin de ça. Je vais le couper dans mon presse-papiers. Je suis allé éditer, couper. Je l'ai quelque part. Vous pouvez coller un autre document si vous avez peur de le perdre. Je le fais toujours. Ne vous inquiétez pas au moins. À l'intérieur, je veux une rangée avec, à l'intérieur, je veux deux colonnes, s'il vous plaît. Cette première colonne va avoir toutes ces choses que j'ai collées. Il va avoir mon H1 et ma balise P et ma balise E et tout ça, à l'exception de l'image. E va aller dans cette autre colonne ici. Maintenant une question que vous pourriez avoir est que, hé, vous n'avez pas mis la div interne ? Nous avons passé l'appel et ensuite normalement nous avons mis dans ma boîte. Nous n'entrons dans ma boîte que si nous devions changer la colonne d'une façon ou d'une autre. Nous avons obtenu beaucoup de couleurs à l'arrière-plan et nous avons beaucoup changé. Nous ne ferons rien de tout ça. Nous l'utilisons simplement comme un simple tout conteneur et nous faisons des choses avec cela à l'intérieur. Je n'ai pas besoin de m'embêter avec la colonne. Est-ce que ça a du sens ? Si je voulais ajouter des marges à la colonne, en haut ou en bas, je mettrais effectivement un div interne ici appelé ma boîte dedans pour le faire. Parce que souviens-toi, on n'aime pas jouer avec l'appel. L' appel sait où vous vivez et on vous trouvera. Bon, donc ça va marcher. J' espère que ça va marcher. Regardons un peu. C' est là. D'accord. Ça fait la moitié et la moitié. Ce genre de 50-50. Ce n'est pas tout à fait ce dont j'ai besoin. J' ai besoin que ce soit en fait, je veux qu'il ne soit pas 50-50, environ sept et cinq. Nous arrivons à 12 colonnes, ce qui est cool. Ça va marcher. Eh bien, ça va marcher parfaitement. Sauf que maintenant nous voulons travailler sur le mobile. C' était génial pour ce point de vue. Mais quand je descends à cette taille, il me choisit cette requête multimédia ici. C' est ce que c'était. Il me donne un indice, quelle requête média est cela. C' est le LG ? Non, ce n'est pas le cas. Le SM, si petit. Tu le sais. Tu l'as. D'accord. Je veux à la fois celui-ci et celui-ci, je veux probablement qu'ils soient empilés sur le dessus parce que l'image devient petite. Il est en train de casser ça. Il y a assez de place ici. Ça a l'air bien. Attaquons ça. Ce que je veux faire, c'est au lieu de dire que celui-ci sera mon médium et au-dessus. Probablement vous avez entendu le tonnerre en arrière-plan. C' est très excitant ici aujourd'hui. Pas si bon parce que je suis une attention [inaudible] assez excitante. Je suis distrait par le tonnerre et la réalisation que je suis dans une grande ombre d'étain. De toute façon. Qu'est-ce qu'on fait ? D' accord. Nous avons décidé qu'en général, il allait le faire. Mais ici, ça ne fait rien. On va le forcer à avoir 12 ans. Tellement flottée. Nous allons dire un appel 12, ce qui suppose que vous voulez dire extra petit. Parce que je ne dis pas petit, il va supposer qu'il est 12 ans est petit aussi. Et enfin, quand ça arrivera au médium, ça va dire en fait que je vais te surpasser, je vais avoir un cinq. Eh bien d'abord, vous l'avez. Jetez un oeil. Je sais qu'il le fait par défaut, mais parfois c'est seulement parce que le contenu le force, vous ne le faites pas vraiment. D' accord. Ça a l'air bien. Tout est empilé l'un sur l'autre. Puis boum, et ça arrive là, ça bouge ça. C' est pourquoi je suis allé pour l'approche à deux colonnes parce que cela rend cela agréable et facile. Il y a d'autres choses que je veux faire, peut-être baisser la taille de la police quand j'arrive à celle-ci parce qu'elle se brise dans des endroits bizarres. Nous devons jouer avec le rembourrage et nous devons le centrer parce que ma maquette ici a la tique centrée sur mobile. On le fera dans la prochaine vidéo. C' est bien sûr, si je suis ici dans la prochaine vidéo et pas frappé par la foudre. 115. Comment centrer le texte et les balises div dans un site web Bootstrap 4 ?: Bonjour, vous. Dans cette vidéo, nous allons vous montrer comment passer de l'alignement à gauche par défaut à un appareil mobile où il est agréable et centré. Nous allons ajouter un peu de rembourrage au bouton parce qu'en ce moment il est coincé de très près, parce que c'est ce que nous allons faire. Commençons. Il ressemble bien à nos grandes tailles de bureau, il semble bien à moyen aussi. Nous voulons descendre dans les petites tailles où j'essaie de le coller sur l'autre et nous avons besoin d'un peu d'espacement ici. Nous voulons que le texte soit centré, parce que c'est ce que j'ai fait dans ma petite maquette ici. C' est sympa et centré. Faisons ces choses dans cette vidéo. Ça va au VS Code. Je vais vous montrer mon processus. J' ai traversé et j'avais regardé à travers Bootstrap, la documentation. J' ai trouvé les services publics et le même bon espacement et j'étais, « Ok, cool, c'est bon. » En bas, il y en a un qui s'appelle MX. Marges gauche et droite ou auto. On l'a déjà fait. Margin-gauche, Margin-droite auto vue comme des choses. D' accord ? J'ai essayé ça sur la div parent. D' accord ? donc je te vois. Génial, travail fait. Ok, ça ne marchera pas. Creusé et j'ai trouvé autre chose, c'est un peu de ça dans Bootstrap. D' accord ? Nous essayons de comprendre ce qui va marcher. Ce cas sur le texte, si vous faites défiler vers le bas, celui-ci me semble plutôt bon. J' essaie de trouver ici ce qui fait que ça marche. Centre de texte. Je vais aller au centre de texte et l'ajouter et voir si cela fonctionne. Pour avoir un peu de regard et il a fait le texte centré. Ce type va être bizarre. Qu' est-ce que tu fais là-bas ? Oh non. D' accord. Il travaille parfaitement. On peut trouver sur celui-là qu'il fonctionne très bien là-dessus. Mais quand je pars à étudier côte à côte, il faut encore des centres. N' oubliez pas que si nous n'ajoutons aucun accusé de réception multimédia, il suppose la version lisse. Ensuite, je veux faire est de, disons le texte pour le moyen et au-dessus vont être laissés. J' ai vu le centre jusqu'à ce qu'il entre dans pour le petit dans au centre pour l'extra petit par défaut, puis à travers le petit que je veux. Ensuite, je le change quand il arrive finalement à MD, pour moyen. Sm et puis moyen, gentil. Ça va marcher pour moi. Maintenant, cette image semble être bien centrée aussi bien. Ok, je pourrais être enclin à le mettre sur le Jumbotron juste pour que tout ce qu'il considérait à l'intérieur, mais ça semble bien. Tout semble bien centré. Une chose que je veux faire est, je veux ajouter un peu de marge au bouton. Où est mon bouton ? Il est là. Disons, « Vous mon ami » Le bas de la marge va être, regardons juste cinq. Marge de travail en bas cinq sur le bouton. Le haut de la marge depuis que nous travaillons, le bas de la marge pendant que vous travaillez. Dis ça, dit regardez, magie, ce que je sauve normalement fonctionne. ai pas fait cette scène, je veux, je n'ai rien fait. Juste réparé lui-même. C'était parfait. Maintenant, je devrais probablement l'éteindre. D' accord. Quand j'arrive à ce stade, mais ça ajoute un peu de rembourrage ici que personne ne peut jamais voir, mais soyons officiels à ce sujet. Disons que quand je me lève, donc margin-bottom, quand j'arrive à la taille moyenne, remettez-le à zéro. D' accord. Changer la structure de celui-ci, vous ne pouvez pas vraiment le voir. C' est activé pour les petits et les petits, puis s'éteint pour ces autres que nous ne pouvons pas voir. D'accord. Cela va être tout pour centrer le texte sur un appareil mobile, même appareil. J' espère que vous vous sentez un peu plus à l'aise avec Bootstrap et juste HTML et CSS en général. Tu as l'impression que c'est plutôt cool quand tu regardes ces trucs. En fait, je sais ce que ça fait et je suis presque sûr de savoir ce que ça fait. Il fait des choses incroyablement bonnes sans nous ayons à faire beaucoup de travail acharné comme nous l'avons fait au début. Mais ce dur travail que vous pouvez voir est payant quand nous commençons à réparer les choses, à ajuster les choses et à regarder la bonne langue. Je trouverais ça utile Bootstrap. Passons à la prochaine vidéo. 116. Comment personnaliser la barre de navigation du site web dans bootstrap 4: Bonjour, vous. Cette vidéo, nous allons prendre notre navigation, qui a actuellement tout dedans. Beaucoup de choses, on va le réduire à juste comme ça. Nous allons pour le Nav sur le côté droit aussi, et quand tout s'effondre, il va toujours tendre dans un joli petit mouvement tout le menu. Voyons comment le faire maintenant dans le code VS et le formulaire Bootstrap. C' est le temps de personnalisation Navbar. Nous avons plein de compétences Bootstrap et nous allons l'utiliser pour faire fonctionner ce truc. Tout d'abord, jetons un oeil à la documentation et je veux aller à Utilities. Je ne veux pas d'utilitaires, je veux Composants et je veux descendre, près du bas. Il y a deux, Nav et Navbar. Parlons de la différence entre les deux. Navbar est celui que vous cherchez, juste pour que vous le sachiez, et Nava est comme une version réduite. C' est une navigation, mais ce n'est pas la navigation supérieure. On dirait ça. C'est une navigation, mais il a aussi des versions à onglets pour la navigation, vous pouvez avoir déposé Nav vertical vers le bas. Le pas comme la navigation cachée dont vous parlez, ou au moins ils en font partie. Vous pouvez voir qu'il y a une autre navigation à onglets liés. Quoi d'autre ? Tu as des petites boîtes. Il y a tout ici, et ce qu'on cherche. Vous pouvez les utiliser mais ils sont comme internes, vous accédez à une page et à la nouvelle liste déroulante pour les catégories et nous allons redéfinir vos recherches. Celle que vous cherchez est Navbar. Il comprend une partie du Nav, mais le Navbar est comme le morceau entier développé. On l'a regardé plus tôt. C'est le tout. Il y a une boîte de recherche, il y a un menu déroulant, il y a beaucoup de façons différentes. Maintenant, ce que vous voulez faire est de trouver celui qui est le plus proche de ce que vous voulez. Vous voyez ici, juste la marque. Ce n'est pas très excitant, tu viens d'avoir Navbar. Vous pouvez suggérer que pour une image, vous pouvez avoir une image dans le texte, et elle vous montre toutes les choses qui sont nécessaires. Vous ne voulez pas, je suppose, ou travailler à chaque classe qui a été appliquée ici, vous voulez en trouver un qui semble le plus proche et déterminer ce que vous devez ajuster. C' est proche de ce que nous voulons. Sauf que je veux celui avec la liste déroulante. Je ne veux pas avoir à aimer essayer d'incorporer un menu déroulant. Je vais en trouver un. Ça correspond à un très bon point de départ. J' ai ce truc appelé la marque, que nous allons examiner un peu plus en détail, et j'ai un tas de liens. Pour une raison quelconque, par défaut, ils ont inondé vers la gauche. Personne ne veut même qu'ils l'inondent à gauche. Mais cela déjà dans le code, donc probablement mieux être arrêté avec celui-ci. Parce que nous en avons un assez complexe, j'aimerais laisser celui que nous avons parce que je veux vous montrer comment le modifier et le faire. Suppression des bits que vous voulez, suppression des bits que vous ne faites pas. C' est la même chose, dire deux fois bonne déchirure. Qu'est-ce qu'on a ? On a tout ça. Voilà la marque. Qu' est-ce qu'il y a d'autre là-dedans ? Jetons un coup d'oeil. Qu' est-ce que je veux me débarrasser d'abord ? Jetons un peu un coup d'oeil et utilisez Inspect. Je vais cliquer avec le bouton droit de la souris, inspecter et frapper ma petite flèche ici. Il suffit de travailler et de comprendre ce que c'est. Il y en a, rendez ça plus grand. Il y a un contrôle de formulaire de classe d'entrée. C' est à l'intérieur de quelque chose appelé classe de formulaire. Ça a l'air de ce que je veux. Quoi d'autre est en dehors de ça. Tu vois si je vais au plus haut, j'entre dans ce genre de choses que je veux. Ce truc appelé Navbar, Nav, les choses de forme semble s'achever. Il est difficile de le pointer ici et aussi de le pointer ici. Tu comprends ce que je veux dire. J' espère que si je peux supprimer tout dans cette classe de formulaire, je pourrais me débarrasser de ce gros morceau. Allons regarder dans ce code. C'est très bien. Mon formulaire, où êtes-vous ? Oh, c'est là. Enveloppe et bascule et désactive pour voir où il se ferme. Quand il bascule, vous pouvez réellement tout saisir et le supprimer. Vous pouvez voir les chiffres vont de 48 et il saute quelques uns à 51 parce que j'ai quelques trucs sélectionnés là-dedans. C' est une belle façon de supprimer de gros morceaux en une seule fois. Tout simplement comme un Nav. On peut attraper ce Nav ici, et le basculer vers le bas. Si nous avons besoin de le supprimer, ou au moins juste minimiser le Jumbotron, juste tout est comme un peut-être un peu plus facile à travailler avec. Je choisis ça. Le vérifie et voit comment on a fait. Génial, il est parti, on ne s'est pas échappé. Vérifions, semble toujours déclencher. C' est une grosse chose avec travailler avec un Navs, c'est comme essayer de le réparer. Oh, essayez de le modifier, mais essayez toujours de le vérifier pour voir si cela fonctionne toujours parce que vous pouvez finir par le casser assez facilement. La prochaine chose que nous voulons faire, c'est que je veux que cela aille à droite, ce qui est étonnamment difficile. Regardons un peu ici. Je vais saisir mon bouton Inspecter ici, et je vais passer le vol stationnaire. J' essaie de trouver où ça, parce que tu vois, je ne veux pas juste ce truc. Je veux tout le morceau et ça ressemble à ça. C' est ce qu'on appelle l'effondrement de Navbar. Ce que je veux, déplacer ma souris, ça semble être à droite. Navbar-effondrement, à l'intérieur de cela semble être, qui semble fonctionner. Allons vérifier ça. Navbar-effondrement il est là. Il court à, où est-ce qu'il va ? Jusqu' à la ligne 48. Tout ça, ce que je veux faire. Est jeter un peu un coup d'oeil. Un ordre à droite, semble être une solution facile. Trop facile, pas moyen. Non, ça n'a pas marché. Oh, c'est ça ? Il l'a fait. Regarde ça. Mon premier inkling serait d'aimer ne pas les chercher parce que je suis je n'utilise pas Bootstrap pour chaque build. Je suis comme « Ok », alors je vais aller chercher. Je cherche peut-être à ajouter du texte. Ensuite, nous avons examiné ce texte. Je sais que cela ne fonctionne pas parce que j'ai déjà essayé quand je me préparais pour ce cours, je pourrais commencer à utiliser flexbox. Peut-être qu'on utilise le flex dans, et je joue avec au début et il a juste trébuché comme, hé, et toi ? Tu as l'air bien. Jetez un coup d'œil à ce qu'il y a dedans avant de commencer à essayer de réorganiser les choses. Bon vieux Bootstrap ont rendu ce super facile. Je dois sortir de l'habitude de le forcer à faire des choses avec mon CSS personnalisé. C' est tout pour cette vidéo. Nous avons traversé la navigation choisie. Au moins un Navbar qui fonctionne pour nous. Le Navbar comprend des parties de Nav, petits morceaux de Nav à l'intérieur de celui-ci. Que dans votre documentation, si vous regardez ici et que vous allez, cela semble vraiment déroutant car il y a beaucoup de choses à cela. Regarde plein de trucs. Il peut le lire, bien sûr, vous devriez, mais, je suppose que nous utilisons Bootstrap pour éviter d'essayer de lire et de faire beaucoup de cela nous-mêmes. Jetez un de ces proches et faites un peu d'ajustement, eh bien, des choses de couleur et quelques autres bits. Mais, ouais, les navigations, pas terriblement difficiles et vraiment super faciles quand on considère combien de temps il nous a fallu pour faire ce petit Nav bosses ici. Regardez la liste déroulante fonctionne juste et il a une belle petite boîte autour et a une liste déroulante à l'intérieur d'ici. Merci Bootstrap. Oh, encore une chose avant de partir, assure-toi de le changer pour Margin-droite, ou Margin-gauche même. C' est l'ordre laissé, donc ça pousse jusqu'ici. Tout le chemin vers la droite. Le courrier électronique est ce dont nous avons besoin dans ce cas. Prochaine vidéo. 117. Ajoutez votre propre logo au menu de navigation du site web bootstrap 4 1: Salut là. Dans cette vidéo, nous allons aller de moi qui ressemble à ça pour moi comme ça. Il va bien correspondre à notre marque, nous allons passer par nos devoirs où nous enlevons aussi la couleur de fond. Tu es prêt ? Je suis prêt, faisons-le. Avant de commencer, nous allons déterminer ce qui est arrivé à l'arrière-plan. Comment on s'en débarrasse ? Comment l'as-tu fait ? Tant que c'est parti, c'est tout ce qui compte vraiment, je vais te montrer la façon dont je l'ai fait. Je vais cliquer avec le bouton droit de la souris et aller inspecter et jeter un coup d'oeil par ici. Rappelez-vous en utilisant mon petit élément de sélection, je peux cliquer sur ce que je pense est tout le nerf, il se sent comme cette chose. Vous pouvez voir qu'il y a quelque chose ici appelé lumière de fond, lui donnant sa couleur de fond et je peux allumer et éteindre. C' est juste un truc. Une fois que vous vous habituez à utiliser les outils Google Chrome, qui peut être vraiment pratique juste pour comprendre des choses. Qu'est-ce que ça dit ? Ce n'est pas très bon pour me dire où il est, il fait référence au SSS, référençant le fichier CSS, qui n'est pas ce que nous utilisons, nous utilisons juste CSS standard. Mais je devrais être capable de chercher ça. BG-light, regarde un peu. En cliquant ici, je peux aller à éditer, trouver et taper bg-light. Il y a deux occasions là et là, je ne sais pas laquelle c'est. Maintenant, vous pouvez aller dans la documentation et déterminer s' il y a une version alpha zéro de celui-ci, ce qui ne l'est pas, ou peut-être créer une classe, attraper bg-light, copier ici. Dans un cours, il dit que l'alpha est zéro pour bg-light, mais cela ne fonctionne pas vraiment non plus. Le moyen le plus simple, est assez simple. Je vais supprimer Bg-light de ce top. Ai-je besoin de supprimer le second ? Vérifions ça. Non, tu y vas. Je le fais parce qu'il y a un fond blanc derrière ce logo ici. Les deux Bg-lights doivent aller parce qu'il faisait un peu sombre. Juste pour que je puisse vous montrer. Il y a un primaire et toutes les autres couleurs que vous pouvez utiliser mais pas transparent, vous venez de vous en débarrasser. Beau travail. Si vous avez une autre façon de le faire, j'aimerais que vous partagiez les commentaires juste pour comprendre, c'est tellement comme, « Hey, j'ai fait ça d'une autre façon et ça a fonctionné. » Pour montrer à ces autres personnes, s'ils trouvent ainsi, d'une manière différente, vous pouvez comparer les notes, plus pour que je puisse voir. Tu trouveras peut-être mieux que moi. La prochaine chose que je veux faire est de personnaliser ces boutons. Je veux garder certains d'entre eux comme mon balisage ici, puisque j'ai un menu déroulant. Jetons un petit coup d'oeil. Tu es bien là, mais trop loin. Depuis ici, j'ai un menu déroulant et juste un bouton simple. Je vais me débarrasser de tout sauf pour la liste déroulante et peut-être celle-là. Nous ne resterons pas désactivés, nous garderons le lien régulier et ce menu déroulant, peut-être ces deux-là parce qu'ils correspondent aux couleurs. Allons les trouver dans le code. On va dire, où en sommes-nous ? La première que je ne veux pas. Séparons tout. C' est ma marque, c'est ma première. C' est le bouton bascule. C' est le menu déroulant, quand il arrive sur mobile, donc nous ne nous débarrassons pas de lui, et tout le reste est la navigation. Celle-là, nous cherchons à cette liste. Ces articles et tous ces LIS sont les boutons. C' est un bouton LI, c'est un bouton, c'est un très gros bouton. Le LI commence là et vous pouvez voir qu'il se termine tout le chemin en bas, et c'est notre menu déroulant. Vous voulez le garder et celui juste en face. Débarrassons-nous de ce premier. Ce LI que nous avons, ce LI gardera, et ce LI dont nous nous débarrassons. Est juste de vous montrer pour les instances et nous voulons juste ceux qui sont juste des boutons bruts réguliers. Non activés ou masqués ou désactivés. Espérons que maintenant, cela fonctionne toujours, listes déroulantes fonctionnent pour améliorer ses propres couleurs. La navigation fait des trucs bizarres ici, on va arranger ça. 118. Ajoutez votre propre logo au menu de navigation du site web bootstrap 4: Bonjour là. Nous allons prendre notre texte ennuyeux de barre de navigation, et le transformer en un logo un peu grossier. Nous allons aller de l'avant et le faire maintenant dans Bootstrap 4 en utilisant notre nav et faire quelque chose appelé marque nav. D'accord. Donc, le moment est juste quelques simples ou textes que nous avons copiés lorsque nous avons d'abord regroupé sur ce site. Donc, nous voulons aller trouver quelque chose qui s'appelle la marque. Donc, sous la documentation, sous les composants, navbar, nous voulons essayer de faire défiler vers le bas jusqu'à ce que nous trouvons la marque. Il y a différentes façons de le mettre en œuvre. C'est à vous de voir. Vous méritez peut-être un texte, et tout ce que vous devez faire maintenant est d'entrer et dans VS Code, allez changer le mot navbar en yaourt de Dan. Tu verras que ça va changer. D'accord ? Ils pourraient être super pour toi. Vous pouvez choisir une police différente. Tu vois, je vais styliser le nom de la marque. Vous allez probablement styler celui-ci ici, marque navbar, et choisir une nouvelle police. Vous utiliseriez probablement le visage sourcil que nous avons utilisé, et vous pourriez être assez heureux avec cela, car ils sont particulièrement utiles si le client n'a pas encore obtenu de logo. C' est donc une nouvelle construction et ils n'ont tout simplement pas encore de marque. Vous pouvez leur donner du texte stylisé à partir des polices Google. Ce que nous voulons faire est une image, et vous pouvez obtenir une image avec du texte, avec cette vieille image. Nous allons prendre tout ça, copier, et nous allons remplacer ce que nous avons. Nous avons une barre de navigation, juste une marque de navbar vraiment simple, et il semble s'arrêter là. Le toggler est éteint tourner tourner sur une chose hors de [inaudible] Je vais juste mettre là dedans. Joli. Qu'avons-nous besoin de changer ? Regardons un peu. Il va probablement charger le logo Bootstrap, éventuellement. Il ne veut pas. Nous n'avons pas ça sur notre système. Laissez-nous regarder dans le disque dur de ou au moins le site de bootstrap. Ce que nous voulons faire est de l'éteindre pour notre propre SVG. Je vais supprimer tout cela, et je vais enregistrer à l'intérieur des images. Donc, il ya leur logo est à l'intérieur dan's_meat_yorgurt_svg brut. Regardons un peu. Il est là-dedans. Il est forcé d'être de taille à partir de ce que nous avons copié et collé. Maintenant, vous obtiendrez des graphiques, des SVG qui n'ont pas d'informations de taille en eux. Vous devrez leur donner une largeur et une hauteur. mien fait parce qu'il vient de XD, ou Illustrator, ou Photoshop. Dans le code, ils donnent la taille à l'intérieur d'eux. Il n'y a pas [inaudible] dire comme une icône. [ inaudible] génial. Ils ne l'ont pas et nous devons lui donner une taille physique. Pour celui-là, nous n'avons pas à le faire. Donc, nous allons regarder la taille dont je voulais qu'elle provienne. C' est probablement une grande apparence maintenant, mais c'est la taille que j'ai faite et je m'y accroche. D' autres choses que vous devez faire en particulier pour notre logo, c'est que vous devez vraiment mettre quelques vieilles prises qui décrivent vraiment ce que c'est. Voici le logo de la compagnie de yogourt de la viande de Dan . Bien. SEO, trucs sur les moteurs de recherche, et nous avons une image, nous avons une taille. En ce moment et ça va à Href. Une fois que nous aurons fait cela, il sera indexé au HTML, donc il revient à la maison. nous avons une page d'accueil en ce moment, et c'est tout. Eh bien, c'est tout. Je veux dire un peu sur les devoirs. Ce rembourrage en haut semble bien fonctionner tel quel. Ce que je voulais faire, c'est que je voudrais passer par et supprimer l'arrière-plan. Je vais le définir comme un petit projet pour vous, juste pas un projet de classe complet avec un doc Word autant que vous pouvez vous débarrasser de l'arrière-plan. Dans la prochaine vidéo, avant de commencer, je vais vous montrer comment le faire. Mais en attendant, après cette vidéo, voyez si vous pouvez lui donner l'arrière-plan. Je voulais juste voir à travers. Pour que je puisse voir jusqu'à l'arrière-plan. Donne-le un coup, et je te verrai dans la prochaine vidéo. 119. Comment modifier les styles par défaut pour le nav de Bootstrap 4: Salut là. Dans cette vidéo, nous allons passer du menu qui ressemble à ceci, pour être comme ça. Ça va bien correspondre à notre maquette. Nous allons passer par nos devoirs, où nous avons enlevé la couleur de fond aussi. Tu es prêt ? Je suis prêt. Faisons-le. Avant de commencer, nous allons déterminer ce qui est arrivé à l'arrière-plan ? Comment on s'en débarrasse ? Comment l'as-tu fait ? Tant que c'est parti, c'est tout ce qui compte vraiment. Je vais te montrer la façon dont je l'ai fait. Maintenant, je vais faire un clic droit, aller inspecter et jeter un coup d'oeil par ici. Rappelez-vous d'utiliser mon petit élément select. Je peux cliquer sur ce que je pense être tout le nerf qui se sent comme ça. Vous pouvez voir qu'il y a quelque chose ici appelé lumière de fond, lui donnant sa couleur de fond, et je peux allumer et éteindre. C' est juste un truc. Une fois que vous vous habituez à utiliser les outils Google Chrome, il peut être vraiment pratique juste pour comprendre des choses. Qu' est-ce que ça dit ? Ce n'est pas très bon pour me dire où c'est. Il fait référence au fichier CSS, qui n'est pas ce que nous utilisons, nous utilisons simplement CSS standard, mais je devrais pouvoir simplement rechercher cela. BG-light, regardons un peu. En cliquant ici, je peux aller à éditer, trouver et taper bg-light. Il y a deux occasions là-bas et là. Je ne suis pas sûr de laquelle c'est. Maintenant, vous pouvez aller dans la documentation et déterminer s' il y a une version zéro d'Alpha de celui-ci, ce qui n'est pas, ou peut-être créer une classe, attraper bg-light, copier ici. En dehors de la classe, il dit que l'Alpha est zéro pour bg-light, mais cela ne fonctionne pas vraiment non plus. Le moyen le plus simple est assez simple. Accrochez et supprimez la lumière bg-light de ce haut. Ai-je besoin de supprimer le second ? Vérifions ça. Non. Alors voilà. Que dois-je faire parce que c'est un fond blanc derrière ce logo ici. Donc, les deux feux doivent partir. Il y a un bg-dark et juste pour que vous puissiez vous montrer. Il y a une primaire et toutes sortes d'autres couleurs que vous pouvez utiliser, mais pas transparent, vous venez de vous en débarrasser. Beau travail. Maintenant, si vous avez une autre façon de le faire, j'aimerais que vous partagiez les commentaires juste pour comprendre juste pour dire que, hé, je l'ai fait de l'autre façon et ça a fonctionné. Tout comme il y a d'autres personnes, s'ils trouvent leur chemin, d'une manière différente, vous pouvez comparer les notes plus, donc je peux voir que vous pourriez trouver un meilleur moyen que moi de le faire. Maintenant, la prochaine chose que je veux faire est de personnaliser ces boutons. Je veux garder certains d'entre eux, comme ma maquette dit que j'ai un menu déroulant. Regardons un peu. Zoom sur ce que vous trouvez ? Vous pouvez voir que j'ai un menu déroulant et juste un simple bouton. Je vais me débarrasser de tout sauf pour la liste déroulante et peut-être celle-là. Nous ne resterons pas désactivés, nous garderons le lien régulier et c'est une liste déroulante, peut-être ces deux-là parce qu'ils correspondent aux couleurs. Allons les trouver dans le code. Je vais rendre ça un peu plus grand maintenant. On va dire, où en sommes-nous ? La première que je ne veux pas, alors séparons tout. C' est ma marque. C'est mon premier. C' est le bouton bascule, c'est le menu déroulant, quand il arrive sur mobile, donc nous ne voulons pas nous en débarrasser, et tout le reste est la navigation. Celle-ci ici. Nous cherchons à cette liste, éléments, et tous ces autres boutons lis'. C' est un bouton, Li, c'est un bouton. C' est un très gros bouton. Le li commence là et vous pouvez voir qu'il se termine tout le chemin en bas ici. C'est notre menu déroulant. Je veux les garder et celui juste en face. Débarrassons-nous de la première. Ce que nous avons ce que nous garderons, et ce que nous nous débarrasserons. Il est juste de vous montrer pour les instances, et nous voulons juste ceux qui sont juste réguliers tous les boutons, pas activés ou cachés ou désactivés. Je pense que ça marche toujours. listes déroulantes travaillent en quelque sorte ici, c'est leurs propres couleurs. La navigation fait des trucs bizarres ici, on va arranger ça, mais ça marche bien. Partie suivante. Je vais fermer ma recherche et je veux, voyez-vous, j'ai remarqué que j'ai utilisé le même style que sur celui-ci, comme sur celui-ci. Je vais aller voler le style et l'appliquer. J' ai fait un cours plus tôt sur appelé, comment ça s'appelait ? Bouton lumière contour, c' était la chose que nous utilisons pour le rendre plus large à l'extérieur. Allons trouver ça et réutilisons-le. C' était dans le jumbotron. C' était un bouton de classe ici et nous avons ajouté cette chose. Je sais que si je prends juste cette partie du style, souvent cela ne fonctionne pas, il doit être appelé bouton et le style qu'il tourne autour. Je vais le copier et allons regarder un peu, parce que la partie bouton de cette classe lui donne sa plénitude et c'est la clickabilité, et c'est juste la ligne autour de l'extérieur. Allons l'attraper. Trouvons le bouton déroulant. Maintenant, où est-ce que ça va ? Il y a un ul qui est toute la navigation. Il y a ces éléments de liste, comme de petites pièces, et où est-ce que ça va ? Soit ça va aller sur le Li, soit sur l'étiquette A, l'un ou l'autre. Mettez-le ici et voyez comment ça se passe là. Vérifie ça. Travail parfait. C' est celui-là et faisons-le à l'autre, celui-là, bouton lumineux, sympa. Je vais changer le texte dans ceux-ci, ils sont en fait le mauvais chemin donc je veux le li pour le menu déroulant, tout cela, je le veux au-dessus de cela. Je pourrais les séparer juste parce que ça devient un peu déroutant. C' est peut-être juste moi. J'ai besoin de ces lacunes visuelles. Déposez d'abord, puis cet autre et les deux mots sont saveurs et contact. Ici, nous allons le changer de liste déroulante, c'est le mot aux saveurs, et, où est celui-ci ? Contact. Dans le menu déroulant, ce sont les options pour la liste déroulante, donc nous allons devoir mettre en différentes saveurs. Il y a une saveur de jambon, grossier. Il y a une saveur de bœuf. Tu as l'idée, non ? Oh, c'est intéressant. Cette classe de diviseurs, regardons un peu la liste déroulante. On a besoin du séparateur ? Vous voyez cette chose ici, vous pouvez visiblement voir l'utilisation du diviseur, comme des cigarettes, ces gars pour peut-être que celui-là est, je ne sais pas, autre. Je vais me débarrasser de ça, séparateur liste déroulante plus froide, et juste avoir ces, nous allons avoir du poulet. Encore une fois, prenez une viande de plus. J' essayais de penser à un, poulet, et aux autres groupes de viande. Oh, je ferais du poisson. Je pense que ça pourrait être le pire. Vieux arôme de poisson. Jetons un coup d'oeil au menu. J'ai l'air bien. Quelques choses que je veux faire est que je veux faire la tique blanche et mettre quelques lacunes entre eux. Rendre les tiques blanches. Bizarrement avant, c'était très bien d'être blanc. Tu te rappelles ici, pourquoi ils ne sont pas devenus blancs ? C' est parce que la navigation essaie de faire beaucoup d'autres choses en même temps. Cliquons dessus. En fait, nous allons cliquer sur l'élément inspecter à l'extrême gauche ici. Passons au-dessus de ça. Essayons d'obtenir le, vous pouvez voir que je veux que vous voulez cliquer sur les tiques à l'intérieur, parce que je veux comprendre ce qui est peut-être le contrôler. Qu' est-ce qui le contrôle ? Je pense que ici sur le C est si important, la lumière de la barre de navigation. Je suis juste à la recherche de mots clés, parce que le nom de la barre de navigation ne va probablement pas le faire la lumière de la barre de navigation semble assez bon. Cool. Allons essayer d'éteindre la lumière de la barre de navigation. Navbar, où est-il ? Le haut. Lampe Navbar. Essayons le noir. Ça marche. Je peux vivre avec ça. L' autre chose cool à propos de navbar dark est qu'il change, pas assez, il est encore trop léger. n'y a pas, Navbar blanc, ce qui serait vraiment utile. Donne-moi juste Navbar noir et blanc, pas cette moitié entre les deux. Tu peux voir quand ça devient bleu, ça dit, je ne peux pas trouver ce cours fou que tu fais. Donc nous allons utiliser Navbar, nous allons mettre dans l'obscurité et nous allons l'ajuster un peu. Nous voulons ajuster le texte à l'intérieur. L'extérieur semble bien. Est-ce que ça marche maintenant ? Navbar sombre, il est là. On va rendre ce texte blanc. Comment on fait ça ? Nous devons ajouter, nous l'avons fait plus tôt, peut-être que nous trouvons une option de texte blanc. Je ne me souviens pas de ce qu'on a utilisé avant. Mais passons à travers et appliquons-le. Il y a mon li pour le menu déroulant. Essayons de le coller ici comme on l'a fait avant. Allons au texte à l'intérieur de ce li va être blanc. C' est bon d'y aller. Regarde ça, ça n'a pas marché. Donc exactement la même classe. Il y a parfois que tu es juste comme, que ça n'a pas de sens. Tu l'essaies sur une autre classe, tu vas bien. Placez-le sur l'étiquette A, dans ce cas, c'est exactement ce qu'il voulait. Nous faisons la même chose pour cet autre élément de liste, celui-ci ici. Sur la balise A, je vais dire qu'il y a une classe appliquée. Donc c'est bon, ça prend du blanc. Joli. La prochaine chose est probablement ajouter quelques caresses entre ces deux, et bien fusionner entre eux et peut-être les rendre de la même taille. Imaginez assez facile. Regardons notre code. Vous obtenez la même chose que moi comme un homme qui regarde, la barre de navigation est si grande, et parce que je ne l'ai pas construit, ça devient invisible. Peut-être que ce pourrait être une très bonne chance d'aller en fait cela, parce que je finis par le faire, mais je vais ajouter quelques commentaires. Rappelez-vous la commande barre oblique avant ou barre oblique de contrôle sur un PC, et nous allons mettre dans le bouton. Je vais mettre dans la liste déroulante des boutons. Ici, je vais mettre dans le bouton de celui-ci normal. Est-ce utile ? C'est utile pour moi. Ce que nous voulons faire, c'est ajouter, où l'ajouter ? Peut-être à cet élément de liste. Essayons ça. Allons faire la marge droite MR et nous en ferons quatre. Jetons un coup d'oeil. Ça n'a pas fonctionné. Marge droite 4, je me sens comme il devrait, a fait. Wow, rafraîchis. Normalement, vous n'avez pas besoin d'actualiser parce que ce code VS, mais n'ayez pas peur de cliquer sur le bouton Actualiser. Travaillez pour moi, juste dedans. Nous avons notre liste déroulante. Tu remarqueras que j'ai eu ça comme ça, parce que cette chose me rend folle. Je ne sais pas pourquoi quand j'enseigne et ça continue, très distrayant. Je veux les faire de la même largeur, donc nous allons forcer dans une largeur, nous allons l'essayer ici pour le li que nous allons dire, ulira, pas dans cette classe, nous allons utiliser un style. Le style va être une largeur. Tu es genre, pourquoi fais-tu ça ici, Dan, et tu es genre, c'est tout à fait vrai. Je devrais juste créer un style ici qui a une largeur. Mais je suppose que je veux vous habituer à ajouter ici aussi parce que Bootstrap semble aimer mettre beaucoup de styles en ligne sont en fait sur le graphique lui-même. Ça n'a pas vraiment d'importance. Cette largeur de peut-être 200 pixels, jetons un coup d'oeil. Peut-être un peu trop. Cent cinquante, ça fonctionne bien pour moi. Non, encore trop grand. Allons-y 110, 120 trucs que je devrais organiser avant de commencer à enregistrer, non ? Allez, Dan. Je ferais la même chose pour ce bouton ici. Attrape tout. Où est notre deuxième bouton ? Oh regarde, commentaire pratique. On est bons. Maintenant, ils ont la même largeur. Il a l'air bien, descend à Mobile. J' ai un menu déroulant. Il apparaît du mauvais côté. On s'en occupera dans la prochaine vidéo, et on sortira aussi frapper pour être collants. C' est tout pour le moment. Passons à la prochaine vidéo. 120. Comment ajouter une navigation bootstrap 4 fixe et collante à votre site Web ?: Salut là. Dans cette vidéo, nous allons faire en sorte que notre navigation soit collante. Quand on fait défiler, il reste toujours en haut. Aussi, nous allons résoudre ce petit problème là où nous sommes sur mobile, et c'est fini sur ce côté gauche ici. On va le déplacer pour qu'il s'aligne bien sur la droite. Rappelez-vous plus tôt dans le cours, nous sommes allés et avons fixé notre en-tête au sommet. Nous avons fait une classe qui a dit position fixe sur le nav et cela fonctionnera, mais il y a des trucs fantaisie que bootstrap a obtenu. trouver est toujours la partie amusante et vous dites : « Où est votre cap fixe ? » La position fixe semble bonne. Celle-là, barre de navigation corrigée. Regarde ça, c'est bon sur celui-là. Vous vous retrouvez à cette page d'exemples et vous êtes comme si ce n'était pas tout à fait ce que je voulais, revenez à la documentation. Laisse chercher fixe à nouveau. Je suppose que je veux m'assurer que quand vous faites, vous commencez à avoir l'impression que je fais ça correctement ? Tu es comme oui. Il est juste de travailler sur ce que bootstrap ont fait. Fixed-top soit parfait. Il suffit d'ajouter cela à la div. Quel div ? Probablement la première. Ça enveloppe tout. Ma navigation, permet de l'éditer ici. Colle-le et tu es comme le bingo. Travail fait, travaille. Il est fixé au sommet mais il a cassé ma navigation. Probablement bootstrap étant super, ils ont autre chose. Le collant est le mot. Jetons un coup d'oeil. Positions collantes, collantes, c'est juste en dessous où nous étions. Il y a fixed-top et juste un peu en dessous, est sticky-top. On y va. Copiez et essayons sticky-top au lieu de fixed-top. Donnons ça un moyen, et on y va. Vous décidez si vous aimez notre fixed-top, surtout parce qu'il est de voir à travers et de couvrir les choses jusqu'à vous. Mais c'est comme ça que vous corrigez en haut, la navigation sous forme de bootstrap. La dernière chose que je veux faire avant de partir, c'est que ça m'a ennuyé. Il y a ce menu déroulant et il apparaît tout le chemin par ici à gauche et vous dites  : « Pourquoi est-ce ? Est-ce que je l'ai cassé ? » Quand je regardais, je me disais : « Je peux casser ça ? » Ensuite, j'ai dû regarder en arrière notre ancien quand nous venons installer pour la première fois et de l'avoir commencé. Examinons celui-ci et en fait c'est une valeur par défaut de bootstrap. C' est ainsi qu'il est sorti de la boîte et vous pouvez voir qu'il pousse juste ici avec une couleur de fond que nous avons enlevée. C' est la valeur par défaut, comment le réparer. J' ai passé un bon morceau à attacher pour réparer ça. J' ai essayé de travailler alors j'ai essayé d'utiliser la marge parce que nous avons fait auto margin-left peut-être que nous l'avons remplacé pour le faire aller tout le chemin sur le côté. Mais il s'avère que cela ne fonctionne que pour et rappelez-vous que nous l'avons fait ici, nous avons dit sur le menu déroulant ul, nous avons dit qu'il était sur la droite, et signifie que cela ressemble à ceci. Peut-être que c'était sauter contre le côté. Nous avons ajusté cela et vous supposeriez qu'il aurait corrigé les boutons aussi bien mais non. Ils sont toujours là quand il est sur mobile tout le chemin par ici. J' ai essayé quelques choses. J' ai essayé le texte à gauche, j'ai essayé d'appliquer le ml-auto à quelques éléments différents ici, n'a toujours pas pu le résoudre. Finalement, j'ai trouvé ça. Il existe une option pour flotter des éléments. Car ce n'est pas une vieille école, mais une façon différente d'aligner gauche et droite. Je vais faire flotter et je vais avoir un regard utilitaires sous flotteur. Vous pouvez voir float-gauche, float-droite, float-none, et les déplace vers la gauche ou la droite. Vous pouvez le faire pour différentes requêtes multimédias. Je veux qu'il flotte au bon endroit. Donnons ça un coup de pouce, et mettons-le dans notre code. Où est-ce que ça va ? Très bon point. Jetons un petit coup d'oeil à l'inspection à l'intérieur de Chrome. Allons faire tomber ça. Permet d'utiliser cette petite option pour inspecter l'élément et nous cherchons le conteneur. Nous ne voulons pas les boutons eux-mêmes. On déplace la souris jusqu'à ce qu'on trouve quelque chose qui ressemble au conteneur. Je vais cliquer dessus, puis ici, je vais juste le coller à ça et voir ce qui se passe. Le même ul. Où est-il ? La classe ul, nous allons l'ajouter aussi et voir comment cela se passe. Drop-down, hé, gentil. Il est poussé un peu trop loin. Mon logo est trop grand. Je dois le rendre plus petit pour que ce nav ait ce gros écart entre ici, mais c'est quelque chose que je peux vous laisser réparer, rendre le logo plus petit. Travail déroulant, tout fonctionne. C' est charmant. Passé à la vidéo suivante. 121. Ajouter une image pleine col dans bootstrap 4 et colorer l'arrière-plan de la colonne: Salut là. Dans cette vidéo, nous allons faire ce message fondateur. Sur le côté gauche, nous avons une image qui va nous aider à retrouver notre connaissance des images réactives, ce que nous avons fait il y a un moment. Pour résumer cela, nous allons construire cette disposition d'une ligne, deux colonnes ici. Il va diviser notre mobile en deux lignes. Géant moi, message du fondateur, nous allons ajouter du rembourrage. Qu'est-ce qu'on va faire d'autre ? Nous allons l'amener au centre dans la boîte et c'est un autre résumé de tous les éléments de Flexbox qui se concentrent au milieu comme nous l'avons fait il y a beaucoup, chemin, il y a beaucoup de temps dans le cours. Très bien, allons-y et mettons ce message très cryptique de notre beau fondateur ici. Allons le faire. C' est la partie que je veux ajouter ce message des fondateurs et les parties uniques de celui-ci est que j'ai des coins arrondis pour aucune raison autre que je veux vous montrer comment faire cela. Nous allons faire deux colonnes séparées parce que je veux qu'il se décompose sur mobile pour être au-dessus de l'autre. Bon, alors regardons faire ça. Dans le code VS, ça va passer sous mon Jumbotron, mais avant le carrousel et moi allons mettre ça, ça va être mon message des fondateurs. Qu' est-ce que je veux ? Je veux au moins une rangée, et à l'intérieur de ça je veux une colonne, mais je veux deux d'entre eux. Je veux la première colonne. Parce qu'il est mobile d'abord, nous devons dire, je veux qu'il se casse sur ses propres lignes, donc je veux qu'il soit une pleine 12 colonnes de large pour mobile. Mais plus tard, quand il arrive à moyen, je veux qu'il soit, pas sûr, qu'est-ce que c'est ? A propos de ça, disons quatre et huit, alors disons quatre. Celle-ci va être un col de MD. Ça va aller jusqu'à huit. Maintenant, nous allons juste mettre du texte de base ici, juste pour que nous puissions voir ce qui se passe. Pour continuer à tester pendant que nous travaillons. Où est-il ? C'est là, test. Vers le bas vers le mobile avec l'échantillon. Rafraîchir. Bizarre. Je vais le laisser dans le cours, mais normalement il se rafraîchit bien. Je n'ai pas besoin de cliquer sur Actualiser. Peut-être parce que j'ai ouvert les tests. Peut-être que le fait d'avoir les outils de développement et le truc d'inspection qui se passe bloque le code. On dirait que ça marche. Il est sur quatre et je descends au mobile et il devrait sauter vers le bas pour être au-dessus de l'autre, 12 colonnes de large. D' accord, la prochaine chose que je veux faire est d'ajouter un peu de ce texte et ensuite nous allons ajouter l'image, en fait faire l'image d'abord. Dans celui-ci, nous allons faire nos doux images réactives. Je vais me débarrasser de ça. Celle-ci ici, c'est la première boîte. On va mettre un IMG. Et ça va être dans notre dossier d'images, et c'est la photo de Dan. Nous voulons y ajouter quelques classes. Rappelez-vous que celui qui dit img-responsive était en fait appelé img-fluid, alt-text. Ça va être Daniel Walter Scott, fondateur du yogourt à la viande. Mot clé farce maintenant, mais j'espère. Regardons un peu ça. Vérifions ça. Il remplit la colonne très bien et remplit la colonne ici très bien. Je veux aller au mobile. Il se résume à une taille mobile réactive. C' est un peu grand, mais faisons-le pleine largeur. Ajoutons le texte à cette partie. Ça va être un H2 et un texte P, An H2, parce que j'ai déjà un H1, ça va juste dire, « Message de notre fondateur ». Un texto bizarre qui se passe là-bas. Cool, et je veux du texte p et le P, Je voudrais avoir un peu de lorem d'environ 60. Joli. Jetons un petit coup d'oeil. Il est là, mobile et il est là-dedans à notre vue de bureau. Ce que je veux faire, c'est que je ne veux pas qu'il ait cet arrière-plan clair, je veux mettre une couleur d'arrière-plan parce que je veux qu'il soit blanc et aussi que je voulais vous montrer comment ajouter une couleur d'arrière-plan. On n'a pas mis notre propre classe ici. En fait, nous sommes restés dans notre classe. Où est-il ? Il y a notre rangée et il est notre colonne, et c'est cette colonne ici que je veux faire un fond blanc. Si j'allais ajouter un peu de style au col 12 dans ce cas, j'irais ici, faire un style pour ça. Maintenant, le problème est, rappelez-vous, je n'aime pas coiffer les trucs Bootstrap existants, donc ce que je ferais probablement est de faire sa propre envelopper une étiquette et de l'insérer ici. J' envelopperais avec une abréviation, qui est la première pour moi et je dirais, faisons, une classe de fondateurs. Ensuite, j'irais coiffer cette classe de fondateurs pour avoir un fond de blanc. Mais, je sais que Bootstrap a probablement une classe d'arrière-plan et dans ce cas ce sera BG de blanc et ce devrait être tout ce que j'ai besoin de faire. Ils ont un BG, un fond de blanc, noir, clair sombre, primaire, danger. C' est quelques autres couleurs que vous pouvez utiliser. Ajoutons un peu de rembourrage tout le chemin également. Allons là-dedans et disons que cette chose ici a un fond de blanc, mais a aussi un rembourrage. Souviens-toi si je ne mets pas haut, bas , gauche à droite, ça suppose que tous les côtés, je vais le mettre au maximum et on y va. Il y a un joli rembourrage autour. En fait, ce que nous pourrions faire est d'essayer de l'aligner au centre de la colonne elle-même. Comment on fait ça ? On l'a fait avec Flex, rappelez-vous la dernière fois. Si je fais un centre, comme chercher aligner. Différents types d'alignements, verticaux est ce que nous voulons. Jetons un coup d'oeil à ça. Ça ne va pas marcher. Align-milieu fonctionne parfaitement pour les objets en ligne. Il dit que c'est ici, il dit, fonctionne très bien pour inline, inline-block. Mais pas nos éléments de bloc, qui est notre H2 et notre étiquette P. Nous devons aller à l'option flexible de le faire et ici, il y en a un tas. Je fais défiler jusqu'à la petite icône. Eh bien, le petit exemple mentionne ce que je veux, c'est celui que je veux. Je suppose que c'est le super d-flex. aligner le centre de l'élément Joli. Nous n'avons pas besoin de faire le flex d'affichage car cela est enveloppé dans cette classe appelée d-flex. Nous nous souvenons que aligner les éléments à partir de plus tôt et cela va fonctionner partiellement. Jetons un coup d'oeil. Ils sont tous centrés, mais ces gars sont écrasés parce que Flex, rappelez-vous, essaie de les aligner côte à côte. La façon de se déplacer c'est de les mettre sur leur propre petit emballage. Ces gars ici, fab. Souvenez-vous que Flexbox veut les mettre côte à côte. Si nous les mettons dans un div, nous les enveloppons dans un seul div. Il est protégé du parent, parce que ça fera deux étapes de profondeur. Envelopper tout cela dans leur propre étiquette P. « Command Shift P » sur un Mac, « control shift P » sur un PC. Nous allons taper wrap et trouver wrap avec l'abréviation et nous allons mettre, nous pourrions faire une classe, mais nous allons juste utiliser la balise section parce que, je n'ai pas besoin de le styliser du tout. Je vais juste utiliser la section. C'est une belle jetée. Whoop. Tu dois vraiment appuyer sur Entrée sur ça. Sinon, ça ne marche pas. Essayons encore une fois. Je vais demander à l'éditeur d'accélérer ce peu. D' accord, en fait, j'ai frappé retour. Maintenant, parce qu'il y en a dans un joli petit emballage protégé, cela devrait fonctionner. Passons à la prochaine vidéo. 122. Comment ajouter une bordure et des coins arrondis à une boîte dans Bootstrap ?: Salut là. Dans cette vidéo, nous allons regarder l'ajout de bordures. On va mettre une bordure noire autour, mais pas de frontière là-dessus. Nous allons ajouter des coins arrondis d'un côté, coins carrés de l'autre. C' est la frontière et le coin arrondi extravagance. Nous voulons faire quelques choses. J' ai ajouté une bordure noire autour de l'extérieur de ceci juste pour que je puisse faire dans le tutoriel parce que vous devez travailler sur les frontières. J' ai également ajouté des coins arrondis que je ne voulais pas vraiment simplement les ajouter au tutoriel. On l'a fait. La chose cool à propos des frontières est qu'il est arrondi d'un côté, mais pas sur ces lacunes internes. Voyons comment le faire maintenant, consultez la documentation. La documentation, ça s'appelle les frontières et c'est cool on va. Ça me semble bien. C' est sous les services publics, les frontières, il y a plein de trucs. Tu peux dire : « Border, juste le haut ou mettre une bordure autour de tout ça. » Il y a aussi une bordure couleurs. Donc je veux mettre une frontière et ensuite c'est un bon doc frontière. Les deux vont aller sur ma boîte à cocher. Allons à VS Code. Ajoutez-le à cette classe ici. Eh bien, cette div a plein de choses qui se passent ici maintenant. Voyons si ça marche. Succès. On a une doublure noire à l'extérieur. Regardons les parties arrondies, devraient être dans le même bit. Nous faisons défiler vers le bas, nous allons à la frontière rayon. Vous avez deux options. Vous avez soit juste un peu de cercle arrondi ou plein afin que vous puissiez décider si vous voulez arrondir, ce qui est juste nos coins arrondis, ou vous pouvez faire un cercle arrondi. En fait, ça en fait un cercle complet. Il y a une autre pilule appelée pilule, qui fait cela commence mais laisse la fin longue et le zéro arrondi, vous n'utilisez pas si l'un des composants a un tour par défaut, vous pouvez l'éteindre en le rendant arrondi à zéro. Vous avez deux tailles pour ces coins arrondis. Ils ont l'air exactement pareil. Grandes et petites, pas très grandes différences. L' autre chose est, rappelez-vous comment nous avons fait mon arrondi à droite et à gauche, donc nous allons commencer par la première boîte, qui serait arrondie à gauche. Maintenant, on a joué l'autre à toute la colonne pour la seconde ici. Cela ne fonctionne pas dans ce cas parce que nous avons cette image, nous voulons l'appliquer autour de l'image, pas la classe réelle. Je vais te montrer ce que je veux dire. Nous devons d'abord dire que c'est une frontière, n'oubliez pas cette partie, et nous devons dire, « A droite arrondie ou à gauche arrondie » Cela ne fonctionnera que partiellement. Jetons un coup d'oeil. Parce qu'il met un autour du bord de la colonne, ce n'est pas ce que je veux. Je veux le mettre autour de cette image pour que les mêmes choses puissent aller exactement sur l'image elle-même. Source d'image, nous avons une classe de liquide, mettez-les tous les deux là et nous y allons. On a arrondi à gauche, carré à droite. Permet d'utiliser la bordure blanche. Mais rendons la frontière aussi grande, ce qui ne change pas de façon significative, mais la voilà. Enfin, on lui donne une doublure blanche à l'extérieur. Ce n'est pas ce que je veux donc débarrassons de la valeur par défaut. Ici, regardons, une bordure donc pas de couleur de bordure parce que je ne veux pas ajouter une couleur que je veux essayer et vous pouvez voir là nous pouvons ajouter un tableau de zéro. Joli. De bons exemples là-haut. Sur mon image ici, frontière grande , faisons la frontière zéro et là vous allez. Il a un peu de coins arrondis sur les bords et il n'y a pas de trait autour. Faisons les frontières sur la droite ici. Donc, au lieu de gauche, on va le faire dans cette colonne ici. Beaucoup de choses se passent, au doc à la frontière. Il va être arrondi à gauche, ça n'a pas fonctionné, ce qui doit être arrondi à droite. Beaux coins arrondis. L' autre chose que je veux faire, c'est m'assurer qu'il est à la frontière, voilà. C' est tout pour notre vidéo passionnante sur les frontières. Nous avons fait des coins arrondis, nous avons ajouté quelques lignes autour de l'extérieur. Passons à la prochaine vidéo. 123. Comment modifier la désactivation du carrousel Bootstrap pour le fondu enchaîné sur mobile: Bonjour là. Dans cette vidéo, nous allons gâcher notre carrousel. Évidemment, on est en train de jouer avec le timing parce qu'il est en train de voler. Nous sommes également en train de jouer avec la transition, sorte que vous pouvez la voir s'estomper plutôt que de glisser. Allons travailler sur ce qu'on fait. Carrousel, moi, toi. Tu m'as ennuyé tout ce cours. J' adore les carousels, pas quand j'enseigne. Ils sont distrayants. Mais nous voulons faire quelques choses. Le premier va être, est de l'éteindre quand il arrive sur mobile. Juste trop petit et ce n'est pas ce que je veux sur les appareils mobiles alors allons-y et désactivons-le. On l'a fait plus tôt, c'est un bon résumé. Comment puis-je désactiver ? On sait que c'est comme n'afficher aucun. Tu te souviens de nos premiers jours ? Ici, sous utilitaires, il y en a un qui s'appelle display. Vous pouvez jeter un oeil à travers. Je trouve cette petite liste très utile. Il vous donne une explication et ensuite ce qu'il faut faire. Caché seulement sur xs, ce qui est ce que je veux, je vais l'éteindre pour tous et le rallumer pour les petits. Dans mon cas, je vais seulement le rallumer pour moyen. Donc je vais attraper tout ça. En fait, je ne veux pas tout ça, on va le coller. Où est mon carrousel ? Voilà, mon pote. Ce que j'aimerais faire, c'est que j'ai des cours, j'ai un toboggan de carrousel en ce moment. Je vais les mettre sans les arrêts complets ou les périodes. Toi, toi et moi voulons que celui-ci s'allume quand il arrive sur le plus gros appareil, comme un iPad. Regardons un peu. C' est là. Il y a le grand curseur, puis il s'éteint à un moment donné. Toujours là, toujours là, parti. Nous l'avons désactivé et l'avons réactivé à cette taille légèrement plus grande. La prochaine chose que je veux faire est que je veux faire le fondu. Jetons un peu un coup d'oeil aux différentes options qui sont disponibles. C' est dans les composants. Où est notre carrousel ? Il est intéressant de jeter un oeil à travers tout cela, expliquant ce qu'il fait, les différents contrôles. Ce que nous voulons faire, c'est que je veux trouver celui avec des légendes, fondu enchaîné. Le carrousel fondu est ce que je veux faire. A quoi ça ressemble ? Oui, ça marche pour moi. Viens ici, mon pote. Nous allons l'ajouter et juste l'éditer après cela. On y va. Espérons qu'on en aura une belle décoloration. Voyez comment ça se passe. Mettons-le à une plus grande taille. Attendez. La mienne n'est pas parfaite. Parce que j'ai de la transparence sur le fond de la mienne, j'ai utilisé des PNG comme ces petites images pour que je puisse voir à travers le fond rayonnant. Si vous avez une image complète, le fondu semble beaucoup plus agréable. Un peu nerveux parce que j'ai un fond transparent mais, beau travail. Je suppose que nous en sommes à un moment où en fait nous savons comment entrer, travailler avec la documentation, comprendre les choses par nous-mêmes maintenant et je suppose que c'est tout le but de tout ça. Nous pouvons passer par toutes les fonctionnalités du carrousel et des cartes de fin et toutes d'entre elles. Je suis juste en train de nous amener à un point où notre maquette semble bien et j'espère battre en vous les différentes techniques pour trouver ce dont vous avez besoin dans Bootstrap et appliquer à votre site Web dans VS Code. Je me rapproche de la fin de ce cours. C'est assez excitant. J' espère que vous vous habituez à cette découverte et à un petit peu de résolution de problèmes. Disons que je veux travailler avec le timing. J' aime bien celui-là. L' intervalle semble plutôt bon. L' intervalle de données semble plutôt bon. Souvenez-vous que c'est en millisecondes, donc c'est 10 secondes, deux secondes. On dirait qu'il doit aller sur quelque chose appelé le carrousel article actif. Prenons cette partie et voyons si nous pouvons éditer parce que par défaut je n'ai aucune idée de ce que c'est. Voyons ce que c'est ici. Peut-être qu'il n'a pas de valeur par défaut. Il y a mon article de carrousel actif, il n'y a pas de défaut. Disons que j'ai mis celui-là, et disons que nous le réduisons à quelque chose de très rapide. Nous allons le faire à tous en fait juste pour prouver un point. Une demi-seconde. Je l'ai mis au mauvais endroit alors mettez-le à l'intérieur de la classe. Regardons juste un peu la documentation. C' est en dehors de la classe. C' est juste une autre propriété. Je vais faire la même chose ici aussi et celui-là. Collez ces gars, et voyons comment ça marche. Regardons notre exemple. On y va. Ça a pris un peu de temps pour y aller. C'est comme, pourquoi tu ne travailles pas ? Vous pouvez voir qu'il les traverse très vite maintenant. Évidemment, vous pouvez changer et être individuel. Vous pourriez avoir des témoignages. Certains d'entre eux sont plus longs que d'autres donc on pourrait être comme une minute et demie, alors que les autres pourraient être gentils et rapides. Tu n'as pas besoin de regarder ça, n'est-ce pas ? Tu comprends ce que je veux dire. Encore une fois, nous approchons de la fin du cours et nous couvrons chaque partie de Bootstrap ou web design en général. J' espère que vous avez une bonne idée de la façon de trouver et de s'attaquer et où les choses doivent aller, ce que vous devez faire vous-même, et ce sur quoi vous pouvez compter pour des choses comme Bootstrap. Passons à l'une des dernières parties où nous commençons à regarder les cartes et à les finir. On se voit dans la vidéo suivante. 124. Comment mettre des cartes Bootstrap sur une ligne à l'aide de groupes de cartes, des decks et des colonnes: Bonjour là. Nous allons prendre nos cartes qui sont toutes empilées les unes sur autres et les faire côte à côte en utilisant des groupes de cartes, des decks de cartes et des colonnes de cartes. D'accord. Faisons-le. Ok, donc notre maquette a nos cartes côte à côte. Mais dans notre version actuelle, quand nous les avons tous jetés plus tôt, regardez, ils sont tous juste au-dessus de l'autre. Donc nous pourrions passer du temps à essayer de les retourner, ou nous pourrions probablement faire D-flex. Rappelez-vous, afficher flex, nous utilisons juste la dernière vidéo. Mais fouillons un peu dans la documentation pour voir ce que nous pouvons faire. Les cartes sous les composants, les cartes ont beaucoup de, comme ceci est probablement le plus long ici sur Bootstrap. Défilement, défilement, défilement, défilement, défilement. Donc je peux comprendre quand tu dis  : « Mec, c'est beaucoup à lire. » Il a une lecture à travers, il y a aussi la navigation qui vient le long. Dans mon cas, ce que je cherche, c'est que je veux vous montrer ces mises en page de cartes. Donc, nous allons d'abord examiner les groupes de cartes. Fondamentalement, si vous ajoutez un groupe de cartes, il s'agit simplement d'appliquer le flex d'affichage, mais d'une manière particulière. Ce qui est une sorte de les regrouper tous ensemble, tous sur la même ligne. Donnons ça un coup de pouce. Donc, il est dit envelopper tous, ce sont des cartes individuelles. Enveloppez-les tous dans ce qu'on appelle un groupe de cartes. Alors faisons ça dans ce code. Voici mes cartes. Je vais tous les attraper. On y va. Je vais aller Command Shift P, commencer à taper une enveloppe. Envelopper avec l'abréviation, et je vais le mettre dans un point, et je vais mettre en groupe de cartes. Tu vois, ça enveloppe tout dans ce groupe de cartes. Vérifions ce qu'il fait, et jackpot. Eh bien, en quelque sorte. Ils sont tous au moins dans le même alignement. Donc le groupe de cartes semblait fonctionner. Mais oubliez tout plus loin, il y a différents groupes de cartes. Regarde ça. C'est un jeu de cartes. Maintenant, il a été souligné dans le passé que le mot deck pour un kiwi est probablement mal compris. Deck est ce que j'essaie de dire. Mais si tu ris, tu n'es probablement pas le premier. Juste parce que c'est drôle, Google ou aller sur YouTube et vérifier la publicité Nouvelle-Zélande, pont, orthographié de cette façon. C' est PG. Si vous êtes adulte, vous penserez que c'est drôle. Ce n'est pas grossier, pas trop grossier. De toute façon. Va vérifier ça, pause, reviens. D' accord. Donc, si vous l'avez, ajoutez-la votre système. D' accord. Donc on va utiliser le deck, et on va dire le jeu de cartes. Je sais. Jetons un coup d'oeil. Regarde ça. Le pont est celui qu'on veut. Il a des espaces et des liens vers elle. C' est une belle. Jetons un coup d'oeil à ce que vous pouvez faire d'autre. Jetons un coup d'oeil à d'autres choses. Il y a des colonnes de cartes. Nous ne ferons pas de colonnes, mais vous pourriez voir que c'est cool. Bien qu'il soit empilé l'un sur l'autre, différentes tailles. Ça aurait été bon pour, tu te souviens de celui que nous avons fait plus tôt ? Pour le moment, ils sont tous de la même taille. Mais disons que mon design était tout déchiqueté et de haut en bas. Je peux voir comment ce serait super cool en utilisant les colonnes de la carte. D'accord. C' est donc des groupes de cartes, des cartes D-E-C-K, et des colonnes de cartes. Allons dans la prochaine vidéo. 125. Comment ajouter une ombre portée à une boîte ou une carte dans Bootstrap 4: Salut là.Dans cette vidéo, nous allons ajouter des ombres portées à nos cartes. Vous pouvez le voir pointant vers l'arrière. Nous allons ajouter un peu de rembourrage en haut et en bas. On va essayer d'ignorer ce carrousel, qui va trop vite au sommet. Donc ici, dans mon balisage, j'ai ajouté des ombres aux cartes. Je veux voir si je peux le faire dans Bootstrap. Nous avons trébuché dessus tout à l'heure, rappelez-vous, alors nous cherchions à ajouter une ombre portée au texte. On a tapé dans l'ombre. Je me suis trompé, mais c'est celui qu'on veut maintenant. Ok, donc ce ne sont pas les Utilitaires, et les ombres, et voilà, quelques beaux exemples. Donc, vous pouvez voir l'ombre petite comme celle-ci, ombre régulière est, je pense, juste sans rien, et c'est la grande. Utilisons simplement l'ombre, et allons dans Visual Studio Code. Alors où est-ce que je le mets ? Donnons-le un coup d'oeil. Mettons-le sous celui-là, le jeu de cartes. Collons-le dans. Je l'ignore maintenant. C'est une ombre. Voyons comment ça se passe. Vas-y, et ça marche. C' est ajouter une ombre portée à l'extérieur de tout. Ce n'est pas ce que je veux. J' ai besoin d'un peu d'espacement en bas alors faisons les deux choses. Débarrassez-vous de ça, et peut-être qu'ici, on peut ajouter la marge aux x et y. je dessine ici. Est-ce que quelqu'un d'autre fait ça ? Je ne me souviens jamais de x et y. Je dois donc aller horizontalement, verticalement, x et y. Je le dessine ici. C' est le haut et le bas. Donc, la marge vers le haut et le bas sera de cinq. Allons y aller, juste pour ajouter un peu d'espacement entre là et le bas, et voyons si nous pouvons mettre l'ombre quelque part. Maintenant, ça n'a pas fonctionné sur notre deck de cartes, ça va probablement aller sur une carte ici. Alors ajoutons de l'ombre, faisons tout en une seule fois parce que je suis raisonnablement confiant que cela va fonctionner. J' ai déjà fait ça. Sauvegardons ça. Jetons un coup d'oeil. Hé, tu as des ombres portées tout le long. Beau travail. Cinq, tout le monde. Nous approchons de la fin. Je suis un peu nerveux, un peu excité, aussi. C' est un long parcours, avec impatience de finir et de le faire sortir pour vous. Saviez-vous qui est probablement plus excité que quiconque ? C'est le rédacteur en chef. Jason est probablement plus excité que quiconque que ça touche à sa fin. Faisons une des dernières vidéos. Il saute à l'intérieur maintenant. 126. Comment faire d'une balise div un lien géant cliquable dans Bootstrap 4: Vous avez peut-être demandé les 30 dernières vidéos. « Sommes-nous encore là ? » Nous y sommes. Enfin, j'ai encore une petite chose à faire. Nous allons styliser ces boutons primaires bleus en bas. On va leur faire cette belle couleur verte. Allons entrer et travailler sur la façon de le faire maintenant dans Bootstrap et VS Code. Pour le moment ma carte ici, la seule chose que vous pouvez cliquer est le bouton et c'est tout à fait bien, mais je veux rendre la carte entière cliquable. Bootstrap a une classe spéciale pour cela, sous les utilitaires il y a un lien appelé étiré. Fondamentalement, tout ce que nous devons faire est d'ajouter ceci à cette belle petite classe à l'étiquette a. Il rendra l'apparent ok tout cliquable, apparemment. Allons y aller. Prenons ça. Allons dans notre code Visual Studio. Trouvons l'étiquette a. Il est là, à l'intérieur de ma carte et nous l'ajouterons à cela. Changeons le lien pour aller quelque part. Je ne sais pas, ne pas aller où se sent comme un [inaudible]. Allons sur n'importe quel ancien site et enregistrez-le. Allons y aller. D'abord. On a la main de Mickey Mouse, celle-ci ne le fait pas, la main de Mickey Mouse n'apparaît que là-bas. Si vous n'avez pas la main Mickey Mouse, différents systèmes d'exploitation ont des causes différentes. Mais on y va et si je clique dessus, hé, presto. Hé, c'est moi. Vraiment facile, j'aime qui semble que c'était une chose si agréable, facile à faire. Bon, faisons-le pour les autres liens. Nous allons probablement styler le bouton et ensuite ce sera nous. Nous allons l'ajouter à ce lien ici. On va faire la primaire. On va faire les deux. Faisons en sorte qu'ils fonctionnent d'abord. Revenons en arrière un. Celle-là fonctionne, celui-là ne le fait pas. Pourquoi pas ? Rafraîchir. Oh, rafraîchir sur celui-là a fonctionné. Parfois, vous avez besoin de frapper rafraîchir, nous l'avons appris à travers le cours. Tout est cliquable, nous allons changer ce bouton parce que ce bouton moment a un hover que nous n'aimons pas et la couleur est fausse. Nous avons créé nos propres styles pour le contour primaire. Nous allons faire la même chose pour celui-ci ici, juste bouton primaire, nous ne voulons pas la version outline. Faisons un cours ici pour donner un cours final, on appellera ça. En fait, nous allons faire la couleur de fond, et nous allons utiliser, c'est une couleur que j'ai déjà utilisée quelque part, O-O-B-B-C-9, ça va nous donner le vert. Vérifiez-le. Parfait. Il va falloir changer le vol stationnaire parce qu'il devient encore bleu. Nous allons faire une pseudo-classe, en fait nous allons faire un composé et une pseudo-classe. Sortons dans un flambeau de gloire CSS, virgule, je veux le faire à nouveau, mais je veux que celui-ci soit le deux-points, planeur. Rappelez-vous, la virgule se sépare, donc nous faisons deux choses distinctes et les choses séparées se sont produites comme le plus normal ou principal, la version pseudo de celui-ci, où nous survolons au-dessus. Vérifions et maintenant le vol stationnaire est de la même couleur, j'attends qu'il change. Je n'ai pas choisi une autre couleur. Je veux juste que ce soit pareil. Travaillons également sur la couleur de la bordure ici. Couleur de la bordure. On va le faire de la même couleur que, pouvez-vous le mettre à zéro ? Jetons un petit coup d'oeil. Non, tu dois le mettre à une couleur. On pourrait probablement baisser la taille. Mais en fait, nous allons juste le mettre aux mêmes couleurs que tout le reste. On y va. Regardez-nous. Ce sera tout pour notre codage ensemble, traîner autour de la prochaine vidéo où nous discuterons de vos prochaines étapes. Bien sûr, je prendrai vos coordonnées de paiement pour le yaourt que vous voulez commander. Je te vois dans une seconde. 127. Prochaine étape de notre cours sur les bases de la conception web: Bonjour et bienvenue à la fin. Sainte fumée. Ça a été un long parcours. Félicitations. Pendant que vos amis sont assis à la maison à regarder Netflix, vous avez été en train de perfectionner, d'apprendre à connaître le design web et j'espère que vous avez apprécié le cours, mais que faire ensuite ? Il y a deux options, vous pourriez faire les deux. Nous avons créé ce site ici, mais le design a été fait pour nous, déjà fait pour nous. Vous pouvez emprunter cette voie et apprendre à en faire plus sur le plan de la conception, avant de commencer à créer un site Web. Nous parlerons d'Adobe XD pour cela. Ou vous pourriez aller où nous en sommes maintenant, comment puis-je pousser ce design web plus loin et commencer à regarder le développement web ? Ce serait quelque chose comme regarder PHP ou MySQL, où vous commencez à interagir avec l'utilisateur sur votre site Web en prenant des noms et des adresses e-mail, et en vous inscrivant, tous ces types de choses. On parlera des deux. La prochaine étape logique sera probablement comment allez-vous plus loin dans ce chemin de la conception web ? Nous avons construit un site web très statique. C' est très attrayant visuellement, comme un interactif. Il fait des menus et des carousels, et il semble interactif, mais il n'y a pas d'interaction réelle de l'utilisateur en termes de saisie des données, et de faire des choses avec ça. Il peut s'agir de choses comme, nous parlons, de s'inscrire au site Web, de s'inscrire à des choses, de prendre des e-mails pour recevoir des bulletins d'information par e-mail, et de coupes de paiements, ce genre de choses. Pour y arriver, vous devez regarder plus de développement web. Je suis définitivement un concepteur web et le développement web est là où mes compétences ne commencent pas. Ce que j'ai fait, c'est que j'ai fait équipe avec un autre instructeur appelé Malcolm Knott, et il l'a pris d'ici. La chose cool à propos de son cours, il faut le site Meet Yoga que nous avons déjà construit, et ajoute en fait une base de données simple. Il ne prend que des noms et des adresses e-mail pour un e-mailer, mais il vous guidera à travers les bases de la configuration d'une base de données en utilisant MySQL. Cela vous mènera à travers le langage de base que vous utiliserez, PHP. Cela vous permettra de commencer à ajouter un peu plus dynamique et des parties basées sur la base de données à votre site Web. Vérifie ça. Il s'appelle Malcolm Knott. J' ai mis un petit lien là, ses sites Web ou son cours est appelé, Création d'une lettre d'information électronique simple en utilisant MySQL et PHP, quelque chose comme ça. C' est écrit là. Je l'ai mal lu, n'est-ce pas ? Vérifie ça. Ensuite, parlons de XD. Les bases de données sont ce que vous pouvez faire à partir de ce cours. Ce que vous pourriez faire et/ou faire est en fait revenir à la partie de début, où pour ce cours, j'ai déjà mis beaucoup de travail de conception et nous venons de le construire. Rappelez-vous, je les ai tous conçus et nous venons de les coder sur ce site. Vous pourriez regarder cet ensemble de choses, comme comment puis-je comprendre comment prendre un mémoire ? Regardez ce qui se passe dans ce mémoire, et comment obtenir l'approbation du client, comment obtenir des idées de conception, et en fait prototype, avant de commencer à le construire. Pour vous, ce serait Adobe XD. J' ai un cours intitulé Expérience utilisateur, conception essentielle en utilisant Adobe XD. Vérifie ça. C' est la façon de commencer, comme le précurseur du codage du site Web. Ça pourrait vous être utile. La prochaine chose à discuter est la façon dont vous pratiquez. Ça dépend de l'endroit où tu vas. Si je travaille sur mes propres projets, trop dur, parce que la portée, vous n'avez pas vraiment décidé de ce que vous voulez de toute façon, et vous finissez par passer des jours à choisir des polices et des couleurs. Alors aller à votre cercle très étroit de gens, et demander si les gens veulent un site Web. Vous avez un oncle, une équipe sportive, un parent, quelqu'un qui pourrait utiliser un site web potentiellement, et engager avec eux dans un projet. Essayez de le faire gratuitement. Free a toujours tendance à conduire à un mauvais sang. Si je dis à Oncle John, tu devrais avoir un site web, parce que celui-ci est terrible, et il dit, bien sûr, et c'est comme, il y a un accord gratuit en cours. Il n'y a aucun engagement. Vous avez consacré beaucoup de temps. Vous allez passer beaucoup de vos efforts à essayer de faire ça, mais parce qu'il n'a pas de valeur réelle de sa part, eh bien, engagement pour lui, il ne répondra pas aux e-mails. Il ne finira même pas le travail, et finira par une réunion de famille maladroite où Oncle John ne m'a jamais retrouvé. Il n'a jamais fini ce projet. Donc, je trouve une petite taxe. Vous pouvez le réduire lourdement. Dites des choses comme, hé, oncle John, je cherche à faire ce site web. J'ai besoin d'un projet. Normalement, c'est 2 000$. Pourriez-vous couvrir certaines de mes heures ? Je vais le faire pour 500 ou le faire pour 100. Juste pour couvrir certains des petits morceaux de dépenses que vous allez couvrir pour le faire. S' il dit non, ça ne sera jamais un bon travail. C' est juste un appel d'offres pour y mettre fin et aller trouver quelqu'un d'autre qui a ce petit peu d'engagement, qui vous donnera un peu d'argent, parce qu'alors, leur engagement, on changerait, là où les gens disent, même si c'est 5$, il y a un engagement et les gens changent d'avis sur la façon dont ils voient le travail. Ils répondront beaucoup plus aux courriels et vous êtes plus susceptible de démarrer le travail. Fais des choses comme, hé, c'est normalement 2 000 , mais pour toi, je veux juste couvrir quelques heures, si ça va. Peut-être 500 ou 100, juste pour que vous puissiez lancer un projet. Je trouve que c'est le moyen le plus simple, juste de trouver des gens dans votre entourage. Commencez à construire un projet, et c'est une bonne façon d'aller de l'avant. Enfin, suivez-moi sur les réseaux sociaux. Ils apparaîtront tous ici dans une seconde. Facebook est probablement le meilleur. Plus interactif. Posez des questions que vous avez sur le cours. Publiez vos projets. Apportez votre propre ordinateur portable dot com, slash fb vous emmènera au groupe. Aussi sur Instagram, je suis Apportez votre propre ordinateur portable, et sur Twitter, je suis Dan aime Adobe, alors inscrivez-vous pour ceux-ci et ce sera la fin. Je vais agiter pendant un moment et je vais demander à l'éditeur de mettre un fondu en noir, mais en fait, essayons de fondre en tomate. Tu te souviens de ces couleurs ? C'est probablement, en fait, un peu meurtrier. Essayons de fondre au vert printanier. C' était une bonne chose. Au revoir maintenant.