[GRATUIT] Gagner en productivité avec Emmet

Maîtrisez l'extension qui change la vie

4.92 (84 reviews)
Udemy
platform
Français
language
Web Development
category
instructor
1,018
students
1 hour
content
Nov 2023
last update
FREE
regular price

What you will learn

Améliorer sa productivité

Utiliser l'extension Emmet

Description

Bonjour tout le monde et 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" comme celui-ci : 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 ça vous donnera  ceci !

    <div class="container">

        <ul class="list">

            <li class="item"></li>

            <li class="item"></li>

            <li class="item"></li>

            <li class="item"></li>

            <li class="item"></li>

            <li class="item"></li>

        </ul>

    </div>

Genial n'est-ce pas ?

Il existe également toute une panoplie d'actions, qui permettent de manipuler le code plus facilement :
- 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, ce qui nous permet  :
- D’écrire des propriétés beaucoup plus rapidement : m => margin, p10 => padding: 10px, bgc#0 => background-color: #000, etc…
- D’utiliser des raccourcis comme en HTML :  p10+m10+w100%+bg#0 =>

  padding: 10px;

  margin: 10px;

  width: 100%;

  background: #000;


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.

Rendez vous de l'autre coté,
Enzo.

Content

Introduction

Introduction
Code source

Les raccourcis HTML

Les raccourcis HTML partie 1
Les raccourcis HTML partie 2
Les raccourcis HTML partie 3

Racourcis en CSS

Raccourcis en CSS

Raccourcis personnalisés

Raccourcis personnalisés

Les Actions

Les Actions

Les différences sous VS CODE

Différences sous VS CODE

Screenshots

[GRATUIT] Gagner en productivité avec Emmet - Screenshot_01[GRATUIT] Gagner en productivité avec Emmet - Screenshot_02[GRATUIT] Gagner en productivité avec Emmet - Screenshot_03[GRATUIT] Gagner en productivité avec Emmet - Screenshot_04

Reviews

SPRL
September 29, 2023
C'est très bien expliqué et très complet. De plus l'orateur est réellement bon, on ne s'ennuie pas et on a envie d'en apprendre encore plus.
Stéphanie
September 18, 2023
Cours très clair, comme d'habitude, et qui nous apprend plein de raccourcis utiles pour gagner du temps. Merci Enzo !
Laurent
September 12, 2023
Merci Enzo. C'est toujours un plaisir de suivre un de tes cours. Toujours cet enthousiasme qui te caractérise et une pédagogie de très bon niveau.
Viviane
September 5, 2023
Merci pour ce cours sur Emmet. C'était très intéressant, et cela m'a permis de conforter certains raccourcis découverts par hasard et surtout d'en apprendre d'autre.
Boukalo
March 9, 2021
ce cours est vraiment génial mais le seul problème que je trouve c'est que les raccourcis Emmet ne fonctionnent pas tous sur sublime texte aussi , c'est le seul point qui me dérange
Jérémie
August 22, 2020
j'ai vraiment apprécié ce cours, petit point essaye de preciser pour les user de vscode quand ca ne sert plus de regarder la suite de la lecon et passer a al suivante =)
Jean-Francois
April 10, 2020
Très interessant ! Par contre , tu parles trop vite pour une formation : je passe la vidéo en 0.75x et c'est parfait .
Alain
April 1, 2020
Les commandes sont trop rapide à l'écran il faut à chaque fois faire une pause de la vidéo. J'utilise principalement sur mac sublime text et visual studio code c'est pas terrible niveau css ça ne fonctionne pas je suis finalement un peu déçu de cette formation
A.Be
December 18, 2019
Formation plutôt agréable et utile. Le formateur passe rapidement sur les divers possibilités que propose Emmet avec des exemples, mais cela suffit largement pour être autonome par la suite avec ce plugin. Le comparatif entre Atom et VSCode par rapport a Emmet est effectivement sympa à connaitre.
Kenza
December 11, 2019
Adepte des formations d'Enzo qui sont d'une clarté et sans perte de temps tout ce que j'adore, celle-ci est incontournable pour une productivité accrue. Merci pour ce cours qui va grandement me faciliter la vie. A bientôt dans une autre formation.

Charts

Price

[GRATUIT] Gagner en productivité avec Emmet - Price chart

Rating

[GRATUIT] Gagner en productivité avec Emmet - Ratings chart

Enrollment distribution

[GRATUIT] Gagner en productivité avec Emmet - Distribution chart

Related Topics

2652802
udemy ID
11/12/2019
course created date
11/14/2019
course indexed date
Bot
course submited by