Découvre le Programme Hardcoders complet

Comprendre la propriété text-align

Modifier la largeur d'un élément avec width

Modifier la hauteur d'un élément avec height

Mettre un texte en gras avec la balise strong

Souligner du texte avec la balise u

Rendre un texte italique avec la balise em

Rayer du texte avec la balise s

Créer une barre horizontale avec la balise hr

Modifier la couleur de fond du texte

Modifier la taille d'un header VS du texte

Ajouter des ombres grâce à box-shadow

Changer l'opacité d'un élément

Utiliser la propriété text-transform pour mettre un texte en majuscule

Changer la taille de police des titres

Changer la graisse des titres

Changer la taille de police des paragraphes

Modifier l'interligne du texte

Changer de style au survol de la souris

Changer la position relative d'un élément

Déplacer un élément avec les offsets

Positionner un élément en fonction de son élément parent

Positionner un élément en fonction de la fenêtre d'affichage

Déplacer un élément à gauche ou à droite avec float

Modifier l'ordre d'empilage des éléments avec z-index

Centrer un élément horizontalement avec margin

Comprendre les couleurs complémentaires

Comprendre les triades de couleur

Modifier la couleur de plusieurs éléments

Ajuster la teinte d'une couleur

Ajuster la saturation et la luminosité d'une couleur

Créer un dégradé linéaire en CSS

Créer des rayures avec les dégradés CSS

Créer une texture en utilisant une image

Changer la taille d'un élément avec la propriété transform scale

Utiliser la propriété transform scale au survol de la souris

Utiliser propriété transform skewX pour obliquer un élément sur l'axe X

Utiliser propriété transform skewY pour obliquer un élément sur l'axe Y

Créer une forme en CSS

Créer une forme plus complexe en CSS et HTML

Comprendre comment les animations fonctionnent en CSS

Utiliser une animation pour modifier l'état d'un élément au survol

Modifier le fill mode d'une animation

Créer du mouvement avec les animations CSS

Donner une direction visuelle en faisant disparaître un élément

Animer un élément continuellement avec infinite

Faire battre un cœur avec les animations CSS

Animer des éléments à différentes vitesses

Animer plusieurs éléments à des vitesses variables

Modifier l'animation timing avec un mot clef

Comprendre comment fonctionnent les courbes de Bézier

Utiliser une courbe bézier pour déplacer une forme

Rendre une animation plus naturelle avec les courbes bézier

Créer une Media Query

Rendre une image responsive

Utiliser une image retina pour les grands affichages

Rendre le texte responsive

Utiliser display: flex pour positionner deux éléments

Ajouter flexbox à un élément

Utiliser la propriété flex-direction pour faire une ligne

Appliquer la propriété flex-direction pour créer une ligne

Utiliser la propriété flex-direction pour faire une colonne

Appliquer la propriété flex-direction pour créer une colonne

Aligner des éléments avec la propriété justify-content

Utiliser la propriété justify-content

Aligner des éléments avec la propriété align-items

Utiliser la propriété align-items

Utiliser la propriété flex-wrap pour envelopper des éléments

Utiliser la propriété flex-shrink pour rétrécir un élément

Utiliser la propriété flex-grow pour agrandir un élément

Utiliser la propriété flex-basis pour paramétrer la taille de base d'un élément

Utiliser la propriété flex raccourcie

Utiliser la propriété order pour réarranger les éléments

Utiliser la propriété align-self

Créer une CSS Grid

Ajouter des colonnes avec grid-template-columns

Ajouter une ligne avec grid-template-rows

Utiliser les unités de CSS Grid pour changer la taille des colonnes et des lignes

Créer un écart entre les colonnes avec grid-column-gap

Créer un écart entre les lignes avec grid-row-gap

Ajouter un écart plus rapidement avec grid-gap

Utiliser grid-column

Utiliser grid-row

Aligner un élément horizontalement avec justify-self

Aligner un élément verticalement avec align-self

Aligner tous les éléments horizontalement avec justify-items

Aligner tous les éléments verticalement avec align-items

Diviser une grille en plusieurs zones

Placer des éléments dans la grille avec la propriété grid-area

Utiliser grid-area sans nommer de zones

Utiliser la fonction repeat

Utiliser la fonction minmax

Créer des layouts flexibles avec la propriété auto-fill

Créer des layouts flexibles avec la propriété auto-fit

Utiliser des Media Queries pour créer une grille responsive

Créer une grille dans une grille

Comment valider la certification

Créer une page de vente

Créer un quizz

Créer une documentation

Créer un site pour restaurant

Créer ta page portfolio

Explorer les différences entre les mots clés var et let

Comparer les champs d'application de la var et laissez les mots-clés

Déclarer une variable en lecture seule avec le mot-clé const

Muter un tableau déclaré avec const

Empêcher la mutation d'objet

Utiliser les fonctions fléchées pour écrire des fonctions anonymes concises

Écrire des fonctions fléchées avec des paramètres

Définir les paramètres par défaut pour tes fonctions

Utiliser le paramètre Rest avec les paramètres de fonction

Utiliser l'opérateur Spread pour évaluer les tableaux sur place

Utiliser l'affectation déstructurante pour extraire des valeurs d'objets

Utiliser l'affectation déstructurante pour affecter des variables à partir d'objets

Utiliser l'affectation déstructurante pour affecter des variables à partir d'objets imbriqués

Utiliser l'affectation déstructurante pour affecter des variables à partir de tableaux

Utilisez l'affectation de déstructuration avec le paramètre Rest pour réaffecter des éléments de tableau

Utiliser l'affectation déstructurante pour passer un objet en tant que paramètres d'une fonction

Créer des chaînes à l'aide de littéraux de modèle

Écrire des déclarations concises d'objets littéraux à l'aide d'un raccourci de propriété d'objet

Écrire des fonctions déclaratives concises avec ES6

Utiliser la syntaxe de classe pour définir une fonction constructeur

Utiliser des getters et des setters pour contrôler l'accès à un objet

Créer un script de module

Utiliser l'exportation pour partager un bloc de code

Réutiliser le code JavaScript à l'aide de l'importation

Utilisez * pour tout importer d'un fichier

Créer une exportation de secours avec exportation par défaut

Importer une exportation par défaut

Créer une promesse JavaScript

Remplir une promesse avec détermination et rejeter

Gérer une promesse tenue avec then

Gérer une promesse rejetée avec catch

Utiliser la méthode test()

Faire correspondre à la chaîne littérale

Faire correspondre une chaîne littérale avec différentes possibilités

Ignorer la casse lors de la correspondance

Extraire les correspondances

Trouver plus que la première correspondance

Faire correspondre à n'importe quoi avec une période de caractère générique

Faire correspondre un seul caractère avec plusieurs possibilités

Faire correspondre les lettres de l'alphabet

Faire correspondre les chiffres et les lettres de l'alphabet

Faire correspondre des caractères uniques non spécifiés

Faire correspondre les caractères qui se produisent une ou plusieurs fois

Faire correspondre les caractères qui se produisent zéro ou plusieurs fois

Trouver des personnages avec la correspondance paresseuse

Trouvez un ou plusieurs criminels dans une chasse

Faire correspondre les modèles de cordes de début

Faire correspondre les modèles de chaîne de fin

Faire correspondre toutes les lettres et tous les chiffres

Faites correspondre tout sauf les lettres et les chiffres

Faire correspondre tous les nombres

Faire correspondre tous les non-numéros

Restreindre les noms d'utilisateur possibles

Faire correspondre les espaces

Faire correspondre les caractères non blancs

Spécifiez le nombre supérieur et inférieur de correspondances

Spécifiez uniquement le nombre inférieur de correspondances

Spécifiez le nombre exact de correspondances

Vérifier tout ou rien

Anticipation positive et négative

Vérifier le regroupement mixte de caractères

Réutiliser des modèles à l'aide de groupes de capture

Utiliser des groupes de capture pour rechercher et remplacer

Supprimer les espaces du début et de la fin

Utiliser un tableau pour stocker une collection de données

Accéder au contenu d'un tableau à l'aide de la notation entre crochets

Ajouter des éléments à un tableau avec push() et unshift()

Supprimer des éléments d'un tableau avec pop() et shift()

Supprimer des éléments à l'aide de splice()

Ajouter des éléments à l'aide de splice()

Copier des éléments de tableau à l'aide de slice()

Copier un tableau avec l'opérateur Spread

Combiner des tableaux avec l'opérateur Spread

Vérifier la présence d'un élément avec indexOf()

Itérer sur tous les éléments d'un tableau à l'aide de boucles For

Créer des tableaux multidimensionnels complexes

Ajouter des paires clé-valeur aux objets JavaScript

Modifier un objet imbriqué dans un objet

Accéder aux noms de propriété avec la notation entre crochets

Utilisez le mot-clé delete pour supprimer les propriétés de l'objet

Vérifier si un objet a une propriété

Itérer à travers les clés d'un objet avec une instruction for...in

Générer un tableau de toutes les clés d'objet avec Object.keys()

Modifier un tableau stocké dans un objet

Convertir des Celsius en Fahrenheit

Inverser une String

Suite factorielle

Trouver le plus long mot dans une String

Retourne les plus grands nombres des Arrays

Confirmer la fin

Répéter une chaîne de caractères

Tronquer une chaîne de caractères

Retrouver les éléments

Quel Boolean

Majuscule pour chaque mot

Trancher et découper

Virer les valeurs fausses

Trouver sa place

Mutations

Chunky Monkey

Créer un objet JavaScript de base

Utiliser la notation par points pour accéder aux propriétés d'un objet

Créer une méthode sur un objet

Rendre le code plus réutilisable avec ce mot-clé

Définir une fonction constructeur

Utiliser un constructeur pour créer des objets

Étendre les constructeurs pour recevoir des arguments

Vérifier le constructeur d'un objet avec instanceof

Comprendre ses propres propriétés

Utiliser les propriétés du prototype pour réduire le code en double

Itérer sur toutes les propriétés

Comprendre la propriété du constructeur

Changer le prototype en un nouvel objet

N'oubliez pas de définir la propriété du constructeur lors du changement de prototype

Comprendre d'où vient le prototype d'un objet

Comprendre la chaîne de prototypes

Utilisez l'héritage pour ne pas vous répéter

Hériter des comportements d'un supertype

Définir le prototype de l'enfant sur une instance du parent

Réinitialiser une propriété de constructeur héritée

Ajouter des méthodes après l'héritage

Remplacer les méthodes héritées

Utiliser un mixin pour ajouter un comportement commun entre des objets non liés

Utiliser la fermeture pour protéger les propriétés d'un objet contre les modifications externes

Comprendre l'expression de fonction immédiatement invoquée (IIFE)

Utiliser un IIFE pour créer un module

En savoir plus sur la programmation fonctionnelle

Comprendre la terminologie de la programmation fonctionnelle

Comprendre les dangers de l'utilisation du code impératif

Évitez les mutations et les effets secondaires grâce à la programmation fonctionnelle

Passer des arguments pour éviter la dépendance externe dans une fonction

Refactoriser les variables globales hors des fonctions

Utiliser la méthode map pour extraire des données d'un tableau

Implémenter la carte sur un prototype

Utiliser la méthode filter pour extraire les données d'un tableau

Implémenter la méthode filter sur un prototype

Renvoyer une partie d'un tableau à l'aide de la méthode slice

Supprimer des éléments d'un tableau en utilisant une tranche au lieu de l'épissure

Combiner deux tableaux à l'aide de la méthode concat

Ajouter des éléments à la fin d'un tableau en utilisant concat au lieu de push

Utiliser la méthode de réduction pour analyser les données

Utiliser des fonctions d'ordre supérieur mapper, filtrer ou réduire pour résoudre un problème complexe

Trier un tableau par ordre alphabétique à l'aide de la méthode de tri

Renvoyer un tableau trié sans modifier le tableau d'origine

Diviser une chaîne en un tableau à l'aide de la méthode split

Combiner un tableau dans une chaîne à l'aide de la méthode join

Appliquer la programmation fonctionnelle pour convertir des chaînes en URL Slugs

Utilisez la méthode every pour vérifier que chaque élément d'un tableau répond à un critère

Utilisez la méthode some pour vérifier que tous les éléments d'un tableau répondent à un critère

Introduction au curry et application partielle

Trouver la somme d'un rang

Trouver la différence entre deux tableaux

Chercher, trouver et... supprimer

Filtrer avec un objet

Spinal Case

Convertir en argot

Chercher et remplacer

Former des paires

La lettre manquante

Unir et trier

Convertir des entitées HTML

Somme de tous les nombres paires de la suite de Fibonacci

Somme des nombres premiers

Plus petit commun multiple

Filtrer jusqu'à la vérité

Applatir un tableau

Agents binaires

Tout doit être vrai

Arguments optionnels

Le constructeur d'objet

Modifier un tableau

Introduction à la certification JS

Vérifier les palindromes

Convertir en nombre Romain

Chiffrement en ROT13

Valider des numéros de téléphone

Coder une caisse enregistreuse

Présentation du chapitre React

Créer un élément JSX

Utiliser des expressions dans JSX

Utiliser des fonctions dans les expressions

Jouer avec les conditions en JSX

Les attributs JSX en camelCase

L'attribut "className" en JSX

Importer un fichier CSS dans React

Utiliser une expression dans un attribut

Fermer les balises vides

Éléments JSX imbriqués

Les Fragments JSX

Rendre un élément

Mettre à jour le rendu

React ne met à jour que le strict nécessaire

Créer un composant React

Ajouter une props au composant

Destructurer les props pour un accès plus facile

Différencier un composant d'une balise

Composer avec des composants

Diviser tes composants

Les props sont en lecture seule

State : Introduction

State : Isoler l'apparence

State : Utiliser useState

State : Utiliser useEffect

State : Mettre à jour le state

State : useEffect fonction de nettoyage

State : initialiser avec une props

State : ne lire le useEffect qu'au montage

State : choisir quand activer useEffect

State : anti pattern

State : réutiliser notre composant

Créer un événement avec React

Utiliser les fonctions "handle"

Comprendre event.preventDefault()

Passer un argument au gestionnaire d'événements

Utiliser dangerouslySetInnerHTML()

Faire du Markdown avec marked.js

Affichage conditionnel avec "if"

Affichage conditionnel en fonction du State

Affichage conditionnel avec l'opérateur &&

Affichage conditionnel avec l'opérateur ternaire

Masquer un composant avec "null"

Rappel de map()

Créer des listes avec React

Les clefs dans les listes React

Les clefs à ne pas utiliser

Une erreur fréquente avec les clefs

Les clefs ne doivent être unique que dans leur liste

Comprendre les composants contrôlés

Lier le State à un input

Contrôler le state et la valeur de l'input via une fonction

La balise textarea

Utiliser "name" pour gérer plusieurs champs

Passer des fonctions en props

Où mettre le State ?

Une props spéciale : children

Créer des composants paramétrables

Présentation du projet Fetch API

Utiliser fetch() pour récupérer des données

Utiliser json() pour utiliser les données

Stocker les données dans le State

Afficher les données

Customiser la requête

Utiliser les événements pour changer de données

Présentation de styled-components

Créer un composant avec styled-components

Utiliser les props avec styled-components

Étendre le style

Changer la balise du composant avec "as"

Changer le composant du composant avec "as"

Les props sont passées automatiquement

Définir le style au bon endroit

Sélecteur avec "&"

Ajouter des props avec ".attrs"

Cas pratique

Sélecteur brut

Utiliser les valeurs par défaut avec ".attrs"

Créer des animations avec "keyframes"

Présentation de React Router

Utiliser Browser Router

Ajouter des liens avec "Link"

Ajouter des routes

Imbriquer des routes

Lister des liens

Ajouter une page 404

Lire les paramètres d'URL

Une route par défaut avec "index"

Trouver les liens actifs avec "NavLink"

Utiliser les paramètres de recherches

Customiser les liens avec "QueryNavLink"

Naviguer directement depuis le code

Les deux types de variables

Les rérérences et les objets

Copier un objet en mode shallow

Copier un objet en mode deep

Les références et les tableaux

Copier un tableau en mode shallow

Copier un tableau en mode deep

Rappel sur la mise à jour des composants React

Démo d'une mise à jour de state

Utiliser React Memo

Présentation de React Context

Créer un Context

Créer un Provider

Le hook "useContext"

Et Redux ?

Comment valider les projets Front-End

Créer un éditeur de markdown

Créer un minuteur Pomodoro

Détecter la brasserie la plus proche

Créer un panier de e-commerce

Créer un Pokédex

C'est quoi Node.js ?

Pourquoi utiliser Node.js

Installer Node.js

Créer ton premier script

NPM

Installer un package

Importer un module

Utiliser nodemon

Comprendre le module Path

Path et ESM

Utiliser les fichiers système avec FS

Introduction à NPM

Créer un projet NPM

Comprendre le fichier package.json

Les propriétés description, keywords et licence

Installer un package avec NPM

Comprendre le système de version

Mettre à jour un package

Installer et utiliser des packages globaux

Ajouter des dépendances de développement

Ajouter des scripts pour faciliter les tâches répétitives

Exemple avec le package nodemon

Lister les packages installés

Présentation du projet Express

Initialisation d'un projet Express

Comprendre Express

Le dossier public

Installer nodemon

Rendre des pages avec Handlebars

Un autre moteur de rendu : Pug

Comment structurer un projet Node et Express

Utiliser un layout

Utiliser des variables

Utiliser des partials

Utiliser les params

Les fichiers .hbs

Utiliser la PokeAPI

Une fonction pour appeler une liste

Utiliser les boucle avec Handlebars

Utiliser une High Order Function (HOF)

Utiliser les paramètres d'URL

Afficher une autre page que l'index

Utiliser les helpers de Handlebars

Ajouter une page 404 Not Found

Utiliser Body Parser

Utiliser une requête POST

Introduction à MongoDB

Initialisation du projet

Lancer un serveur local

Comprendre le fichier DOTENV

Utiliser un fichier .env sur Codesandbox

Ajouter la HomePage

Les différents types de requêtes

Comprendre le JSON

Un service en ligne pour tester ton API

Setup du projet

Ajouter MongoDB Atlas

Utiliser Mongoose pour structurer la base de données

Comprendre les Schemas

Créer des données

Utiliser (encore) une High Order Function (HOF)

Lire toutes les données

Lire une donnée spécifique

Mettre à jour une donnée

Supprimer une donnée

Réaliser un CRUD

Réaliser un chat en temps réel

Détecter l'humeur avec le Natural Language Processing

Réaliser un gestionnaire de tâches avec authentification

Réaliser un formulaire de contact

Introduction et installation

Les inférences et le state

Les unions avec le state

Typer des props

Optional properties

Unions dans les props

Children Props

Utiliser PropsWithChildren

Type pour un fetch