20 Projets En Javascript

Améliorez-vous en JavaScript.

What you'll learn
Le langage JavaScript
Utiliser des API
Faire des projets vraiment sympathiques et formateurs
Utiliser les boucles, les conditions
Coder en JavaScript moderne
Requirements
Des connaissances de base en JavaScript, HTML & CSS
Pas de panique cependant, ce cours vise des débutants / intermédiaires. (mettez vous à l'épreuve!)
Description
Enfin des projets en JavaScript natif ! (vanilla).Le web est inondé de Frameworks, de librairies et d’outils en JavaScript, mais il reste très à sec quand il s’agit du langage en lui-même, quand il s’agit de JavaScript natif.Déjà qu’il n’y a pas trop de contenu en Anglais sur le JS natif.Alors en Français …C’est pour remédier à ça que j’ai tourné ce cours « 20 projets en pur JavaScript »Pour aider ceux qui souhaitent apprendre ce langage et savoir une bonne fois pour toute ce qui appartient à JavaScript et ce qui appartient à un Framework ou autre librairie.Je vois trop de gens qui se lancent directement dans les Frameworks JS, sans avoir les connaissances nécessaires.Ils se retrouvent complètement perdus et frustrés, à deux doigts de la crise de nerf, ce qui est compréhensible.Ils se disent qu’avec quelques tutos sur des animations JS ou des petits bouts de codes ils auront le bagage nécessaire.Mais c’est une erreur, une solution de fortune, ce n’est pas assez.Le vrai problème c’est l’expérience, il faut pratiquer.Il faut visualiser le JavaScript, à quoi il sert, pourquoi a-t-il été créé, où en est t’il de son évolution ?Pour devenir architecte, on dessine des bâtiments, pour devenir developpeur JS, on code en JavaScript. Alors retroussons-nous les manches et attaquons ces projets ! La liste des projets que nous allons effectuer :1. Application "calcul d'IMC".2. Quizz.3. Recherche Wikipedia.4. Un créateur de cookies.5. Une application météo.6. Un créateur de dégradés en JS.7. Une app "Pomodoro".8. Un système de validation de mot de passe dans un formulaire.9. Créer un jeu de cartes mémoires.10. Créer un système de scroll infini, comme Pinterest, Instagram, Unsplash…11. Coder un slider stylé et animé.12. Un générateur de mots de passe.13. Une liste d'utilisateurs filtrable.14. Un lecteur vidéo personnalisé, comme Youtube.15. Le jeu du morpion sur navigateur.16. Une animations de particules en JavaScript.17. Une landing page animée super stylée.18. Un jeu qui calcule notre vitesse de frappe au clavier.19. Une calculatrice complète.20. Un lecteur audio stylé.Avec ça tu as vraiment de quoi te familiariser avec ce langage, nous traiterons de sujets comme :- Gérer des données et les transformer.- Les conditions, boucles, etc …- Appeler des API pour aller chercher des données.- Faire du JavaScript asynchrone.- Coder en JavaScript moderne.- Utiliser des objets / tableaux.- Utiliser des classes pour créer des objets dans un style orienté-objet.- Créer des interface stylées (HTML / CSS).- Utiliser des fonctions et coder dans un style orienté fonction.- Gérer toutes sortes d’évenement.- Voir l’utilisation du DOM en profondeur, une des clés pour bien comprendre JS.- Etc … On va vraiment voir beaucoup de choses !A qui s’adresse ce cours ?Ce cours s’adresse aux personnes ayant un niveau débutant/intermédiaire, ne sois surtout pas apeuré par le nombre de projets, j’explique tout de A à Z.Et n’oublie pas que pour progresser, il faut se frotter à des projets qui nous dépassent, pour découvrir de nouvelles choses et booster son apprentissage.Certains projets sont donc vraiment orientés débutants, d’autre atteignent un niveau intermédiaire.Dans tous les cas un léger bagage est nécessaire, si tu as déjà fait des boucles, utilisé des fonctions et des conditions, tu as les connaissances de bases requises.Sympa hein ? Rendez-vous de l'autre côté pour commencer à coder.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Code source et conseils

Lecture 3 Ressources

Section 2: Application "Calcul d'IMC"

Lecture 4 Introduction au projet

Lecture 5 Coder l'HTML du projet

Lecture 6 Coder le CSS, partie 1

Lecture 7 Coder le CSS, partie 2

Lecture 8 JavaScript partie 1 : Prendre le formulaire et les inputs.

Lecture 9 JavaScript partie 2 : Calculer l'IMC et afficher le résultat

Section 3: Coder un Quizz

Lecture 10 Introduction du projet

Lecture 11 Coder l'HTML

Lecture 12 Coder le CSS

Lecture 13 JavaScript partie 1 : Récupérer les données du formulaire

Lecture 14 JavaScript partie 2 : Afficher les résultats

Section 4: Coder une recherche avec l'API de Wikipedia

Lecture 15 Introduction au projet

Lecture 16 Coder l'HTML et le CSS

Lecture 17 JavaScript partie 1 : Gérer l'appel vers l'API

Lecture 18 JavaScript partie 2 : Afficher un loader et gérer les erreurs

Section 5: Le créateur de cookies

Lecture 19 Introduction au projet

Lecture 20 Coder l'HTML

Lecture 21 Coder le CSS

Lecture 22 JavaScript partie 1 : Gérer les inputs et le formulaire

Lecture 23 JavaScript partie 2 : Créer les cookies

Lecture 24 JavaScript partie 3 : Afficher et supprimer les cookies

Section 6: L'application météo sur navigateur

Lecture 25 Présentation du projet

Lecture 26 Comment obtenir une clé d'API

Lecture 27 Coder l'HTML

Lecture 28 Coder le CSS, partie 1

Lecture 29 Coder le CSS, partie 2

Lecture 30 JavaScript partie 1 : Obtenir les données

Lecture 31 JavaScript partie 2 : Formater et afficher les données

Lecture 32 JavaScript partie 3 : Les prévisions et l'onglet

Section 7: Coder une application de création de dégradés !

Lecture 33 Introduction au projet

Lecture 34 Coder l'HTML

Lecture 35 Coder le CSS

Lecture 36 JavaScript partie 1 : Gérer l'interface

Lecture 37 JavaScript partie 2 : Changer la couleur en fonction de la luminosité

Lecture 38 JavaScript partie 3 : Copier le dégradé et en créer au hasard

Section 8: Pomodoro

Lecture 39 Introduction au projet

Lecture 40 Coder l'HTML et le CSS

Lecture 41 JavaScript partie 1 : Montrer le temps et gérer la pause

Lecture 42 JavaScript partie 2 : Gérer les cycles

Lecture 43 JavaScript partie 3 : Reset et animation

Section 9: Projet "Validation de données"

Lecture 44 Introduction au projet

Lecture 45 Coder l'HTML

Lecture 46 Coder le CSS

Lecture 47 JavaScript partie 1 : Validation de l'utilisateur et l'email

Lecture 48 JavaScript partie 2 : Validation du mot de passe

Lecture 49 JavaScript partie 3 : Afficher la force du mot de passe

Lecture 50 JavaScript partie 4 : Envoyer le formulaire

Section 10: Le jeu des cartes mémoires

Lecture 51 Introduction au projet

Lecture 52 Coder l'HTML et le CSS

Lecture 53 JavaScript partie 1 : Mélanger les cartes et les sélectionner

Lecture 54 JavaScript partie 2 : Vérifier les résultats

Lecture 55 JavaScript partie 3 : Nombre d'essais et fin de partie

Lecture 56 JavaScript partie 4 : Remise à zéro

Section 11: Intégrer un scroll infini

Lecture 57 Introduction au projet

Lecture 58 Obtenir une clé d'API Unsplash.

Lecture 59 Coder l'HTML et le CSS

Lecture 60 JavaScript partie 1 : Appel à l'API et recherche

Lecture 61 JavaScript partie 2 : Intersection observer et push to top

Section 12: Le Slider

Lecture 62 Introduction au projet

Lecture 63 Coder l'HTML et le CSS

Lecture 64 JavaScript partie 1 : Gérer les directions

Lecture 65 JavaScript partie 2 : Coder l'animation

Lecture 66 JavaScript partie 3 : Slide out et vérouillage

Section 13: Le générateur de mots de passe

Lecture 67 Introduction au projet

Lecture 68 coder l'HTML et le CSS

Lecture 69 JavaScript partie 1 : Générer un nombre au hasard dans un intervalle

Lecture 70 JavaScript partie 2 : Rajouter les ensembles de caractères

Lecture 71 JavaScript partie 3 : Créer le mot de passe

Lecture 72 JavaScript partie 4 : Intégrer la "range" et la copie de mot de passe

Section 14: Coder une liste filtrable dynamiquement

Lecture 73 Introduction au projet

Lecture 74 Coder l'HTML

Lecture 75 Coder le CSS

Lecture 76 JavaScript partie 1 : L'appel à l'API et la création de la liste

Lecture 77 JavaScript partie 2 : Implémenter le filtre

Section 15: Le lecteur personnalisé

Lecture 78 Introduction au projet

Lecture 79 Coder l'HTML et le CSS

Lecture 80 JavaScript partie 1 : Intégrer la lecture de la vidéo et les timers

Lecture 81 JavaScript partie 2 : Gérer la "range" et le jeu de la vidéo

Lecture 82 JavaScript partie 3 : Navigation et plein écran.

Lecture 83 Finition

Section 16: Le jeu du Morpion

Lecture 84 Introduction au projet

Lecture 85 Coder l'HTML et le CSS

Lecture 86 Coder les fonctionnalités du Morpion

Section 17: L'animation de particules

Lecture 87 Introduction au projet

Lecture 88 Mise en place du projet et création de la classe

Lecture 89 Remplissage du tableau et animation

Lecture 90 Connexion et resize

Section 18: Coder une landing page animée

Lecture 91 Introduction au projet

Lecture 92 Coder l'HTML

Lecture 93 Coder le CSS partie 1

Lecture 94 Coder le CSS partie 2

Lecture 95 Coder le CSS partie 3

Lecture 96 JavaScript partie 1 : Coder le curseur et l'effet machine à écrire

Lecture 97 JavaScript partie 2 : Animation au scroll

Section 19: Le jeu de la vitesse de frappe

Lecture 98 Introduction au projet

Lecture 99 Coder l'HTML et le CSS

Lecture 100 JavaScript partie 1 : Afficher la phrase à écrire

Lecture 101 JavaScript partie 2 : Vérification et timer

Lecture 102 JavaScript partie 3 : Perfectionnement

Section 20: Coder une calculatrice complète

Lecture 103 Introduction au projet

Lecture 104 Coder l'HTML et le CSS

Lecture 105 JavaScript partie 1 : Gérer les chiffres et les opérateurs

Lecture 106 JavaScript partie 2 : Recoder la méthode eval() partie 1

Lecture 107 JavaScript partie 3 : Calcul de l'évaluation et récursion

Lecture 108 JavaScript partie 4 : Gérer la suppression et le reset et les finitions

Section 21: Coder un lecteur audio

Lecture 109 Introduction au projet

Lecture 110 Coder l'HTML

Lecture 111 Coder le CSS

Lecture 112 JavaScript partie 1 : Gérer la durée et le jeu de la musique

Lecture 113 JavaScript partie 2 : Changer les musiques, shuffle, clic sur progression.

Section 22: [Ancien Cours] Introduction

Lecture 114 Introduction

Lecture 115 Code source et conseils

Lecture 116 Ressources

Section 23: [Ancien Cours] Le quizz

Lecture 117 Introduction Quizz

Lecture 118 Quizz : partie HTML

Lecture 119 Quizz : partie CSS

Lecture 120 Quizz : Récupérer les données en JavaScript

Lecture 121 Quizz : Obtenir les résultats

Lecture 122 Quizz : Afficher les résultats

Lecture 123 Quizz : finitions

Section 24: [Ancien Cours] App météo sur navigateur

Lecture 124 Introduction App météo

Lecture 125 App Météo : Partie HTML

Lecture 126 App Météo : Partie CSS

Lecture 127 App Météo : Partie CSS 2

Lecture 128 App météo : premier appel à l'API

Lecture 129 App météo : gérer les données

Lecture 130 App météo : Afficher les prévisions

Lecture 131 App météo : Prévisions des jours + loader

Section 25: [Ancien Cours] Le pokédex

Lecture 132 Introduction Pokédex

Lecture 133 Pokédex : Section CSS

Lecture 134 Pokédex : Premier appel à l'API

Lecture 135 Pokédex : Gérer les données pour les avoir en FR

Lecture 136 Pokédex : Créer les cartes

Lecture 137 Pokédex : implémenter le scroll infini

Lecture 138 Pokédex : Gérer la recherche

Lecture 139 Pokédex : Animer le chargement

Section 26: [Ancien Cours] Le créateur de cookies

Lecture 140 Introduction et HTML

Lecture 141 Partie CSS

Lecture 142 JavaScript : Utiliser Date pour se déplacer à la semaine suivante

Lecture 143 JavaScript : Remplir l'objet contenant les infos des cookies

Lecture 144 Créer un cookie.

Lecture 145 Gérer les actions autorisées.

Lecture 146 Afficher et supprimer les cookies

Lecture 147 Gérer un petit bug.

Section 27: [Ancien Cours] La To-Do Liste.

Lecture 148 To-do liste : HTML et CSS

Lecture 149 To-do liste : Logique JS

Section 28: [Ancien Cours] Projet Pomodoro

Lecture 150 Pomodoro : HTML - CSS

Lecture 151 Pomodoro : Affichage de base

Lecture 152 Pomodoro : Gérer les actions

Lecture 153 Pomodoro : finitions

Section 29: [Ancien Cours]Validation de formulaire

Lecture 154 Validation HTML

Lecture 155 Validation : CSS

Lecture 156 Validation pseudo

Lecture 157 Validation de l'email

Lecture 158 Validation du mot de passe

Lecture 159 Confirmation du mot de passe

Section 30: [Ancien Cours] App création de dégradés linéaires.

Lecture 160 Dégradés : HTML

Lecture 161 Dégradés : CSS

Lecture 162 Dégradé de base JS

Lecture 163 Rajouter des couleurs

Lecture 164 Suppression et rajout des couleurs

Lecture 165 Mise à jour des couleurs

Section 31: [Ancien Cours] Jeu des cartes mémoire

Lecture 166 Cartes mémoire : HTML & CSS

Lecture 167 Stocker les cartes retournées

Lecture 168 Verrouiller les cartes et changer l'ordre

Section 32: [Ancien Cours] Projet utilisateur GitHub

Lecture 169 Projet GitHub : HTML & CSS

Lecture 170 Projet GitHub créer un template avec des données JS.

Section 33: [Ancien Cours] Créer un système d'authentification

Lecture 171 Créer une base de donnée avec Firebase

Lecture 172 Authentification : HTML & CSS

Lecture 173 Gérer les modales + inscription

Lecture 174 Connexion, déconnexion et contenu public/privé

Section 34: [Ancien Cours] Le Slider

Lecture 175 Slider : HTML & CSS

Lecture 176 Slider : Partie JavaScript

Section 35: [Ancien Cours] App de Drag & Drop

Lecture 177 Drag&Drop : Html / CSS

Lecture 178 Drag&Drop : ajout des événements

Lecture 179 Drag&Drop : Sélectionner une photo

Section 36: [Ancien Cours] Créer des particules en JavaScript

Lecture 180 Particules : Html & CSS

Lecture 181 Particules : Créer un tableau contenant les objets

Lecture 182 Animer les particules

Section 37: [Ancien Cours] Le jeu "space-invaders"

Lecture 183 HTML / CSS / Création de la grille.

Lecture 184 Création des aliens

Lecture 185 Déplacer les aliens

Lecture 186 Création du laser

Lecture 187 Finitions

Section 38: [Ancien Cours] Le lecteur vidéo

Lecture 188 Lecteur vidéo : HTML & CSS

Lecture 189 Gérer le volume, le mute, et la barre orange.

Lecture 190 Pouvoir cliquer sur la barre orange

Section 39: [Ancien Cours] Jeu du casse-briques

Lecture 191 Création de l'HTML / CSS + création de la balle et de la barre

Lecture 192 Dessiner les briques

Lecture 193 Animer le jeu

Lecture 194 Gérer la détection de collision

Section 40: [Ancien Cours] Jeu vitesse d'écriture

Lecture 195 Partie HTML / CSS

Lecture 196 Afficher une phrase aléatoire

Lecture 197 Gérer l'entrée et les erreurs

Section 41: [Ancien Cours] Le jeu du morpion

Lecture 198 Le morpion : HTML / CSS

Lecture 199 Le javaScript du jeu du morpion

Section 42: [Ancien Cours] Visualiseur Audio

Lecture 200 Création du visualiseur audio

Développeurs Front-End,Développeurs Web,Étudiants en informatique,Personne en reconversion,Amateur de dev web