CSS : la Fonction Calc
CSS : la Fonction Calc
Dans ce tuto HTML / CSS / Javascript en vidéo, nous allons voir ensemble comment intégrer une Landing Page fluide avec des animations au scroll : changement de direction, vitesses différentes...
La maquette est fournie dans les sources, mais si vous êtes intéressé, je vous apprends également dans ce tuto à créer cette landing page de A à Z sur Figma.
Nous obtiendrons une page web qui restera identique lors du redimensionnement de la fenêtre car toutes les tailles de polices seront définies avec une nouvelle unité (viewport) et non plus en pixels. Et tout cela sans utiliser les media queries.
Je vous invite à regarder l'extrait vidéo pour vous rendre compte du résultat final.
Les fichiers sources contenant la maquette Figma, les fichiers de départ ainsi que les fichiers finaux sont inclus avec le tuto.
N'hésitez pas à me soumettre des questions dans le salon d'entraide si vous rencontrez des difficultés pendant ou après le visionnage de la vidéo.
Bon tuto !
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Leçon 1
Introduction & tour d'horizon de la maquette et des fichiers sources
Introduction & tour d'horizon de la maquette et des fichiers sources
Leçon 2
Poser la structure HTML de la page web
Poser la structure HTML de la page web
Leçon 3
Ajouter les propriétés CSS essentielles à toute la page
Ajouter les propriétés CSS essentielles à toute la page
Leçon 4
Finaliser l'intégration CSS de la section 01
Finaliser l'intégration CSS de la section 01
Leçon 5
Finaliser l'intégration CSS de la section 02
Finaliser l'intégration CSS de la section 02
Leçon 6
Finaliser l'intégration CSS de la section 03
Finaliser l'intégration CSS de la section 03
Leçon 7
Finaliser l'intégration CSS de la section 04
Finaliser l'intégration CSS de la section 04
Plan détaillé du cours
Leçon 1Introduction & tour d'horizon de la maquette et des fichiers sources
04m31s
Leçon 2Poser la structure HTML de la page web
08m04s
Leçon 3Ajouter les propriétés CSS essentielles à toute la page
17m08s
Leçon 4Finaliser l'intégration CSS de la section 01
06m04s
Leçon 5Finaliser l'intégration CSS de la section 02
06m35s
Leçon 6Finaliser l'intégration CSS de la section 03
04m26s
Leçon 7Finaliser l'intégration CSS de la section 04
07m28s
Leçon 8Palier au problème de taille de police sur le texte courant
04m01s
Leçon 9Ajouter les animations au scroll & conclusion
13m10s
Aperçus
Avis des apprenants