Dev. FrontEnd#1 : Popin animée
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Dev. FrontEnd#1 : Popin animée

Carl Brison
12,99€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

J'ai le plaisir de vous proposer ici une nouvelle série de tutos entièrement dédiés au développement Front-End ! Pour ce premier cours, nous allons réaliser ensemble une popin avec un effet d'apparition (également appelée, selon les cas, toastsnackbar, interstitiel ou overlay)

C'est quoi une popin animée ?

Lorsqu'un utilisateur va cliquer sur un lien ou un bouton, cela fera alors apparaitre une zone, qui viendra recouvrir partiellement (ou en totalité) le contenu de la page. Le tout dans la même fenêtre (c'est d'ailleurs ce qui différencie la popin de la popup). Pour fermer cette popin, qui est apparue en "overlay" de notre contenu (par dessus donc), il nous suffira de cliquer sur un nouveau bouton ou lien.

Pour ce premier tutoriel frontend, nous allons utiliser les langages suivants :

Je met à votre disposition l'ensemble des scripts issus de ce tuto dans les fichiers de travail. Je resterai disponible dans le salon d'entraide du cours pour répondre à vos questions éventuelles. Enfin, sachez qu'un QCM est à votre disposition en fin de formation, pour tester vos nouvelles connaissances en frontend !

Bon tuto.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Création d'un Popup glissé en CSS et JavaScript
Chapitre 2
Conclusion
Chapitre 3
Bonus

Plan détaillé du cours

Chapitre 1 : Création d'un Popup glissé en CSS et JavaScript
36m54
 
Leçon 1Mise en place des bases HTML
Leçon 2Mise en place des bases CSS
Leçon 3Mise en place du Popup
Leçon 4Mise en place du JavaScript
Chapitre 2 : Conclusion
01m12
 
Leçon 1Conclusion
Chapitre 3 : Bonus
24m47
 
Leçon 1Amélioration, réflexion
Leçon 2Amélioration, solution
Leçon 3Popup glissé de la gauche
Leçon 4Parce qu'on est des Pros, aucun détail ne doit être négligé !

Avis des apprenants

Détail des avis
105
Apprenants
5
Commentaires
5/5
Note moyenne
5/5
5
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 09/02/2023
Merci Carl pour ce super tuto dans la série DevFronEnd. Voilà un outil qui me sera très utile. Faire du Front pour terminer la journée avec de la couleur, franchement, c'est sympa. Cours de qualité très bien expliqué. Validé 100 % DevFronEnd#1
Carl Brison
Carl Brison
Merci beaucoup Alain, c'est très gentil ;-)
Johanna Bader
Johanna Bader
Publié le 13/08/2019
Comme d'habitude formateur très bien
Carl Brison
Carl Brison
Merci à vous ;-)
Philippe Piatti
Philippe Piatti
Publié le 09/08/2019
Carl toujours aussi bon ! et en plus tes tutos vont au dela de nos attentes et nous fait avancer toujours plus loin encore merci pour tout ^^
Carl Brison
Carl Brison
Merci BEAUCOUP pour ton commentaire super sympas ;-)

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

CSS 3, HTML 5, JavaScript

Que contient le fichier source ?

Le script du tuto

Quel est le niveau requis pour suivre ce tuto ?

débutant

Payer plus tard

Prix d'achat : 12,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1422 tutos gratuits

Notre politique de protection des données