SkillForge | ATLAS

Frontend-Entwicklung

19 min read

Frontend-Entwicklung

In dieser Lerneinheit erlernst du die Grundlagen von HTML, der Struktursprache des Webs. Du verstehst die wichtigsten HTML-Elemente und deren korrekte Verwendung für den Aufbau von Webseiten. Diese Basis-Kenntnisse wendest du direkt beim Erstellen deiner ersten eigenen Webseiten an.

Einführung

Du öffnest eine moderne Webanwendung im Jahr 2025: Die Seite lädt blitzschnell, Inhalte aktualisieren sich ohne Neuladung, das Design passt sich perfekt an dein Smartphone an.

Vergleich: Statische Webseiten vs. moderne Frontend-Entwicklung
Statisch vs. Dynamisch: Moderne Webanwendungen nutzen HTML, CSS und JavaScript für reaktionsschnelle Erlebnisse — Bildrechte: Ausbildung-in-der-IT.de (KI-unterstützt)

Wie funktioniert das technisch? Welche Technologien machen moderne Webanwendungen so reaktionsschnell und benutzerfreundlich?

Früher bestand eine Webseite aus statischen HTML-Seiten. Heute entwickeln Frontend-Entwickler komplexe Anwendungen mit HTML, CSS und JavaScript, die sich wie native Apps anfühlen.

In dieser Lerneinheit lernst du die Grundlagen moderner Frontend-Entwicklung kennen: Von HTML-Struktur und CSS-Styling über moderne JavaScript-Syntax bis hin zu Single-Page Applications und Framework-Auswahl.

Lernziele

Nach dieser Lerneinheit kannst du:

  • Die HTML-Struktur einer Webseite verstehen und die wichtigsten Elemente erklären
  • CSS für Layout und Styling einsetzen und die Funktionsweise von Grid und Flexbox erklären
  • JavaScript ES6+ Syntax lesen und grundlegende Konzepte anwenden
  • Single-Page Applications konzeptionell verstehen und moderne SEO-Lösungen (SSR/SSG) erklären
  • Frontend-Frameworks wie React, Angular und Vue.js vergleichen und Auswahlkriterien anwenden

Überleitung

Um moderne Webanwendungen zu verstehen, schauen wir uns zunächst die grundlegenden Bausteine an: HTML für die Struktur, CSS für das Design und JavaScript für die Interaktivität.

Danach lernst du, wie diese Technologien zusammen Single-Page Applications ermöglichen und wie du das richtige Framework für dein Projekt auswählst.

HTML Grundlagen

HTML (Hypertext Markup Language) ist die Struktursprache des Webs. Sie definiert den Inhalt und die Struktur einer Webseite durch Elemente und Tags.

Grundstruktur eines HTML-Dokuments

Jedes HTML-Dokument folgt dieser Struktur:

<!DOCTYPE html>
<html>
<head>
    <title>Meine Webseite</title>
</head>
<body>
    <h1>Willkommen</h1>
    <p>Dies ist ein Paragraph.</p>
</body>
</html>
  • <!DOCTYPE html> definiert den Dokumenttyp als HTML5
  • <html> ist das Wurzelelement
  • <head> enthält Metainformationen (Titel, Links zu CSS)
  • <body> enthält den sichtbaren Inhalt

Wichtige HTML-Elemente

ElementBeschreibungBeispiel
<h1> bis <h6>Überschriften (hierarchisch)<h1>Hauptüberschrift</h1>
<p>Paragraph (Textabschnitt)<p>Ein Absatz.</p>
<a>Link (Verlinkung)<a href="url">Link</a>
<ul>, <ol>, <li>Listen (ungeordnet/geordnet)<ul><li>Punkt</li></ul>
<img>Bild einbinden<img src="bild.jpg" alt="Text">

HTML bildet das Fundament jeder Webseite. CSS und JavaScript bauen darauf auf.

CSS Grundlagen

CSS (Cascading Style Sheets) definiert das visuelle Erscheinungsbild einer Webseite. CSS trennt Inhalt (HTML) von Design.

CSS einbinden

Es gibt drei Wege, CSS einzubinden:

1. Externe CSS-Datei (empfohlen):

<link rel="stylesheet" href="styles.css">

2. Internal (im <head>):

<style>
    h1 { color: blue; }
</style>

3. Inline (direkt im Element):

<h1 style="color: blue;">Überschrift</h1>

CSS-Selektoren

/* Element-Selektor */
p { color: black; }
 
/* Klassen-Selektor */
.highlight { background: yellow; }
 
/* ID-Selektor */
#header { font-size: 24px; }
 
/* Kombinierter Selektor */
div.container p { margin: 10px; }

Box-Model

Jedes HTML-Element ist eine Box mit:

  • Content: Der eigentliche Inhalt
  • Padding: Innenabstand
  • Border: Rahmen
  • Margin: Außenabstand
.box { width: 300px; padding: 20px; border: 2px solid black; margin: 10px; }

CSS ist unverzichtbar für modernes Webdesign. Grid und Flexbox erweitern diese Grundlagen.

CSS Flexbox und Grid

Moderne CSS-Layouts nutzen Flexbox und CSS Grid für responsive Designs.

Flexbox für eindimensionale Layouts

Flexbox ordnet Elemente in einer Reihe (horizontal) oder Spalte (vertikal) an. Es ist ideal, wenn du Elemente entlang einer Achse ausrichten möchtest.

Beispiel: Horizontale Navigation

.navbar {
    display: flex;                /* Aktiviert Flexbox */
    justify-content: space-between; /* Platz zwischen Elementen */
    align-items: center;           /* Vertikal zentriert */
}
  • display: flex aktiviert Flexbox für den Container
  • justify-content steuert horizontale Verteilung
  • align-items steuert vertikale Ausrichtung

CSS Grid für zweidimensionale Layouts

Grid erstellt komplexe Layouts mit Zeilen UND Spalten gleichzeitig. Ideal für Seiten-Layouts.

.layout {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr; /* 3 Spalten: 1:3:1 */
    gap: 20px;                          /* Abstand zwischen Zellen */
}
  • 1fr = 1 Fraction (Teil des verfügbaren Platzes)
  • gap definiert Abstände zwischen Grid-Zellen

Wann was? Flexbox für Komponenten (Header, Navigation), Grid für Seiten-Layouts.

JavaScript Einführung

JavaScript ist die Programmiersprache des Webs. Sie macht Webseiten interaktiv und dynamisch.

Was ist JavaScript?

JavaScript (kurz: JS) ermöglicht es dir:

  • Auf Benutzeraktionen zu reagieren (Klicks, Tastatureingaben)
  • Den Inhalt einer Seite zu verändern (Texte ändern, Elemente hinzufügen)
  • Daten vom Server zu laden (ohne die Seite neu zu laden)
  • Berechnungen durchzuführen (z.B. Formulare validieren)

Wie funktioniert JavaScript?

JavaScript läuft im Browser des Benutzers (Client-Side). Der Browser führt den Code aus.

Beispiel: Alert-Fenster

alert("Hallo Welt!");

Dieser Code zeigt ein Popup-Fenster mit “Hallo Welt!“.

JavaScript einbinden

1. Inline (direkt im HTML):

<button onclick="alert('Geklickt!')">Klick mich</button>

2. Internes Script:

<script>
    alert("Seite geladen!");
</script>

3. Externe Datei (empfohlen):

<script src="script.js"></script>

Warum JavaScript?

Ohne JavaScript wären Webseiten statisch - wie ein Buch. Mit JavaScript werden sie dynamisch - wie eine App.

Im nächsten Block lernst du moderne JavaScript-Syntax (ES6+).

JavaScript ES6+ Grundlagen

JavaScript ES6+ ist die moderne Version von JavaScript (ab 2015). ES6+ bringt viele Verbesserungen gegenüber dem alten ES5.

var vs. const/let

VERALTET (ES5):

var name = "Maria";
var age = 25;

MODERN (ES6+):

const name = "Maria";  // Konstante, kann nicht neu zugewiesen werden
let age = 25;          // Variable, kann geändert werden

Regel: Nutze const als Standard, let nur wenn du die Variable ändern musst. Vermeide var!

Arrow Functions

VERALTET:

function greet(name) {
    return "Hallo " + name + "!";
}

MODERN:

const greet = (name) => `Hallo ${name}!`;

Arrow Functions sind kürzer und haben konsistentes this-Verhalten.

Template Literals

VERALTET: String-Konkatenation

alert("Hallo " + name + ", du bist " + age + " Jahre alt.");

MODERN: Template Literals mit Backticks

alert(`Hallo ${name}, du bist ${age} Jahre alt.`);

Warum ES6+? Klarerer Code, weniger Fehler, bessere Lesbarkeit. 2025 ist ES6+ Standard in allen modernen Browsern.

DOM-Manipulation und Events

Mit JavaScript kannst du das DOM (Document Object Model) manipulieren und auf Benutzeraktionen reagieren.

Elemente auswählen und ändern

// Element auswählen
const heading = document.querySelector("h1");
 
// Inhalt ändern
heading.textContent = "Neuer Titel";
 
// CSS-Klasse hinzufügen
heading.classList.add("highlight");

Event-Listener

const button = document.querySelector("button");
 
button.addEventListener("click", () => {
    alert("Button wurde geklickt!");
});

Event-Handler machen deine Webseite interaktiv. Nutze addEventListener für moderne, flexible Event-Verwaltung.

Wichtig: Verwende Arrow Functions in Event-Listenern für konsistentes this-Verhalten.

Responsive Web Design

Responsive Web Design (RWD) sorgt dafür, dass deine Webseite auf allen Geräten (Desktop, Tablet, Smartphone) optimal aussieht.

Mobile-First Ansatz

Designe zuerst für mobile Geräte, dann erweitere für größere Bildschirme:

/* Basis-Styles für Mobile */
.container {
    width: 100%;
    padding: 10px;
}
 
/* Desktop-Erweiterung */
@media (min-width: 768px) {
    .container {
        width: 80%;
        padding: 20px;
    }
}

Flexible Einheiten

  • Relative Einheiten: %, em, rem, vw, vh statt feste px
  • Flexible Bilder: img { max-width: 100%; height: auto; }

Viewport Meta-Tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Ohne dieses Tag funktioniert Responsive Design nicht auf mobilen Geräten!

Media Queries für Responsive Design

Media Queries ermöglichen es, CSS-Regeln nur unter bestimmten Bedingungen anzuwenden - zum Beispiel abhängig von der Bildschirmgröße.

Was sind Media Queries?

Eine Media Query ist wie eine “Wenn-Dann”-Regel in CSS:

“Wenn der Bildschirm kleiner als 768px ist, dann ändere das Layout.”

Grundstruktur

@media (max-width: 768px) {
    /* CSS-Regeln für Bildschirme bis 768px Breite */
    .container {
        width: 100%;
    }
}
  • @media leitet die Media Query ein
  • (max-width: 768px) ist die Bedingung (“maximal 768px breit”)
  • Innerhalb der geschweiften Klammern kommen die CSS-Regeln

Praktisches Beispiel

/* Standard (Desktop) */
.sidebar {
    width: 300px;
    float: left;
}
 
/* Tablets (bis 768px) */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;    /* Volle Breite */
        float: none;     /* Kein Float mehr */
    }
}
 
/* Smartphones (bis 480px) */
@media (max-width: 480px) {
    .sidebar {
        display: none;   /* Sidebar ausblenden */
    }
}

Breakpoints

Typische Breakpoints (Grenzwerte):

  • Smartphone: max-width: 480px
  • Tablet: max-width: 768px
  • Desktop: min-width: 1024px

Wichtig: Media Queries machen deine Webseite auf allen Geräten nutzbar!

Progressive Enhancement

Progressive Enhancement bedeutet: Beginne mit einer funktionierenden Basis, füge dann erweiterte Features hinzu.

Prinzip

  1. HTML: Semantisches HTML als solide Basis
  2. CSS: Styling hinzufügen (optional, Seite bleibt nutzbar ohne CSS)
  3. JavaScript: Interaktivität hinzufügen (optional, Seite bleibt nutzbar ohne JS)

Beispiel: Formular

Basis (HTML):

<form action="/submit" method="POST">
    <input type="email" name="email" required>
    <button type="submit">Senden</button>
</form>

Das Formular funktioniert auch ohne JavaScript.

Enhancement (JavaScript):

form.addEventListener("submit", (e) => {
    e.preventDefault();
    // AJAX-Validierung und Absenden ohne Seitenwechsel
});

Vorteil: Benutzer mit älteren Browsern oder deaktiviertem JavaScript können die Seite trotzdem nutzen. Zugänglichkeit und Robustheit sind garantiert.

⏳ Lädt Dataview-Inhalt...

Single-Page Applications (SPA) - Konzept

Eine Single-Page Application (SPA) ist eine Webanwendung, die aus einer einzigen HTML-Seite besteht. Inhalte werden dynamisch per JavaScript nachgeladen, ohne die Seite neu zu laden.

Traditionelle Webseite vs. SPA

Traditionell:

  1. Benutzer klickt Link
  2. Browser lädt komplette neue HTML-Seite vom Server
  3. Seite flackert beim Neuladen

SPA:

  1. Benutzer klickt Link
  2. JavaScript lädt nur die benötigten Daten (JSON)
  3. JavaScript aktualisiert nur den geänderten Teil der Seite
  4. Kein Seitenneuladung, keine Unterbrechung

Technologien hinter SPAs

  • AJAX/Fetch API: Asynchrone Server-Anfragen ohne Seitenneuladung
  • JSON: Datenaustausch-Format zwischen Server und Client
  • Client-Side Routing: Änderung der URL ohne Seitenneuladung (z.B. mit React Router)
  • JavaScript-Frameworks: React, Vue.js, Angular für effiziente SPA-Entwicklung

SPAs fühlen sich an wie native Apps - schnell, flüssig, reaktionsschnell.

SPA Vorteile und Herausforderungen

Single-Page Applications haben viele Vorteile, bringen aber auch Herausforderungen mit sich.

Vorteile von SPAs

BereichVorteilBeschreibung
User ExperienceFlüssige NavigationKeine Seitenneuladungen, App-ähnliches Feeling mit schnellen, nahtlosen Übergängen
PerformanceSchnelle InteraktionenNach initialem Laden werden nur Daten (JSON) nachgeladen statt komplettes HTML
CachingBessere PerformanceAssets können gecacht werden, weniger Datenverkehr
EntwicklungKlare TrennungFrontend und Backend sind getrennt, moderne Frameworks erleichtern Entwicklung
KomponentenWiederverwendbarkeitKomponenten-basierte Architektur ermöglicht Code-Wiederverwendung

Herausforderungen

ProblemBeschreibungLösung
Initialer LadevorgangViel JavaScript muss beim ersten Aufruf geladen werdenCode-Splitting, Lazy Loading
SEOSuchmaschinen sehen traditionell nur leere HTML-HülleServer-Side Rendering (SSR), Static Site Generation (SSG)
Browser-NavigationZurück-Button funktioniert nicht automatischClient-Side Routing mit History API
JavaScript-PflichtOhne JavaScript funktioniert die App nichtProgressive Enhancement, falls möglich

Die meisten Herausforderungen sind durch moderne Frameworks (Next.js, Nuxt.js) gelöst!

Moderne SPA SEO-Lösungen - SSR, SSG und Prerendering

Moderne Frameworks bieten Server-Side Rendering (SSR) und Static Site Generation (SSG).

Das Problem (traditionelle SPAs)

Suchmaschinen crawlen eine leere HTML-Hülle:

<div id="app"></div>  <!-- Leer! Content kommt erst per JS -->

Google & Co. sehen keinen Inhalt → schlechtes Ranking.

Server-Side Rendering (SSR)

SSR rendert die Seite auf dem Server beim ersten Aufruf. Der Browser erhält vollständiges HTML:

<div id="app">
  <h1>Willkommen</h1>  <!-- Vollständiger Content! -->
  <p>Dieser Inhalt ist sofort da.</p>
</div>

Frameworks: Next.js (React), Nuxt.js (Vue), SvelteKit

Static Site Generation (SSG)

SSG generiert HTML-Seiten zur Build-Zeit. Jede Route wird als statisches HTML vorab erstellt.

Vorteil: Maximale Performance (statische Dateien), perfektes SEO

Frameworks: Next.js, Nuxt.js, Gatsby

Incremental Static Regeneration (ISR)

ISR kombiniert SSG + dynamische Updates:

  • Seiten werden statisch generiert
  • Im Hintergrund werden sie bei Bedarf aktualisiert
  • Best of both worlds: Performance + Aktualität

Verfügbar in: Next.js

Prerendering

Einfachste Lösung für kleinere SPAs: HTML wird beim Deployment vorab generiert.

Tools: Prerender.io, Rendertron

Mit SSR, SSG und ISR ranken SPAs genauso gut wie traditionelle Webseiten!

To-Do-Listen Beispiel - Vanilla JavaScript ES6+

Schauen wir uns eine einfache To-Do-Liste an, geschrieben in modernem JavaScript ES6+.

HTML-Struktur

<div id="todoApp">
    <input type="text" id="newTodo" placeholder="Neuer Eintrag">
    <button id="addButton">Hinzufügen</button>
    <ul id="todoList"></ul>
</div>

JavaScript (ES6+) - Schritt für Schritt erklärt

// 1. Elemente aus dem DOM holen
const input = document.querySelector("#newTodo");
const button = document.querySelector("#addButton");
const list = document.querySelector("#todoList");

Erklärung: querySelector findet das HTML-Element anhand der ID. const speichert die Referenz.

// 2. Funktion zum Hinzufügen eines To-Dos
const addTodo = () => {
    const todoText = input.value.trim();
 
    if (todoText !== "") {
        const li = document.createElement("li");
        li.textContent = todoText;
        list.appendChild(li);
 
        input.value = "";
    }
};

Zeile für Zeile:

  • input.value.trim() holt den Text aus dem Eingabefeld und entfernt Leerzeichen am Anfang/Ende
  • if (todoText !== "") prüft, ob der Text nicht leer ist
  • document.createElement("li") erstellt ein neues <li>-Element
  • li.textContent = todoText setzt den Text des Elements
  • list.appendChild(li) fügt das Element zur Liste hinzu
  • input.value = "" leert das Eingabefeld
// 3. Event-Listener für Button-Klick
button.addEventListener("click", addTodo);
 
// 4. Event-Listener für Enter-Taste
input.addEventListener("keypress", (e) => {
    if (e.key === "Enter") addTodo();
});

Erklärung: Wenn der Button geklickt wird ODER Enter gedrückt wird, rufen wir addTodo() auf.

Frontend-Frameworks Übersicht - React, Vue, Angular

Die drei wichtigsten Frontend-Frameworks 2025 sind React, Vue.js und Angular. Jedes hat seine Stärken.

React (Meta/Facebook)

Typ: Library (fokussiert auf UI)

Stärken:

  • Größte Community: Riesiges Ökosystem mit Bibliotheken für jede Aufgabe
  • Flexibilität: Du entscheidest, welche zusätzlichen Tools du nutzt (Routing, State-Management)
  • JSX-Syntax: HTML-ähnlich direkt in JavaScript
  • React Hooks: Moderne, funktionale Programmierung

Ideal für: Große, komplexe SPAs mit starkem Ökosystem-Bedarf

Vue.js

Typ: Progressive Framework

Stärken:

  • Einfacher Einstieg: Niedrige Lernkurve, auch für Anfänger
  • Progressive Integration: Kann schrittweise in bestehende Projekte integriert werden
  • Single-File Components: HTML, CSS und JS in einer .vue-Datei
  • Ausgewogenes Ökosystem: Vue Router und Vuex offiziell unterstützt

Ideal für: Kleine bis mittelgroße Projekte, Teams mit weniger Erfahrung

Angular (Google)

Typ: Full-Featured Framework

Stärken:

  • Vollständiges Framework: Alles dabei (Routing, HTTP, Forms, Testing)
  • TypeScript: Stark typisiert, weniger Laufzeit-Fehler
  • Enterprise-Ready: Klare Struktur, Dependency Injection
  • Umfassende CLI: ng generate für Komponenten, Services, etc.

Ideal für: Enterprise-Anwendungen mit großen Teams

Gemeinsame Features: Alle drei bieten Komponenten-Architektur, reaktive Datenbindung und Server-Side Rendering (Next.js, Nuxt.js, Angular Universal).

Welches Framework ist 2025 am beliebtesten? Hier sind aktuelle Zahlen und Trends.

Popularität und Adoption 2025

Frameworknpm Downloads/MonatTrendVerwendung
React~100M↗ Wachsend42% aller Projekte
Vue.js~30M↗ Stabil18% aller Projekte
Angular~20M→ Stabil15% aller Projekte

Haupttrends 2025

React dominiert weiterhin:

  • Größte Community mit über 200.000 Packages im npm-Ökosystem
  • Enterprise-Adoption steigt (Meta, Netflix, Airbnb, Tesla)
  • Next.js (SSR-Framework für React) ist Standard für neue Projekte

Vue.js wächst in Europa und Asien:

  • Besonders beliebt in kleineren Teams und Freelancer-Projekten
  • Nuxt.js bringt SSR/SSG-Features
  • Developer Experience wird als sehr positiv bewertet

Angular bleibt Enterprise-Standard:

  • Stabil in großen Unternehmen und Behörden
  • TypeScript-First Ansatz passt zu Enterprise-Anforderungen
  • Striktere Struktur bei großen Teams von Vorteil

Empfehlung: Für neue Projekte 2025 ist React (mit Next.js) die sicherste Wahl mit dem größten Ökosystem und besten Jobaussichten.

Anwendungsbeispiel mit React

React ermöglicht den Bau von wiederverwendbaren UI-Komponenten. Hier ein einfaches Beispiel:

import React from 'react';
 
class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
 
ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('hello-example')
);

Dieses kleine Beispiel zeigt, wie du eine einfache Komponente in React erstellst. Der HelloMessage-Komponent nimmt props (Eigenschaften) entgegen, um dynamische Daten zu verarbeiten. React’s deklarativer Ansatz ermöglicht ein übersichtliches und wartungsfreundliches Design deiner UI-Komponenten.

Framework-Auswahlkriterien für dein Projekt

Wie wählst du das richtige Framework? Diese Kriterien helfen bei der Entscheidung.

Kriterien-Checkliste

1. Projekt-Größe

  • Klein (<10 Seiten): Vue.js oder Vanilla JS
  • Mittel (10-50 Seiten): React oder Vue.js
  • Groß (>50 Seiten, SPA): React (Next.js) oder Angular

2. Team-Erfahrung

  • Anfänger: Vue.js (niedrigste Lernkurve)
  • JavaScript-Erfahren: React (flexibel, große Community)
  • TypeScript-Erfahren: Angular (TypeScript-First)

3. Performance-Anforderungen

  • SEO wichtig: Next.js (React) oder Nuxt.js (Vue) für SSR/SSG
  • Offline-Fähigkeit: Alle drei mit Service Workers möglich
  • Mobile-Performance: React Native (React) für Cross-Platform

4. Langfristige Wartbarkeit

  • Enterprise/Langlebig: Angular (strikte Struktur) oder React (große Community)
  • Schnelle Prototypen: Vue.js (schneller Einstieg)
  • Open-Source-Community: React (größte Anzahl Contributors)

Typische Szenarien

Startup/MVP: React (Next.js) - Schnell, flexibel, gute Developer-Erfahrung

Enterprise-App: Angular - Struktur, TypeScript, Full-Featured

Marketing-Website: Nuxt.js (Vue) oder Next.js (React) mit SSG

Dashboard/Admin: React - Viele fertige UI-Komponenten (Material-UI, Ant Design)

Wichtig: Die Wahl ist weniger kritisch als die konsequente Umsetzung. Alle drei Frameworks sind 2025 production-ready!

⏳ Lädt Dataview-Inhalt...

Zusammenfassung und Ausblick

Zusammenfassung

In dieser Lerneinheit hast du die grundlegenden Bausteine moderner Frontend-Entwicklung kennengelernt.

HTML - Die Struktur

HTML (Hypertext Markup Language) bildet das Fundament jeder Webseite. Du hast gelernt:

  • Die Grundstruktur eines HTML-Dokuments (<!DOCTYPE html>, <html>, <head>, <body>)
  • Wichtige Elemente wie Überschriften (<h1> bis <h6>), Paragraphen (<p>), Links (<a>) und Listen (<ul>, <ol>)
  • Semantisches HTML sorgt für Struktur und Zugänglichkeit

CSS - Das Design

CSS (Cascading Style Sheets) gestaltet das visuelle Erscheinungsbild. Kernkonzepte:

  • Selektoren (Element, Klasse, ID) zum gezielten Styling
  • Box-Model (Content, Padding, Border, Margin) für Layout-Kontrolle
  • Flexbox für eindimensionale Layouts (Navigation, Cards)
  • CSS Grid für komplexe zweidimensionale Strukturen (Seiten-Layouts)
  • Media Queries für Responsive Design auf allen Geräten

JavaScript ES6+ - Die Interaktivität

JavaScript macht Webseiten dynamisch und interaktiv:

  • Moderne Syntax: const/let statt var, Arrow Functions, Template Literals
  • DOM-Manipulation: Elemente auswählen, ändern und Events verarbeiten
  • Event-Listener für Benutzerinteraktionen
const button = document.querySelector("button");
button.addEventListener("click", () => alert("Geklickt!"));

Single-Page Applications (SPAs)

SPAs bieten eine App-ähnliche Erfahrung:

  • Konzept: Nur eine HTML-Seite, Inhalte werden dynamisch per JavaScript nachgeladen
  • Vorteile: Flüssige Navigation, schnelle Interaktionen, bessere User Experience
  • Herausforderungen: Initialer Ladevorgang, SEO, Browser-Navigation
  • Moderne Lösungen: Server-Side Rendering (SSR) und Static Site Generation (SSG) lösen SEO-Probleme

Frontend-Frameworks

Die drei wichtigsten Frameworks im Vergleich:

  • React (Meta/Facebook): Größte Community, flexibel, JSX-Syntax, 42% Marktanteil
  • Vue.js: Einsteigerfreundlich, progressive Integration, niedrige Lernkurve
  • Angular (Google): Vollständiges Framework, TypeScript-First, Enterprise-Standard

Auswahlkriterien: Projekt-Größe, Team-Erfahrung, Performance-Anforderungen, Langfristige Wartbarkeit

Progressive Enhancement

Der Ansatz für robuste Webseiten:

  1. HTML als solide Basis (funktioniert immer)
  2. CSS für verbessertes Design (optional)
  3. JavaScript für erweiterte Interaktivität (optional)

So bleibt deine Webseite auch bei deaktiviertem JavaScript oder älteren Browsern nutzbar.

Ausblick

In der nächsten Lerneinheit Backend-Entwicklung lernst du, wie Server-Logik funktioniert, APIs erstellt werden und Frontend mit Backend kommuniziert. Du wirst PHP, Node.js und Datenbank-Anbindungen kennenlernen.

Graphansicht

Backlinks