Udemy web bootcamp

Der vollständige Webentwicklungs -Bootcamp

Ressourcen

https://www.appbrewery.co/p/web-development-course-resources

Projekte

• Projekt 1: Mit HTML erstellte persönliche Website - https://sdkdeepa.github.io/resume/

• Projekt 2: Intro zu CSS - https://sdkdeepa.github.io/profile/

• Projekt 2 Finale: HTML, CSS und Bootstrap - https://sdkdeepa.github.io/udemy-bootstrap/

• Projekt 3: DICE GAME - JS- und DOM -Methoden - https://sdkdeepa.github.io/dice

• Projekt 4: Drum Kit - JS -Tastaturereignisse - https://sdkdeepa.github.io/drumming/

• Projekt 5: Simon Game - JS und JQuery - https://sdkdeepa.github.io/simon-game-jquery/

• Projekt 6: BMI -Taschenrechner - Node.js und Express.js. Dieses Projekt verwendet API -Methoden wie GET und Post, um den BMI zu berechnen

---

• Projekt 7: Wetter App - Node.js und Express.JS. In diesem Projekt wird eine externe Wetter -API verwendet, um den Anruf zu erhalten, um die Wetterdaten zu erhalten, nachdem eine Postanforderung gesendet wurde.

• Projekt 8: Newsletter-Anmeldung-HTML, CSS, Bootstrap, JS, Nodejs, Express, API, NPM, Nodemon, Body-Parser usw.

• Projekt 9 und 10: TODO List App - Fortsetzung der TODO -Liste App V2. Get, Post und Löschen von Routen hinzugefügt. Sie können jetzt die Todo -Liste für heute und für die benutzerdefinierte Liste erstellen und löschen. Die benutzerdefinierte Liste kann zur Heimroute hinzugefügt werden (z. B. /Arbeit). Verwenden von MongoDB -Altas -Cloud -Datenbank werden die Daten gesammelt. Hosted Application über Heroku. Schauen Sie sich an: https://tranquil-earth-77166.herokuapp.com/

• Projekt 11: Multipage Personal Blog -Website - Erstellt eine Multi -Page -persönliche Blog -Anwendung mit HTML, CSS, Bootstrap, JS, Node.js, Express.js, Body -Parser, API, EJS, Heroku, Mongoose, Mogodb -Altas -Cloud -Cluster. Kasse: https://morning-brook-32061.herokuapp.com/

Beispiel für die Wireframation eines Projekts

• Projekt 2. Wireframing Tindog.png

Themen behandelt

HTML, CSS, JavaScript, Bootstrap 4, DOM & DOM Manipulation, jQuery, Node.js, Express, React EJS, body-parser, nodemon, lodash, MongoDB, MongoDB Atlas, mongoose, mongoose-encryption, dotenv, md5, bcrypt, passport, passport-local, passport-local-mongoose, Passport-Google-Path20, Mongoose-Findorcreate, Express-Session, API, JSON, Authentifizierung, MailChimp-API, bauen Sie REST-API von Grund auf, Heroku.

Abschnitt 9: Einführung in JavaScript ES6

• 116-117: Herausforderung: Ändern des Gehäuses im Text
• 118: Basisarithmetischer und Modulo -Operator in JavaScript
• 121-122: Funktionen Teil 1: Herausforderung - Der Karel -Roboter
• 124: Funktionen Teil 2: Parameter und Argumente

Abschnitt 10: Intermediate JavaScript

• 131: Zufällige Zahlengenerierung in JavaScript: Erstellen eines Liebesrechners
• 132: Kontrollanweisungen: Verwenden von IF-ELSE-Bedingungen & Logik
• Codierungsübung 5: BMI -Rechner erweitert (wenn/sonst)
• Codierungsübung 6: Schaltjahr
• 138: Hinzufügen von Elementen und Zwischenarray -Techniken

Abschnitt 12: Boss Level Challenge 1 - Das Würfelspiel

• Erstellen Sie eine externe JS -Datei
• Würfelbilder hinzufügen
• Erstellen Sie eine Zufallszahl
• Ändern Sie beide IMG in einen zufälligen Würfel
• Ändern Sie beide IMG -Elemente
• Ändern Sie den Titel, um einen Gewinner anzuzeigen

Abschnitt 13: Erweiterte JavaScript und DOM Manipulation

• 172: Funktionsweise höherer Ordnung Herausforderung

Abschnitt 14: Drum Kit

• 171: Hinzufügen von Ereignislisten zu einer Schaltfläche Hinzufügen
• 174: Wie man Geräusche auf einer Website spielt
• 176: Verwenden Sie Switch -Anweisungen in JavaScript
• 179: Verwenden von Tastaturereignis -Hörern, um nach Tastendrücken zu suchen
• 181: Animation zu Websites hinzufügen

Abschnitt 15: Boss Level Challenge 2 - Das Simon -Spiel

• Fügen Sie JS und JQuery hinzu
• Erstellen Sie ein neues Muster
• Zeigen Sie dem Benutzer die Sequenz mit Animationen und Sounds an
• Überprüfen Sie, welche Taste gedrückt wird
• Fügen Sie Sounds zu Schaltflächenklicks hinzu
• Fügen Sie den Benutzerklicks Animationen hinzu
• Starten Sie das Spiel
• Überprüfen Sie die Antwort des Benutzers gegen die Spielsequenz
• Spiel vorbei
• Starten Sie das Spiel neu

Abschnitt 19: Express.js mit node.js

• 241: Erstellen Sie unseren ersten Server mit Express
• 242: Umgang mit Anfragen und Antworten: Die Get -Anfrage
• 244: Verstehen und Arbeiten mit Routen
• 246: Calculator Challenge Setup
• 248: Beantwortung auf Anfragen mit HTML -Dateien
• 249: Verarbeitung von Postanfragen mit Body Parser
• 250: BMI Routing Challenge

Abschnitt 20: APIs - Anwendungsprogrammierschnittstellen

• 258: Get -Anfragen mit dem Knoten HTTPS -Modul erstellen
• 259: Wie man JSON analysiert
• 260: Verwenden Sie Express, um eine Website mit Live -API -Daten zu rendern
• 261: Verwenden von Body Parser, um Postanfragen an das Serverprojekt zu analysieren: Wetterprojekt

Abschnitt 21: Newsletter Anmeldung

• 263: Einrichten der Anmeldeseite einrichten
• 264: Veröffentlichung von Daten auf MailChimp -Server über ihre API
• 265: Erfolgs- und Misserfolgseiten hinzufügen
• 266: Bereitstellen Ihres Kellers mit Heroku

Projekt: https://shrouded-river-17694.herokuapp.com/

Abschnitt 22: EJS

• 282: Vorlagen? Warum brauchen wir Vorlagen?
• 283: Erstellen Ihrer ersten EJS -Vorlage
• 284: Code in der EJS -Vorlage ausführen
• 285: Übergeben von Daten von Ihrer Webseite an Ihren Server
• 287: Hinzufügen von vorgefertigten CSS-Stylesheets zu Ihrer Website
• 288: Vorlagen gegen Layouts verstehen
• 289: Exporte des Knotenmoduls verstehen: So übergeben Funktionen und Daten zwischen Dateien

Abschnitt 23: Boss Level Challenge 3 - Blog -Website

• Holen Sie sich Home Route und fügen Sie Inhalte zu home.ejs hinzu
• Übergeben Sie Daten von HomestartingContent nach home.ejs
• Fügen Sie Header- und Fußzeilen -Partials zu home.ejs hinzu
• Bewegte Header und Fußzeile zu Teilsordner
• Fügen Sie Routen hinzu und kontaktieren Sie die Inhalte an concontact.ejs
• Fügen Sie Nav Href zum Header hinzu
• Fügen Sie das Formular für Komponieren und Postrose hinzu
• Fügen Sie Textfelder hinzu, um das Formular zu komponieren, und verwenden Sie Bootstrap
• Erstellen Sie ein JS -Objekt für Post
• Schieben Sie Post in Post -Array
• Fügen Sie Beiträge hinzu, um das Array zu rendern
• Schleifen Sie durch alle Beiträge
• Refactor für die Loop für die Leitung
• Rendern Sie jeden Pfosten zu Hause
• Fügen Sie Express -Routing -Parameter /Beiträge hinzu /: Blogpost
• Schleifen Sie durch das Post -Array, um zu überprüfen, ob es den Titel in der URL entspricht
• Fügen Sie Lodash hinzu und verwenden Sie _.lowercase für Titel
• Separate Seite für jeden Blog -Beitrag
• Schnittpostkörper auf der Homepage auf 100 Zeichen verkürzen
• Fügen Sie mehr zu Posts hinzu

Abschnitt 27: Mongoose

• 357: Einführung in die Mongoose
• 358: Lesen Sie aus Ihrer Datenbank mit Mongoose aus
• 359: Datenvalidierung mit Mongoose
• 360: Aktualisierung und Löschen von Daten mit Mongoose
• 361: Aufbau von Beziehungen und Einbetten von Dokumenten mit Mongoose

Abschnitt 28: alles zusammenfügen

• 364: Bringen Sie das Todolist -Projekt auf die nächste Stufe und verbinden Sie es mit Mongoose
• 365: Datenbankelemente in die Todolist App rendern
• 366: Hinzufügen neuer Elemente zu unserer Todolist -Datenbank
• 367: Löschen von Elementen aus unserer Todolist -Datenbank
• 368: Erstellen benutzerdefinierter Listen mithilfe von Express -Routenparametern
• 369: Hinzufügen neuer Elemente zu den benutzerdefinierten Todolisten
• 370: Überprüfung von Lodash und Löschen von Elementen aus benutzerdefinierten Todo -Listen

Abschnitt 29 - Bereitstellung Ihrer Webanwendung

• 374: So bereitstellen Sie Web -Apps mit einer Datenbank bereit
• 374: So richten Sie MongoDB Atlas ein
• 375: Bereitstellung einer App mit einer Datenbank für Heroku bereitzustellen

Ordner: Projekt 9 und 10: TODO-Liste https://tranquil-earth-77166.herokuapp.com/

Abschnitt 30 - Boss Level Challenge 4 - Blog -Website -Website -Upgrade

• 381: Sparen Sie komponierte Beiträge mit MongoDB
• 382: Holen Sie sich die Startseite, um die Beiträge zu rendern
• 383: Umleiten Sie die Homepage nach dem Save () ohne Fehler ab
• 384: Rendern Sie den korrekten Blog -Beitrag basierend auf Post _id

Ordner: Projekt 11: Blog-Website abgeschlossen https://morning-brook-32061.herokuapp.com/

Abschnitt 31 - Erstellen Sie Ihre eigene API von Grund auf neu

• 389: Richten Sie die Serverherausforderung ein
• 391: Holen Sie sich alle Artikel
• 392: Veröffentlichen Sie einen neuen Artikel
• 393: Alle Artikel löschen
• 394: Ketten Routenhandler mit Express
• 395: Holen Sie sich einen bestimmten Artikel
• 396: Setzen Sie einen bestimmten Artikel ein
• 397: Patchen Sie einen bestimmten Artikel
• 398: Löschen Sie einen bestimmten Artikel

Ordner: Wiki-api

Abschnitt 32 - Authentifizierung & Sicherheit

• 403: Eingerichtet werden
• 404: Stufe 1 - Registrieren Sie Benutzer mit Benutzername und Passwort
• 406: Stufe 2 - Datenbankverschlüsselung
• 407: Verwenden von Umgebungsvariablen, um Geheimnisse sicher zu halten
• 408: Stufe 3 - Hashing -Passwörter
• 410: Level 4 - Salz- und Hashing -Passwörter mit BCrypt
• 412: Stufe 5 - Verwenden Sie Passport.js zum Hinzufügen von Cookies und Sitzungen
• 413a: Stufe 6 - OAuth 2.0 und wie man sich bei Google anmeldet
• 413b: Stufe 6 - OAuth 2.0 mit Facebook
• 414: Benutzer von den Benutzern Geheimnisse einreichen lassen

Ordner: Geheimnisse

Abschnitt 33 - React.js

• 422: JSX -Codepraxis
• 423: JavaScript -Ausdrücke in JSX & ES6 -Template -Literalen
• 424: JavaScript -Ausdrücke in der JSX -Praxis
• 425: Attribute und Styling React -Elemente
• 426: Inline -Styling für React -Elemente
• 427: Reagieren Sie die Styling -Praxis
• 428: Reagieren Sie Komponenten
• 429: Reaktionen der Komponenten praktizieren
• 431: JavaScript ES6 Import-, Export- und Modulepraxis
• 434: Keeper App -Projekt - Teil 1
• 436: Reagieren Requisiten
• 437: Reagieren Sie Requisitenpraxis
• 438: React Devtools - https://990sq.csb.app/
• 439: Zuordnen von Daten zu Komponenten - https://0lrqy.csb.app/
• 440: Zuordnen von Daten zu Komponenten Praxis - https://1kzip.csb.app/
• 441: JavaScript ES6 MAP/Filter/Reduzierung
• 442: JavaScript ES6 -Pfeilfunktionen
• 443: Keeper App -Projekt - Teil 2
• 444: reagieren Sie das bedingte Rendering mit dem ternären Bediener und und dem Bediener
• 445: Bedingte Rendering -Praxis - https://pr7ow.csb.app/
• 447: Reags -Hooks - Usestate
• 448: UsSestate Hook -Praxis
• 449: JavaScript ES6 -Objekt und Array -Destruktion
• 450: JavaScript ES6 Destructuring Challenge
• 451: Ereignisbehandlung in React
• 452: React Formen
• 454: Komplexer Zustand ändern
• 455: Veränderung der komplexen Zustandspraxis
• 456: JavaScript ES6 Spread Operator
• 457: JavaScript ES6 Spread Operator Praxis
• 458: Verwalten eines Komponentenbaums
• 459: Verwalten einer Komponentenbaumpraxis
• 460: Keeper App -Projekt - Teil 3
• 461: Reagieren Sie Abhängigkeiten und stylen Sie die Keeper -App - https://pbt9b.csb.app/

Tools verwendet

• Codepen
• Atom
• Briefträger
• Hyper -Terminal
• Visual Studio -Code
• https://codesandbox.io/