Web Entwickling lernen - Alle Inhalte der Module
| Modul I: Technische Grundlagen – HTML & CSS „unter der Haube“ |
| -Was passiert im Browser? -Client vs. Server, Request/Response, Dateien & Assets HTML-Grundlagen: -Grundgerüst (doctype, head, body) -Semantische Elemente (header, nav, main, section, article, footer) Links, Listen, Bilder, Formulare CSS-Grundlagen: -Selektoren, Klassen, IDs -Box-Modell, Margin, Padding, Border -Farben, Schriften, einfache Layouts -Responsives Layout -Media Queries -Flexbox (Basis) für einfache Layouts -Praxisprojekt HTML/CSS: -Eine kleine, eigenständige Website (z.B. 3–5 Seiten: Start, Über mich, Leistungen, Kontakt) -Navigation, responsives Layout, einfache Typografie Transfer zu WordPress/Elementor: -Wie spiegelt sich HTML/CSS in Elementor-Struktur wider? -Wie finde ich mich im „Code-Inspektor“ (DevTools) zurecht? |
| Modul II: Technologien verstehen – JavaScript, PHP, Python & Flutter im Webkontext |
| JavaScript – Sprache des Browsers -Was ist der DOM? -Typische Einsatzbereiche: Interaktionen, Formulare, kleine Effekte, Fetch API -Einfache Beispiele: kleines JS-Snippet verstehen und minimal anpassen PHP – Motor von WordPress -Was passiert, wenn eine WordPress-Seite geladen wird? -Templates, Loops, Funktionen, Hooks (konzeptionell) -Einfache Template-Anpassungen oder Child-Theme-Snippets lesen/verstehen Python – im Webumfeld -Rolle eher im Backend, Data, Skripting, Automatisierung -Bezug zu Webprojekten: Schnittstellen, Datenverarbeitung, ggf. kleine Automatisierungen/Backends Flutter – Brücke zur App & Web-App -Was ist Flutter, wie unterscheidet es sich von reinem Web? - UI als Code, Cross-Platform (App, Web) -Demonstration: kleine Beispiel-App (2–3 Screens), um Prinzip zu zeigen Wann welches Werkzeug? -Klassische WordPress/WooCommerce-Projekte → HTML/CSS, JS, PHP -Shopify-Projekte → Theme/Editor -App-/Web-App-Projekte → Flutter Vertiefungsoptionen aufzeigen -Wo kann man sich später in JS/PHP/Python/Flutter tiefer einarbeiten? |
| Modul III: WooCommerce – WordPress als Online-Shop |
| Einrichtung von WooCommerce -Installation, Grundkonfiguration (Währung, Versand, Steuern, Zahlarten) -Produktarten (einfach, variabel), Kategorien, Attribute Shop-Frontend gestalten -Shop-Seiten, Produkt-Seiten, Warenkorb, Checkout -Gestaltung mit Elementor (Product Templates, Archive Templates) Performance im WooCommerce-Kontext -Bildoptimierung, Caching-Plugins, Minifizierung -Datenbank-Hygiene, Hosting-Einfluss auf Shop-Performance Sicherheit im WooCommerce-Umfeld -Updates, Backups, Security-Plugins -grundlegende Maßnahmen gegen Spam, Brute-Force & einfache Angriffe Shop-SEO -SEO für Produktseiten (Titel, Beschreibungen, Bilder, strukturierte Inhalte) -Kategorieseiten für Suchmaschinen optimieren -Basis-Tools: SEO-Plugin (z.B. Rank Math/Yoast) für Shops nutzen Praxis: -Aufbau eines Beispielshops (mind. 5–10 Produkte, Kategorien, einfache Filter) -Basiskonzept für Checkout-Optimierung (Usability) |
| Modul IV: Shopify – Shops in der Cloud |
| Shopify-Grundlagen ◦ Konto anlegen, Plan-Überblick, Admin-Oberfläche ◦ Produkte, Kollektionen, Varianten Themes & Gestaltung ◦ Theme-Auswahl, grundlegende Anpassungen über Editor ◦ Reihenfolge von Sections, einfache Layoutanpassungen ◦ Basis-CSS-Anpassungen (wenn sinnvoll) Apps & Erweiterungen ◦ Typische App-Kategorien (Formulare, Reviews, Up-Selling, Versandtools) SEO & Performance in Shopify ◦ Saubere Produkt-/Kollektionstexte ◦ Bildoptimierung, Ladezeiten, App-Auswahl vs. Performance Sicherheit & Rechtliches ◦ SSL, Zahlungsanbieter, Grundaspekte DSGVO (nicht zu tief – Vertiefung im 3. Sem.) Praxis: ◦ Ein kleiner Demo-Shop mit Shopify (wenige Produkte, simple Struktur) ◦ Vergleichsbetrachtung zu WooCommerce (Flexibilität vs. Einfachheit) |
| Modul V: Performance, Sicherheit & SEO für Shops |
| Performance-Optimierung -Kennzahlen (Ladezeit, Core Web Vitals) -Caching, Bildkomprimierung, Lazy Loading, CSS/JS-Minifizierung -Hosting-Auswahl aus Performance-Sicht Sicherheit -Regelmäßige Updates (Core, Themes, Plugins) -Backup-Strategien (manuell & automatisiert) -Security-Plugins (WordFence, iThemes od. ähnliche) -Benutzerrollen & starke Passwörter SEO-Erweiterung für Shops -Struktur des Shops (Kategoriestruktur, interne Verlinkung) -Duplicate Content vermeiden (Varianten, Filterseiten) -Nutzung von Blog/Content für Shop-SEO Tracking & Grundlagen Analyse -Kurzer Einstieg in Google Analytics 4 & Search Console: -Einbindung tracen -Wichtige Kennzahlen: Traffic, Conversions, populäre Seiten |
| Modul VI: Barrierefreiheit & Qualitätsstandards |
| Grundlagen Barrierefreiheit (WCAG 2.1 Überblick) -Kontraste, Schriftgrößen, Struktur, Alternativtexte -Tastaturbedienbarkeit & Fokus Barrierefreiheit in WordPress/WooCommerce/Shopify -Auswahl von Themes/Plugins mit guter Accessibility -Praktische Checklisten für Layout, Formulare, Navigation Einfache Tests -Screenreader-Kurz-Check, Tastatur-Test -Browser-Tools & Plugins zur Prüfung |