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)
[ANCIEN COURS] Introduction
Introduction au cours (4:48)
Code source et conseils (3:55)
[ANCIEN COURS] Rappels HTML
Présentation HTML & CSS (5:10)
Création du dossier et explication VS Code (3:40)
Structure HTML de base (3:39)
Découverte des balises de base (6:10)
Les balises fermantes (3:20)
Les éléments de type block vs inline (4:57)
Bien présenter son HTML (5:18)
Créer des liens (2:39)
Les différents types de chemin (6:20)
Les éléments "sémantiques" (3:55)
Créer des listes en HTML (3:35)
Gérer le texte en HTML (6:18)
Les formulaires HTML (5:50)
Textarea et Select (5:07)
Entités HTML & Emojis (4:56)
Utiliser des médias (6:36)
Exercice HTML, utiliser les balises apprises (1:52)
Résolution de l'exercice (5:45)
Histoire et évolution du HTML & CSS (4:05)
Quizz HTML
[ANCIEN COURS] Les bases du CSS
Introduction CSS (3:10)
Mise en place du CSS (6:18)
Les ID's et les classes (4:58)
La couleur en CSS (7:13)
Les dimensions en CSS (7:16)
La marge, le remplissage et les bordures (6:45)
Block et inline en CSS (6:06)
Centrer avec margin-auto (2:31)
Les différents Display (7:01)
Opacity vs Visibility vs Display: none (3:54)
Faire une image responsive en CSS (7:16)
Exercice : faire une carte (1:19)
Résolution exercice Carte (7:54)
Les conventions de nommages (4:46)
Gérer le style des liens (1:04)
La propriété background en détail (12:07)
La propriété "font" pour le texte (9:41)
Les autres propriétés liées au texte (5:27)
Les ombres en CSS (5:59)
Créer des boutons en CSS (8:20)
Quizz : Les bases du CSS
[ANCIEN COURS] Un peu de théorie CSS
Les piliers du CSS (9:35)
La cascade (3:15)
La spécificité (5:44)
L'héritage (4:01)
Comment les fichiers HTML & CSS chargent ? (2:06)
[ANCIEN COURS] Notions et concepts intermédiaires
La position en CSS (14:49)
Les unités de mesure (11:53)
Les pseudos-classes (10:42)
Border et border-radius (15:37)
Outline vs Border + créer des pills (4:50)
Exercice : Bouton 3D (1:40)
Résolution Bouton 3D (8:05)
Les pseudos éléments (7:23)
Les "Floats" et le bug des "Floats" (8:09)
La fusion des marges (7:22)
EXERCICE : Créer une Navbar (1:50)
Résolution exercice Navbar (10:46)
La fonction Calc() en CSS (2:38)
La propriété "overflow" (2:37)
[ANCIEN COURS] Les transitions et les animations
Comprendre "transform" (6:22)
La perspective en CSS (6:47)
Les transitions (9:01)
Faire une chaîne de transitions (4:20)
Les animations en CSS (7:19)
Création : Faire un texte clignotant (11:13)
Création : Loader en pur CSS (6:33)
Création : Animation underline (4:50)
[ANCIEN COURS] Utiliser du JavaScript et du CSS ensemble
Où placer son JavaScript ? (3:19)
"Const" et les sélecteurs JavaScript (7:02)
Les fonctions (1:19)
Faire notre premier "class toggle" (2:57)
Les événements JavaScript (3:47)
Découvrons d'autres événements (2:39)
Faire une animation d'icône hamburger (9:55)
[ANCIEN COURS] Propriétés et notions avancées
Faire des dégradés en CSS (4:19)
Les filtres CSS (7:59)
Créer des tableaux en HTML / CSS (10:17)
Faire une belle création avec "shape-outside" (8:18)
Les "vendors" CSS (6:32)
S'amuser avec "background-clip" (3:58)
Les "sprites" en CSS (2:54)
Découvrir "Clip-path" (4:11)
Faire une page d'accueil avec dégradé + clip-path (7:06)
Le contexte d'empilement (6:00)
[ANCIEN COURS] L’accessibilité
81 accessiblité diapo intro (3:28)
82 accessiblité les images (5:51)
83 sémantique (9:32)
Les formulaires (10:52)
La technique REM + 62.5% (7:53)
Utiliser un lecteur d'écran (1:55)
Comprendre "tabindex" (2:44)
Utiliser les attributs ARIA (4:29)
Faire un bon contraste (4:52)
Faire un audit avec la console (6:45)
Exercice accessibilité intro (1:27)
Résolution (6:32)
[ANCIEN COURS] Le "Responsive web design"
Introduction (2:53)
La balise meta "viewport" (3:57)
Exemples de sites réactifs (responsive) (5:46)
Utiliser max-width / min-width (9:07)
Comprendre les medias queries (7:41)
Gérer le texte de manière "responsive" (2:43)
Utiliser Rem et Em pour du texte réactif (5:23)
Mobile-first / Desktop-first (8:17)
Créer une navbar responsive à 100% (13:19)
[ANCIEN COURS] Section Flexbox
Introduction Flexbox (2:46)
Premier container et la propriété "justify-content" (6:08)
La propriété "align-items" (1:37)
Rangée ou colonne avec "flex-direction" (4:53)
Passage à la ligne avec flex-wrap (2:23)
Les trois propriétés liées aux items (shrink/grow/basis) (6:36)
Gérer la position et l'alignement des items au cas par cas (4:42)
Gérer l'alignement quand on passe à la ligne (3:22)
Changer l'ordre des items (2:38)
Exercice Flexbox intro (2:09)
Résolution (8:15)
Créer une galerie responsive avec Flexbox (7:57)
Barre de navigation responsive avec Flexbox (5:46)
[ANCIEN COURS] CSS Grid
Introduction CSS Grid (3:09)
Création de notre première grille (7:29)
Repeat et Fractionnal Unit (2:22)
Placement avec Grid-Row et Grid-Col (3:16)
Placement sur plusieurs cellules (4:16)
Nommer Colonnes et rangés (3:23)
Nommer une "area" (2:02)
Grille explicite et grille implicite (1:30)
Aligner et centrer ces cellules (3:19)
Aligner et centrer sa grille (2:58)
Max-content et Min-content (5:46)
Autofill, autofit et la fonction MinMax (3:55)
[ANCIEN COURS] Créer un site de A à Z
Introduction, mise en place de l'HTML (7:33)
CSS de la navigation (10:37)
CSS de l'Accueil (12:35)
Section asymétrique (15:33)
Responsive de la Section asymétrique partie 1 (6:46)
Responsive de la Section asymétrique partie 2 (4:33)
Section Parallax (4:12)
Section Tarifs HTML (3:00)
Section Tarifs CSS (12:27)
Section Contact HTML (3:50)
Section Contact CSS (10:05)
Faire en sorte que les liens ferment la navigation (3:31)
[ANCIEN COURS] Le préprocesseur SASS
Mise en place (5:50)
Les variables et le nesting (5:33)
Les Mixins (2:24)
Fonction SASS (1:19)
"Extend" (2:05)
Les paramètres (5:45)
Utiliser une boucle "for" (3:33)
Error, warn et debug (3:05)
Segmenter son code (6:23)
Teach online with
Coder le CSS de la partie Contact et du Footer et remerciements.
Contenu de la session verrouillé
Si vous êtes déjà inscrit,
vous aurez besoin de vous connecter
.
Achetez le cours pour déverrouiller