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.