Dans ce nouveau tuto dédié au développement Font-End, nous allons apprendre à réaliser une galerie d'images.
Un clic sur une vignette affichera l'image en grand et cela sans devoir rafraîchir la page web.
Afin d'exécuter ce script, nous allons utiliser le langage JavaScript .
Pour ce qui sera de la mise en page, nous utiliserons la technologie flexbox.
Evidemment, nous mettrons en place le côté responsive afin que notre galerie d'images s'adapte à tout type d'écran.
Si vous ne connaissez pas flexbox, je mets à votre disposition un tuto entièrement dédié à son apprentissage.
Les codes de ce tuto sont disponibles en simple téléchargement.
Un QCM termine ce cours.
Je reste disponible dans le salon d'entraide si vous avez des questions !
Table des matières de cette formation JavaScript, CSS (durée : 34m13s)
-
- Présentation du job 00:01:19
- Mise en place du code HTML 00:02:33
- Mise en place du code CSS 1/3 00:04:39
- Mise en place du code CSS 2/3 00:05:41
- Mise en place du code CSS 3/3 00:05:49
- Mise en place du code JavaScript 00:06:34
- Mise en place d'un media queries 00:06:09
- Conclusion 00:00:22
- Pour aller plus loin 00:01:07
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Un petit tuto sympathique. J'ai toujours été curieuse de savoir comment il était possible d'afficher une grande image à côté ou en-dessous d'une vignette. Je viens d'avoir la réponse. Par contre je ne suis pas convaincue par le côté responsive de la grande image sur un mobile. Elle déborde. Et là je cale :-) En tout cas ce petit exercice a comme toujours été bien agréable à suivre. Merci beaucoup Carl.
-
Merci Carl pour ton explication sur JavaScript, car grâce à toi je fais de grands pas, encore merci !
-
Très bien encore un tuto de dévoré...
-
Avec quelles versions de logiciels ce tuto est-il compatible ?JavaScript , CSS 3
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Le code source du tuto
note moyenne
avis laissés