Web Entwicklung - Frontend

In diesem Kurs lernt ihr alle Technologien kennen die es braucht, um Webseiten und sogar interkative Webapps zu entwickeln. Viel Spass!

Vorbereitung Probe EF3 2026

Im folgenden wird beschrieben, was ihr für die Probe können sollt. Wie bereits erwähnt dürft ihr einen einseitig und von Hand beschriebenen Spicker mitnehmen.

### HTML

• Die behandelten Tags mit Anwendung und Bedeutung kennen

• Kleine Webseiten-Abschnitte anhand Aufgabenstellung erstellen (inkl. einfacher Verschachtelung von HTML-Elemenenten)

• Die wichtigsten Attribute verstehen und anwenden (z.B. Bild-Quelle, Link-URL)

• Mit Klassen und IDs umgehen können

• Die HTML-Grundstruktur müsst Ihr nicht auswendig können (aber vielleicht etwas darüber erklären).

• Die vielen Textformatierungen (<mark>, <small>, etc.) müsst ihr nicht alle kennen.

• Die erweiterten Tabellenfeatures müsst ihr nicht kennen

• Formulare: Die verschiedenen Eingabe-Typen solltet Ihr anwenden können. Allerdings nur ganz einfach und nicht so wie im Beispiel Vollständiges Formular-Beispiel

• Youtube Videos einbetten müsste ihr nicht können

CSS

• Verschiedene CSS-Selektoren schreiben (Klassen, Tags, IDs, Kinder, etc.)
• Die wichtigsten CSS Gestaltungsregeln kennen und anwenden können:
  • Farben
  • Schrift-Einstellungen
  • Box Modell (Margin, Padding, Border)
  • Width, Height
  • Bild-Styling Regeln
  • Einfache Flexbox Layouts (ausrichten an Achsen, etc.) (Hier kann das gut geübt werden, geht aber in den hinteren Levels etwas zu weit.)
  • Transitions: Einfache Animationen mit transition
• Nicht können müsst ihr:
  • Alles unter weitere nützliche Selektoren
  • Gradienten
  • Keyframe Animationen
  • Schatten
  • Position-Werte
  • Media Queries

JS

• Einfache Methoden in Js programmieren
  • Variablen erstellen
  • Schleifen (for, while)
  • if/else
  • console.log
  • Einfache Funktion erstellen
• Grundlegende JS Syntax

Nicht kommen wird alles unter DOM-Manipulation! Das JavaScript wird im VueJS Teil mitgeprüft.

Vue.JS

Hier werden sämtliche Elemente kombiniert. Du wirst eine Aufgabenstellung mit Teilaufgaben in einer VueJS Vorlage lösen müssen. Das wird sehr ähnlich sein zu den Aufgabenstellungen der letzten 2-3 Doppellektionen.

Falls du noch Fragen bezüglich des Prüfungsstoffs hast, melde dich gerne frühzeitig. Viel Erfolg! 🍀

## Einführung - Das World Wide Web

Das World Wide Web wurde 1989 von Tim Berners-Lee am CERN erfunden. Es sollte eine einfache Möglichkeit bieten, Informationen über das Internet zu verknüpfen. Berners-Lee entwickelte die ersten Technologien:

• HTML (Hypertext Markup Language): Eine Auszeichnungssprache zur Strukturierung von Inhalten.

• HTTP (Hypertext Transfer Protocol): Ein Protokoll zur Übertragung von Daten zwischen Webservern und Browsern.

• URI (Uniform Resource Identifier): Ein System zur eindeutigen Identifizierung von Ressourcen im Web.

Der erste grafische Webbrowser, Mosaic, wurde 1993 veröffentlicht und machte das Surfen benutzerfreundlicher. Nutzer konnten durch Klicken auf Hyperlinks zwischen Webseiten navigieren.

Mit der Kommerzialisierung des Webs begannen Unternehmen, Websites zu erstellen, was den E-Commerce und die Nutzung des Internets für geschäftliche Zwecke förderte.

Die Einführung von Web 2.0 (2004) ermöglichte interaktive Inhalte und soziale Netzwerke. Nutzer konnten nun aktiv Inhalte erstellen und teilen, was zu Plattformen wie Facebook und YouTube führte.

Die Verbreitung von Smartphones ab ca. 2010 führte zu einer Anpassung des Webs für mobile Geräte. Responsive Design und mobile Anwendungen wurden entscheidend für die Nutzererfahrung.

Das World Wide Web funktioniert durch die Interaktion von Webbrowsern und Webservern:

1. Webbrowser: Programme wie Chrome oder Firefox, die Webseiten anzeigen. Sie senden Anfragen an Webserver über HTTP.
2. Webserver: Computer, die Webseiten speichern und bereitstellen. Sie empfangen Anfragen, verarbeiten sie und senden die angeforderten Inhalte zurück an den Browser.
3. Hyperlinks: Verknüpfungen zwischen Webseiten, die es Nutzern ermöglichen, durch das Web zu navigieren.

Dieses Konzept wird manchmal auch als Client-Server-Modell bezeichnet:

• Client: Der Webbrowser auf dem Computer des Benutzers
• Server: Computer, der Webseiten und andere Ressourcen bereitstellt

Eine Web-Anfrage sieht dabei in etwa folgendermaßen aus:

1. Benutzer:in gibt URL in Browser ein
2. Browser sendet HTTP-Request an Server
3. Server verarbeitet Anfrage
4. Server sendet HTTP-Response zurück
5. Browser rendert die empfangene Webseite

Die drei Säulen der Webentwicklung

Moderne Webseiten werden immer komplizierter und umfangreicher. Trotzdem basieren alle auf 3 grundlegenden Technologien:

• HTML: Struktur und Inhalt
• CSS: Design und Layout
• JavaScript: Interaktivität und Dynamik