Formation JavaScript : Création de composants Web
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
3h24
de formation
37
leçons vidéo
4
chapitres
Débutant
niveau requis
Mediaforma
Mediaforma
Formateur

Formation JavaScript : Création de composants Web

4.7/5 Trustpilot (1395 avis) Satisfait ou remboursé
3h24
de formation
37
leçons vidéo
4
chapitres

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

Table des matières

Chapitre 1 : Rappels ECMAScript 6

35m57
 
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

09m05
 
Leçon 1L'éditeur de code Visual Studio Code
Leçon 2L'extension Emmet

Chapitre 3 : Première approche des composants Web

1h27
 
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

1h12
 
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
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

Quel est le niveau requis pour suivre ce tuto ?

débutant

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
19,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
3h24 de vidéo • 4 chapitres
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ 27,91€ /mois
Le 1er mois, puis 34,90€ - sans engagement
Cette formation + 6 788 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Profiter de l'offre
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.7/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données