CSS Media Queries sind eine Technik in CSS, mit der sich das Layout einer Webseite an verschiedene Bildschirmgrößen, Auflösungen und Gerätetypen anpassen lässt. Sie sind ein zentraler Bestandteil des Responsive Web Designs.
@media (Bedingung) {
/* CSS-Regeln, die nur unter dieser Bedingung gelten */
}1. Anpassung an verschiedene Bildschirmbreiten:
/* Für Bildschirme mit maximal 600px Breite (z. B. Smartphones) */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}2. Unterscheidung zwischen Hoch- und Querformat:
@media (orientation: landscape) {
body {
background-color: lightgreen;
}
}3. Spezielle Stile für Druckausgabe:
@media print {
body {
font-size: 12pt;
color: black;
background: none;
}
}✅ Mobile-First-Design: Webseiten für kleine Displays optimieren und dann für größere Bildschirme erweitern.
✅ Dark Mode: Stile je nach Nutzerpräferenz anpassen (prefers-color-scheme).
✅ Retina-Displays: Hochauflösende Bilder oder spezielle Stile für Displays mit hoher Pixeldichte (min-resolution: 2dppx).
Hot Module Replacement (HMR) ist eine Webentwicklungstechnik, die es ermöglicht, Codeänderungen in einer laufenden Anwendung sofort anzuwenden, ohne die gesamte Seite neu zu laden. Dies verbessert die Entwicklungsproduktivität erheblich, da der Zustand der Anwendung (z. B. Benutzereingaben oder UI-Zustand) erhalten bleibt.
HMR wird in modernen Build-Tools wie Webpack, Vite, Parcel oder esbuild verwendet. Der Prozess läuft folgendermaßen ab:
✅ Schnellere Entwicklungszeiten – Kein vollständiger Seitenreload nötig.
✅ Erhalt des Anwendungszustands – Besonders nützlich bei React, Vue oder anderen SPA-Frameworks.
✅ Direkte CSS-Updates – Änderungen an CSS-Dateien werden sofort sichtbar.
✅ Bessere DX (Developer Experience) – Weniger Unterbrechungen beim Coden.
Falls du Webpack nutzt, kannst du HMR aktivieren mit:
if (module.hot) {
module.hot.accept('./module.js', function() {
console.log('Module updated!');
});
}Dies stellt sicher, dass Änderungen an module.js geladen werden, ohne dass die gesamte Anwendung neu startet.
Webflow ist eine leistungsstarke Plattform zur Erstellung von responsiven Websites, die Design, Entwicklung und Hosting kombiniert. Sie richtet sich an Designer, Entwickler und Unternehmen, die hochwertige, professionelle Websites erstellen möchten – ohne tiefgehendes Programmieren, aber mit mehr Kontrolle als bei klassischen Baukästen wie Wix oder Squarespace.
Visueller Website-Builder:
Flexibles Design:
CMS (Content Management System):
Interaktionen und Animationen:
Hosting und Deployment:
SEO-Optimierung:
E-Commerce:
Im Vergleich zu klassischen Website-Baukästen kombiniert Webflow die Benutzerfreundlichkeit von No-Code-Tools mit der Flexibilität und Anpassbarkeit einer professionellen Entwicklungsplattform.
Dynamic HTML (DHTML) ist eine Kombination von Technologien, die verwendet wird, um interaktive und dynamische Webinhalte zu erstellen. Es ist kein eigenständiger Standard oder eine Programmiersprache, sondern eine Sammlung von Techniken und Tools, die zusammenarbeiten. Mit DHTML können Websites dynamisch und interaktiv gestaltet werden, ohne dass die gesamte Seite neu geladen werden muss.
HTML (Hypertext Markup Language)
Die Grundstruktur der Website.
CSS (Cascading Style Sheets)
Steuert das Aussehen und das Layout der Webseite. Mit CSS können Stile dynamisch verändert werden, z. B. durch Hover-Effekte oder das Ändern von Farben und Positionen.
JavaScript
Ermöglicht das Hinzufügen von Interaktivität und dynamischem Verhalten, wie das Aktualisieren von Inhalten, ohne die Seite neu zu laden.
DOM (Document Object Model)
Eine Programmierschnittstelle, die den Zugriff auf und die Manipulation der Struktur der Webseite ermöglicht. JavaScript interagiert mit dem DOM, um Inhalte zu ändern oder neue Elemente hinzuzufügen.
Ein einfaches Beispiel wäre ein Button, der beim Anklicken den Text auf der Seite ändert.
<!DOCTYPE html>
<html>
<head>
<style>
#text {
color: blue;
font-size: 20px;
}
</style>
<script>
function changeText() {
document.getElementById("text").innerHTML = "Text geändert!";
document.getElementById("text").style.color = "red";
}
</script>
</head>
<body>
<p id="text">Originaler Text</p>
<button onclick="changeText()">Klicke mich</button>
</body>
</html>Heutzutage hat DHTML durch modernere Techniken wie AJAX und Frameworks (z. B. React, Vue.js) an Bedeutung verloren, war jedoch ein wichtiger Schritt in der Entwicklung interaktiver Webanwendungen.
Modernizr ist eine Open-Source-JavaScript-Bibliothek, die Entwicklern hilft, die Unterstützung moderner Webtechnologien wie HTML5 und CSS3 in verschiedenen Browsern zu erkennen. Statt sich auf die Version des Browsers zu verlassen, überprüft Modernizr, ob bestimmte Funktionen unterstützt werden, und ermöglicht so das Laden von Polyfills oder Fallbacks, wenn diese Funktionen nicht verfügbar sind.
Modernizr wird häufig verwendet, um Kompatibilität über verschiedene Browser hinweg sicherzustellen, insbesondere wenn moderne Webstandards in älteren Browsern implementiert werden müssen.
Ein statischer Website-Generator (Static Site Generator, SSG) ist ein Tool, das eine statische Website aus Rohdaten wie Textdateien, Markdown-Dokumenten oder Datenbanken und Vorlagen (Templates) erstellt. Hier sind einige wichtige Aspekte und Vorteile von SSGs:
Statische Dateien: SSGs erzeugen reine HTML-, CSS- und JavaScript-Dateien, die direkt von einem Webserver ausgeliefert werden können, ohne dass eine serverseitige Verarbeitung erforderlich ist.
Trennung von Inhalt und Präsentation: Inhalt und Design werden getrennt behandelt. Der Inhalt wird oft in Form von Markdown, YAML oder JSON gespeichert, während das Design durch Templates definiert wird.
Bauzeit: Die Generierung der Website findet zur Entwicklungszeit statt, nicht zur Laufzeit. Das bedeutet, dass der gesamte Inhalt beim Erstellen der Website in statische Dateien kompiliert wird.
Keine Datenbank erforderlich: Da die Website statisch ist, wird keine Datenbank benötigt, was die Sicherheit und Leistung verbessert.
Performance und Sicherheit: Statische Websites sind in der Regel schneller und sicherer als dynamische Websites, da sie weniger anfällig für Angriffe sind und keine serverseitigen Skripte ausgeführt werden müssen.
Schnelligkeit: Da nur statische Dateien ausgeliefert werden, sind Ladezeiten und Serverreaktionen sehr schnell.
Sicherheit: Ohne serverseitige Skripte und Datenbanken gibt es weniger Angriffsvektoren für Hacker.
Einfaches Hosting: Statische Websites können auf jedem Webserver oder Content Delivery Network (CDN) gehostet werden, einschließlich kostenloser Hosting-Dienste wie GitHub Pages oder Netlify.
Skalierbarkeit: Statische Websites können problemlos sehr große Besucherzahlen bewältigen, da keine komplexe Backend-Verarbeitung erforderlich ist.
Versionierung und Kontrolle: Da Inhalte oft in einfachen Textdateien gespeichert werden, können sie leicht mit Versionskontrollsystemen wie Git verfolgt und verwaltet werden.
Static Site Generators sind besonders geeignet für Blogs, Dokumentationsseiten, persönliche Portfolios und andere Websites, bei denen der Inhalt nicht häufig aktualisiert werden muss und wo schnelle Ladezeiten und hohe Sicherheit wichtig sind.
Das Frontend bezeichnet den Teil einer Softwareanwendung, der direkt mit dem Benutzer interagiert. Es umfasst alle sichtbaren und bedienbaren Elemente einer Website oder einer Anwendung, wie Layout, Design, Bilder, Texte, Buttons und andere interaktive Komponenten. Das Frontend wird auch als Benutzeroberfläche (User Interface, UI) bezeichnet.
Um die Entwicklung des Frontends zu erleichtern, gibt es verschiedene Frameworks und Bibliotheken. Einige der beliebtesten sind:
Zusammenfassend ist das Frontend der Teil einer Anwendung, den der Benutzer sieht und mit dem er interagiert. Es umfasst die Struktur, das Design und die Funktionalität, die die Benutzererfahrung ausmachen.
Mercurial
