17,00

Tuto Comment utiliser les medias queries en JavaScript avec JavaScript

17,00

  • Une formation vidéo de 1h33m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Comment utiliser les medias queries en JavaScript

ajouter ce cours aux favoris retirer ce cours des favoris

Dans cours en ligne, je vous propose de découvrir comment il est possible de mettre en place des instructions JavaScript liées à des medias queries.

Habituellement, c'est au sein du fichier CSS que l'on déclare nos medias queries et que l'on adapte ainsi notre code HTML en fonction de la taille du viewport.

Dans cette formation en vidéo, nous allons voir que nous allons pouvoir déclarer nos points de rupture au sein de notre fichier JS et ainsi mettre en place des instructions JavaScript qui s'exécuteront selon que la taille du viewport : soit au dessus ou bien en dessous du point de rupture défini.
Cette nouvelle connaissance nous permettra de pouvoir facilement augmenter l'expérience utilisateur en rendant nos pages web encore plus dynamiques !

Cette formation sera suivie d'un exercice concret afin de bien prendre en main cette méthode.
L'exercice consistera à modifier un formulaire selon la largeur de l'écran.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.

Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Afin d'être à l'aise avec le langage JavaScript, vous pouvez suivre ce cours complet de près de 14h00

Table des matières de cette formation JavaScript (durée : 1h33m)

  • Théorie
    • Découverte d'une méthode liée aux medias queries 00:09:45
    • Décider des instructions par rapport à un point de rupture 00:11:51
    • Bornage des medias queries 00:04:44
    • Gestion de l'événement "change" 00:04:08
  • Exercice d'application
    • Présentation de ce que nous allons faire ensemble gratuit 00:01:43
    • Mise en place du HTML 00:05:48
    • Mise en place du CSS 00:12:41
    • Afficher / masquer les labels 00:15:37
    • Gestion de l'état des labels au chargement de la page 00:04:24
    • Factorisation du code JS 00:05:36
    • Modifier les textes du titre de niveau 1 00:06:11
    • Modifier la valeur du bouton de formulaire 00:04:30
    • Modifier la valeur des placeholders 00:04:35
  • Conclusion
    • Conclusion 00:02:22



Formateur : Carl Brison

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

5,0
note moyenne

1
avis laissé
5 étoiles
1
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de membre-7807-7161 laissé le 14/10/2021
    Tuto clair. Très bonne information, dans une application j'avais fait le boulot avec le code suivant : window.onresize = function() { if (window.innerWidth > 1024 ) { } } Beaucoup plus pratique avec matchMedia. Merci
    "Merci beaucoup pour votre commentaire "

  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
Parcours Developpeur Front End
accédez à plus de 1356 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données