Lecture automatique
Autocomplete
Session précédente
Terminez et continuez
CSS de A à Z
Introduction
Introduction au cours (4:35)
Mise en place et explication VS CODE (8:07)
Astuce pour suivre le cours (0:58)
Les bases du CSS
Téléchargement de la première section (3:24)
Déclarer son CSS (9:57)
La sélection partie 1 (10:21)
La sélection partie 2 (11:31)
Les couleurs (13:10)
Spacing et bordures (19:05)
Largeur et hauteur partie 1 (12:35)
Largeur et hauteur partie 2 (12:33)
Le modèle de boîte (12:52)
La propriété Display (5:49)
Les images, partie 1 (9:21)
Les images, partie 2 (11:14)
Styliser des vidéos (4:47)
Gérer le texte (19:01)
Utiliser Google Font (10:02)
Utiliser une police téléchargée (6:42)
Tronquer un texte (3:36)
Intro de l'exercice : Coder un bouton (3:37)
Résolution de l'exercice : Coder un bouton (4:03)
Intro de l'exercice : Coder une carte (0:38)
Résolution de l'exercice : Coder une carte (12:18)
Intro de l'exercice : Coder un article de blog (0:55)
Résolution de l'exercice : Coder un article de blog (11:10)
Les règles du CSS
Les piliers du CSS (7:31)
L'héritage (7:44)
La cascade (3:06)
La spécificité (9:24)
Les docs officielles et la compatibilité (5:51)
Les différentes dispositions en CSS (9:27)
Intro de l'exercice : Devine la couleur (1:36)
Résolution de l'exercice : Devine la couleur (3:24)
Propriétés et concepts importants
Les pseudo-classes (7:29)
Les sélecteurs (11:08)
Les pseudo éléments (5:29)
Les positions (13:46)
Le contexte d'empilement (8:00)
Les variables CSS (3:45)
Les unités de mesure (10:51)
Design system : Explication (7:06)
Float et le bug des floats (3:48)
Les "vendors prefixes" (3:58)
Ombre et "outline" (7:10)
Opacité et visibilité (4:32)
Comprendre la propriété overflow (2:33)
La fusion des marges (2:24)
Intro de l'exercice : La sélection (1:18)
Résolution de l'exercice : La sélection (5:40)
Intro de l'exercice : Le millefeuille (0:53)
Résolution de l'exercice : Millefeuille (4:21)
Intro de l'exercice : La navbar (0:40)
Résolution de l'exercice : La navbar (3:55)
Intro de l'exercice : Le formulaire (0:47)
Résolution de l'exercice : Le formulaire (10:13)
Intro de l'exercice : Texte 3D (0:31)
Résolution de l'exercice : Texte 3D (2:16)
Intro de l'exercice : Texte autour d'une image (0:45)
Résolution de l'exercice : Texte autour d'une image (5:54)
Fun : Le pixel art et la découverte de codepen (5:34)
Le Responsive Design
Introduction au Responsive Design (5:47)
Les "media queries" (13:42)
Le texte reponsive (6:08)
Quelques astuces "responsive" (5:20)
Mobile-first vs Desktop-first (5:50)
Introduction de l'exercie Responsive numéro 1 (0:51)
Résolution de l'exercie (2:39)
Flexbox
Introduction à Flexbox (4:00)
Créer notre premier container (4:30)
Les propriétés du container (8:13)
Les propriétés des enfants (12:55)
Intro de l'exercice : Flex Time ! (1:33)
Résolution de l'exercice : Flex Time ! (8:00)
Intro de l'exerice : Navbar responsive avec Flexbox (11:33)
Résolution de la navbar responsive (13:33)
Projet : Coder une galerie stylée (8:05)
CSS Grid
Introduction à CSS Grid (1:33)
Notre première grille (4:36)
Repeat et l'unité de mesure "fr" (4:29)
Placer des items (6:13)
Nommer des lignes et des aires (4:54)
Rangées et colonnes implicites (2:13)
Alignement grille et items (3:48)
Min-content, max-content, et la fonction minmax() (1:59)
auto-fill() et auto-fit() (4:58)
Intro de l'exercice : Listes responsive (1:14)
Résolution de l'exercice : Listes responsive (13:37)
Intro de l'exercice : Disposition type blog (1:29)
Résolution de l'exercice : Disposition type blog (7:24)
Les animations en CSS
Introduction aux animations CSS (2:14)
La propriété transform (7:05)
Les transitions (6:18)
Animer les couleurs de manière performante (6:55)
Créer un effet "clic" en pur CSS (6:00)
Les pseudo-elements et les transitions (16:08)
Les animations (9:19)
La perspective (6:12)
Coder un cube 3D en CSS (8:42)
Coder une carte tournante (7:03)
Coder une animation de pulsation (4:12)
Animation d'un loader (3:37)
Coder un effet marquee (4:47)
Animation de lien (4:46)
Coder un effet "glitch" (7:34)
Débugger son CSS
Bugs courants en CSS (12:03)
Le panneau "Elements" (6:07)
La technique de l'outline (1:15)
Gérer le CSS non utilisé (2:06)
L'outil "Toggle device toolbar" (3:50)
Performance et animations (6:29)
CSS Avancé
les dégradés linéaires (8:27)
La propriété filter (4:19)
Utiliser clip-path (6:47)
Le neomorphisme (3:57)
Le glassomorphisme (2:33)
Projet final : Coder un site de A à Z
Présentation du projet final (2:45)
Analyser et intégrer un "Design system" (7:30)
Coder l'HTML du header (4:15)
Coder le CSS de la "Hero section" (15:52)
Coder l'HTML de la section "Activities" (5:57)
Coder le CSS de la section "activities" (16:24)
Coder la section parallax (5:18)
Coder l'HTML de la section "Pricing" (4:24)
Coder le CSS de la section "pricing" (13:34)
Coder l'HTML de la section de contact et du footer (2:23)
Coder le CSS de la partie Contact et du Footer et remerciements. (10:15)
Les pseudo-classes
Contenu de la session verrouillé
Si vous êtes déjà inscrit,
vous aurez besoin de vous connecter
.
Achetez le cours pour déverrouiller