Comment utiliser les medias queries en JavaScript
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Comment utiliser les medias queries en JavaScript

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

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Théorie
Chapitre 2
Exercice d'application
Chapitre 3
Conclusion

Plan détaillé du cours

Chapitre 1 : Théorie
30m28
 
Leçon 1Découverte d'une méthode liée aux medias queries
Leçon 2Décider des instructions par rapport à un point de rupture
Leçon 3Bornage des medias queries
Leçon 4Gestion de l'événement "change"
Chapitre 2 : Exercice d'application
1h01
 
Leçon 1Présentation de ce que nous allons faire ensemble
Leçon 2Mise en place du HTML
Leçon 3Mise en place du CSS
Leçon 4Afficher / masquer les labels
Leçon 5Gestion de l'état des labels au chargement de la page
Leçon 6Factorisation du code JS
Leçon 7Modifier les textes du titre de niveau 1
Leçon 8Modifier la valeur du bouton de formulaire
Leçon 9Modifier la valeur des placeholders
Chapitre 3 : Conclusion
02m22
 
Leçon 1Conclusion

Aperçus

Avis des apprenants

Détail des avis
54
Apprenants
2
Commentaires
5/5
Note moyenne
5/5
2
4/5
0
3/5
0
2/5
0
1/5
0
Valérie Arno
Valérie Arno
Publié le 12/11/2023
Ça fait un moment que je n'ai pas touché à tout ça. Ça rafraîchit la mémoire :-) Bien pratique le JavaScript quand on sait le manipuler. Un tuto intéressant et même pour le domaine des media queries. Mais si le visiteur n'active pas son JavaScript, il n'aura rien de tout ça. Dans ce cas il faudra l'avertir ou prévoir un script pour le détecter. En tout cas ça allège bien le HTML et le CSS aussi. Merci Carl. Toujours aussi zen et efficace.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil, Valérie. Je pense que le nombre de personne qui désactive le JavaScript est TRES limité, et en plus ils le font en connaissance de cause.
Sebastien Jeandenans
Sebastien Jeandenans
Publié 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
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Payer plus tard

Prix d'achat : 16,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