HTML und CSS für Webentwickler

HTML und CSS für Web Developer:innen

• Ein HTTP Request besteht aus einer Anfrage-Methode, Header und Body.
• HTTP Status Codes liefern Informationen über den Erfolg oder Misserfolg eines HTTP Requests.
• Ein IDE (Integrated Development Environment) ist eine Software, die eine umfassende Entwicklungsumgebung für Programmierer bietet.

Editor, IDE

• Visual Studio Code und Atom.io wurden mit dem ElectronJS Framework entwickelt.
• Webentwickler verwenden häufig Editoren wie Visual Studio Code, WebStorm, Brackets und Notepad++.

Zusammenspiel HTML, CSS, JavaScript

• Die Trennung von HTML-, CSS- und JavaScript-Code erfolgt nach Inhalts-, Darstellungs- und Funktionsaspekten.
• 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- und body-Element.
• Die DTD (Document Type Definition) für HTML5 wird durch den Ausspruch `` definiert.

Block, Inline, andere Displayarten

• Die CSS-Eigenschaft display beeinflusst die Darstellung von HTML-Elementen auf einer Seite.
• Standardmäßig sind div-Elemente Block-Elemente und strong-Elemente Inline-Elemente.

Semantik

• Der Begriff Semantik bezieht sich auf die Bedeutungslehre.
• Semantisches HTML beschreibt die Beziehung von HTML-Tags und ihren Inhalten.
• Vorteile von semantischem HTML sind besseres Verständnis der Inhalte durch Suchmaschinen und bessere Zugänglichkeit für Benutzer mit Einschränkungen.

Hyperlinks

• Der a-Tag erzeugt einen Hyperlink in der Webseite.
• Das Attribut target in einem Hyperlink legt fest, wo sich das verlinkte Dokument öffnen soll.

Formulare

• Das form-Element erzeugt ein Formularelement.
• Die input-Elemente haben verschiedene Attribute wie action, method und enctype.

CSS-Regel

• Eine CSS-Regel besteht aus Selektor und Deklarationsblock.
• Die CSS-Regel beschreibt das Aussehen der mit dem Selektor angesprochenen HTML-Elemente.

CSS-Selektoren, Kaskadierung

• Ein Selektor spricht bestimmte HTML-Elemente an.
• Die Kaskadierung von CSS-Regeln ermöglicht es, Regeln zu überlagern und zu überschreiben.

Box-Modell

• Das Box-Modell im CSS definiert die Darstellung eines Elements anhand von width, height, padding, border und margin.

Flexbox

• Flexbox ermöglicht es, Elemente innerhalb eines Containers auszurichten und zu verteilen.
• Vorteile von Flexbox sind vertikales Zentrieren innerhalb eines Elternelementes und horizontales Zentrieren mehrerer Elemente.

Pseudoklassen, Pseudoelemente

• Pseudoklassen ermöglichen es, einem Element für einen bestimmten Zustand Formatierung zu geben.
• Pseudoelemente werden verwendet, um CSS-Regeln auf Teile von HTML-Elementen anzuwenden.

Mediaqueries

• Mediaqueries ermöglichen es, CSS-Regeln nach bestimmten Bedingungen wie Bildschirmbreite oder -höhe anzupassen.
• Mediaqueries werden nach dem Mobile-First-Ansatz festgelegt.

Bootstrap

• Bootstrap ist ein Framework, das die Entwicklung von Webanwendungen erleichtert.

• Bootstrap bietet eine umfassende Sammlung von CSS- und JavaScript-Komponenten für die Entwicklung von Webanwendungen.### 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.

Responsives Design

• Bootstrap ermöglicht einfaches Erstellen von responsiven Designs.

Bootstrap Gridsystem

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

Grid-Klassen

• Die Klasse .col-4 kann verwendet werden, um drei gleichgroße Elemente nebeneinander zu erstellen, die gemeinsam die Breite des Containers einnehmen.

Bootstrap-Button

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

Formularfelder

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