Aufgabensammlung für Frontendkurse

Viele der hier gesammelten Aufgaben stammen aus Codepen. Eine beiligende README-Datei informiert dann über die Quelle.

Zur Unterstützung bei der Bearbeitung der Aufgaben habe ich hilfreiche Links gesammelt.

Informationen zum Thema “Responsive Webdesign” werden auf einer speziellen Seite gesammelt.

Eine einfache HTML-Struktur erstellen

Bitte eine HTML-Seite erstellen und darin eine Blog-Grundstruktur erstellen. Der Text wird vorgegeben.

Boxmodell

• Entferne die Lücke unterhalb des Bildes im zweiten Container.
• Gib den unterschiedlichen Inline-Elementen ein vertikales Padding und Margin, das wirklich eine Auswirkung hat.
• Ein Spezialfall in der internen Logik von CSS sind kollabierende Margins. Die CSS-Arbeitsgruppe des W3C sagt heute, sie würden diese Entscheidung heute nicht mehr treffen. Eine knappe Erklärung gibt es unter collapsing margins bei Mediaevent.

Selektoren

• Gestalte die Tabelle der 2. Fussball-Bundesliga mit CSS.
  • Idealerweise musst Du dafür keine Änderungen am HTML vornehmen. Du kannst die existierenden Klassen nutzen, aber auch auf sie verzichten.
  • Welche Vor- und Nachteile hätte dieser Verzicht?
• Gestalte einen einfachen Text nur mit Selektoren.

Kaskade

Welche Farbe haben diese beiden DIVs?

Spezifität

Schau Dir die folgenden Regeln an und bestimme das Ergebnis.

Dokumentenfluss

Mit diesem Beispiel kannst Du die Effekte von Positionierungen, negative Margins, z-index und Floats überprüfen. Die Datei ist auch auf Codepen erreichbar.

Positionierung

Einsteigertest über die Grundbegriffe der Positionierung. Bitte genau auf die Dimensionen und Farben achten. Wer mag und schnell genug ist, kann gerne die Zusatzaufgabe lösen.

Floats

Spiele ein wenig mit der Float-Technik.

Layout (Grid) erstellen

Arbeite mit unterschiedlichen Methoden zur Erstellung eines Layout mit dieser sehr einfach gehaltenen Vorlage.

Module erstellen

• Text über ein Bild schieben
• Eine Card mit interaktiven Elementen
• Eine Card mit einem Bild, das bei :hover nach rechts rutscht

Formulare

• Erstelle und gestalte bitte eines oder mehrere dieser Formulare
• Spiele ausserdem mit Checkboxen und Radiobuttons herum. Die kann man zwar nicht direkt gestalten, aber es gibt Mittel und Wege, sie interessanter zu machen.

Grundlegende Infoseiten dazu:

• MDN
• SELFHTML

Flexbox

• Erstelle bitte ein dreispaltiges Layout mit Hilfe dieser Vorlage.
• Eine horizontale Navigation ist ein klassischer Anwendungsfall für Flexbox. Bitte die halb gestaltete Liste mit Flexbox transformieren und mit den Eigenschaften experimentieren.
• Arrangiere die Beispielcontainer in einem Beispiel-Layout. Denk daran: die Layoutcontainer sind wie ein Setzkasten. In diese Container kommt erst der darzustellende Inhalt. Die Container selber bereiten nur den Platz vor.
• Erstelle eine Card mit interaktiven Elementen.
• Erstelle eine Card mit einem Bild, das bei :hover nach rechts rutscht.
• Diese hübschen Kommentarboxen müssen als Erstes mit Flexbox layoutet werden. In einem zweiten Schritt sollen die Ausrichtungen der Bilder abwechselnd links und rechts sein.
• Es ist eine beliebte Herausforderung, dass ein Footer einer Seite immer zumindest am Ende des Viewports platziert sein soll, auch wenn nur wenig Inhalt existiert. Früher benötigte man dafür eine passende Struktur und musste ein wenig tricksen. Mit Flexbox geht dies ganz einfach. Also ran und die Lösung finden!
• Bring diese Teasercontainer in einem Grid unter und formatiere sie auf gleiche Höhe. Es soll sich bei Bedarf automatisch eine neue visuelle Zeile bilden.
• Eine sehr einfache Aufgabe: Bitte diese schon in einem kleinen Grid platzierten Visitenkarten gestalten.