Marcel J. DJIOFACK – Portfolio & Projets

Vous connaissez déja les bases du HTML, mais vous cherchez a gagner en productivité ? Emmet est l'outil qu'il vous faut. En comparant les méthodes traditionnelles et les raccourcis Emmet, vous de couvrirez un gain de temps considérable et une amélioration de la qualité de votre code. Développeurs front-end, cette extension est faite pour vous ! Emmet vous offre un arsenal de raccourcis et de snippets pour automatiser la création de structures HTML, CSS et me me de certains langages de préprocesseur. Gagnez en efficacité et concentrez-vous sur la logique de votre application.

1 Qu’es ce que c’est Emmet

Emmet est une extension pour les éditeurs de code qui utilise une syntaxe inspire e des se lecteurs CSS pour générer rapidement du code HTML et CSS. Imaginez pouvoir écrire div#container>ul>li*5>a pour créer une liste non ordonne e avec 5 éléments de liste, chacun contenant un lien. C'est ce que vous permet Emmet !

En résumé, Emmet offre de nombreux avantages :

Gain de temps considérable : Fini de taper des lignes de code répétitives.
Reduction des erreurs : Moins de risque de fautes de frappe.
Amélioration de la productivité : Plus de temps pour se concentrer sur la logique de votre application.
Code plus propre et plus lisible : Les structures de code générées par Emmet sont bien formate es.

Pour qui ?

Emmet est un outil indispensable pour tous les développeurs web, des débutants aux experts, qui souhaitent gagner en efficacité dans leur travail.

2 Les Bases d'Emmet : Maîtriser la Syntaxe pour un Codage Efficace

Emmet offre une syntaxe concise et intuitive pour générer rapidement du code HTML et CSS. En maîtrisant ces bases, vous pourrez écrire du code plus rapidement et avec moins d'erreurs.

2.1 STRUCTURE DE BASE D’UNE PAGE HTML

Pour avoir une structure de base complète d’une page html tout ce que vous avez a taper c’est : Html:5 ou encore simplement ! (un point d’exclamation) pour avoir la structure de base d’une page html. Vous ouvrez votre éditeur de code vous tapez html:5 ou ! et vous obtiendrez cette structure :

  
  <!DOCTYPE html>

  <html lang="en">

  <head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  </head>

  <body>

  </body>

  </html>

2.2 LES ÉLEMENTS HTML

Utilisez les noms d'éléments HTML standard : div, p, span, section, header, etc.

Pour générer la balise ouvrante et fermante et ainsi ne perdez plus du temps a faire a chaque fois les balises ouvrantes et fermantes avec des chevrons <>.

Exemple : div génèrera une balise <div></div>.

2.3 LES ATTRIBUTS

2.3.1 Les attributs génériques

Gênerez des balises html avec leurs attributs en une fois en Utilisant le symbole # (dièse) pour de finir un ID et . (Point) pour de finir une classe.

Exemples :

div#monId génèrera <div id="monId"></div>
div.maClasse génèrera <div class=" maClasse "></div>
div#maDiv.class1.class2 génèrera <div id="maDiv" class="class1 class2"></div>.

2.3.2 Créer une balise qui a des attributs spécifiques

Si les attributs que vous voulez générer ne sont pas des classes ou des identifiants vous pouvez mettre l’attribut en question entre crochets [ ].

Exemples :

input[type="password"] génèrera <input type="password"/>
a[href="lien" target="_blank"] génèrera <a href="lien" target="_blank"></a>

2.4 LES ENFANTS

Utilisez le symbole > pour imbriquer des éléments.

Exemple : ul>li*5 génèrera une liste non ordonnée avec 5 éléments de liste :

  
    <ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    </ul>

2.5 LE CONTENU DES BALISES

2.5.1 Texte tangible

Utilisez le symbole > suivi de du texte entre accolades { } pour ajouter du contenu a un élément.

Exemple : div>{Mon texte} génèrera <div>Mon texte</div> .

2.5.2 Texte de test

En tapent lorem vous obtiendrez un texte de remplissage en latin pour vos test.

Exemples :

Lorem génèrera Lorem ipsum dolor sit amet consectetur adipisicing elit…
lorem5 génèrera Lorem ipsum dolor sit amet. (5 mots)
lorem*5 génèrera

    
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit deleniti 

      quibusdam tenetur ad quis eligendi consequuntur dolorum, iusto soluta velit 

      corrupti exercitationem pariatur, inventore sit aliquid vel, sapiente totam 

      laudantium? Alias, quibusdam nisi hic culpa enim in vel eveniet! 

      Architecto itaque voluptatum amet alias maxime reiciendis deserunt totam 

      ipsum? Numquam consectetur quibusdam sed quaerat maiores id explicabo 

      nesciunt natus quis! Perferendis dicta numquam fuga atque, debitis 

      facilis ipsa id vitae eveniet doloremque qui,deserunt nisi possimus 

      unde laudantium, culpa voluptas repellendus. Distinctio tenetur veniam 

      incidunt voluptatum ratione quasi eveniet tempore? Accusantium quos 

      natus rerum sint placeat debitis odit nihil facere vitae modi sapiente, 

      provident ipsam minus eligendi magnam obcaecati illum, deleniti nobis 

      repudiandae, laudantium nulla at qui? Corrupti, quis. Earum.

      Velit nisi, minus error consectetur unde fuga distinctio obcaecati

      soluta quaerat optio.Esse ad velit perspiciatis aut sapiente iste placeat

      tempore repellendus! Laudantium non culpa ut eius veniam, possimus odit.

(5 phrases).

Emmet gère automatiquement l'indentation de votre code, ce qui améliore considérablement sa lisibilité. Chaque fois que vous ajoutez un élément enfant, il est indenté par rapport à son parent.

2.6 LES OPERATEURS

Les operateurs vous permettent d’écrire la structure d’une page de façon plus complète.

2.6.1 L’operateur +

Ajoute un élément frère au niveau du me me parent.

Exemple :

p+div+section génèrera

      
        <p></p>

        <div></div>

        <section></section>

div>p+span génèrera

      
        <div>

        <p></p>

        <span></span>

        </div>

2.6.2 L’operateur >

Ajoute un élément enfant. (Déjà explique)

2.6.3 L’operateur ^

Ajoute un élément parent.

Exemple : div>p^h1 génèrera

  
    <div>

    <p></p>

    </div>

    <h1></h1>

2.7 GROUPER LES ÉLÉMENTS

Il sera parfois nécessaire de grouper certains éléments pour pouvoir créer des successions plus complexes de balises.

Nous pourrons utiliser les parenthèses pour nous "simplifier" le travail.

Exemples : (header>h1+h2)+(main>section*3)+footer génèrera

  
    <header>

    <h1></h1>

    <h2></h2>

    </header>

    <main>

    <section></section>

    <section></section>

    <section></section>

    </main>

    <footer></footer>

2.8 LES MULTIPLICATEURS

*n : Multiplie l'élément précèdent n fois.

Exemples :

div>p*3 génèrera

      
        <div>

        <p></p>

        <p></p>

        <p></p>

        </div>

div.bg-white.text-dark*3 génèrera

      
        <div class="bg-white text-dark"></div>

        <div class="bg-white text-dark"></div>

        <div class="bg-white text-dark"></div>

2.9 NUMÉROTER DES ÉLÉMENTS

Il peut arriver de vouloir numéroter des id par exemple. Dans ce cas, nous utiliserons le symbole $ pour numéroter les éléments. Le symbole $ peut être répété autant de fois que nécessaire afin de représenter les différents chiffres souhaités.

Exemples :

div#element$*12 génèrera

      
        <div id="element1"></div>

        <div id="element2">lt;/div>

        <div id="element3"></div>

        <div id="element4"></div>

        <div id="element5"></div>

        <div id="element6"></div>

        <div id="element7"></div>

        <div id="element8"></div>

        <div id="element9"></div>

        <div id="element10"></div>

        <div id="element11"></div>

        <div id="element12"></div>

div#element$$*12 génèrera

      
        <div id="element01"></div>

        <div id="element02"></div>

        <div id="element03"></div>

        <div id="element04"></div>

        <div id="element05"></div>

        <div id="element06"></div>

        <div id="element07"></div>

        <div id="element08"&\gt;</div>

        <div id="element09"></div>

        <div id="element10"></div>

        <div id="element11"></div>

        <div id="element12"></div>

2.10 EXEMPLE COMPLET

  
  (header.container>div.row>div.col-12>h1{Titre du site}+h2{Sous
  titre})+(main.container>(section.row>div.col-12*2)*3)+footer.container-fluid>div.row>div.col-
  4>p*3^div.col-8>ul>li#lien$*4 Génèrera

  
    <header class="container">

    <div class="row">

    <div class="col-12">

    <h1>Titre du site</h1>

    <h2>Sous titre</h2>

    </div>

    </div>

    </header>

    <main class="container">

    <section class="row">

    <div class="col-12"></div>

    <div class="col-12"></div>

    </section>

    <section class="row">

    <div class="col-12"></div>

    <div class="col-12"></div>

    </section>

    <section class="row">

    <div class="col-12"></div>

    <div class="col-12"></div>

    </section>

    </main>

    <footer class="container-fluid">

    <div class="row">

    <div class="col-4">

    <p></p>

    <p></p>

    <p></p>

    </div>

    <div class="col-8">

    <ul>

    <li id="lien1"></li>

    <li id="lien2"></li>

    <li id="lien3"></li>

    <li id="lien4"></li>

    </ul>

    </div>

    </div>

    </footer>

2.11 EMMET ET LE CSS

w:100 génèrera width: 100px;
h:25vw génèrera height: 25vw;
ml20 génèrera margin-left: 20px;
d:n génèrera display: none;
p:a génèrera position: absolute;
bg génèrera background: #000;
! génèrera !important

CONCLUSION

En somme, Emmet est un outil indispensable pour tout de veloppeur web qui souhaite gagner en productivite et en efficacite . En maî trisant sa syntaxe concise, vous pouvez ge ne rer des structures HTML et CSS complexes en un temps record, tout en re duisant conside rablement le risque d'erreurs. N'attendez plus pour inte grer Emmet a votre workflow quotidien et de couvrez un nouveau niveau de productivite dans votre developpement front-end.

Emmet : Accélérez votre développement web avec ces raccourcis magiques

1 Qu’es ce que c’est Emmet

En résumé, Emmet offre de nombreux avantages :

Pour qui ?

2 Les Bases d'Emmet : Maîtriser la Syntaxe pour un Codage Efficace

2.1 STRUCTURE DE BASE D’UNE PAGE HTML

2.2 LES ÉLEMENTS HTML

2.3 LES ATTRIBUTS

2.3.1 Les attributs génériques

2.3.2 Créer une balise qui a des attributs spécifiques

2.4 LES ENFANTS

2.5 LE CONTENU DES BALISES

2.5.1 Texte tangible

2.5.2 Texte de test

2.6 LES OPERATEURS

2.6.1 L’operateur +

2.6.2 L’operateur >

2.6.3 L’operateur ^

2.7 GROUPER LES ÉLÉMENTS

2.8 LES MULTIPLICATEURS

2.9 NUMÉROTER DES ÉLÉMENTS

2.10 EXEMPLE COMPLET

2.11 EMMET ET LE CSS

CONCLUSION

Navigation

Contact

Legal

Basculer le thème

Réseaux sociaux