Web-Entwicklung Frontend - Aufgaben
Deine erste Webseite - HTML
Erstelle Schritt für Schritt eine vollständige Webseite über ein Thema deiner Wahl (z.B. dein Hobby, ein Lieblingsbuch, ein Tier, eine Stadt, etc.).
Du wirst dabei alle wichtigen HTML-Tags kennenlernen und eine komplette, funktionierende Webseite erstellen!
Konzepte:
- HTML Grundstruktur (
<!DOCTYPE>,<html>,<head>,<body>) - Semantische HTML-Elemente (
<header>,<main>,<footer>,<section>) - Überschriften und Text (
<h1>-<h6>,<p>) - Listen (
<ul>,<ol>,<li>) - Links (
<a>) und Bilder (<img>) - Verschachtelung und Struktur (
<div>,<section>) - Tabellen (
<table>,<tr>,<th>,<td>) - Formulare (
<form>,<input>,<label>,<button>) - Medieneinbettung (
<iframe>) - Barrierefreiheit und Code-Qualität
Schritt für Schritt zur Webseite
Schritt 1 von 13
Schritt 1: HTML Grundstruktur
Erstelle die grundlegende HTML-Struktur mit <!DOCTYPE html>, <html>, <head> und <body>. Füge im <head> einen <title> mit dem Text deiner Wahl hinzu (z.B. "Meine Webseite über...").
Füge auch <meta charset="UTF-8"> und lang="de" zum html-Tag hinzu.
Code-Editor (Schritt für Schritt zur Webseite)
HTML Wissensquiz
Teste dein Wissen über HTML-Verschachtelung und HTML-Tags.
HTML Wissensquiz
Frage 1 von 6
CSS Grundlagen - Einführung
In dieser Aufgabe lernst du die grundlegenden CSS-Konzepte kennen: Selektoren (Klassen, IDs, Element-Selektoren), Farben, Schriftarten, Margins, Paddings und Borders.
Konzepte:
- CSS-Klassen und IDs
- Element-Selektoren und kombinierte Selektoren
- Farbformate (Hex, RGB, RGBA)
- Schriftarten und Text-Styling
- Box Model: Margins, Paddings, Borders
- Border-Radius
CSS Grundlagen Schritt für Schritt
Schritt 1 von 15
Schritt 1: Klassen erstellen und verwenden
Erstelle eine CSS-Klasse .highlight die den Text rot färbt und fett macht. Wende sie auf den ersten Absatz an.
Code-Editor (CSS Grundlagen Schritt für Schritt)
CSS Box Model Quiz
Teste dein Wissen über das CSS Box Model, Margins und Paddings.
Box Model Wissensquiz
Frage 1 von 6
CSS Backgrounds
Lerne, wie du mit CSS ansprechende Hintergründe gestaltest - von einfachen Farben über Gradients bis zu Hintergrundbildern.
Konzepte:
- Hintergrundfarben (einfach und transparent)
- Lineare und radiale Gradients
- Hintergrundbilder
- Background-Size und Background-Position
- Kombination von Gradient und Bild
Backgrounds gestalten
Schritt 1 von 8
Schritt 1: Einfache Hintergrundfarbe
Gib dem .box1 Element eine hellblaue Hintergrundfarbe (#e3f2fd) und füge etwas Padding (20px) hinzu, damit der Hintergrund sichtbar ist.
Code-Editor (Backgrounds gestalten)
Bilder stylen und ausrichten
Lerne, wie du Bilder responsive machst, zentrierst und mit verschiedenen Effekten versiehst.
Konzepte:
- Responsive Bilder
- Bilder zentrieren
- Border-Radius und Box-Shadow
- Kreisförmige Bilder
- Object-fit für Bildanpassung
Bilder professionell stylen
Schritt 1 von 5
Schritt 1: Responsive Bildbreite
Style das erste Bild (.img-responsive) so, dass es maximal 600px breit ist, aber auf kleineren Bildschirmen schmaler wird. Die Höhe soll automatisch angepasst werden.
Code-Editor (Bilder professionell stylen)
Flexbox Layouts
Flexbox ist eines der wichtigsten Layout-Systeme in modernem CSS. Lerne, wie du flexible, responsive Layouts erstellst.
Konzepte:
- Flex-Container und Flex-Items
- Justify-Content (horizontale Ausrichtung)
- Align-Items (vertikale Ausrichtung)
- Flex-Direction und Flex-Wrap
- Gap zwischen Items
- Flex-Grow und Flex-Basis
- Praktische Navigation mit Flexbox
Flexbox Layouts meistern
Schritt 1 von 10
Schritt 1: Flex-Container erstellen
Mache .flex-container zu einem Flex-Container. Beobachte, wie die Items sich nebeneinander anordnen.
Code-Editor (Flexbox Layouts meistern)
CSS Transitions und Hover-Effekte
Lerne, wie du mit CSS Transitions sanfte Animationen und ansprechende Hover-Effekte erstellst.
Konzepte:
- Einfache Transitions (Farbe, Größe)
- Transform (Scale, Translate)
- Kombinierte Effekte
- Box-Shadow Transitions
- Opacity Fade-Effekte
- Timing-Functions
Interaktive Hover-Effekte
Schritt 1 von 5
Schritt 1: Einfacher Hover-Effekt auf Farbe
Erstelle für .btn-color einen Button, der bei Hover die Hintergrundfarbe von blau (#3498db) zu dunkelblau (#2980b9) wechselt. Die Transition soll 0.3s dauern.
Code-Editor (Interaktive Hover-Effekte)
JavaScript TODO-App
Erstelle eine vollständige, funktionale TODO-App mit Vanilla JavaScript! Du lernst dabei die Grundlagen der DOM-Manipulation, Event Handling und wie man interaktive Webseiten erstellt.
Diese Aufgabe kombiniert HTML, CSS und JavaScript - du wirst eine echte Anwendung bauen, die du verwenden kannst!
Konzepte:
- DOM-Manipulation (
getElementById,createElement,appendChild) - Event Listener (
addEventListener,click,keypress) - Dynamische Elemente erstellen und entfernen
- CSS-Styling für interaktive Elemente
- Flexbox Layout
- Transitions und Hover-Effekte
- User Input verarbeiten
- Zustandsänderungen (erledigt/nicht erledigt)
Was die App können wird:
- TODOs hinzufügen (per Button oder Enter-Taste)
- TODOs als erledigt markieren (durchgestrichen)
- TODOs löschen
- Leere Eingaben abfangen
- Professionelles Design mit Schatten und Animationen
TODO-App mit JavaScript
Schritt 1 von 21
Schritt 1: HTML Grundstruktur erstellen
Erstelle die HTML-Struktur der TODO-App: Ein Container-Div mit Überschrift, Input-Feld, Button und eine Liste für die TODOs.
Code-Editor (TODO-App mit JavaScript)
Vue.js TODO-App
Erstelle die gleiche TODO-App wie zuvor, aber diesmal mit Vue.js! Du wirst sehen, wie viel einfacher und übersichtlicher der Code mit einem Framework wird.
Vue.js kümmert sich automatisch um die DOM-Manipulation - du musst nur die Daten ändern, und Vue aktualisiert die Ansicht automatisch!
Vorbereitung: Kopiere zuerst das Vue.js Template aus dem Vue.js Script in den Code-Editor unten, bevor du mit den Schritten beginnst.
Konzepte:
- Vue-App Setup (
createApp,mount) - Reaktive Daten (
data()) - Two-Way Data Binding (
v-model) - Event Handling (
@click,@keyup.enter) - List Rendering (
v-for) - Conditional Rendering (
v-if) - Methods für Logik
- Dynamic Classes (
:class)
Was die App können wird:
- TODOs hinzufügen mit v-model binding
- TODOs als erledigt markieren
- TODOs löschen
- Gleiche Funktionalität wie die Vanilla-JS Version, aber mit weniger Code!
TODO-App mit Vue.js
Schritt 1 von 17
Schritt 1: HTML-Struktur erstellen
Das Vue.js Template sollte bereits kopiert sein. Erstelle nun im <div id="app"> die HTML-Struktur: Überschrift, Input-Feld, Button und eine leere Liste.