Motion Web Design : créez une animation façon Twitter
Motion Web Design : créez une animation façon Twitter
Dans ce cours en ligne, je vous propose d'apprendre à installer un mode Dark Mode sur votre site. Nous verrons comment intégrer facilement un switch jour / nuit sur vos pages web.
Pourquoi proposer un mode Dark Mode sur votre site ?
Plusieurs avantages :
- Le mode nuit fatigue moins les yeux
- Ce mode est moins gourmand en énergie (les pixels sombres consommant moins).
- En termes de lisibilité certaines couleurs se voient mieux sur fond noir
En proposant cette fonctionnalité, vous améliorez ainsi l'expérience utilisateur de votre site !
Pour installer un Dark Mode, nous allons utiliser les langages HTML et CSS.
Le but de ce tuto issu de la collection "Objectif Frontend" est d'apprendre à mettre en place rapidement et facilement un switch sur une page web afin de venir manipuler les éléments HTML de la page en modifiant leur couleur.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je mets les codes de ce tuto à votre disposition.
Pour aller plus loin dans les connaissances utilisées dans ce tutoriel, je vous propose un tuto dédié à la connaissance des combinateurs en CSS.
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Leçon 1
Mise en place du code HTML
Mise en place du code HTML
Leçon 2
Mise en forme générale de la page web
Mise en forme générale de la page web
Leçon 3
Mise en forme des détails de la page web
Mise en forme des détails de la page web
Leçon 4
Mise en place du fonctionnement du switch
Mise en place du fonctionnement du switch
Plan détaillé du cours
Leçon 1Mise en place du code HTML
05m38s
Leçon 2Mise en forme générale de la page web
10m32s
Leçon 3Mise en forme des détails de la page web
09m29s
Leçon 4Mise en place du fonctionnement du switch
10m01s
Aperçus
Avis des apprenants