Maîtrisez l'extension qui change la vie
Productivité x10 avec Emmet
Bienvenue dans ce cours complet sur Emmet.
Emmet est une extension qui change la vie, elle permet en effet de coder beaucoup plus facilement en HTML mais aussi en JSX pour React et Next, dans les templates Vue, avec Svelte et tous les autres frameworks JS.
Elle est disponible sur tous les éditeurs de code moderne, nous utiliserons VS CODE.
Le but est d'utiliser des raccourcis appelés "abréviations"
Voici une abréviation : div.container>ul.list>li.item*6
Une fois écrit, il vous suffira d'appuyer sur 'entrée' ou 'tab' pour les exécuter, et faire apparaître une tonne de contenu HTML d'un coup.
Il existe également toute une panoplie d'actions
- Entourer du texte avec des balises a,span,et
- Sélectionner du contenu plus facilement
- Supprimer des tags sans supprimer le contenu
- Se téléporter à la balise fermante/ouvrante
- Et bien d'autres choses...
Enfin, on peut également utiliser Emmet en CSS
Cela nous permet d'écrire des propriétés/valeurs beaucoup plus rapidement : m => margin, p10 => padding: 10px, bgc#0 => background-color: #000, etc…
C'est une compétence simple et très utile
Pour terminer ce mini-cours, on verra ensemble comment faire fonctionner Emmet en JavaScript, et notamment avec tous les Frameworks JS actuels.
C'est une compétence extrêmement simple et rapide à acquérir, ce qui est assez rare en développement web, alors profitez-en.
Besoin d'aide ?
Rejoignez la communauté sur Discord, ou suivez les tutoriels de l'École du Web sur Youtube.
Contenu du cours
Cliquez sur les questions
Foire aux questions.
Oui, il vous suffit de cliquer sur votre profil > gérer les abonnements > annuler l'abonnement.
Il vous suffit de rejoindre le serveur Discord dans lequel vous pouvez discuter développement web, demander de l'aide ou encore participer à des concours ou des exercices.
Le Parcours Front-End est une feuille de route vous permettant de suivre les cours qui feront de vous un développeur Front-End dans l'ordre.
Il est très important de pratiquer quand on apprend de nouvelles compétences, c'est pourquoi j'ai une page spécialement remplie de dizaines de cours et de projets pratiques!
Rejoignez des milliers d'étudiants
Accèdez à tout le contenu d'un coup
React, CSS, HTML, JavaScript, Git, SASS, etc..., faîtes décoller votre carrière en suivant des cours complets.
Cours gratuit