Icônes sociales

Appuyez sur ESC pour fermer

Apprendre le CSS

Catégories : Essentiel, L'extrémité avant
Liste de souhaits Partager
Partager le cours
Lien de la page
Partager sur les réseaux sociaux

À propos du cours

Libérez la puissance de la conception Web avec notre cours CSS complet ! 🎨

Vous maîtrisez les bases du HTML et êtes prêt à donner vie à vos sites web ? Ce cours est la prochaine étape pour devenir un développeur web compétent. Plongez dans l'univers du Feuilles de style en cascade (CSS) et apprenez à transformer du HTML simple en sites Web visuellement époustouflants, professionnels et réactifs.

Ce cours vous accompagne étape par étape, en commençant par les fondamentaux et en progressant vers des techniques plus avancées et concrètes. Vous dépasserez la simple théorie et acquerrez une expérience pratique de la création des composants essentiels des sites web modernes.

Voici un aperçu de ce que vous allez construire :

  • Barres de navigation interactives

  • Menus déroulants dynamiques

  • Formulaires Web et boutons stylisés

  • Info-bulles élégantes et superpositions d'images

  • Animations et transitions CSS attrayantes

À la fin de ce cours, vous comprendrez non seulement le « quoi » et le « comment » du CSS, mais aussi son « pourquoi ». Vous maîtriserez la mise en page, la typographie et les couleurs de vos pages web, et vous posséderez les compétences nécessaires pour créer des designs élégants et conviviaux, performants sur tous les appareils. Si vous êtes prêt à abandonner les pages web fades et à concevoir de belles expériences en ligne, ce cours est fait pour vous.

Afficher plus

Qu’allez-vous apprendre ?

  • Dans ce cours CSS complet, vous passerez des fondamentaux à des sujets plus avancés, acquérant les compétences nécessaires pour styliser des sites Web modernes et réactifs. 🎨
  • Maîtrisez les fondamentaux : comprenez les concepts de base du CSS, notamment comment appliquer des styles à l'aide de feuilles de style en ligne, internes et externes.
  • Utilisez des sélecteurs puissants : apprenez à cibler n’importe quel élément avec précision à l’aide de sélecteurs de balises, de classes et d’ID, ainsi que de sélecteurs d’attributs avancés et de pseudo-classes.
  • Style, texte et polices : obtenez un contrôle total sur la typographie de votre site Web avec des propriétés pour la décoration du texte, la transformation, l'espacement et les familles de polices, y compris la manière d'intégrer vos propres polices personnalisées.
  • Créez de la profondeur et un attrait visuel : apprenez à utiliser les bordures, les couleurs (y compris hexadécimales, RVB et HSL), les dégradés et les ombres pour faire ressortir vos éléments.
  • Créez des mises en page dynamiques : contrôlez le placement et le flux exacts de votre contenu à l'aide de propriétés de mise en page essentielles telles que la position, l'affichage et le flottement, et apprenez à gérer l'empilement avec z-index.
  • Donnez vie à votre site : créez des animations fluides et des effets interactifs à l'aide de transitions CSS et créez des animations complexes en plusieurs étapes avec @keyframes.
  • Développer des conceptions réactives : apprenez les bases de la conception réactive en utilisant les requêtes @media pour adapter votre mise en page à différentes tailles d'écran, des téléphones mobiles aux ordinateurs de bureau.
  • Créez des composants d'interface utilisateur courants : obtenez une expérience pratique de la création de composants de site Web essentiels à partir de zéro, notamment des boutons stylisés, des menus déroulants, une pagination, des barres de navigation, des formulaires et des info-bulles.

Contenu du cours

Leçon 1
Le CSS permet d'indiquer au navigateur l'apparence de votre code HTML. Dans cette introduction, vous utiliserez les styles correctement : en ligne, en interne ( ), and external (.css file)—and learn the anatomy of a rule: selector { property: value; }. We’ll compare IDs (#logo) and classes (.btn), when to use each, and how they affect specificity so your styles actually “stick.” You’ll practice targeting elements with type selectors (h1, p), class selectors (.card), ID selectors (#header), and simple combined selectors (h1.title). Along the way we’ll set foundational properties—color, font-size, margin, padding, background, border—while building a small, clean style sheet you can reuse. By the end, you’ll know how to attach styles without making a mess, how to choose between an ID and a class without second-guessing, and how to keep selectors readable so future you doesn’t hate present you.

  • Introduction et styles, sélecteurs d'ID et de classe, sélecteurs
    36:43
  • Quiz 1 : Introduction et sélecteurs

Leçon 2
Cette leçon explore l'utilisation efficace des sélecteurs CSS et approfondit le style des bordures et l'utilisation de différents formats de couleurs. Vous apprendrez à appliquer un style unique à plusieurs éléments à l'aide d'un sélecteur universel (*) ou en regroupant les sélecteurs par une virgule. La vidéo montre également comment attribuer plusieurs classes à un même élément HTML afin de combiner différentes règles de style. Une grande partie de la leçon est consacrée à un tutoriel détaillé sur la propriété border. Vous apprendrez à utiliser cette propriété abrégée pour définir simultanément la largeur, le style et la couleur d'une bordure. La vidéo aborde de nombreux styles de bordure, notamment les bordures pleines, pointillées, en tirets, doubles, rainurées et arquées. Elle montre également comment styliser chaque côté de la bordure d'un élément (haut, droite, bas, gauche) individuellement avec différents styles ou couleurs. Vous apprendrez également à créer des angles arrondis avec border-radius et même à utiliser une image comme bordure avec la propriété border-image. Enfin, la vidéo explique les différentes manières de définir les couleurs en CSS. Il couvre l'utilisation des noms de couleurs, des codes de couleur HEX, des valeurs RVB et HSL (teinte, saturation, luminosité), démontrant qu'ils peuvent tous être utilisés de manière interchangeable pour obtenir les mêmes résultats.

Leçon 3
Cette leçon explore le contrôle de la mise en page et de l'apparence des éléments à l'aide des propriétés display et float, et propose un guide complet sur le style des polices. Vous découvrirez les différentes valeurs de la propriété display, notamment block, inline, inline-block, flex et grid, et comprendrez leur impact sur la mise en page d'un élément. La vidéo explique également la différence entre masquer un élément avec display: none et visibility: hidden, en soulignant comment cette dernière préserve l'espace de l'élément dans la mise en page. La leçon aborde ensuite la propriété float, montrant comment faire flotter des éléments à gauche ou à droite pour permettre à d'autres contenus de les envelopper. La dernière section approfondie est consacrée aux polices CSS. Vous découvrirez l'importance de la propriété font-family et comment créer une « pile de polices » en fournissant plusieurs polices de secours au cas où le navigateur de l'utilisateur ne possède pas la police principale installée. La vidéo aborde également d'autres propriétés de police clés, telles que font-style (pour l'italique et l'oblique), font-variant (pour les petites capitales), font-weight (gras, plus gras) et font-size. Enfin, vous apprendrez à intégrer des polices personnalisées que vous avez téléchargées sur votre site Web à l'aide de la règle @font-face.

Leçon 4
Cette leçon propose un guide pratique pour contrôler l'espace, la visibilité et la disposition des éléments, et enfin, pour styliser une barre de navigation. Vous découvrirez d'abord la propriété margin, qui permet de créer de l'espace à l'extérieur du cadre d'un élément. La vidéo explique comment définir des marges sur les quatre côtés simultanément (haut, droite, bas, gauche) et comment utiliser les propriétés individuelles comme margin-top et margin-left. Ensuite, la vidéo présente la propriété opacity, montrant comment rendre un élément transparent ou semi-transparent avec des valeurs comprises entre 0,0 et 1,0. Vous explorerez ensuite la propriété overflow, qui contrôle le sort du contenu trop volumineux pour son conteneur. La leçon illustre les effets de scroll (ajout d'une barre de défilement), hidden (masquage du contenu) et visible (débordement du contenu). Le concept de padding est ensuite expliqué, soulignant sa similitude avec margin, tout en insistant sur le fait qu'il crée de l'espace à l'intérieur du cadre d'un élément. Enfin, tous ces concepts sont regroupés dans un tutoriel sur le stylisme d'une barre de navigation. Vous apprendrez à styliser le conteneur de navigation et ses liens, à utiliser les pseudo-classes de liens (:link, :visited, :hover, :active) pour créer des effets interactifs, à supprimer les soulignements avec text-decoration: none et à modifier le style du curseur de la souris avec la propriété cursor.

Leçon 5
Cette leçon offre un aperçu complet de la propriété CSS position et de son utilisation pour créer des mises en page et des éléments collants. Vous découvrirez les cinq principales valeurs de position : statique (par défaut), relative, absolue, fixe et collante. La vidéo explique comment le positionnement relatif fonctionne avec les décalages (haut, droite, bas, gauche) pour déplacer un élément de sa position normale, tandis que le positionnement absolu positionne un élément par rapport à son ancêtre le plus proche. L'un des points forts de la leçon est la création d'une barre de navigation collante. Vous assisterez à une démonstration pratique de l'utilisation de la propriété position:sticky avec un décalage top:0 pour qu'un élément reste en haut de la fenêtre d'affichage une fois le défilement terminé. La vidéo aborde également la propriété position:fixed et explique sa différence avec la propriété collante. La leçon présente ensuite la propriété outline comme alternative à border et montre comment utiliser outline-offset pour créer un espace entre le contour et le bord de l'élément. Enfin, la vidéo aborde les requêtes média et explique comment utiliser la règle @media pour appliquer différents styles en fonction de la taille de l'écran (largeur maximale, largeur minimale), de l'orientation (paysage) et même de la capacité de l'utilisateur à survoler (tout survol). Vous apprendrez également à cibler différents types de médias, comme l'écran ou l'impression, et à utiliser les propriétés overflow-x et overflow-y.

Leçon 6
Bien sûr. Après avoir regardé la vidéo https://www.youtube.com/watch?v=doVrD0IWWN4 dans son intégralité, j'en ai préparé la description détaillée. Voici la description de la leçon 6 : Textes, tableau, sélecteur général de frères et sœurs et index Z. Leçon 6 : Textes, tableau, sélecteur général de frères et sœurs et index Z Lien vidéo : https://www.youtube.com/watch?v=doVrD0IWWN4 Cette leçon couvre un ensemble diversifié de propriétés CSS intermédiaires, en se concentrant sur le style de texte avancé, l'empilement d'éléments, les sélecteurs puissants et un guide détaillé sur le style des tableaux HTML. La vidéo commence par explorer diverses propriétés de texte, en montrant comment modifier la casse du texte avec text-transform (majuscules, minuscules, majuscules) et comment gérer la direction du texte pour les langues de droite à gauche à l'aide de direction:rtl. La leçon explore ensuite en profondeur la propriété text-decoration, montrant non seulement le raccourci, mais aussi comment contrôler des aspects individuels comme la couleur, le style (par exemple, double, pointillé) et l'épaisseur. Elle explique ensuite comment contrôler l'ordre d'empilement des éléments avec la propriété z-index, montrant comment une valeur négative peut placer une image derrière du texte. Elle présente ensuite plusieurs sélecteurs combinatoires puissants qui définissent les relations entre les éléments, notamment le sélecteur général de frères (~), le sélecteur de frères adjacents (+), le sélecteur d'enfants (>) et le sélecteur de descendants (un espace). La dernière partie, la plus complète, de la leçon est un tutoriel pratique sur la mise en forme professionnelle d'un tableau HTML. Les techniques clés abordées incluent l'utilisation de border-collapse pour créer des bordures nettes d'une seule ligne, l'application d'un effet « zébré » avec la pseudo-classe :nth-child(even), l'ajout d'un effet :hover aux lignes du tableau et la création d'un style distinct pour l'en-tête du tableau (th).

Leçon 7
Cette leçon se concentre sur la création d'effets dynamiques et interactifs à l'aide de transitions CSS et de sélecteurs avancés tels que les pseudo-classes et les pseudo-éléments. Vous apprendrez comment utiliser les transitions pour animer les changements de propriétés de manière fluide sur une durée définie, évitant ainsi les changements brusques et instantanés qui se produisent par défaut. La vidéo détaille la propriété de transition et explique comment contrôler les propriétés de transition (par exemple, la largeur), la durée de transition, la fonction de synchronisation de transition (comme ease et linear) et le délai de transition. Un exemple pratique montre comment agrandir une image de manière fluide au survol (:hover). La leçon explique ensuite la différence entre les pseudo-classes (qui définissent un état particulier d'un élément, comme :hover) et les pseudo-éléments (qui stylisent une partie spécifique d'un élément). Vous apprendrez à utiliser des pseudo-éléments comme ::first-letter et ::first-line pour styliser le début d'un bloc de texte, et ::before et ::after pour insérer du contenu, comme une image, avant ou après le contenu d'un élément. Enfin, la vidéo explique le concept de spécificité CSS et présente la règle !important, démontrant comment elle peut être utilisée pour remplacer d'autres styles conflictuels et garantir qu'un style spécifique est toujours appliqué, quelle que soit sa position dans la feuille de style.

Leçon 8
Cette leçon propose un guide complet sur le style des formulaires HTML, présente de puissants sélecteurs d'attributs et explique comment effectuer des calculs directement dans CSS. Vous apprendrez à styliser différentes entrées de formulaire, notamment les champs de texte, de mot de passe, d'e-mail et les champs de texte.