CSS3, les bases
La formation complète pour apprendre à concevoir le design d'une application avec CSS, l'essentiel pour les développeurs web.
Description
Imaginez un monde où chaque site web ressemble à une toile blanche, sans couleur, sans style. C'est le monde du web sans CSS. Heureusement, avec CSS, vous pouvez transformer cette toile en une œuvre d'art ! Dans notre formation en ligne, vous découvrirez comment CSS donne vie aux sites web, en ajoutant des couleurs, des styles de texte, et bien plus encore. C'est votre chance de maîtriser l'art de la présentation web.
CSS n'est pas seulement un outil technique ; c'est un moyen d'expression créative sur le web. Avec notre formation, vous apprendrez à utiliser CSS pour façonner le web selon vos désirs. Que vous souhaitiez créer des textes élégants, des mises en page dynamiques ou des designs interactifs, CSS est la clé pour transformer vos idées en réalité numérique.
Au-delà des bases théoriques, vous apprendrez des techniques pratiques pour gérer les styles, placer les éléments, et définir une charte graphique. Chaque module est conçu pour renforcer vos compétences et vous préparer à des applications réelles. Vous finirez le cours avec une compréhension profonde de comment prendre le contrôle total de l'affichage d'une application web.
Que vous soyez un débutant ou que vous ayez déjà quelques connaissances en CSS, cette formation est adaptée à tous les niveaux. Nous couvrons tout, des fondamentaux à des techniques avancées, pour vous préparer à devenir un intégrateur web hors pair. Chaque leçon est conçue pour être accessible, engageante et enrichissante.
Votre Voyage vers la Maîtrise du CSS Commence Ici !
N'attendez plus pour transformer votre passion pour le web en une compétence professionnelle. Rejoignez notre formation en ligne et commencez votre voyage vers la maîtrise du CSS. Avec des instructions expertes, des exercices pratiques, et un soutien communautaire, vous serez prêts à faire passer vos projets web au niveau supérieur.
Publics visés
- Toute personne, déjà initiée à HTML, souhaitant s'initier à la mise en forme d'une application web.
- Tout développeur souhaitant approfondir ces connaissances du design en CSS.
Pré-requis
- Savoir utiliser un poste informatique et connaître les bases au clavier.
- Connaître le langage HTML, qui sert de gabarit à CSS.
- Savoir utiliser un IDE, comme Visual Studio Code.
Compétences
Compréhension du métier d'intégrateur web.
Créer des styles sur les principaux éléments.
Savoir généraliser des styles CSS.
Savoir placer des éléments dans l'espace.
Comprendre les tailles en CSS.
Savoir utiliser le système Flexbox.
Savoir utiliser le système de Grid.
Savoir animer des éléments HTML.
Comprendre le design Responsive.
Savoir utiliser les principaux outils CSS.
Contenu du cours
CSS est l'alié parfait de HTML, il est utilisé partout et par tous pour donner vie à des interfaces riches et belles.
Vous faites déjà du HTML, et vous comprenez donc que la sémantique est importante, tout autant que le design d'un site !
Css n'est pas une technologie récente, mais elle a su évoluer au fil du temps, découvrons son histoire.
Html et css vont de pair, et si vous en maitrisez les fondements, vous serez donc intégrateur, un beau métier.
Que ce soit dans le navigateur ou dans Visual Studio, les plugins vous seront d'une grande utilité !
Découvrons comment mettre en musique les éléments html et leur donner du style, directement dans la structure, mais également dans un fichier séparé.
Il est possible d'appliquer du style qu'on appelle inline, c'est à dire dans le code HTML5, ce n'est cependant pas la meilleure manière de faire.
La meilleure technique est de créer un fichier des styles css, cette technique permettra de mutualiser les directives.
Il est possible de cibler directement des éléments, pour appliquer un style par default à tous les éléments d'un type particulier.
Deux sélecteurs de base existent et permettent d'appliquer du style, découvrons id et class.
Chaque éléments HTML dispose de possibilités, tout n'est pas toujours activé. Apprenons à respecter l'écriture des règles, les ordres et les capacité.
Certains pointeurs dans le code CSS nous permettront de cibler des enfants dans les parents et d'organiser l'appliquer du CSS, de le restreindre.
Il existe de nombreuses manières de gérer le style du texte, voyons ici les principales possibilités de CSS.
Les navigateurs appliquent eux-même des styles, chaque navigateur à même le sien, détruisons ce comportement.
Gras, italique, tout ce qui est possible avec HTML et encore plus est possible en CSS.
Pour gérer les paragraphes et les espacement dans le texte, CSS nous offre une belle palette d'outils.
Découvrons comment appliquer de la couleur à nos texte, ou même à des portions de texte en particulier.
Css nous permet d'appliquer des polices, disponibles ou non sur le système de l'utilisateur.
Css nous permet également de contrôler les alignements de texte, dans une moindre mesure.
Css ne permet pas uniquement d'appliquer de la couleur, il permet aussi de contrôler entièrement le placement des éléments d'une page et de créer de toute pièce un design de site.
Pour utiliser les placements, il faut bien comprendre comment les types d'éléments vont fonctionner.
Appliquons de la couleur et des bordures à nos bocs, pour mieux se repérer et avoir un bel affichage.
Css nous permet de gérer les marges de nos blocs, internes et externes.
Plusieurs système de tailles existent en CSS, découvrons les plus utilisés.
Css nous offre la possibilité d'insérer des image en fond, voyons les capacités de ce système.
Le positionnement CSS est une histoire de flux de document, en comprenant ce flux à l'aide des position, vous comprendrez comment le gérer.
Flex est une technique très intéressante pour placer des blocs et choisir leurs positions. En maitrisant les emplacements flex, le design de page n'aura plus de secret pour vous.
Pour travailler en Flex, il est essentiel de démarrer une emplacement parent en Flexbox, il sera alors possible de travailler avec les enfants.
Plusieurs règles d'alignement horizontal et vertical vont nous permettre de choisir les positionnements de nos enfants en Flex.
Avec la position, vous allez redéfinir le flux de votre emplacement Flexbox et gagner en possibilités.
Dans un emplacement Flex, tout est possible, voyons comment réordonner les enfants et comment contenir ou faire sortir du flux.
Avec Grow, Shrink et Basis, nous allons pouvoir donner des spécifications à chacun de nos enfants, pour choisir leur taille finale au sein de l'emplacement Flex.
Grid est différent de Flexbox, il ressemble à un tableau, mais avec beaucoup plus de possibilités, découvrons toutes les capacité des Grid en CSS.
Pour pouvoir travailler sur une grid, il va falloir, comment en Flex, démarrer un emplacement précis contenant des enfants.
Les unités de travail dans une grille sont fondamentalement différente de toutes les unités classiques en CSS. Découvrons Fr, Auto et minmax()
Comme dans un tableau, il sera possible de fusionner des cellules entre-elles mais également d'appliquer des gouttières, afin d'aérer notre design.
Des concepts importants sont à comprendre pour bien utiliser les grilles, voyons les impact sur chaque partie du code HTML.
Une des particularité intéressante de Grid est sa capacité à fonctionner sur une système de zone, nommée ou non.
Css dispose d'un module d'animation complet qui permet de donner vie à un design, en dynamisant les éléments HTML.
Un élément HTML peut avoir plusieurs état, nous parlerons des pseudos-éléments, ainsi que des transitions.
Pour appliquer une animation à plusieurs éléments différents, Css nous permet de créer des animations nommées et de les appliquer facilement.
Css dispose de capacité à transformer un élément via un module 2D, nous verrons les propriétés rotate, scale, skew et transform-origin.
Css dispose de capacité à transformer un élément via un module 3D, nous verrons les propriétés perspectives et origines, preserve-3d, rotateX, rotateY, translateZ, rotate 3D et translate 3D.
Avec la domination du mobile dans la navigation web d'aujourd'hui, il devient de plus en plus important de penser au rendu sur ces périphériques, découvrons le Responsive Design.
Avant d'apprendre à utiliser les déclarations responsive, il faut se poser des questions et définir un plan d'action, pensons Mobile First !
Quand on parle de design responsive, il est important d'avoir en tête la gestion des tailles d'écran, des pixels et du rendu sur les mobies.
En définissant des règles simples, nous allons conditionner notre affichage et le transformer, en rapport avec la taille de l'écran.
Quand on travail en responsive design, il faut réfléchir à toutes les parties du site, et évidemment les images et les textes devront s'adapter au mieux.
Framework et Sur-langage, dans le monde du CSS, des outils très importants existent et nous facilitent la vie, découvrons quelques-uns de ces outils.
Pour ne pas avoir à tout coder soit-même, il existe des Framework complet, qui définissent déjà des règles.
Personne n'a envie d'écrire 100 lignes pour gérer le style d'un parent avec deux enfants, voyons ces technologies puissantes pour en faire plus en écrivant moins.
Enseignant
Julien Moulin
Fondateur & Formateur Js/Ts
Julien Moulin est un expert en développement full stack (JS/TS) et un leader technique reconnu. Il excelle dans l'adoption de technologies innovantes tout en répondant aux besoins clients. Son approche allie pragmatisme et innovation, avec une expertise couvrant les plateformes e-commerce, les applications métiers et la modernisation des architectures existantes. En mentor passionné, il partage ses connaissances avec pédagogie, encourage l’apprentissage continu, et inspire ses équipes à relever des défis ambitieux.
Vous aimerez aussi
Découvrez de fabuleux cours dans les mêmes sujets
