Wenn Sie die Vorzüge schneller Systemschriften schätzen, aber nicht alles immer mit System UI gestalten möchten, ist ein Besuch auf Modern Font Stacks definitiv eine gute Idee.
Sie sehen alle Beiträge zum Thema
HTML + CSS
Beiträge zum Buch »Einstieg in HTML und CSS« und zum Videokurs »Webtechniken lernen«. Beiträge von vor Dezember 2022 sind von html-und-css.de hierher umgezogen
- Bücher (26)
- CSS-Grundlagen (17)
- CSS-Layout (10)
- HTML (15)
- HTML + CSS (18)
- Social Media (4)
- Sonstiges (8)
- Tools (22)
- Videokurse (22)
- WordPress (31)
»Webtechniken lernen 3« – der neue Kurs ist da
Mein LinkedIn Learning-Kurs »Webtechniken lernen« hat sich in den letzten Jahren zu einem kleinen Hit gemausert, und im Oktober habe ich den dritten Teil komplett überarbeitet und neu aufgenommen. Jetzt ist er erschienen.
Der »CSS Snapshot 2022«
Alle paar Jahre veröffentlicht die für die Entwicklung von CSS verantwortliche CSS Working Group (CSSWG) einen CSS Snapshot, eine Momentaufnahme und Referenz, an der Webentwickler und Browserhersteller sich orientieren können.
Visual Studio Code mit dem Farbschema von Brackets
Brackets fand ich klasse, aber inzwischen ist Visual Studio Code mein Standardeditor.
In diesem Beitrag zeige ich Ihnen, wie man dem hellen Standard-Theme von Code das Brackets-Farbschema zur Syntaxhervorhebung von HTML und CSS verpasst. Das sieht einfach besser aus …
Farben mischen mit HSL
Der HSL Color Picker hilft beim Denken in HSL:
- Hue (Farbton) auf dem »Farbkreis« wählen (oberster Balken):
- Primäre Farben: 0/360° = Rot, 120° = Grün, 240° = Blau
- Sekundäre Farben: 60° = Gelb, 180° = Cyan, 300° = Magenta
- Die reinste Form der Farbe erhalten Sie mit
- Saturation (Farbsättigung) = 100
- Lightness (Hellwert) = 50
- Saturation verringern bewegt die Farbe Richtung Grau.
- Lightness verändern:
- erhöhen = Farbe geht Richtung Weiß
- verringern = Farbe geht Richtung Schwarz
- Transparenz der Farbe: 0 = durchsichtig, 1 = nicht durchsichtig
Der Würfel links unten neben dem Farbfeld zeigt eine Zufallsfarbe.
Responsive Navigation mit Progressive Enhancement
In diesem Beitrag erstellen Sie eine responsive Navigation, die immer funktioniert: Ohne JavaScript sehen die Besucher eine vertikale Navigationsliste, mit JavaScript gibt es einen Menübutton, der die Navigation bei Berührung sanft einblendet. In breiten Viewports bekommen die Besucher eine horizontale Navigation.
3 wirklich gute kostenlose Editoren für HTML und CSS
In diesem Beitrag stelle ich Ihnen die drei beliebtesten kostenlosen Kandidaten kurz vor: Visual Studio Code, Brackets und Atom. Alle drei gibt es für Windows, macOS und Linux und eignen sich hervorragend zum Schreiben von HTML, CSS und auch JavaScript.
Über Zitate, Quellenangaben und HTML
Man lernt ja nie aus. Heute habe ich z. B. gelesen, dass Quellenangaben für Zitate laut HTML-Spezifikation außerhalb von <blockquote> stehen sollen. Aha, dachte ich. Sowas auch …
Lazy Loading: Seiten mit vielen Bildern optimieren
Das sogenannte Lazy Loading für Bilder ist eine echte Verbesserung für die Performance von bildlastigen Webseiten. Was sich dahinter verbirgt, zeigt dieser Beitrag.
Sticky CSS Grid Items
Melanie Richards erklärt, wie man position: sticky innerhalb eines Grid-Layouts einsetzen kann.
Über Pfadangaben in CSS-Regeln
Beim Einbinden von Hintergrundgrafiken sorgen die Pfadangaben zur Grafikdatei manchmal für Verwirrung. Die Grundregel lautet: »Pfadangaben in CSS-Regeln werden immer aus Sicht des CSS gesehen«.
Beschreibungslisten gestalten per Grid
Beschreibungslisten, die auch unter ihrem alten Namen Definitionslisten bekannt sind, kann man mit ein paar einfachen CSS-Grid-Anweisungen sehr einfach layouten.
Eine kurze Geschichte der »CSS Resets«
Dieser Beitrag stellt die wichtigsten klassischen CSS-Resets vor, die jeder CSS-Autor kennen sollte, und zeigt dann noch ein paar interessante, moderne Resets. Auch wenn man einen CSS-Reset heute nicht mehr unbedingt benötigt, lohnt sich die Beschäftigung damit, denn man lernt dabei eine Menge.
Online-Tool zum Ordnen von Farbnamen
Einfache Farbnamen wie black und white haben für den Einstieg in HTML und CSS den Vorteil, dass man nichts erklären muss, und zumindest die Grundfarben sind auch in English verständlich. Zum spielenden Kennenlernen von Farbnamen gibt es ein pfiffiges Online-Tool.
Spaß mit Spezifität: ».bild.bild.bild figcaption«
Jens Grochtdreis hat einen Blogbeitrag veröffentlicht, in dem er einen kleinen Trick beim Umgang mit der Spezifität beschreibt.
Responsive CSS-Layouts? Ohne float? Echt?
Mehrspaltige Layouts wurden in CSS lange Zeit quasi in Notwehr mit Eigenschaften wie float oder position umgesetzt. Das war zwar besser als die HTML-Tabellen der 90er-Jahren, aber alles andere als einfach. Inzwischen geht das viel einfacher.
CSS? Da wurschteln wir uns so durch.
Viele Designer und Entwickler lernen CSS durch Versuch und Irrtum, und sammeln dabei im Laufe der Zeit immer mehr Puzzleteile, die aber zusammen oft nicht wirklich ein Ganzes ergeben. »Da wurschteln wir uns so durch«, heißt es dann, aber selbst wenn es klappt, macht es wenig Spaß.
HTML? Muss man das lernen?
HTML ist eine vergleichsweise einfache Sprache und wird vielleicht gerade deshalb oft nicht ganz ernst genommen. „H-T-M-L? Das macht bei uns der Azubi!“ oder so ähnlich heißt es dann.