Formation JavaScript : Création de composants Web
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

Formation JavaScript : Création de composants Web

Mediaforma
20,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Cette formation en ligne a été conçue pour les développeurs JavaScript qui veulent apprendre à créer des composants Web
En d'autres termes, des balises HTML personnalisées.

Elle est divisée en quatre grandes parties :

  • Rappels ECMAScript 6
    Rappels sur l'évolution ECMAScript 6 de JavaScript. Ces notions seront utilisées tout au long de la formation. Si vous connaissez déjà les arrow functions, les classes JavaScript, la notion d'héritage, l'opérateur spread et le destructuring, vous pouvez directement passer à la deuxième partie.
  • Préparation de l'environnement de développement
    Installation de Visual Studio Code et découverte du plugin Emmet. Si VS Code est déjà installé sur votre ordinateur et si vous connaissez Emmet, vous pouvez directement passer à la troisième partie.
  • Première approche des composants Web
    Apprentissage pas à pas et par la pratique de tout ce que vous devez savoir pour créer des composants Web : injection de contenu dans le DOM, écoute événementielle dans un composant, isolation du composant du reste du DOM, cycle de vie des composants, shadow DOM, slots, écoute des attributs, style des composants, etc.
  • Développement de composants
    Dans cette partie, je vous propose d'appliquer ce que vous avez appris pour créer cinq composants très différents. Je vous donne les consignes pour chaque composant et c'est vous qui codez à partir de zéro. Une correction est proposée pour chaque exercice et les fichiers source sont fournis.

Quel que soit votre niveau actuel en programmation Web, je vous garantis qu'à la fin de ce cours, vous saurez créer toutes sortes de composants Web. Il ne vous restera plus qu'à les utiliser pour faciliter vos développements front-end.

Mais attention, je répète qu'il s'agit d'une formation pour débutants. Si vous savez déjà créer des composants Web, passez votre chemin, cette formation n'est pas faite pour vous. Par contre, si vous savez (au moins un peu) coder en HTML, CSS et JavaScript et que vous voulez apprendre à créer des composants Web, cette formation est parfaitement adaptée pour vous.

Un manuel illustré complet est accessible à la fin du cours. Il reprend le contenu intégral de la formation.
Je ne peux vous conseiller qu'une chose : codez et progressez à votre rythme. Petit à petit, la création de composants Web sera une seconde nature et vous apprécierez leur puissance et leur souplesse.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Rappels ECMAScript 6
Chapitre 2
Préparation de l'environnement de développement
Chapitre 3
Première approche des composants Web
Chapitre 4
Développement de composants

Plan détaillé du cours

Chapitre 1 : Rappels ECMAScript 6
35m57s
 
Leçon 1Let et const remplacent var
Leçon 2Les arrow functions
Leçon 3Les template literals
Leçon 4Les classes
Leçon 5La notion d'héritage
Leçon 6Les objets littéraux
Leçon 7Affectation d'objets
Leçon 8Spread operator
Leçon 9Destructuring
Chapitre 2 : Préparation de l'environnement de développement
09m05s
 
Leçon 1L'éditeur de code Visual Studio Code
Leçon 2L'extension Emmet
Chapitre 3 : Première approche des composants Web
1h27m
 
Leçon 1Comment appeler un composant Web
Leçon 2Un composant élémentaire
Leçon 3Ajout de contenu dans le DOM
Leçon 4Écouter les événements dans un composant
Leçon 5Utiliser des attributs dans un composant
Leçon 6Isoler le composant du code HTML
Leçon 7Un peu plus loin dans le cycle de vie des composants
Leçon 8Utiliser le innerHTML d'un composant
Leçon 9Utiliser des slots nommés
Leçon 10Styler le Shadow DOM
Leçon 11Styler les slots
Leçon 12Styler les composants
Leçon 13Styler conditionnellement un composant
Leçon 14Styler un composant en fonction de ses parents
Leçon 15Prendre en compte le changement des attributs dans un composant
Leçon 16Étendre un élément existant
Chapitre 4 : Développement de composants
1h12m
 
Leçon 1Premier exercice - Une palette de couleurs
Leçon 2Correction du premier exercice - Palette de couleurs
Leçon 3Deuxième exercice - Texte avec halo
Leçon 4Correction du deuxième exercice - Texte avec halo
Leçon 5Troisième exercice - Service Web pour afficher l'icône d'un drapeau
Leçon 6Correction du troisième exercice -Service Web pour afficher l'icône d'un drapeau
Leçon 7Quatrième exercice - Indicateur de scrolling vertical
Leçon 8Correction du quatrième exercice - Indicateur de scrolling vertical
Leçon 9Cinquième exercice - Prévisions météo sur 15 jours
Leçon 10Correction du cinquième exercice - Prévisions météo sur 15 jours

Avis des apprenants

Détail des avis
7
Apprenants
2
Commentaires
5/5
Note moyenne
5/5
2
4/5
0
3/5
0
2/5
0
1/5
0
Membre-6222-8254
Membre-6222-8254
Publié le 02/07/2023
Super cours qui va à l'essentiel, et merci beaucoup pour la documentation en pdf et les fichiers sources.
Bernard Chabloz
Bernard Chabloz
Publié le 28/06/2023
Merci pour cet excellent tuto, qui m'a appris plein de choses.

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

JavaScript

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1337 tutos gratuits

Notre politique de protection des données