Le bootcamp de développement Web complet

Ressources
https://www.appbrewery.co/p/web-development-eourse-resources
Projets
Projet 1: Utilisation du site personnel créé par HTML - https://sdkdeepa.github.io/resume/
Projet 2: Intro à CSS - https://sdkdeepa.github.io/profile/
Projet 2 Final: HTML, CSS et Bootstrap - https://sdkdeepa.github.io/udemy-bootstrap/
Projet 3: DICE GAME - Méthodes JS et DOM - https://sdkdeepa.github.io/dice
Projet 4: Drum Kit - JS Keyboard Events - https://sdkdeepa.github.io/drumming/
Projet 5: Simon Game - JS et JQuery - https://sdkdeepa.github.io/simon-game-jquery/
Projet 6: Calculatrice BMI - Node.js et Express.js. Ce projet utilisant des méthodes API telles que GET et POST pour calculer l'IMC

- Projet 7: Weather App - Node.js et Express.js. Ce projet utilise une API météorologique externe pour passer un appel pour obtenir les données météorologiques après l'envoi d'une demande de poste.

Projet 8: Inscription à la newsletter - HTML, CSS, Bootstrap, JS, Nodejs, Express, API, NPM, NODEMON, BODY-PARSER, etc.
Projet 9 et 10: Application ToDo List - Continue de Todo List App V2. Ajout des itinéraires Get, Publier et Supprimer. Vous pouvez désormais créer et supprimer la liste TODO pour aujourd'hui et pour la liste personnalisée. La liste personnalisée peut être ajoutée à la route domestique (ex: / travail). À l'aide de la base de données Cloud MongoDB Altas, les données sont collectées. Application hébergée via Heroku. Consultez: https://tranquil-earth-77166.herokuapp.com/
Projet 11: Site Web de blog personnel multipage - Création d'une application de blog personnelle multiple utilisant HTML, CSS, Bootstrap, JS, Node.js, Express.js, Body-Parser, API, EJS, Heroku, Mongoose, Mogodb Altas Cloud Cluster. Découvrez: https://morning-brook-32061.herokuapp.com/
Exemple de wireframing un projet
- Projet 2. Wireframing Tindog.png
Sujets couverts
HTML, CSS, JavaScript, Bootstrap 4, Dom & Dom Manipulation, JQuery, Node.js, Express, React EJS, Body-Parser, Nodemon, Lodash, MongoDB, MongoDB Atlas, Mongoose, Mongoose-Encryption, Passport-Mongoose, Bcrypt, Passort, Passport-Local, Passport-Mongoose, Bcrypt, Passort, Passport-Local, Passport-Mongoose, Bcrypt, Passort, Passport-Local, Passport-Mongoose, Bcrypt, Passort, Passport-Local, Passport-MongoS Passport-Google-Path20, Mongoose-FindorCreate, Express-Session, API, JSON, Authentication, MailChimp API, Build REST API à partir de zéro, Heroku.
Section 9: Introduction à JavaScript ES6
- 116-117: Challenge: Changer le boîtier dans le texte
- 118: opérateur de base arithmétique et modulo en javascript
- 121-122: Fonctions Partie 1: Défi - The Karel Robot
- 124: Fonctions Partie 2: Paramètres et arguments
Section 10: Javascript intermédiaire
- 131: Génération de nombres aléatoires en javascript: construire une calculatrice d'amour
- 132: Instructions de contrôle: Utilisation des conditions et logiques IF-Else
- Exercice de codage 5: Calculatrice d'IMC avancée (si / else)
- Exercice de codage 6: Année de saut
- 138: Ajout d'éléments et techniques de tableau intermédiaire
Section 12: Défi du niveau du boss 1 - Le jeu Dicee
- Créer un fichier JS externe
- Ajouter des images de dés
- Créer un nombre aléatoire
- Changer les deux IMG en dés aléatoire
- Changer les deux éléments IMG
- Changer le titre pour afficher un gagnant
Section 13: Manipulation avancée JavaScript et DOM
- 172: Défi de la fonction d'ordre supérieur
Section 14: kit de batterie
- 171: Ajouter des listes d'événements à un bouton
- 174: Comment jouer des sons sur un site Web
- 176: Comment utiliser les instructions Switch en JavaScript
- 179: Utilisation des auditeurs d'événements de clavier pour vérifier les pressions de touches
- 181: Ajout d'animation aux sites Web
Section 15: Challenge de niveau de boss 2 - Le jeu Simon
- Ajouter JS et JQuery
- Créer un nouveau modèle
- Montrez la séquence à l'utilisateur avec des animations et des sons
- Vérifiez quel bouton est appuyé
- Ajouter des sons aux clics du bouton
- Ajouter des animations aux clics de l'utilisateur
- Commencer le jeu
- Vérifiez la réponse de l'utilisateur contre la séquence de jeu
- Jeu terminé
- Redémarrer le jeu
Section 19: express.js avec node.js
- 241: Création de notre premier serveur avec express
- 242: Gestion des demandes et réponses: la demande GET
- 244: Comprendre et travailler avec les routes
- 246: Configuration du défi de la calculatrice
- 248: Répondre aux demandes avec des fichiers HTML
- 249: Traitement des demandes de poste avec l'analyseur de corps
- 250: Challenge de routage BMI
Section 20: API - Interfaces de programmation d'application
- 258: Faire des demandes de GET avec le module HTTPS Node
- 259: Comment analyser JSON
- 260: Utilisation d'express pour rendre un site Web avec des données d'API en direct
- 261: Utilisation de l'analyseur corporel pour analyser les demandes de poste au Projet du serveur: Projet météorologique
Section 21: Inscription à la newsletter
- 263: Configuration de la page d'inscription
- 264: publier des données sur les serveurs de MailChimp via leur API
- 265: Ajout de pages de succès et d'échec
- 266: Déploiement de votre serveur avec Heroku
Projet: https://shrouded-river-17694.herokuapp.com/
Section 22: EJS
- 282: Modèles? Pourquoi avons-nous besoin de modèles?
- 283: Création de votre premier modèle EJS
- 284: Exécution du code à l'intérieur du modèle EJS
- 285: passer des données de votre page Web à votre serveur
- 287: Ajout de feuilles de styles CSS pré-faites à votre site Web
- 288: Comprendre les modèles vs mises en page
- 289: Comprendre les exportations du module de nœud: comment passer les fonctions et les données entre les fichiers
Section 23: Challenge du Boss Level 3 - Site Web de blog
- Obtenez un itinéraire à domicile et ajoutez du contenu à la maison.
- Passez les données de HomestartingContent à la maison.
- Ajouter des parties d'en-tête et de pied de page à la maison.
- En-tête déplacé et pied de page vers le dossier partiel
- Ajouter des itinéraires à propos et de contact, passer du contenu à environ et contacter.ejs
- Ajouter Nav Href à l'en-tête
- Ajouter le formulaire de compose et la route postale
- Ajouter des champs de texte pour composer la forme et utiliser bootstrap
- Créer un objet JS pour la publication
- Poussez le poteau dans la table des messages
- Ajouter des publications au tableau de rendu
- Faire une boucle à travers tous les messages
- Refactor pour la boucle pour utiliser foreach
- Rendez chaque message sur la maison
- Ajouter des paramètres de routage express / publications /: blogpost
- Boucle à travers les messages Array pour vérifier s'il correspond au titre dans l'URL
- Ajouter Lodash et utiliser _.LowerCase sur les titres
- Page séparée pour chaque article de blog
- Tronquer le corps du poteau sur la page d'accueil à 100 caractères
- Ajouter en lire plus aux messages
Section 27: Mongoose
- 357: Introduction à Mongoose
- 358: Lire de votre base de données avec Mongoose
- 359: Validation des données avec Mongoose
- 360: Mise à jour et supprimer des données à l'aide de Mongoose
- 361: Établir des relations et intégrer des documents à l'aide de Mongoose
Section 28: tout assembler
- 364: Prenez le projet todoliste au niveau suivant et connectez-le à Mongoose
- 365: Rendre les éléments de la base de données dans l'application todoliste
- 366: Ajout de nouveaux éléments à notre base de données todolistes
- 367: Suppression des éléments de notre base de données todiolistes
- 368: Création de listes personnalisées en utilisant des paramètres de route express
- 369: Ajout de nouveaux articles aux todolistes personnalisés
- 370: Revisiter Lodash et supprimer les articles des listes de tâches personnalisées
Section 29 - Déploiement de votre application Web
- 374: Comment déployer des applications Web avec une base de données
- 374: Comment configurer MongoDB Atlas
- 375: Déploiement d'une application avec une base de données à Heroku
Dossier: Projet 9 et 10: Liste de Todo https://tranquil-earth-77166.herokuapp.com/
Section 30 - Défi du niveau de boss 4 - mise à niveau du site Web du blog
- 381: Économisez des messages composés avec MongoDB
- 382: Obtenez la page d'accueil pour rendre les messages
- 383: Rediriger vers la page d'accueil une fois que Save () est terminé sans erreur
- 384: Rendez un article de blog correct basé sur la publication _id
Dossier: Projet 11: Site Web de blog terminé https://morning-brook-32061.herokuapp.com/
Section 31 - Construisez votre propre API RESTful à partir de zéro
- 389: configurer le défi du serveur
- 391: Obtenez tous les articles
- 392: publier un nouvel article
- 393: Supprimer tous les articles
- 394: gestionnaires de routes enchaînés utilisant Express
- 395: Obtenez un article spécifique
- 396: Mettez un article spécifique
- 397: patcher un article spécifique
- 398: supprimer un article spécifique
Dossier: wiki-api
Section 32 - Authentification et sécurité
- 403: se mettre en place
- 404: Niveau 1 - Enregistrez les utilisateurs avec le nom d'utilisateur et le mot de passe
- 406: Niveau 2 - Encryption de base de données
- 407: utiliser des variables d'environnement pour assurer la sécurité des secrets
- 408: Niveau 3 - Mots de passe de hachage
- 410: Niveau 4 - Mots de passe de salage et de hachage avec BCrypt
- 412: Niveau 5 - Utilisation de Passport.js pour ajouter des cookies et des sessions
- 413a: niveau 6 - OAuth 2.0 et comment implémenter la connexion avec Google
- 413b: niveau 6 - OAuth 2.0 avec Facebook
- 414: Laisser les utilisateurs soumettre des secrets
Dossier: secrets
Section 33 - react.js
- 422: pratique du code JSX
- 423: Expressions JavaScript dans les littéraux du modèle JSX & ES6
- 424: Expressions JavaScript dans JSX Practice
- 425: Éléments de réaction des attributs et du style
- 426: Style en ligne pour les éléments de réaction
- 427: réagir la pratique du style
- 428: React Composants
- 429: React Composants Practice
- 431: JavaScript ES6 Importer, exporter et pratiques de modules
- 434: Project de l'application Keeper - Partie 1
- 436: React accessoires
- 437: réagir les accessoires pratiques
- 438: React Devtools - https://990sq.csb.app/
- 439: mappage des données aux composants - https://0lrqy.csb.app/
- 440: mappage des données à la pratique des composants - https://1kzup.csb.app/
- 441: map / filtre JavaScript ES6 / réduction
- 442: fonctions JavaScript ES6 flèche
- 443: Project d'application Keeper - Partie 2
- 444: réagir le rendu conditionnel avec l'opérateur ternaire et l'opérateur
- 445: Pratique de rendu conditionnel - https://pr7ow.csb.app/
- 447: React Hooks - Usestate
- 448: pratique du crochet Usestate
- 449: JavaScript ES6 Objet et Tableau destructeur
- 450: Challenge de destructeur JavaScript ES6
- 451: Gestion des événements en réaction
- 452: REACT FORMS
- 454: Modification de l'état complexe
- 455: Modification de la pratique de l'État complexe
- 456: opérateur de diffusion JavaScript ES6
- 457: JavaScript ES6 Spread Operator Practice
- 458: Gérer un arbre de composant
- 459: Gestion d'une pratique des arbres composants
- 460: Project d'application Keeper - Partie 3
- 461: React Dependances & Styled the Keeper App - https://pbt9b.csb.app/
Outils utilisés
- codepen
- Atome
- Facteur
- Hyper terminal
- Code Visual Studio
- https://codesandbox.io/