CSS-Selektoren Regeln

HTTP Request + Headers

• HTTP Request Methoden: GET, POST, PUT, DELETE, PATCH, CONNECT
• Keine HTTP Request Methode: SECURE, SSL, CHANGE, OPTION
• Cache-Richtlinien mit Cache-Control Header: no-cache, max-age, no-store, must-revalidate
• Cookies werden mit Set-Cookie Header übertragen: name=value; name2=value2
• Warum ist HTTP Basic Authentication unsicher: USERNAME und Passwort werden nur Base64 encodiert.

HTTP Status Codes

• HTTP Status Codes definieren, ob ein HTTP Request erfolgreich abgeschlossen wurde oder nicht.
• HTTP Response Status Codes werden in 5 Gruppen eingeteilt: 1xx, 2xx, 3xx, 4xx, 5xx
• Status Codes von 400 bis 499: Client error responses
• Status Codes von 500 bis 599: Server error responses

Editor, IDE

• IDE: integrated development environment
• Visual Studio Code Extensions werden in JavaScript erstellt
• Editoren, die von Webentwicklern häufig verwendet werden: Visual Studio Code, WebStorm, Brackets, Notepad++

Zusammenspiel HTML, CSS, JavaScript

• Trennung von HTML-, CSS- und JavaScript-Code: Inhalt, Darstellung und Funktion
• HTML Tags werden in spitzen Klammern geschrieben
• Eine CSS Regel definiert eine Formatvorlage für bestimmte HTML Tags

HTML Grundgerüst

• Zum HTML Grundgerüst gehören: Doctype, head-Element, body-Element
• DTD für HTML5:
• Der Meta-Tag "viewport" im HTML-Head wird für die Darstellung der Webseite auf mobilen Endgeräten verwendet

Block, Inline, andere Displayarten

• Die CSS-Eigenschaft "display" bestimmt, ob und wie ein Element auf der Seite dargestellt wird
• Standardmäßig Blockly-Elemente: div, p, ul
• Standardmäßig Inline-Elemente: strong, i, img

Semantik

• Semantik: Bedeutungslehre
• Semantisches HTML beschreibt die Beziehung von HTML-Tags und deren Inhalten
• Vorteile von semantischen HTML-Codes: Besseres Verständnis der Inhalte durch Suchmaschinen, bessere Zugänglichkeit für Benutzer mit Einschränkungen

Hyperlinks

• Der Tag erzeugt einen Hyperlink in der Webseite
• Das Attribut "target" in einem Hyperlink legt fest, wo sich das verlinkte Dokument öffnen soll
• Pseudoklassen für Hyperlinks: :link, :visited, :hover, :active

Formulare

• Attribute des Formular-Elements: action, method, enctype
• Eingabefelder können mit verschiedenen Typen (z.B. text, password, submit) erstellt werden
• Radiobuttongruppen können mit mehreren input-Elementen erstellt werden

CSS Regel

• Eine CSS Regel besteht aus Selektor und Deklarationsblock
• Eine CSS Regel beschreibt das Aussehen der mit dem Selektor angesprochenen HTML-Elemente
• CSS steht für Cascading Style Sheet

CSS Selektoren, Kaskadierung

• Selektoren können kombiniert werden, um bestimmte Elemente anzusprechen
• Pseudoklassen wie :first-child, :last-child, :nth-child können verwendet werden
• Kombination von Selektoren: E, F, E F, E * F, E ~ F

Box Modell

• Das Box Modell definiert die Darstellung eines Elements: width, height, padding, border, margin
• Eine Box kann mit Außenabstand, Innenabstand, Rahmen und Inhalt definiert werden
• Schriftgröße kann mit px, vw, vh, % oder rad festgelegt werden

Flexbox

• Flexbox ermöglicht die Darstellung von flexiblen Boxen
• Vorteile von Flexbox: alle Elemente innerhalb eines Containers können die Container-Höhe übernehmen
• Eigenschaften von Flexbox: flex-grow, flex-shrink, flex-basis

Pseudoklassen, Pseudoelemente

• Pseudoklassen ermöglichen es, einem Element für einen bestimmten Zustand Formatierung zu geben
• Pseudoklassen können verwendet werden, um bestimmte Elemente anzugreifen
• Pseudoelemente können verwendet werden, um bestimmte Teile eines Elements anzugreifen

Mediaqueries

• Mediaqueries ermöglichen es, unterschiedliche CSS-Eigenschaften für verschiedene Gerätetypen festzulegen
• Mediaqueries können Eigenschaften des Bildschirmes abfragen: Breite, Höhe, Orientierung
• Mediaqueries können verwendet werden, um die Webapplikation für den Darkmode zu optimieren

Bootstrap

• Bootstrap ist ein Framework für die Erstellung von responsiven Webseiten

• Bootstrap ermöglicht es, schnell und einfach eine Website mit verschiedenen Geräten zu erstellen### Bootstrap Framework

• Bootstrap ist ein CSS Framework für schnellere und einfachere Webentwicklung.

• Es beinhaltet HTML und CSS basierte Design-Templates für Typographie, Formulare, Buttons, Tabellen, Navigation, Bilder und optionale JavaScript Plugins.

Bootstrap Gridsystem

• Das Bootstrap Gridsystem besteht aus 12 Spalten.
• Es verwendet Default-Breakpoints (in v5: xs, sm, md, lg, xl, xxl).
• Die Anzahl an Spalten kann frei konfiguriert werden.

Bootstrap Grid - Elemente erstellen

• Mit der Klasse .col-4 können drei gleichgroße Elemente nebeneinander erstellt werden, die gemeinsam die Breite des Containers einnehmen.

Bootstrap-Button

• Ein Bootstrap-Button mit grünem Hintergrund kann mit dem Tag btn-success erstellt werden.

Bootstrap Formularfelder

• Erfolgreich validierte Formularfelder werden mit der Klasse is-valid markiert.

Erkennen Sie die richtigen CSS-Regeln und Selektoren für einfache und kombinierte Selektoren. Testen Sie Ihre Fähigkeiten in diesem Quiz!