Dans ce cours en ligne, je vous propose de découvrir la fonction calc() du CSS.
Il s'agit d'une fonction qui permet d'effectuer des calculs que seuls les navigateurs sont capables de comprendre.
En effet, la puissance de la fonction calc() permet de calculer différentes valeurs ayant des unités de mesure différentes.
Au programme de ce tuto sur la fonction Calc en CSS
Dans ce tutoriel en vidéo, je montrerai quelques astuces réservées à la fonction calc() que vous pourrez aisément utiliser dans vos codes CSS.
Une fois la théorie bien acquise, nous terminerons notre formation par un petit exercice pratique.
Ce dernier va consister dans la création d'une grille virtuelle de 12 colonnes, comme le font les frameworks CSS, en utilisant la magie de la fonction calc ainsi que des flexbox.
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.
Pour suivre correctement cette atelier, je recommande de connaître les notions avancées de Flexbox.
Table des matières de cette formation CSS (durée : 39m07s)
-
Cours sur la fonction Calc
- Présentation de la fonction calc 00:03:34
- Règles à savoir 00:02:40
- Mélange des unités 00:04:43
- Manipuler la taille des textes 00:04:33
- Positionner des éléments HTML 00:04:07
- Positionner une boîte horizontalement 00:02:31
-
Exercice pratique
- Mise en place des bases 00:06:58
- Mise en place des 2 premières colonnes 00:04:39
- Mise en place des colonnes suivantes 00:04:00
-
Conclusion
- Conclusion 00:01:22
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Excellent tuto toujours tres bien expliqué
-
Très bon tuto. Je comprends beaucoup mieux le fonctionnement de cette fonction calc. Merci
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés