alex-mueller/Aufgaben-Python
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Aufgaben-Python/courses/html_css/16_master_abschlussprojekt_saas_landingpage
History
Alex Mueller 2571cb8847 feat(ux): responsive kurs-sidebar und kapitel-drawer für alle 13 kurse & web-ide 
- Dynamic Sidebar mit window.COURSES_MANIFEST für 13 Kurse (216 Kapitel)
- Kurswechsler Dropdown mit Direktnavigation
- Fortschrittsanzeige mit Solved-Checkmarks (✓) aus localStorage
- Responsive Off-Canvas Drawer mit Floating Action Button (☰ Kapitel) & Backdrop auf Mobile/Tablets
- Web-IDE Topbar Drawer-Button (☰ Kapitel) für unterbrechungsfreien Vollbild-Editor
- Saubere Bereinigung redundanter statischer Legacy-Sidebars
2026-09-12 13:49:46 +02:00
..
aufgabe.html Branding-Update für it-praxisportal.de: Neuer Hero-Bereich, SVG-Favicon, OpenGraph-Metadaten und Plattform-Titel 2026-09-12 13:26:06 +02:00
index.html feat(ux): responsive kurs-sidebar und kapitel-drawer für alle 13 kurse & web-ide 2026-09-12 13:49:46 +02:00
musterloesung.html Branding-Update für it-praxisportal.de: Neuer Hero-Bereich, SVG-Favicon, OpenGraph-Metadaten und Plattform-Titel 2026-09-12 13:26:06 +02:00
README.md Vollständige Umsetzung von Phase A bis C: (1) SQL & Data Analytics Master (16 Module), (2) HTML5 & Modern CSS3 (16 Module) und (3) Go Cloud Microservices (16 Module). Plattform umfasst nun 131 Module über 7 Sprachen 2026-08-30 13:10:38 +02:00
test_aufgabe.js Vollständige Umsetzung von Phase A bis C: (1) SQL & Data Analytics Master (16 Module), (2) HTML5 & Modern CSS3 (16 Module) und (3) Go Cloud Microservices (16 Module). Plattform umfasst nun 131 Module über 7 Sprachen 2026-08-30 13:10:38 +02:00

README.md

Master 16: Responsive SaaS Landingpage & Portfolio Master (Abschlussprojekt)

Herzlichen Glückwunsch zum Erreichen des großen Meister-Abschlussprojekts! In diesem Modul führst du alle erlernten Fertigkeiten aus den 4 Lehrpfaden zusammen und erstellst eine vollständige, produktionsreife, barrierefreie und responsive SaaS Landingpage & Portfolio-Website.

🎯 Lernziele & Synthese

  1. Semantisches HTML5 & A11y: Klare Dokumentenstruktur (header, nav, main, section, article, footer, ARIA-Labels).
  2. Modern CSS Layouts:
    • Flexbox: Sticky Navigation Bar, Pill-Badges und Button-Gruppen.
    • CSS Grid: 2D-Feature Matrix mit repeat(auto-fit, minmax(280px, 1fr)) und responsive Pricing-Cards.
  3. Design-Tokens & Dark Mode: CSS Custom Properties für Theme-Switching (:root, [data-theme="dark"]).
  4. Moderne UI-Effekte: Glassmorphism Hero-Preview mit backdrop-filter, Hover-Lift Cards und @keyframes float-Animation.
  5. Mobile-First Responsivität: Flüssige Typografie mit clamp() und Media Queries für Tablets (≥768px) und Desktops (≥1024px).
  6. BEM-Architektur: Modulare Klassennamen (.pricing-card, .pricing-card__header, .pricing-card--popular).

🏛️ Aufbau der SaaS Landingpage

┌────────────────────────────────────────────────────────┐
│ ⚡ Sticky Header: Logo, Nav-Links, Theme-Toggle, CTA   │
├────────────────────────────────────────────────────────┤
│ 🚀 Hero Section: Fluid Title, CTA-Group, Glassmorphism │
├────────────────────────────────────────────────────────┤
│ ⚡ Feature Matrix: CSS Grid (auto-fit, minmax)          │
├────────────────────────────────────────────────────────┤
│ 💎 Pricing Plans: BEM Cards mit --popular Highlight    │
├────────────────────────────────────────────────────────┤
│ 💬 Testimonials / Stats: Metric Counters               │
├────────────────────────────────────────────────────────┤
│ 📄 Footer: Links, Copyright, Accessibility Status      │
└────────────────────────────────────────────────────────┘

🎯 Aufgabenstellung in aufgabe.html

  • TEILZIEL 1: Konfiguriere das Theme-System mit CSS Custom Properties für Light und Dark Mode (:root und [data-theme="dark"]).
  • TEILZIEL 2: Stylinge die Sticky .navbar mit Flexbox (justify-content: space-between, align-items: center).
  • TEILZIEL 3: Gestalte die .hero-section mit flüssiger clamp()-Überschrift und schwebender .glass-card (backdrop-filter, @keyframes float).
  • TEILZIEL 4: Baue die .features-grid Matrix mit display: grid und repeat(auto-fit, minmax(280px, 1fr)).
  • TEILZIEL 5: Implementiere die .pricing-card Komponenten nach BEM mit dem .pricing-card--popular Modifier.
  • TEILZIEL 6: Stelle die 100% Responsivität mit Media Queries @media (min-width: 768px) sicher.

Teste dein Master-Projekt mit test_aufgabe.js und starte deine Web-Karriere! 🚀