Layout & Karten

Card-Komponente

Aktiv

Cards sind die Basis-Container für Inhalte: weißer Hintergrund, abgerundete Ecken, subtiler Schatten.

Badges

Erfolg Fehler Warnung Info Neutral Mebis-Akzent

Mini-Tags (Mebis-Stil)

Pflicht Optional Entwurf

Buttons & Aktionen

Varianten

Mit Icon

Größen

Formulare

Eingabefelder

Bitte gib deinen vollständigen Namen ein.
Bitte gib eine gültige E-Mail-Adresse ein, z. B. max@example.com.

Suche & Spezialfelder

Range-Slider

60 %

Auswahl-Optionen

Upload-Zone

Übungen & Quiz

Quiz-Frage mit Auswertung

Welche IP-Adresse ist die Broadcast-Adresse von 192.168.1.0/24?

Segmented Control

Feedback & Dialoge

Inline-Alerts

Gespeichert. Deine Abgabe wurde erfolgreich übermittelt.
Hinweis: Die Abgabefrist endet am 15.07.2026 um 23:59 Uhr.
Achtung: Diese Aufgabe enthält eine Pflichtabgabe.

Toast-Benachrichtigungen

Modal (natives <dialog>)

Möchtest du deine Lösung jetzt verbindlich abgeben? Nach der Abgabe sind keine Änderungen mehr möglich.

Noch keine Einträge vorhanden

Daten & Metriken

Kurse gesamt 24 12 %
Aktive Schüler 156 8 %
Abschlussquote 87 % 3 %

Datentabelle

Schüler Kurs Fortschritt Note
Max Mustermann Webentwicklung 85 % 1,5
Anna Schmidt Datenbanken 92 % 1,2
Tom Weber Netzwerke 65 % 3,0
Lisa Müller Programmierung 45 % 4,5

Personen-Karten

Max Mustermann
Schüler · B3IT
Anna Schmidt
Lehrerin · Informatik

Charts & Visualisierung

Balkendiagramm (eine Serie, direkte Wertbeschriftung)

Donut mit Legende

  • Abgeschlossen (33 %)
  • In Bearbeitung (33 %)
  • Offen (33 %)

Fortschrittsbalken

JavaScript Grundlagen 85 %
SQL Queries 60 %
Python Basics 35 %

Text & Code

Fließtext (.prose — Lerninhalte)

Lerninhalte erhalten eine begrenzte Zeilenlänge (70 Zeichen) und größeren Zeilenabstand. Drücke Strg + S, um zu speichern. Der Befehl git status zeigt den Zustand des Repositories.

„Übersichtlichkeit entsteht durch Weglassen, nicht durch Verkleinern."

Verwende für alle Lernmaterial-Texte diesen Container, für Dashboards die kompakten Standard-Komponenten.

Code-Block (dunkel — Standard)

function noteBerechnen(punkte, maxPunkte) {
  const prozent = (punkte / maxPunkte) * 100;
  if (prozent >= 92) return 1;
  if (prozent >= 81) return 2;
  if (prozent >= 67) return 3;
  if (prozent >= 50) return 4;
  if (prozent >= 30) return 5;
  return 6;
}

Code-Block (hell — für Mebis-Einbettung)

SELECT name, note FROM schueler WHERE klasse = 'B3IT10a';

Copy-Feld

ssh schueler@10.0.2.15

Prüfungen & Timer

Gesamtzeit 60:00
Verbleibend 45:00
Abgabe 11:30 Uhr

Aufgaben-Fortschritt (Progress-Tiles)

45:00
verbleibend

Aufgabenliste

Mebis Learning

Enthält Pflichtaufgabe: Git-Commit erstellen

Situation

Das Autohaus Nestmann benötigt eine neue Webanwendung zur Verwaltung der Fahrzeugdaten. Die Geschäftsleitung möchte ein modernes, responsives System.

„Wir brauchen eine Lösung, die sowohl am Desktop als auch auf Tablets funktioniert."

Du bist als Entwickler beauftragt, das Projekt umzusetzen.

Handlungsschritte

  1. Lade Git herunter und installiere es auf deinem System.
  2. Konfiguriere Git mit deinem Namen und deiner E-Mail-Adresse.
  3. Erstelle ein neues Repository für das Projekt.
  4. Füge die Projektdateien hinzu und erstelle einen ersten Commit.
  5. Übertrage deine Änderungen mit git push auf den Server.

Ressourcen & Materialien

Git-Anleitung (PDF) Video-Tutorial Checkliste Git-Dokumentation

Zu erledigen

Lernmodule

Git Basics

Abgeschlossen
★★★☆☆ 2 Stunden

Datenbank-Design

In Bearbeitung
★★★★☆ 5 Stunden

Advanced JavaScript

Gesperrt
★★★★★ 8 Stunden
Erweiterte Informationen

Hier findest du detaillierte Informationen zu Kursinhalt, Voraussetzungen und Lernzielen.

  • Grundlagen der Versionskontrolle
  • Git-Befehle und Workflows
  • Branching und Merging
  • Zusammenarbeit über Remote-Repositories

Kursfortschritt