Découvrez tous les secrets de la mise en page avec CSS et apprenez à transformer vos idées en interfaces web modernes, structurées et visuellement attractives.
Cette formation vous accompagne depuis les fondamentaux du CSS jusqu’aux propriétés avancées : sélecteurs, couleurs, espacements, positionnement, variables, pseudo-classes, transformations, transitions, media queries et animations.
Cette formation comprend 4 sections et 36 leçons.
Description de la formation Les secrets de la mise en page avec CSS
Le CSS permet de contrôler l’apparence et la mise en page des sites web. Cette formation vous apprend non seulement les propriétés du langage, mais surtout comment les combiner pour créer des designs propres, modernes et efficaces.
Vous commencerez par découvrir le fonctionnement du CSS, sa syntaxe, les différentes méthodes permettant de l’intégrer à une page, les sélecteurs, les relations entre éléments, l’inspecteur du navigateur, les unités de mesure et les couleurs.
Vous étudierez ensuite les propriétés utilisées au quotidien pour gérer le texte, les marges, les dimensions, les arrière-plans, les bordures, les liens, les listes, les tableaux, l’affichage, le positionnement, les débordements, l’opacité et les ombres.
La dernière partie approfondit des fonctionnalités plus avancées comme les filtres, les variables CSS, les pseudo-classes et pseudo-éléments, les polices personnalisées, les transformations 2D et 3D, les transitions, les combinateurs, les media queries et les animations.
Un Slide Deck est inclus dans les ressources de la formation.
Niveau : Débutant.
Ce que vous saurez faire après la formation
- comprendre les fondamentaux du CSS et du design web ;
- écrire et intégrer correctement du CSS dans vos pages web ;
- utiliser les sélecteurs et comprendre les relations entre les éléments HTML ;
- utiliser l’inspecteur Chrome pour tester des modifications en temps réel ;
- gérer les couleurs, unités de mesure, textes et arrière-plans ;
- maîtriser les marges, dimensions, bordures et ombres ;
- mettre en forme des liens, listes et tableaux ;
- contrôler l’affichage, le positionnement et les débordements des éléments ;
- utiliser les variables, pseudo-classes et pseudo-éléments CSS ;
- intégrer des polices personnalisées ;
- créer des transformations 2D et 3D ainsi que des transitions ;
- adapter une mise en page aux différentes tailles d’écran avec les media queries ;
- créer des animations CSS ;
- structurer votre CSS afin d’obtenir des pages propres et plus faciles à maintenir.
À qui s’adresse ce cours ?
Débutants en CSS
Pour apprendre à coder en CSS depuis zéro grâce à un parcours progressif allant des fondamentaux aux techniques avancées.
Créateurs de sites web
Pour apprendre à concevoir des pages web plus modernes, structurées et visuellement attractives.
Utilisateurs souhaitant approfondir CSS
Pour clarifier certains concepts et découvrir des fonctionnalités CSS plus avancées.
Développeurs web en progression
Pour renforcer leur maîtrise de la mise en page et mieux structurer leurs feuilles de style.
Prérequis
- Aucune expérience préalable en CSS n’est nécessaire.
- Des connaissances de base en HTML sont facultatives ; une remise à niveau est disponible.
- Disposer d’un ordinateur.
- Avoir de la motivation et une réelle envie d’apprendre.
Programme complet du cours
MODULE 1 – INTRODUCTION
1.1 Welcome to this course!
1.2 What is CSS used for?
1.3 How do you write CSS? Syntax!
1.4 3 Ways to Embed CSS and Which One We’ll Use
1.5 What is a Selector and how to use it?
1.6 How is the kinship system organized in CSS?
1.7 How and why to use your browser inspector? Discover the Chrome console!
1.8 What is the process of formatting an element in CSS?
1.9 What are the units of measurement in CSS?
1.10 How to use colors? 3 ways to use colors in CSS!
MODULE 2 – GENERAL PROPERTIES
2.1 CSS Basics – Adding Comments and Text Styles
2.2 How to add inner and outer margin to element?
2.3 How to manage the height and width of our elements?
2.4 Get Lazy! Discovering Shortcut Properties
2.5 How to add background colors or images?
2.6 How to create borders in CSS?
2.7 How to apply styles to our links? And make them real buttons!
2.8 How to format our lists?
2.9 How to make a table stylish?
2.10 How to use the Display property and what is it used for?
2.11 How to position our elements anywhere on our web page?
2.12 What to do if a container’s children overflow from the container? Discovering Overflows!
2.13 How to place elements under or on top of other elements?
2.14 How to manage opacity in CSS? 2 methods!
2.15 How to add shadow to our texts and blocks?
MODULE 3 – ADVANCED PROPERTIES
3.1 How and in which cases to use filters in CSS?
3.2 What are variables used for in CSS?
3.3 What is a Pseudo-Class and how to use it? Event handling in CSS!
3.4 How to apply styling using pseudo-elements?
3.5 How to integrate custom fonts on our site?
3.6 How to use 2d and 3d transformations in CSS and apply them to our elements?
3.7 How to add charm to our effects using transitions?
3.8 How to avoid mistakes and target children using Combinators?
3.9 How to apply style based on screen size? Discovering media queries!
3.10 How to bring your website to life using CSS animations?
RESOURCES
4.1 Slides Deck
Questions fréquentes
Comment fonctionne une formation vidéo ITFIT ?
La formation est organisée en sections et en leçons afin de progresser étape par étape. Vous commencez par les fondamentaux du CSS avant d’aborder les propriétés courantes puis les techniques avancées.
Comment cette formation CSS est-elle organisée ?
Cette formation comprend 4 sections et 36 leçons. Elle couvre les fondamentaux du CSS, les propriétés générales, les techniques avancées et se termine par une ressource complémentaire.
Des slides sont-elles incluses ?
Oui. La section Ressources comprend un Slide Deck permettant de retrouver les notions abordées pendant la formation.
Faut-il déjà connaître le CSS ?
Non. Aucune expérience préalable en CSS n’est nécessaire. Le cours commence par les bases et progresse ensuite vers des fonctionnalités plus avancées.
Le responsive design est-il abordé ?
Oui. Le programme comprend une leçon consacrée aux media queries afin d’appliquer des styles différents selon la taille de l’écran.
Les animations CSS sont-elles incluses ?
Oui. Les transformations, transitions et animations CSS sont abordées dans le module consacré aux propriétés avancées.
Puis-je suivre cette formation à mon rythme ?
Oui. Vous pouvez progresser dans les différentes sections à votre rythme et revenir sur les leçons lorsque vous souhaitez revoir une propriété ou une technique.
Un certificat est-il remis après la formation ?
Oui. Une formation ITFIT terminée donne accès à un certificat de fin de formation ITFIT attestant de la réalisation du parcours.
Le certificat ITFIT est-il une certification officielle ou un diplôme ?
Non. Le certificat ITFIT est une attestation de fin de formation délivrée par ITFIT. Il ne constitue ni une certification officielle d’un éditeur ni un diplôme d’État.
Formations recommandées
Fais passer ton site web au stade supérieur grâce à Bootstrap 4
Pour poursuivre avec un framework CSS permettant de construire plus rapidement des interfaces web modernes et responsives.
Deviens maître de ton contenu web grâce au HTML
Pour apprendre à structurer correctement les pages web et consolider les bases indispensables avant leur mise en forme avec CSS.
Programmation Python Intermédiaire
Pour approfondir la programmation avec les structures de données, les fonctions avancées, NumPy, Matplotlib et la programmation orientée objet.
Apprenez Python : Guide pour Débutants
Pour découvrir les fondamentaux de la programmation avec Python et développer progressivement vos compétences en code.
