Utiliser une boucle "for" | École du Web

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

Utiliser une boucle "for"

Terminez et continuez