$ 13.00

Tuto Dev. FrontEnd#1 : Popin animée avec CSS, HTML, JavaScript

$ 13.00

  • Une formation vidéo de 1h02m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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.

Table des matières de cette formation CSS, HTML, JavaScript (durée : 1h02m)

  • Création d'un Popup glissé en CSS et JavaScript
    • Mise en place des bases HTML gratuit 00:07:10
    • Mise en place des bases CSS 00:06:52
    • Mise en place du Popup 00:11:07
    • Mise en place du JavaScript 00:11:45
  • Conclusion
    • Conclusion 00:01:12
  • Bonus
    • Amélioration, réflexion 00:05:13
    • Amélioration, solution 00:06:54
    • Popup glissé de la gauche 00:07:08
    • Parce qu'on est des Pros, aucun détail ne doit être négligé ! 00:05:32



Formateur : Carl Brison

Carl Brison a publié 116 tutoriels et obtenu une note moyenne de 4,9/5 sur 7 233 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

4
avis laissés
5 étoiles
4
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de bader_jonathan laissé le 13/08/2019
    Comme d'habitude formateur très bien

  • 5
    avis de membre-3200-4567 laissé 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 ^^
    "Merci BEAUCOUP pour ton commentaire super sympas ;-)"

  • 5
    avis de ffittywebdev laissé le 09/06/2019
    Très bon tuto, finalement lorsque c'est bien expliqué les effets que l'on pensait compliqué ne le sont absolument pas ! J'ai retravaillé un peu le tuto, en utilisant "addEventListener et en elevant le "onclick" du HTML, et j'ai aussi fait une "exit-intent" en utilisant mouseleave. Les bases et les explications claires de la vidéo m'ont permis de tester d'autres choses, merci beaucoup !

  • 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
accédez à plus de 1086 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données