Front-end: Verwendung von Media-Query

Wie verwendet man Media-Query, damit die Objekte auf der Webseite sich ändern, wenn die Bildschirmbreite verändert wird? Dies ist wohl der wichtigste Teil der Responsivität.

Front-end: CSS-Transformation praktisches Beispiel

In den vorherigen Stunden haben wir begonnen, ein Webshop-Design mit HTML- und CSS-Technologie umzusetzen. Wir haben auch einige CSS-Transformationen gesehen, die wir hier verwenden, um ein einzigartiges Designelement zu erstellen.

Javascript 2. Lektion: Array-Operationen in JS

• Array-Operationen
  • Mehrdimensionale Arrays
  • Operationen mit Arrays
  • For-Schleife
  • Durchlaufen mehrdimensionaler Arrays

JavaScript Kurs 1. Lektion

• Einführung in Javascript
• Einbindung und Funktionsweise in einem HTML-Dokument
• Vorstellung der Datentypen
  • String (Text)
  • Number (Zahl)
  • Array (eindimensionales Array)
  • Object (statisches Objekt)
• Vorstellung arithmetischer Operatoren, Grundoperationen
• Vorgeschmack
  • Funktionen
  • Ereignisse
  • DOM-Manipulation

JavaScript Kurs 2. Lektion

• Datentypen
  • Primitive Typen (string, number, boolean, null, undefined)
  • Array
  • Objekt
• Operationen mit Arrays (ein-/mehrdimensional)
  • Operationen mit Objekten
  • Beispiel für komplexe Datenstruktur

JavaScript Kurs 3. Lektion (Kontrollstrukturen, Function)

• Kontrollstrukturen
  • Schleifen
    • While
    • For
    • For-of
  • If / else / elseif Statement
  • Switch Statement
• Function
  • Control Flow Konzept
  • Function als Subroutine
  • Function als mathematische Funktion
  • First Class Function
  • Anonyme Function

JavaScript Kurs 4. Lektion (Ereignisse im Browser)

• Aufbau von Client-seitigen Anwendungen
  • Action
  • State
  • Render
• Reaktion auf Ereignisse
  • Click, submit, hover, mousemove
• Auswahl von Elementen aus dem Document Object
  • getElementById, querySelector, querySelectorAll Funktionen

JavaScript Kurs 5. Lektion (Event Object)

• Daten im Event Object
  • preventDefault Funktion
  • event.target
  • Extraktion von Daten aus Eingabefeldern
• Beispielaufgaben

JavaScript Kurs 6. Lektion (Array-Methoden)

• Higher Order Function Konzept
  • Map
  • Filter
  • Reduce
• Daten
  • Mapping
  • Filterung
  • Aggregation mit prozeduralen und funktionalen Methoden

JavaScript Kurs 7. Lektion (Projekt)

• Aufbau einer Client-seitigen Anwendung
  • Ressourcen auflisten
  • Erstellen

JavaScript Kurs 8. Lektion (Projekt II., HTTP)

• Projekt II., HTTP
  • Client-seitige Anwendung erstellen - Ressource überschreiben - Löschen
  • Das HTTP-Protokoll - Request method, path, header, body - Response header, body, status

JavaScript Kurs 9. Lektion (AJAX)

• JSON-Dateiformat Zweck, Syntax
• Funktionsweise der JS Engine:
  • Stack
  • Web APIs
  • Callback Queue
  • Event Loop
• Konzept von asynchronem JavaScript
• XMLHttpRequest

JavaScript Kurs 10. Lektion (AJAX II.)

• Asynchrone Anfragen mit XMLHttpRequest-Objekt und Callback-Funktion
• Callback Hell/Pyramid of Doom
• Asynchrone Operationen mit Promises
• Promise Chain
• Fetch API

JavaScript Kurs 11. Lektion (AJAX III.)

• Anmeldedaten an die Serverseite senden
• Anmeldedaten an die Serverseite senden
• Ressource von der Serverseite anfordern
  • Mit Callback-Funktion
  • Mit Promise Chain
  • Mit Async Function

JavaScript Kurs 12. Lektion (Sprachliche Werkzeuge)

• Arrow Function
• Let, const
• Try/catch
• Programmierparadigmen

JavaScript Kurs 13. Lektion (OOP, Node.js)

• Objektorientierte Programmierung
  • Function Constructor
  • Class Deklaration
  • Switch Statement
• Node.js
  • Installation
  • REPL
  • Server erstellen

JavaScript Kurs 14. Lektion (Node.js)

• Node.js Module Wrapper Function
  • Die Parameter der Wrapper Function
  • Export und Import aus/in Module
• Ressourcen von der Serverseite bereitstellen
  • Statischer Inhalt (HTML und JS Content)
  • Dynamischer Inhalt (Produktliste)
• Aufbau eines Full-Stack-Systems
  • User Interface
  • State
  • API
  • Router
  • Controller
  • Datenspeicherschicht

JavaScript Kurs 15. Lektion (Node.js)

• Stream
• Dateisystemoperationen

JavaScript Kurs 16. Lektion (Node.js)

• NPM
• Ressource löschen
• Dynamischen HTML-Inhalt bereitstellen
• Cross-Site-Scripting-Angriff (XSS)

JavaScript Kurs 17. Lektion (Express)

• Postman
• Express Framework
• Middleware
• Dynamische Komponente in der URL
• JSON-encoded Body aus dem Request auslesen
• Query-Parameter aus dem Request auslesen

JavaScript Kurs 18. Lektion (MongoDB)

• SQL vs. NoSQL Datenbanken
• Mongo Atlas Konfiguration
• Ressource speichern und auflisten

JavaScript Kurs 19. Lektion (MongoDB II.)

• JSON API fertigstellen
• updateOne
• Array Push
• Aggregation

JavaScript Kurs 20. Lektion (Client App)

• UI-Elemente aufbauen
• REST-Endpoints mit der Client-Anwendung verbinden

JavaScript Kurs 21. Lektion (Client App II.)

• UI-Elemente
  • Delete
  • Update

JavaScript Kurs 22. Lektion (Node.js Website)

• Serverseitig generierter HTML-Inhalt
• EJS Template Engine
• Code: https://drive.google.com/open?id=152j6wZx2EjLMD5Hj1rC2jL2A09bKAu_c

JavaScript Kurs 23. Lektion (Node.js Website II.)

• Serverseitige Validierung
• Umleitung
• Rendern basierend auf Query-Parametern

JavaScript Kurs 24. Lektion (Node.js Website III.)

• Pagination
• Limit
• Skip
• MongoDB Query-Operatoren

JavaScript Kurs 25. Lektion (Zusammenfassung)

• Überblick über die Prüfungsarbeit
• Übung der Prüfungsaufgaben

Back-end Kurs 1. Lektion

• Apache Server Installation
• Grundlegende PHP-Syntax
• Einfache Ausgabeanweisungen in PHP
• PHP-Einstellungen
• PHP INI-Datei

Back-end Kurs 2. Lektion

• Datentypen
  • Primitive Typen (string, integer, boolean, null)
  • Arrays (numerisch, assoziativ)
  • Operationen mit Arrays (ein-/mehrdimensional)
  • Beispiel für komplexe Datenstruktur

Back-end Kurs 3. Lektion (Kontrollstrukturen)

• Kontrollstrukturen
  • Schleifen: While, For, For-of
  • If/else, elseif Statement
  • Switch Statement
• Iteration über Beispieldaten
• Dynamische Daten in HTML-Inhalt ausgeben

Back-end Kurs 4. Lektion (Function, HTTP)

• Function
  • Control Flow Konzept
  • Function als Subroutine
  • Function als mathematische Funktion
• Array-Operationen
  • Neues Element zum Array hinzufügen
  • Filterung
• HTTP-Protokoll Funktionsweise
  • Request method, path, header, body
  • Response header, body, status
  • PHP Superglobale Variablen
  • Single Entrypoint Konzept

Back-end Kurs 5. Lektion (Router, Datenspeicherung)

• Router (Pfadauswahl)
• Datenspeicherung in JSON-Datei
  • Schleifen
  • Create (Ressource erstellen)
  • Read (Ressource auslesen)
• HTTP Redirect ausführen

Back-end Kurs 6. Lektion (Projekt I.)

• Text in Textinhalt suchen
• Eindeutige Kennung generieren
• Ressource löschen

Back-end Kurs 7. Lektion (Projekt II.)

• Ressource
  • Nach eindeutiger Kennung suchen
  • Überschreiben
• Refaktorierung
  • Häufig vorkommende Operationen in Funktionen auslagern

Back-end Kurs 8. Lektion (Objektorientierte Programmierung I.)

• Programmierparadigmen
  • Prozedural
  • Funktional
  • Objektorientiert
• Class Deklaration
  • Property
  • Method
  • Setter Method
• Class Instanziierung
  • Objekt mit Daten befüllen

Back-end Kurs 9. Lektion (Objektorientierte Programmierung II.)

• Class Deklaration
  • Konstruktor
  • Chainable Setter Method
  • Getter Method
• Objektkomposition
• Array von Objekten erstellen

Back-end Kurs 10. Lektion (MySQL I.)

• Merkmale relationaler Datenbankverwaltungssysteme
  • Tabelle
  • Spalte
  • Zeile
• phpMyAdmin
  • Datenbank und Tabelle erstellen
  • Datentypen
• MySQL Statements
  • SELECT
  • INSERT
  • UPDATE
  • DELETE

Back-end Kurs 11. Lektion (MySQL)

• Datenmodelle
  • One-to-one
  • One-to-many
  • Many-to-many

Back-end Kurs 12. Lektion (MySQL III.)

• MySQL
  • FOREIGN CONSTRAINT
  • INNER JOIN
  • LEFT JOIN

Back-end Kurs 13. Lektion (MySQL IV.)

• PHP-Template Wiederverwendung
• MySQL Klauseln
  • WHERE
  • GROUP BY
  • HAVING
  • ORDER BY
  • LIMIT
  • OFFSET

Back-end Kurs 14. Lektion (MySQL V.)

• MySQL Queries
• Pagination

Back-end Kurs 15. Lektion (Session)

• User Authentication
• Session
• Cookie

Back-end Kurs 16. Lektion (Cookie)

• Als Favorit markieren

Back-end Kurs 17. Lektion (File Upload)

• Cookie Unset
• Bild hochladen

Back-end Kurs 18. Lektion (Passwortverwaltung)

• Registrierung
• Vertrauliche Benutzerdaten speichern

Back-end Kurs 19. Lektion (Composer)

• Composer init, require, remove Befehle
• Nikic/fast-route Router Package
• REST API

Back-end Kurs 20. Lektion (Composer II.)

• Namespace
• Autoloader
• PSR-4 Standard

Back-end Kurs 21. Lektion (OOP 2)

• Vererbungshierarchie
• Komposition vs. Vererbung
• Interface
• Plugin-Architektur

Back-end Kurs 22. Lektion (OOP 2 II.)

• Interface
• Closure
• Static Method
• Globale Variable

Back-end Kurs 23. Lektion (Baumstrukturen)

• Git Grundlagen
• Rekursion
• Baumstruktur aufbauen
• Operationen mit Baumstrukturen

Back-end Kurs 24. Lektion (Twig Template Engine)

• Filesystem Loader
• Twig Template Syntax
• Dynamische Daten rendern

Back-end Kurs 25. Lektion (Array Methods)

• MySQL View
• Array Methoden
  • map
  • filter
  • reduce

Einführung in HTML I./1

• Float
• Class
• Multi Class
• PHP-Einstellungen
• Inline, Outline, CSS-Verwendung
• HTML Skeleton
• Bracket Erweiterungen installiert
• Fehlersuche
• Boxmodel - Veranschaulichung
• Padding - Margin (Einführung)
• Einfache Aufgabe zur Veranschaulichung der Funktionsweise von Divs

Einführung in HTML I./2.

• Float
• Class
• Multi Class
• PHP-Einstellungen
• Inline, Outline, CSS-Verwendung
• HTML Skeleton
• Bracket Erweiterungen installiert
• Fehlersuche
• Boxmodel - Veranschaulichung
• Padding - Margin (Einführung)
• Einfache Aufgabe zur Veranschaulichung der Funktionsweise von Divs

Einführung in HTML I./3.

• Float
• Class
• Multi Class
• PHP-Einstellungen
• Inline, Outline, CSS-Verwendung
• HTML Skeleton
• Bracket Erweiterungen installiert
• Fehlersuche
• Boxmodel - Veranschaulichung
• Padding - Margin (Einführung)
• Einfache Aufgabe zur Veranschaulichung der Funktionsweise von Divs

Einführung in HTML II./1.Teil

• Textbearbeitung
• Überschriften
• Float

Einführung in HTML II./2.Teil

• Textbearbeitung
• Überschriften
• Float

Einführung in HTML III./1.Teil

• Tabellen
• Listen (geordnet, ungeordnet, dl)
• ul-li Menü

Einführung in HTML III./2.Teil

• Tabellen
• Listen (geordnet, ungeordnet, dl)
• ul-li Menü

Bootstrap I./1.

• Carousel
• Card und Card Deck
• Schneller Webseitenaufbau

Bootstrap I./2.

• Carousel
• Card und Card Deck
• Schneller Webseitenaufbau

Bootstrap II./1.

• Grid-System
• Häufige Fragen
• Container + Fluid
• Sanduhr w-100 / w-50
• Row + Col

Bootstrap II./2.

• Bracket Bootstrap Snippet
• Bootstrap IMG + Divs
• Bootstrap Dropdown Menü

Bootstrap II./3.

• Bootstrap Webseitenaufbau
• Card & Card Deck

Bootstrap III./1.

• Bootstrap Modal & Alert

Bootstrap III./2.

• Bootstrap Modal & Alert

Bootstrap III./3. - LETZTER

• Bootstrap Modal & Alert

Sass

Warum brauchen wir das? Mit dem Wachstum einer Website benötigen wir immer mehr Energie für die Wartung der Dateien. Während wir für längeren PHP- und JavaScript-Code bereits zahlreiche Werkzeuge und Methoden verwenden, beschäftigen sich die meisten leider überhaupt nicht mit der Wartung von CSS-Dateien. Bei der Erstellung größerer Websites können CSS-Präprozessoren enorme Hilfe leisten. Die drei beliebtesten: Less, Stylus, Sass. Ihre Aufgabe: Mit erweiterter CSS-naher Syntax besser wartbaren Code für Browser erstellen. Ermutigung: Probieren Sie Sass aus!

Javascript Grundlagen I.

• Die grundlegenden Kontrollstrukturen von JavaScript, Variablentypen.
• Benennung von Variablen.
• Sequenzen, Selektionen, Iterationen.

Javascript Grundlagen II.

• Funktionen
• Arrays
• Objekte

JavaScript Grundlagen III.

• onChange
• onClick

JavaScript Grundlagen IV.

• Functions, EventListeners, Übung

JavaScript Grundlagen V.

• Eine komplexere JavaScript-Aufgabe, jQuery Grundlagen

JavaScript Grundlagen VI. - LETZTER

• jQuery Selektoren
• jQuery Chaining
• Scroll
• Übung

Komplette Webseite gemeinsam erstellen

• Seitenstruktur gestalten
• H-Tags im praktischen Einsatz
• Komplette Seite gemeinsam von Anfang bis Ende erstellen

WordPress 1. Termin

• Domain-Kauf und Einstellungen, Hosting und cPanel-Einstellungsmöglichkeiten.
• Grundfunktionen und Grundbegriffe des WordPress-Dashboards.
• Template-Installation und Plugin-Import.
• Menüpunkte der Anpassung.
• Menüanordnung.
• Hausaufgabe: Menü eindeutschen.

WordPress 2. Termin

• Webseitenbearbeitung: mit Widgets
• 3 verschiedene Builder verwenden
• Block-basierte Bearbeitung
• HTML-basierte Bearbeitung
• Freie Widget-Einfügungen
• Footer und Sidebar
• Korrektes Hochladen von Bildern in die Mediathek.

WordPress 3. Termin

• Contact Form 7 Plugin-Einstellungen (Formularerstellung)
• Weitere Plugins
  • SEO - ALL IN ONE SEO
  • Sitemap
  • Open Graph Protocol
• SEO-Analysetools und Methoden.

WordPress 4. Termin

• Logik der Blogpost- und anderen Unterseiten-Generierung.
• URL-Einstellungen, Ziel: schöne und logische URL
• Installation und Einstellung weiterer notwendiger Plugins.
• DSGVO-Einstellung
• Spracherzwingung mit Plugin
• Überprüfung
• PHP 7.2 Versions-Update

WordPress 5. Termin

• WooCommerce Installation
• WooCommerce Grundeinstellungen durchführen
• Ein Produkt erstellen
• Übersicht der Zahlungsmöglichkeiten
• SEO-freundliche Bezeichnungen für Produkt und Kategorie - Targeting mit Wörtern
• Hausaufgabe: 2 Produkte erstellen

WordPress 6. Termin

• Barion Kreditkartenzahlung einbinden
• Jetpack Grundeinstellungen
• Die trickreichen Funktionen von Jetpack: notwendig und darüber hinaus
• Kategorieeinstellungen
• Wichtigkeit von Tags
• Möglichkeiten und Grenzen der WooCommerce-Produktspezifikationen
• Fragen und Antworten
• Zusammenfassung

SEO-Unterricht + Web-Analytik

Was berücksichtigt Google alles bei der Zusammenstellung der organischen Liste, und worauf müssen wir bei der Erstellung einer Website unbedingt achten? Suchmaschinenoptimierung in der Praxis.