Enfin des projets en JavaScript natif (également appelé Javascript Vanilla).
Le web est inondé de Frameworks, de librairies et d’outils en JavaScript. Mais il reste très sec quand il s’agit de JavaScript natif. Peu de ressources en anglais et encore moins en français. C’est pour cela que je propose ce cours en ligne « 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 et à 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 solution erronée, 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 coder en JavaScript on fait des applications web en JS Natif. (Une app web est un site avec de nombreuses fonctionnalités, en général très dynamiques).
Voici la liste des 20 Projets Javascript que vous allez apprendre à créer dans ce cours en ligne
Un app de Quizz, une app météo sur navigateur, un Pokédex, un créateur de cookies, une to-do list, une app "Pomodoro", un système de validation de mot de passe dans un formulaire, un site pour créer des dégradés linéaires, un jeu des cartes mémoires, un projet avec l'API de GitHub, un projet d'authentification avec Firebase.
Mais ce n'est pas tout ! Nous apprendrons également à créer un slider, un système de drag and drop stylé, la création des particules en JS, coder le jeu space-invader, -créer un lecteur de vidéo personnalisé, créer le jeu casse-briques, coder un jeu de vitesse d'écriture, faire le jeu du morpion et enfin, coder un visualiseur de son.
Pas de quoi s'ennuyer. Le maître mot de cette formation en vidéo, c'est la pratique !
Les compétences JavaScript qui seront développées dans cette formation en ligne :
- 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.
- Gérer toutes sortes d’événements.
- Utiliser une base de données pour faire un système d’authentification (simple).
- Voir l’utilisation du DOM en profondeur, une des clés pour bien comprendre JS.
- Utiliser des techniques spéciales très utiles, comme l’utilisation de JavaScript lié au son, mais aussi le système de drag & drop, utiliser des données au format JSON.
- ...
On va vraiment aborder et apprendre beaucoup de choses !
A qui s’adresse ce tuto JavaScript ?
Ce cours s’adresse aux débutants. 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.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Sympa hein ? Alors si tu as envie de booster ton niveau en programmation, rendez-vous de l'autre côté pour commencer à coder !
Table des matières de cette formation JavaScript (durée : 10h49m)
-
Introduction
- Introduction gratuit 00:03:47
- Code source et conseils gratuit 00:08:08
-
Le quizz
- Introduction Quizz gratuit 00:02:33
- Quizz : partie HTML 00:08:31
- Quizz : partie CSS 00:10:55
- Quizz : Récupérer les données en JavaScript 00:07:10
- Quizz : Obtenir les résultats 00:05:21
- Quizz : Afficher les résultats 00:07:49
- Quizz : finitions 00:07:34
-
App météo sur navigateur
- Introduction App météo gratuit 00:02:26
- App Météo : Partie HTML gratuit 00:06:44
- App Météo : Partie CSS 00:10:22
- App Météo : Partie CSS 2 00:06:04
- App météo : premier appel à l'API gratuit 00:11:42
- App météo : gérer les données 00:08:51
- App météo : Afficher les prévisions 00:11:41
- App météo : Prévisions des jours + loader 00:10:25
-
Le pokédex
- Intro Pokedex gratuit 00:01:18
- Pokédex : Section CSS 00:11:30
- Pokédex : Premier appel à l'API 00:04:31
- Pokédex : Gérer les données pour les avoir en FR 00:08:13
- Pokédex : Créer les cartes 00:10:10
- Pokédex : implémenter le scroll infini 00:09:16
- Pokédex : Gérer la recherche 00:08:36
- Pokédex : Animer le chargement 00:06:29
-
Le créateur de cookies
- Introduction et HTML gratuit 00:06:04
- Partie CSS 00:04:08
- [removed] Utiliser Date pour se déplacer à la semaine suivante 00:06:10
- [removed] Remplir l'objet contenant les infos des cookies 00:07:34
- Créer un cookie. 00:05:15
- Gérer les actions autorisées. 00:08:17
- Afficher et supprimer les cookies 00:08:35
- Gérer un petit bug. 00:02:22
-
La To-Do List.
- To-do list : HTML et CSS 00:08:33
- To-do list : Logique JS 00:12:56
-
Projet Pomodoro
- Pomodoro : HTML - CSS 00:06:23
- Pomodoro : Affichage de base 00:06:41
- Pomodoro : Gérer les actions 00:06:32
- Pomodoro : finitions 00:07:08
-
Validation de formulaire
- Validation HTML 00:06:24
- Validation : CSS 00:08:23
- Validation pseudo 00:06:12
- Validation de l'email 00:05:38
- Validation du mot de passe 00:11:17
- Confirmation du mot de passe 00:04:18
-
App création de dégradés linéaires.
- Dégradés : HTML 00:03:18
- Dégradés : CSS 00:04:56
- Dégradé de base JS 00:03:41
- Rajouter des couleurs 00:09:25
- Suppression et rajout des couleurs 00:06:14
- Mise à jour des couleurs 00:06:01
-
Jeu des cartes mémoire
- Cartes mémoire : HTML & CSS 00:09:24
- Stocker les cartes retournées 00:05:35
- Verrouiller les cartes et changer l'ordre 00:07:05
-
Projet utilisateur GitHub
- Projet GitHub : HTML & CSS 00:06:47
- Projet GitHub créer un template avec des données JS. 00:11:09
-
Créer un système d'authentification
- Créer une base de donnée avec Firebase 00:04:59
- Authentification : HTML & CSS 00:07:55
- Gérer les modales + inscription 00:09:13
- Connexion, déconnexion et contenu public/privé 00:07:31
-
Le Slider
- Slider : HTML & CSS 00:08:46
- Slider : Partie JavaScript 00:09:39
-
App de Drag & Drop
- Drag&Drop : Html / CSS 00:06:10
- Drag&Drop : ajout des événements 00:07:06
- Drag&Drop : Sélectionner une photo 00:10:06
-
Créer des particules en JavaScript
- Particules : Html & CSS 00:10:13
- Particules : Créer un tableau contenant les objets 00:03:13
- Animer les particules 00:10:26
-
Space Invaders
- HTML / CSS / Création de la grille. 00:11:55
- Création des aliens 00:06:46
- Déplacer les aliens 00:10:05
- Création du laser 00:05:49
- Finitions 00:05:50
-
Le lecteur vidéo
- Lecteur vidéo : HTML & CSS 00:06:44
- Gérer le volume, le mute, et la barre orange. 00:08:32
- Pouvoir cliquer sur la barre orange 00:05:40
-
Jeu du casse-briques
- Création de l'HTML / CSS + création de la balle et de la barre 00:06:24
- Dessiner les briques 00:07:42
- Animer le jeu 00:09:35
- Détecter les collisions 00:09:29
-
Jeu vitesse d'écriture
- Partie HTML / CSS 00:05:11
- Afficher une phrase aléatoire 00:07:20
- Gérer l'entrée et les erreurs 00:09:09
-
Le jeu du morpion
- Le morpion : HTML / CSS 00:03:45
- Le javaScript du jeu du morpion 00:13:35
-
Visualiseur Audio
- Création du visualiseur audio 00:17:50
- Fichiers sourcestélécharger
- Certificat
Formateur : Enzo Ustariz
-
Super cours.. Je trouve que c'est super cool d'avoir fait un cours avec plein des mini projet. J'aurais aimé plus des projet avec des API's. Ou carement un website avec l'utilisation d'une Api dedans.. Quelque chose qui pourrais être veritablement interesant pour notre CV en tant que front-end.. J'ai mis 3 etoils car j'ai l'impresion que de fois il y a des choses peut-être esentielles que ça va trop vite... Ou on se trouve avec une mega ligne de code avec plein des variables à l'interieur le tuto continue sans vraiment explication.. Je trouvé en peut frustrant ça... Ou par exemple et j'ai l'impresion que c'est personelle.. mais quand tu explique une ligne de code qui fait appel à diferents vars que tu veux l'expliquer en remontent et descendent constantement... Je trouve que ce n'ai pas productive. J'etait plus perdu que d'autre chose.. Peut être un desin ou un graphique aurais mieux expliqué le code plus simplement. Je trouve que c'est une super iddée et j'ai bien avance.. Mais je pense qu'il faut améliorer la façon d'enseigner. Merci
-
Franchement, top. Mais, stp, c'est très bien que le tuto soit en français, mais le code, c'est en anglais et sans abréviations. Array, c'est par "arr". Je sais que je ne t'apprends rien. mais no Ninja Code. Edit : C'est noté! Merci. (Mais g pas rlv les otr abr utlz dn le crs). En tout cas, c'est de la patate tes cours. C'est juste que quand on est novice, avec les bugs qui arrivent vite, on est chatouilleux... à 3h du mat...
-
C'est top merci Enzo!!!!!
-
Avec quelle version de logiciel ce tuto est-il compatible ?JavaScript
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés