L'essentiel de PhpStorm

Utiliser Emmet

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Emmet est un plug-in qui permet d'augmenter l'écriture de code. Découvrez comment le paramétrer ici.
03:44

Transcription

Là, je vais vous montrer « EMET » . Donc, qui est un outil vraiment génial qui vous permet de gagner énormément de temps. Donc pour tester « EMET » je vous invite à créer un fichier « index.HTML ». donc pour ça, j'ai fait « Nouveau fichier » et j'ai choisi un « HTML 5 File ». Donc voilà, j'enlève ce qu'il y a dedans. Donc pour vous, faire comprendre « EMET » c'est tout simple. Si je fais « li est plus grand que p (lip) » et je fais une tabulation, automatiquement il m'a créé un « li », il m'a fermé le « li » et il m'a aussi créé automatiquement ma balise p. donc je passe de « lip » à ça. Et ça de manière automatique. J'ai juste fait une tabulation. Donc, on peut ici les chaîner, donc, si par exemple, je fais « ul li p » Là, il me fait bien « ul, li, p » Ensuite, je peux ajouter d'autres éléments pour ajouter des éléments-frères en fait. Si je fais « ul li p » et si je dis « +a », il me fait un « ul,li » , il me met ma balise p, et juste à côté, je vois que j'ai un « a » et j'ai automatiquement le « href ». Et vous pouvez aussi multiplier les éléments. Ainsi je fais « ul li*5 » par exemple, J'ai un « ul » et cinq « li ». Si je décide de créer un « div » avec une classe, donc, par exemple, je crée un « point container », automatiquement vous voyez qu'il m'a fait un «div ». Donc par défaut, lorsque je mets juste une classe, il me crée un « div » avec cette classe-là. Donc si je veux faire un « ul » et dire que mon « ul » à la classe container, c'est pareil je fais « ul.container» et automatiquement il m'a fait un « ul » avec une classe « container ». Ensuite vous pouvez du coup insérer du texte. Donc si je fais « a accolade » et je mets « clic ici », ici vous voyez qu'automatiquement il a mis la valeur au milieu de ma balise « a ». Donc vous pouvez aussi numéroter, donc ça, c'est vraiment intéressant. Si vous faites « ul li point item » parce que ça sera le nom de ma classe, « dollar étoile trois » par exemple et que je fais tabulation. Voyez qu'automatiquement, il m'a incrémenté de un chacune de mes classes. Donc là, nous avons vu EMET pour le HTML, maintenant nous allons voir EMET pour le CSS. Donc pour cela, je vais créer un fichier CSS. Donc je fais « New Stylesheet », je vais l'appeler Style tout simplement. Donc si je vais créer une balise sur le « body » par exemple, et si je fais « W100 », automatiquement voyez que ça m'a remplacé « W100 » par « width 100 px ». Ça marche aussi pour le « height ». Donc, si je mets « 25 » par exemple, et si je mets « p », ça met en pourcentage. Donc là, je suis à 25%. Ça marche aussi pour le « padding ». Si je fais « padding - top», donc, « pt 20 » par exemple, automatiquement, il m'a fait un « padding-top de 20px ». Vous avez aussi pour le « background », par exemple, vous faites juste « bg » et automatiquement ici, il vous met un « background » avec le code « 000 ». Ensuite vous pouvez faire « c » pour Color, vous pouvez faire « f » pour Font, là il suffit de mettre le font, ensuite. Ensuite vous pouvez faire « bd » pour Border, et enfin, vous pouvez faire « bd+ ». Et là, vous avez un « border » d'un « pixel ». Donc vous voyez que EMET est vraiment très utile, ça vous permet de gagner beaucoup de temps. Je vous invite donc, à l'utiliser au maximum.

L'essentiel de PhpStorm

Prenez en main l’environnement de développement PhpStorm et optimisez votre productivité. Découvrez les outils et l’interface, procédez à l’installation, créez des projets, etc.

1h47 (30 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
PhpStorm PhpStorm 2016.2
Spécial abonnés
Date de parution :28 nov. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !