Écrire le code plus vite avec Emmet

1. Écrire du code plus rapidement avec Emmet: Bonjour tout le monde. Je suis très excité de vous parler d'Emmet aujourd'hui. Je m'appelle Sandra. Je suis Digital Designer et je travaille à la fois sur des projets imprimés et web. Mon objectif est de partager avec vous la meilleure pratique que j'ai apprise en cours de route, Emmet est l'un de mes meilleurs conseils quand il s'agit d'apprendre à coder. Dans cette classe, je vais vous montrer comment utiliser Emmet afin que vous puissiez ensuite utiliser pour vous-même et devenir des codeurs beaucoup plus efficaces. Emmet est vraiment utile. Si utile, c'est que les éditeurs Web les plus modernes vous permettront de l'utiliser ? Pour cette classe, j'ai utilisé la plate-forme que j'utilise presque quotidiennement, et elle s'appelle Code pen. Mais n'hésitez pas à utiliser n'importe quel éditeur Web avec lequel vous vous sentez le plus à l'aise. Cette classe s'adresse aux personnes qui ont déjà des connaissances de base sur HTML et c'est pour les personnes qui aimeraient en savoir plus sur la façon d'optimiser le codage. Si c'est pour vous, mettez la bouilloire et commençons. 2. Qu'est-: Commençons par le principe d'Emmet. Par exemple, si vous souhaitez créer un paragraphe en HTML, vous devez créer une balise d'ouverture pour le paragraphe, puis une balise de fermeture pour le paragraphe. Donc c'est ce que vous allez taper. Ensuite, vous auriez créé un paragraphe. Avec Emmets, vous pouvez le faire beaucoup plus simple. La seule chose que vous devez dire à Emmet est, vous voulez un paragraphe, puis il générera automatiquement l'ouverture et la balise de fermeture en appuyant simplement sur la tabulation. Alors essayons ça. Je tape P, puis je clique sur l'onglet. Ensuite, nous avons l'ouverture et la balise de fermeture pour le paragraphe. Vous pouvez le faire avec toutes les balises disponibles en HTML. Vous pouvez le faire pour la plage, vous pouvez le faire avec le titre. Vous pouvez le faire avec un div, ou vous pouvez le faire avec une table ou quoi que ce soit. Cela fonctionnera exactement de la même manière. Donc, vous voyez que c'est très simple, mais il a beaucoup de potentiel pour vous aider à accélérer votre codage. 3. Siblings: Quand je dis frères et sœurs, cela signifie des balises qui sont au même niveau. C' est une balise suivie d'une autre balise suivie d'une autre balise. Disons que si vous avez un titre 1 H1 suivi d'un paragraphe, puis suivi d'un tableau, ils sont tous au même niveau et ce sont des frères et sœurs. Par exemple, si vous avez un en-tête H1 et que vous voulez un paragraphe , vous pouvez le faire de différentes manières. Vous pouvez faire H1, puis vous appuyez sur la tabulation et vous avez créé votre H1. Ensuite, allez à la fin de la ligne, appuyez sur B, puis appuyez sur la touche Tab et puis vous avez votre titre un et votre paragraphe. Il n'y avait pas beaucoup de taper là-dedans parce que je devais aller à la fin de ma balise de fermeture de H1 pour créer ma balise suivante. Vous avez seulement besoin de faire H1 plus P, puis vous appuyez sur onglet, puis il a créé pour vous le H1 suivi de la balise P. C' est les frères et sœurs. 4. Nesting: Quand je dis imbriquer, je veux dire un élément qui est enfermé dans un élément. Dites que si vous avez un paragraphe et que vous avez une plage à l'intérieur du paragraphe. Ensuite, la plage est imbriquée à l'intérieur du paragraphe. Le paragraphe est le parent, donc la plage est l'enfant. Par exemple, si vous avez un paragraphe et à l'intérieur du paragraphe, vous avez une plage. C' est une imbrication. Pour cela, avec Emmet, vous utilisez le signe supérieur à. Jetons un coup d'oeil. Vous avez votre paragraphe, puis vous voulez à l'intérieur d'un paragraphe une plage. Nous faisons p plus grand que et puis vous tapez span. Vous appuyez sur « Entrée » et là vous l'avez. Vous avez votre portée qui est enfermée à l'intérieur de votre paragraphe. 5. Regroupement: Maintenant, nous savons comment faire les frères et sœurs, nous savons comment faire la nidification. Essayons donc de les regrouper ensemble. Si j'avais un titre et que je voulais qu'il soit suivi d'un paragraphe qui a une portée à l'intérieur. Ce que vous feriez est h1, puis le paragraphe est un frère p. À l'intérieur du paragraphe, sorte que vous faites le plus grand que, vous faites la plage. Appuyez sur la touche Tab. Maintenant, vous avez votre titre avec le paragraphe. À l'intérieur du paragraphe, vous avez la portée. Maintenant, imaginez que vous vouliez enfoncer dans le h1, puis vous vouliez le paragraphe après cela, donc vous faites h1 et à l'intérieur du h1, vous voulez votre portée. Vous voulez votre paragraphe en tant que frère, sorte que vous faites plus p. Vous appuyez sur la tabulation. Maintenant, vous pouvez voir que votre paragraphe a été placé à l'intérieur de votre en-tête. C' est à cause du regroupement. Ce que ML fait, c'est qu'il dit que la travée et le p sont au même niveau et qu'ils sont tous les deux enfants du Titre un. Ce que vous devez faire, c'est de regrouper. Dans ce cas, je veux mettre des parenthèses entre mon h1 et le span et je veux que le h1 et le paragraphe soient au même niveau, donc ce sont des frères et sœurs. Maintenant que j'ai mis mes crochets dans j'appuie sur onglet, et maintenant vous pouvez voir que ma portée est à l'intérieur de mon en-tête un, puis il est suivi par le paragraphe. 6. Multiplier.: Regardons la situation où nous voulons créer dix paragraphes. Donc, ce que vous pourriez faire, c'est que nous savons comment créer des frères et sœurs. Nous créons donc des peuples. Dix, c'est beaucoup et dites que si vous voulez faire 100, ce serait beaucoup trop. Donc, ce que vous devez utiliser est les diamètres de la fonction de multiplication. Et c'est comme dans une calculatrice, vous avez juste besoin d'appuyer sur étoile sur votre écran. Donc, si je voulais 10 paragraphes, je mettrais p puis l'étoile, puis 10. Appuyez sur Tab, et maintenant j'ai 10 paragraphes qui ont été créés. Il fonctionne aussi avec les groupements. Donc, dites si j'ai un paragraphe, puis à l'intérieur du paragraphe que je veux couvrir, et je les ai regroupés et dire que si je voulais trois d'entre eux, je viens de mettre l'étoile trois, et puis j'appuie sur Tab. Ensuite, vous pouvez voir que j'ai trois fois un paragraphe, et dans chacun de ces paragraphes, j'ai une portée. Donc maintenant, si je l'ai fait sans le regroupement et que j'ai fait le p, puis avec la durée d'essai trois fois, ce qu'il ferait est de créer trois travées à l'intérieur du paragraphe. C' est pourquoi il est important de comprendre le regroupement lors de l'utilisation d'un [inaudible]. 7. Défi 01: Alors maintenant, c'est l'heure du défi. Téléchargez le défi numéro un. Comment nous regardons le cadre de fil que je propose et essayons de trouver un moyen rapide de créer ce diagramme en utilisant MS Donc nous avons un en-tête, et à l'intérieur de l'en-tête Vous avez un div et un nav, à l'intérieur de la div vous avez une travée, et à l'intérieur d'un nav, vous avez une liste non ordonnée et à l'intérieur de cette liste non ordonnée, vous avez cinq LI. Donc nous avons l'en-tête, un en-tête d'initié que vous avez tous vos enfants. Je vais juste en groupe. Juste pour le rendre plus facile. Vous avez un div et au même niveau, ainsi qu'un frère. Vous avez fait nav. Maintenant, à l'intérieur de la div, vous avez la portée. Donc, vous avez à l'intérieur de la div, qui est un enfant est utilisé le signe supérieur si c'est span. Alors regroupons ceci ensemble et puis à l'intérieur du nav, vous avez un ul et à l'intérieur de l'ul vous avez cinq LI. Permet de grouper cela aussi, appuyez sur onglet et vous l' avez, vous avez votre en-tête et à l'intérieur vous avez votre div, puis la travée et puis le nav à l'intérieur et puis à l'intérieur nav vous avez ul avec tous vos cinq LI. Alors maintenant, je vais te laisser entrer en secret. Vous n'avez pas besoin de créer un code complet, puis appuyez sur la touche Tab pour que tout soit écrit. Vous pouvez le faire étape par étape si vous le trouvez plus facile, et il est alors plus facile de dépanner s'il y a des problèmes quelque part. Commencez par créer un en-tête, puis à l'intérieur de l'en-tête, vous avez votre div et votre nav. Donc div et nav. A l'intérieur de la div, vous avez une travée. A l'intérieur du nav, vous avez un ul, et à l'intérieur de l'ul, vous avez cinq LI. Il est très important de comprendre le groupement et la nidification, etc. Mais vous n'avez pas besoin de créer une longue phrase pour ensuite appuyer sur onglet et voir tout et parce que s'il y a un problème, alors vous devez y retourner et essayer de comprendre, vous savez, où était le problème avec le regroupement quelque part ou au lieu d'un frère à leur sujet de l'imbrication ou des choses comme ça. C' est donc juste plus rapide de le faire étape par étape. C' est juste une bonne chose à savoir. Toutes les différentes fonctions qui émettent peuvent montrer et alors il est juste une question pour vous jouer avec elle et d'être à l'aise avec elle et de savoir avec quelle façon vous préférez travailler. 8. Cours et ID: Maintenant que nous comprenons le principe d'Emmet et nous savons comment créer des frères et sœurs, nicher, se multiplier. Jetons un coup d'oeil à d'autres fonctions qui pourraient être très utiles lorsque vous écrivez votre code. Donc, une chose utile à savoir est comment ajouter une classe et comment ajouter un ID à une balise. Donc, c'est très simple avec Emmet, cela fonctionne comme CSS. Donc, si vous avez un paragraphe et que vous voulez que ce paragraphe ait une classe appelée MyClass. Vous avez juste besoin de dire p, puis point pour la classe, comme dans CSS et accolades MyClass, puis j'appuie sur « Tab ». Maintenant, j'ai un paragraphe qui a une classe appelée MyClass. De même, si vous voulez créer un ID, vous utilisez également le même que CSS et en utilisant le hachage. Si vous avez p et puis vous avez un hachage et myID, puis vous appuyez sur « Tab ». Maintenant, vous avez un paragraphe, qui a un ID, MyID. Alors maintenant, vous pouvez le combiner ensemble. Donc, vous avez votre paragraphe qui a une classe appelée MyClass, et puis vous voulez qu'il ait un ID. Donc, vous mettez un hachage, puis myID, et vous appuyez sur « Tab ». Ensuite, vous avez un paragraphe qui a une classe et qui a un ID. 9. Numérisation d'articles: Vous pouvez également avoir plusieurs classes, et pour cela, vous avez juste besoin d'ajouter le point et le nom de la deuxième classe, et cetera jusqu'à ce que vous ayez tous les noms de vos classes. Vous avez p classe point un, la classe de points deux, la classe de points trois, et vous appuyez sur la touche de tabulation. Et vous pouvez voir maintenant que vous avez un paragraphe qui a plusieurs classes. Il fonctionne également avec le multiplicateur. Si vous avez trois paragraphes qui ont une classe appelée « myclass », vous avez juste besoin de faire p point myclass, puis de le multiplier par trois, puis vous appuyez sur onglet, et vous pouvez voir que vous avez trois paragraphes qui ont un appelée « myclass », ce qui est vraiment bon. Mais si vous vouliez le faire avec la carte d'identité ? Évidemment, vous auriez p et puis hacher MyID, puis trois fois, et vous appuyez sur onglet, et puis vous auriez trois paragraphes, mais le problème est qu'ils ont tous le même ID, et évidemment un ID est supposé pour être unique, donc vous ne pouvez pas avoir trois éléments qui ont le même ID. Pour cela, vous avez besoin de la numérotation de l'article. Si vous avez p, et puis vous avez le hachage, puis je vais créer myID, puis j'ai utilisé le signe $, et le signe $ est quoi ? Est la numérotation de l'article. Et puis je le multiplie par trois, et quand j'appuie sur la touche Tab, vous voyez que vous avez p ID, MyID un, MyID deux, MyID trois. Donc ce que vous avez fait, vous avez dit, je veux que tous mes paragraphes aient un ID qui commence par MyID trois fois, et vous compterez de une à trois. Le premier sera MyID un, le second sera MyID deux, et le troisième sera MyID trois. Ceci est très utile lorsque vous voulez du contenu unique pour chaque fois. 10. Attributes: Maintenant, nous savons comment ajouter une classe, nous savons comment ajouter un ID, que faire si nous voulions ajouter d'autres attributs à une balise, à un élément ? C' est très simple avec MX. Ce que vous devez utiliser est le Square Bracket. Par exemple, vous avez un paragraphe et à l'intérieur du paragraphe, vous souhaitez mettre un style. Donc, vous faites P, puis vous mettez les crochets et vous faites Style, Equal. Et puis vous ouvrez les guillemets. Et puis vous pouvez dire, « Couleur : bleu », par exemple. Et puis vous allez à la fin, et vous appuyez sur Tab. Et maintenant, vous avez votre paragraphe qui a un style, un style en ligne. La couleur de la police sera bleue. Il y a certains éléments que l'image donnera des attributs automatiquement aussi. Donc, si vous avez commencé avec juste une image, si vous appuyez sur Tab, vous verrez que l'image mettrait automatiquement la source et la balise alt dans les éléments de l'image. Similaire avec l'anker [inaudible]. Si vous avez A et que vous appuyez sur Tab, vous voyez que le Href serait automatiquement là. Mais vous pouvez écrire à la source tout de suite. Par exemple, pour l'image. Donc, si vous avez l'image et que vous utilisez des crochets pour ajouter les attributs. Et puis vous mettez la source égale, puis vous mettez « myimage.jpg ». Vous pouvez également y ajouter plusieurs attributs. Vous avez juste besoin d'appuyer sur Espace à la prochaine. Ainsi, par exemple, vous pouvez mettre la largeur égale à 100. Et puis vous allez à la fin et vous appuyez sur Tab. Et vous verrez que l'image va créer l'image avec la source et avec la largeur. Mais vous verrez cela à la balise alt, car il est important d'ajouter la balise alt et vous pouvez taper immédiatement dedans. Mon texte alternatif qui décrirait l'image. 11. Défi 02: Maintenant, c'est un autre moment de défi. Je vous invite à télécharger le Challenge Number 2. Jetez un oeil au cadre métallique, essayez de comprendre comment le faire en utilisant votre Emmet et puis revenez voir comment je l'aborderais. Vous avez un DIV qui a deux classes et un ID. À l'intérieur de la DIV, vous avez trois images appelées image 1, image 2 et image 3, et elles ont des attributs de largeur et de hauteur. Commençons donc par créer votre DIV. Vous avez votre DIV et il y a deux classes, classe de points un, donc la classe de points deux. Il a une carte d'identité appelée ma carte d'identité. Si j'appuie sur l'onglet, j'ai créé mon DIV. Une chose qui est intéressant à noter est que si vous créez une classe vide, Emmet va supposer que c'est un DIV. Si je mets la classe de points un, classe de points deux, puis le hachage, mon ID et j'appuie sur la tabulation, il créera automatiquement un DIV. Donc c'est une bonne chose à savoir. Maintenant, nous avons trois images. Nous avons la balise image et ensuite, nous avons des attributs à l'intérieur. J' ai mis les crochets et ensuite je dois m'approvisionner. Et ça s'appelle l'image 123 JPEG. Je vais utiliser un multiplicateur. La numérotation de l'article serait le signe $ point JPEG. Ensuite, il a une largeur qui est 100 et une hauteur qui est 100. J' en veux trois. Je multiplie par trois et j'appuie sur la tabulation. Maintenant, j'ai mes trois images que j'appellerai image1.jpeg, deux, trois points JPEG. 12. Numérisation du texte: Maintenant, apprenons à ajouter du texte lorsque vous créez du code en utilisant emmet. Disons que vous voulez créer un lien qui indique simplement « Cliquez sur moi ». Ce que vous devez faire avec emmet est d'utiliser les supports bouclés. Vous avez votre ancre, vous tapez a, puis vous avez votre HREF que vous pouvez utiliser avec les attributs, qui sont les crochets. Nous avons des équivalents HREF, je vais juste le mettre vide pour le moment. Vous voulez des textes, sorte que vous auriez les crochets bouclés, et ensuite vous pouvez entrer le texte que vous voulez là-dedans, « Cliquez sur moi » J'appuie sur l'onglet. Maintenant, vous avez votre ancre qui a un lien vers elle et il y a un texte à l'intérieur, « Cliquez-moi ». Le texte fonctionne également avec des multiplicateurs. Par exemple, si vous aviez une liste non ordonnée, votre UL, puis à l'intérieur de la liste, vous avez cinq éléments de liste. Ce sera LI fois cinq et puis chacun de ces éléments, vous voulez qu'ils aient un texte à lui. Je vais juste mettre dans l'élément de la liste. Je vais à la fin et j'appuie sur la tabulation. Essayons encore ça. Le problème est que je mets plus donc le plus signifie que ses frères et sœurs, qui signifie que l'UL et LI sont le même niveau, mais vraiment je veux que la balise LI soit à l'intérieur de l'UL. Ce que nous voulons, c'est la prochaine chose. Au lieu du plus, nous avons le signe plus grand que. Essayons encore. Appuyez sur l'onglet. Maintenant, vous avez votre liste, et à l'intérieur de la liste, chaque élément de liste a l'élément de liste de texte. Maintenant, si vous voulez que le texte soit différent et que l'élément de liste 1, l'élément de liste 2, l'élément de liste 3, c'est très simple. On a déjà appris à le faire. C' est avec la numérotation de l'article. Revenons là-dedans. Vous avez l'élément de liste, puis nous pouvons mettre le signe $ à la fin et puis lorsque vous appuyez sur onglet, vous pouvez voir que vous avez l'élément de liste un, l'élément de liste deux, trois, quatre et cinq. 13. Lorem Ipsum: Et si vous vouliez générer du texte aléatoire ? Le célèbre Lorem Ipsum. Emmet a cette fonction où vous pouvez réellement l'utiliser. Si vous avez votre paragraphe, puis à l'intérieur du paragraphe, vous voulez votre texte Lorem. Vous appuyez sur « Tab », puis vous avez votre paragraphe, et vous avez généré un petit paragraphe avec du texte aléatoire dedans. Maintenant, vous pouvez également contrôler le nombre de mots que vous pouvez mettre. Donc, disons que si vous avez le titre et que vous voulez juste quelques mots dedans. Tout ce que vous devez faire est « H1", puis vous voulez votre « Lorem ». Et tu veux trois mots. Donc, vous faites « Lorem3", vous appuyez sur « Tab », et maintenant vous avez votre H1 qui a trois mots en utilisant le générateur de texte aléatoire Lorem Ipsum. 14. Défi 03: C' est le dernier défi. Téléchargez le Challenge numéro 3, jetez un oeil à la façon dont vous encadrez. Essayez d'utiliser Emmet pour créer ceci pour votre cadre le plus rapidement possible , puis revenez et je vous montrerai comment je vais relever ce défi. Dans ce dernier défi, vous avez un en-tête qui a une classe. À l'intérieur de l'en-tête, vous avez un div. Dans un div, vous avez une image, puis au même niveau que le div, vous avez un nav et à l'intérieur que vous avez une URL qui a cinq éléments de liste, LI qui ont des idées différentes et cinq mots différents à l'intérieur. Commençons par le conteneur principal qui est votre en-tête, puis la classe 1, et vous appuyez sur onglet et vous avez ceci. Maintenant, je vais créer mon div dans lequel vous avez une image qui a une source. C' est ce qu'on appelle l'image un le jpeg, et il a une vieille pile qui s'appelle mon image. Maintenant, vous avez un div avec l'image à l'intérieur, et puis vous avez votre nav. Et à l'intérieur du nav, vous avez votre liste non ordonnée. Et puis vous avez vos articles de liste fois cinq. Vous voulez que chacun de ces LI ait un identifiant, donc vous mettez le hachage et ensuite vous l'appelez id-1, id-2, etc. Ce serait id, puis le signe dollar, et alors vous voulez à l'intérieur de chacun de ces LI avoir un texte lorem qui est cinq mot long. Maintenant, vous appuyez sur l'onglet et maintenant vous avez votre navigation avec vos listes à l'intérieur. Il y a des identités différentes un, deux, trois, quatre et puis il a cinq était à l'intérieur de chacun de ces éléments de la liste. 15. Merci !: Merci d'avoir rejoint ce cours aujourd'hui. J' espère que ça vous a plu. Je vous encourage vraiment à aller sur le site de documentation Emmet pour en savoir plus une fois que vous vous familiariserez davantage avec ce processus. Si vous avez des questions ou si vous avez des commentaires, hésitez pas à me contacter pour me le faire savoir et vous voir bientôt.