Auf dieser Seite findest du eine Übersicht nützlicher Links und digitaler Werkzeuge. Der erste Teil umfasst praktische Browser-Erweiterungen für mehr Datenschutz, Komfort und technische Analysen im Alltag. Im zweiten Teil sind empfehlenswerte Websites und Fachressourcen aufgelistet, die sich intensiv mit Webtechnologien wie HTML, CSS und Webstandards beschäftigen.
Praktische Firefox Add-Ons für den Browser-Alltag
Die richtigen Browser-Erweiterungen geben dir mehr Kontrolle über das Web. Sie schützen deine Privatsphäre, blockieren störende Elemente und helfen dir dabei, den technischen Hintergrund anderer Webseiten auf Knopfdruck zu analysieren. Hier Add-Ons für Firefox:
- Adblock Plus: Entfernt störende Werbebanner und sorgt unter anderem dafür, dass du YouTube-Videos komplett ohne Werbung ansehen kannst.
- Color Picker: Ein schnelles, unverzichtbares Werkzeug, um Farbwerte direkt von jeder beliebigen Website abzugreifen.
- Facebook Container: Isoliert deine Aktivitäten vom restlichen Web, um das Tracking über Drittanbieter-Seiten hinweg zu erschweren.
- Ghostery: Blockiert versteckte Tracker, beschleunigt das Laden von Seiten und sorgt für spürbar mehr Datenschutz beim Surfen.
- LanguageTool (LT): Eine intelligente Rechtschreib- und Grammatikprüfung für fehlerfreie Texte auf allen digitalen Plattformen.
- Wappalyzer: Macht die Technik dahinter sichtbar: Zeigt dir sofort, mit welchen Content-Management-Systemen, Frameworks oder Trackern eine Website aufgebaut wurde.
Ressourcen, um HTML & CSS zu verstehen
Die folgenden Links führen dich zu hervorragenden Dokumentationen und Lernplattformen. Tipp: Wenn du diese Seiten mit dem oben erwähnten Adblock Plus besuchst, kannst du die Code-Beispiele und Tutorials völlig ungestört und werbefrei studieren.
- Can I use...: Das wichtigste Werkzeug, um schnell zu prüfen, welche modernen CSS- und HTML5-Features von welchen Browserversionen aktuell unterstützt werden.
- CSS-Tricks: Exzellente Artikel, visuelle Guides und Praxistipps zu modernen Layout-Systemen wie CSS Flexbox und Grid.
- mediaevent.de: Äußerst verständliche und tiefgehende deutsche Anleitungen, Übersichten und Referenzen zu HTML und CSS.
- MDN Web Docs (Mozilla Developer Network): Die präziseste und offiziellste Dokumentation für Webstandards. Ideal, um die Funktionsweise von HTML5 und CSS-Eigenschaften im Detail zu durchdringen.
- SelfHTML Wiki: Das bekannte deutsche Urgestein für Webdokumentation. Bietet verlässliche, strukturierte Erklärungen und Grundlagenartikel.
- w3schools.com: Der interaktive Klassiker. Perfekt, um Code direkt im Browser auszuprobieren, Grundlagen zu festigen und mit Beispielen zu experimentieren.
Fancy CSS
Aktuelles CSS bietet mittlerweile beeindruckende visuelle Möglichkeiten direkt im Browser, ohne dass man auf JavaScript zurückgreifen muss. Die folgenden Links führen dich zu CSS-Techniken und spektakulären Praxisbeispielen von Pratham (@prathkum), der zeigt, wie komplexe visuelle Effekte und flüssige Interaktionen sauber gecodet werden:
- Pratham auf CodePen: Interaktive Live-Beispiele für fancy CSS, wie z. B. Box-Shadow-Animationen, halbtransparente Glassmorphism-Effekte und kreative UI-Elemente direkt zum Experimentieren im Browser.
- Pratham CSS Box-Shadow Animation: Ein konkretes Praxisbeispiel, das eindrucksvoll zeigt, wie man durch das präzise Zusammenspiel von Schatten und Animationen faszinierende visuelle Tiefe auf Webseiten erzeugt.
- Pratham auf X (@prathkum): Seine Social-Media-Zentrale mit regelmäßigen, visuell aufbereiteten CSS-Spickzetteln, Tipps zu Backdrop-Filtern für transparente Hintergründe und modernen Web-Layouts.