Lecture automatique
Autocomplete
Session précédente
Terminez et continuez
Formation complète développeur Front-End
Introduction
Introduction cours Front-End (6:53)
Code source et explication (5:45)
Ressources
Astuce pour suivre le cours (0:58)
Section 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 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)
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:13)
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)
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)
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)
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)
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)
CSS : 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)
L’accessibilité en CSS
Introduction à l’accessibilité (3:28)
Les images (5:51)
La 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)
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)
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)
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)
Créer un site de A à Z
Mise en place et fichiers source (3:44)
Mise en place typographie (8:38)
Navigation HTML (4:04)
Navigation CSS (10:15)
Responsive de la navbar (5:17)
Section Accueil (13:32)
Section asymétrique HTML (5:21)
Section asymétrique CSS partie 1 (13:43)
Section asymétrique CSS partie 2 (12:18)
Section asymétrique responsive (18:24)
Parallax (4:12)
Section Tarifs HTML (3:00)
Section Tarifs CSS (12:27)
Section Contact HTML (3:50)
Section Contact CSS (10:47)
Faire en sorte que les liens ferment la navigation (3:31)
Utiliser un préprocesseur CSS
Mise en place (6:32)
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)
Utiliser un Framework CSS : Bulma
Introduction Bulma (4:46)
Typographie partie 1 (7:19)
Typographie partie 2 (10:07)
Les couleurs (3:56)
Aides (4:24)
Display Responsive (3:38)
Base et taille (7:52)
Responsive (3:07)
Écart (3:18)
Alignement (1:32)
Conteneur et Niveaux (6:20)
Media et Hero (3:32)
Section Footer (1:13)
Fil (4:02)
Inputs et Textarea (4:02)
Select et Checkbox (2:38)
Radio et fichier (3:05)
Radio et fichier (3:25)
Contenu et icônes (6:19)
Image, notif et tag (3:34)
Progressbar et Tableau (2:32)
Fil d'Ariane et Carte (4:30)
Bouton déroulant et Menu (6:18)
Message et modale (4:36)
Navigation et pagination (9:19)
Onglets (3:12)
Personnaliser Partie 1 (8:58)
Personnaliser Partie 2 (4:32)
Projet 1 : Site immo, mise en place (3:24)
Barre de navigation (5:18)
Titre et input (7:33)
Résultat et fin (5:54)
Projet 2, Portfolio, mise en place (4:27)
Barre de navigation (4:39)
Page d'accueil (4:21)
Section à propos (3:11)
Réalisations (8:36)
Formulaire (7:03)
Fin bulma (3:09)
Section JavaScript, les bases
Introduction JavaScript (3:54)
Où placer ses scripts ? (4:24)
Comprendre Const et Let (4:45)
Les différents types et le nommage de nos variables (6:12)
Les opérateurs (1:37)
Les chaînes de caractères (3:21)
Créer une fonction en JavaScript (4:22)
Les fonctions classiques vs fléchées (5:10)
L'ordre de déclaration (5:16)
Les conditions : If (3:35)
"If else" (3:39)
Comprendre les valeurs "truthy" et "falsy" (7:03)
Utiliser un Switch (3:50)
Créer une boucle en JS (4:06)
Les boucles "while" et "do while" (5:43)
Les tableaux
Comprendre et utiliser les tableaux (3:29)
Les méthodes liées aux tableaux (2:15)
Encore des méthodes liées aux tableaux (2:22)
Les méthodes liées aux tableaux troisième partie (8:34)
Utiliser des fonctions de rappels (callback) sur les tableaux. (13:17)
Utiliser une boucle avec des tableaux (1:52)
Les chaînes de caractères
Les méthodes liées aux chaînes (8:36)
Utiliser les "regex" (7:33)
La méthode "replace" (1:19)
Les objets
Comprendre les objets (6:40)
Valeurs primitives vs références (4:44)
Delete et bracket/dot notation (4:23)
Les tableaux sont des objets (3:53)
For .. in for ... of (3:28)
Comprendre le mot clé "this" (2:19)
Mot clé "this" seconde partie (4:43)
La méthode bind() (5:34)
Le DOM (Document Object Model)
Comprendre le DOM (2:14)
Sélectionner des éléments du DOM en JS (6:31)
Sélectionner parent/enfant/même niveau (5:21)
Styliser un élement du DOM (2:10)
Créer et insérer un élément (5:02)
Supprimer un élément (2:19)
Les événements et gérer les propriétés d'un événement (7:43)
Les événements les plus utilisés (8:03)
Faire de l'asyncrhone en JS + manipuler une API
Utiliser setTimeout() & setInterval (6:28)
Comprendre les promesses (5:59)
Utiliser async await (3:13)
Qu'est ce qu'une API ? (4:00)
Appel basique avec XHR (5:04)
Visualiser les données et pouvoir les utiliser (2:51)
Créer une liste à partit des données (8:25)
La méthode fetch() (4:29)
Qu'est ce que le JavaScript ES6 ?
Introduction ES6 (2:56)
Bien comprendre Let et Const (3:36)
Les fonctions fléchées dans le détail (7:27)
Les template literals (2:34)
Spread operator (2:22)
Rest operator (1:02)
Destructuring (1:44)
Paramètre par défaut (1:16)
Export-Import (3:33)
Créer et comprendre des formulaires
Introduction formulaires (2:51)
Les formulaires : Théorie (3:28)
Les inputs de bases (6:18)
Les labels (1:33)
Textarea, select et datalist (7:45)
Checkbox, radio et color (3:57)
Les requêtes GET et POST (5:44)
La validation (12:38)
Projet 1 : Login (3:26)
Projet 1 : CSS (8:22)
Projet 2 : Accueil type Airbnb (4:02)
Projet 2 : CSS (14:12)
Projet 3 : Page d'accueil complète et form animé (5:40)
CSS Partie 1 (8:32)
Animation CSS (9:01)
Fin du CSS (9:05)
Anim JS et CSS (6:12)
Projet 4 : Formulaire de paiement (6:51)
CSS Partie 1 (10:19)
CSS Partie 2 (5:01)
Partie JS (6:22)
Projet 5 : Formulaire de contact (6:35)
Fin section formulaires (8:22)
Paradigmes de programmation
Introduction programmation fonctionelle (2:33)
Les fonctions pures (2:59)
Fonction d'ordre supérieur + immutabilité (5:27)
Utiliser des fonctions comme expression (3:02)
La programmation orienté objet : les objets (3:11)
Utiliser des classes (3:49)
Les constructeurs natifs en JavaScript (1:48)
Créer des méthodes dans nos classes (1:30)
Faire des chaînes de méthodes (4:36)
Les sous-classes (2:15)
Comprendre le prototype (4:22)
Les fonctions constructeur (5:21)
Créez des animations javascript avec l'HTML Canvas
Introduction (2:33)
Mise en place (2:08)
Notre premier Canvas (4:26)
Les méthodes liés au Rectangle (3:44)
Dessin de trajets (2:34)
Création d'un dégradé (5:50)
Dessin de lignes et d'un triangle (3:22)
Les cercles (4:52)
Ajouter du texte (2:34)
Modifier la hauteur et largeur (2:28)
Faire un Canvas responsive (4:37)
Save et Restore (2:34)
Translate (3:22)
Rotate (3:12)
Les images (3:05)
Faire une animation avec "requestanimationframe" (6:24)
Effet de souris (3:04)
Projet système solaire (11:10)
Fin Projet système solaire (6:26)
Rosace : Mise en place (1:59)
Fin projet Rosace (8:01)
Détecter les collisions (3:12)
Utiliser la librairie d'animation Greensock.js
Introduction Greensock (6:06)
Les méthodes "to", "fromTo", "from" (10:11)
Les "easings" (4:15)
Appeler des fonctions de rappel avec GSAP (4:29)
Animer plusieurs éléments + delay (4:21)
Créer une timeline (4:21)
Gérer le déclenchement des animations (5:04)
Les méthodes et propriétés liées aux "Timelines" (7:57)
Gérer le Design d'un site
Choisir une typographie (7:53)
Qu'est qu'une maquette ? Un prototype ? "Wireframe" ? (3:32)
Gérer les couleurs (6:54)
Introduction à React
Introduction (4:37)
Mise en place d'un projet React (6:28)
Explication des fichiers (5:48)
Explication des composants (10:30)
Gérer le CSS avec React (2:45)
Gérer les événements avec React (2:06)
Utiliser du "state" avec "useState()" (5:00)
Comprendre les "props" (4:06)
Remonter des données enfant-parent (8:13)
Projet to-do liste (7:29)
Créer un formulaire (6:25)
Créer et afficher des cartes (10:51)
Rajouter des cartes avec le formulaire (5:13)
Fin to-do liste (7:41)
Aller plus loin
Et après ? (5:46)
Les méthodes liées aux tableaux
Contenu de la session verrouillé
Si vous êtes déjà inscrit,
vous aurez besoin de vous connecter
.
Achetez le cours pour déverrouiller