Introduction
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
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
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
CSS Avancé
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
[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
[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
[ANCIEN COURS] Utiliser du JavaScript et du CSS ensemble
[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
