Anleitungen und Videos zu HTML5, CSS, Webdesign & Co.
Webdesign
Wie baut man Webseiten? Welche Software brauche ich? Was ist wichtig beim Webdesign? Wie nutzt man HTML und CSS? Und wie funktioniert Responsive Webdesign? Anleitungen rund um das wunderbare Thema Webdesign.
HTML-Grundlagen
- Was ist HTML, CSS und Javascript?
- Grundgerüst einer HTML-Webseite
- Der Link: Texte und Bilder verlinken
- Bilder einfügen mit img
- Überschriften mit <h1>, <h2>, <h3>,…
- <ul> und <ol>: Inhalte sortieren mit Listen
- Fettschrift mit <strong> und Kursivschrift mit <em>
- HTML: Relative und Absolute Links
- Moderne Webseiten: Zusammenspiel von HTML, CSS & Javascript
- HTML: Semantik-Elemente
- Impressum erstellen für Deine Website
- HTML & CSS Style Guide für übersichtlichen Code
- So schaust Du Dir den Quellcode einer Webseite an
- HTML & CSS Kommentare
CSS-Grundlagen
Bilder, Formate, Bildbearbeitung
- Bilder – Dateiformate für das Webdesign
- Das JPG-Bildformat
- Das PNG-Bildformat
- Das GIF-Bildformat
- Das SVG-Bildformat
- Base64-Bilder: Konvertieren und Einbauen
- Tonwertkorrekur: Einfach, aber wirkungsvoll
- Bilder zurechtschneiden
- Drittel-Regel: Hilfe für die Bildgestaltung
- Bilder einfügen mit img
- Schnelle Bilder: Bilder optimal komprimieren
- Farben finden, erstellen, nutzen
- Fotos: Kostenloses Bildmaterial
- 5 Tipps für die Videobearbeitung
- Kostenlose SVG-Grafiken für Social Media, Flaggen und mehr
- Muster, Hintergrundmuster, Pattern, Kacheln
Software für Webdesigner
Webdesign Specials
- Die Magie der .htaccess-Datei
- So planst Du Dein Website-Projekt
- Eine Website mit Jekyll erstellen – MegaTutorial Leitfaden
- So produzierst Du Deinen eigenen Podcast
- So fügst Du Favicon, Apple Icon und andere Icons Deiner Webseite hinzu
- Placekitten bietet Katzenbilder als Platzhalter für Webdesigns
- Perfekte 404-Fehlerseiten erstellen
- Hilfreiche Links für Webdesigner
- Durchstarten mit Gulp.js – Websites optimieren, Arbeitsabläufe automatisieren
- OPML – Was ist das?
- Google Fonts
- Icon Fonts
Anhang/Sonstiges Webdesign
- BUCHKRITIK »Responsive Typography« von Jason Pamental
- BUCHKRITIK Webdesign-Prozesse mit Grunt automatisieren
- Glossar: Webdesign-Begriffe verständlich erklärt
- Kleine CSS-Rezepte
- Nachoben-Button einblenden mit scrollTop
- Online-Werkzeuge
- Populäre Bildmaße & Proportionen
- Webdesign Checkliste für die Website-Prüfung
Hugo – Static Website Generator
Wordpress – Code-Bausteine
Für die Entwicklung von WordPress-Websites benötige ich die folgenden Code-Schnipsel immer wieder. Auflistung aller Code-Schnipsel
HTML – Code-Bausteine
Für die Entwicklung von HTML-WebseitenWebsites benötige ich die folgenden Code-Schnipsel immer wieder. Auflistung aller Code-Schnipsel