So lernst du Webdesign mit CSS – in 4 Minuten
#entwicklungunddesign #css #webdesign

Jerry Thomas – der Entwickler hinter der Bootstrap-Alternative Bulma․css – hat einen Leitfaden zum Thema Webdesign veröffentlicht, mit dem ihr in vier Minuten die wichtigsten gestalterischen Prinzipien lernt․

Angenommen, ihr habt ein Produkt, ein Portfolio oder einfach eine Idee, das oder die ihr auf eurer eigenen Website teilen wollt․ Bevor ihr das im Netz veröffentlicht, wollt ihr natürlich sicherstellen, dass das Ganze „attraktiv, professionell oder zumindest vorzeigbar“ aussieht – aber ihr habt euch noch nie mit Webdesign oder CSS – das steht für Cascading Style Sheets – beschäftigt?
Interaktiv u․․․

Entwicklerin baut Teslas Cybertruck in CSS
#entwicklungunddesign #css

Designerin Lynn Fisher, bekannt für tiefste CSS-Kenntnisse, hat Teslas Cybertruck dermaßen beeindruckt, dass sie sich veranlasst sah, das Gefährt auf Codepen in reinem CSS nachzubauen․ Auch andere fühlen sich inspiriert․
Lynn Fisher ist Künstlerin, Designerin und Entwicklerin und löst nach eigenem Bekunden gern hartnäckige CSS-Probleme․ Sie lebt und arbeitet im amerikanischen Arizona, wo sie mit ihrem Ehemann und zwei Hunden ein kleines Studio neben ihrem Hauptjob als Kreativchefin der Agentur Andyet betreibt․
Lynn Fishers Codepen․ (Screenshot: t3n․de)
Die Vorstellung des Tesla Cybertruck vor einigen Tagen war․․․

Konkurrenz für JavaScript? W3C erklärt Web Assembly zum Web-Standard
#w3c #javascript #css #html

Das World Wide Web Consortium kürte die Web-Assembly-Core-Spezifikation neben HTML, CSS und JavaScript unlängst zum offiziellen Web-Standard․ Das steckt dahinter․
Die Sprache des Webs heißt JavaScript – und wird ergänzt durch HTML und CSS․ Mithilfe von Web Assembly lassen sich aber auch in performanteren Sprachen geschriebene Anwendungen im Browser deployen․ Das ist Grund genug für das World Wide Web Consortium – kurz W3C – das Format jetzt zum Standard zu erklären․
Was ist das W3C?
Hinter der Abkürzung W3C steckt das „World Wide Web Consortium“ – ein․․․

Webdesign: Das sind die besten CSS-Features, die es nicht gibt
#webdesign #css

CSS entwickelt sich schnell, aber nicht schnell genug․ Developer Tyler Sticka hat ein paar gute Ideen für noch nicht existente Features zusammengetragen․
Webdesigner und -entwickler erfreuen sich inzwischen an deutlichen Verbesserungen im Leistungsumfang der CSS-Spezifikation․ Besonders Flexbox, CSS Grid oder die Custom Properties erleichtern die Entwicklung moderner Websites enorm und bieten vor allem gestalterisch eine deutliche Aufwertung bei reduziertem Code-Aufwand․
CSS: Wünsch dir was …
Dennoch gibt es immer noch eine lange Wunschliste an․․․

100-Days-of-Code: Wie ein Twitter-Hashtag mich 100 Tage lang zum Coden zwingen wird
#javascript #twitter #css #html #code #hashtag #react

100 Tage lang will ich eine Stunde täglich Programmieren – und die 100-Days-of-Code sollen mich zwingen, das durchzuziehen․ Auf dem Plan stehen HTML, CSS, JavaScript, React․ Ob das funktioniert?
Das Konzept hinter der 100-Days-of-Code-Challenge ist einfach․ Es gibt nur wenige Regeln․ Nachdem sich Teilnehmende öffentlich dazu verpflichtet haben, müssen sie 100 Tage lang jeden Tag

mindestens eine Stunde lang coden,
einen Tweet mit dem Hashtag #100daysofcode verfassen, der ihren Fortschritt dokumentiert,
sich mit mindestens zwei Personen austauschen, die ebenfalls an der Challenge․․․

Webdesign: Fluiditype ist eine schlanke CSS-Bibliothek für flexible Typografie
#css #font #typografie #webdesign

Die CSS-Bibliothek Fluiditype kümmert sich um eine dem Viewport automatisch angepasste Typografie․
Die mit drei Kilobyte sehr kleine CSS-Bibliothek Fluiditype des niederländischen Designers Boris Skirov sorgt dafür, dass deine Schriften sich stets proportional zum Viewport verhalten․ Dabei sind sie 100 Prozent fluid, skalieren also stufenlos․
Fluides Skalieren statt starrer Breakpoints
Darin besteht der Unterschied zu den üblichen Responsive-Ansätzen․ Da brechen Seiten auf der Grundlage von․․․

Trend-Tool: Neumorphism․io generiert moderne User-Interfaces mit CSS
#uidesign #googleio #ui #css #apps #entwicklungunddesign

Der dänische Frontend-Entwickler Adam Giebl stellt eine Web-App vor, die UI-Elemente im populären Neumorphismus-Stil generiert․
Auf Neumorphism․io können Webentwickler UI-Elemente im Stil des „neuen Skeuomorphismus“ generieren lassen․ Der Prozess läuft vollständig visuell․ Der resultierende CSS-Code kann über die Zwischenablage auskopiert werden․
Neumorphismus per Drag, Drop, Click
Die Verwendung des Neumorphismus-Generators von Adam Giebl ist selbsterklärend․ Zunächst wählt ihr eine Farbe per Picker oder gebt sie als․․․

New․CSS ist ein minimalistisches CSS-Framework für jeden Tag
#css #frameworks #entwicklungunddesign

Wenn es schnell gehen, aber trotzdem standardkonform bleiben soll, haben viele Entwickler eine selbst gestrickte Boilerplate zur Hand․ New․CSS könnte die nun ersetzen․
New․CSS von XZ ist ein klassenloses CSS-Framework mit einem Dateigewicht von unter 4,5 Kilobyte․ Es ist so angelegt, dass es ein HTML-Dokument automatisch von der Neunziger- auf eine zeitgemäße Optik hebt․
New․CSS bringt ansprechende Optik ohne Aufwand
Zielgruppe sind Webmaster, die schnell, aber ansehnlich Inhalte ins weltweite Netz publizieren wollen, ohne dafür einen Boliden wie Bootstrap a․․․

Atomic Design: So funktioniert kleinteilige Web-Gestaltung und deshalb ist sie sinnvoll
#webdesign #entwicklungunddesign #css #webentwicklung

Die Gemeinde der Webdesigner und -entwickler war noch nie verlegen darum, neue Begrifflichkeiten zu erschaffen․ Ein Wörterbuch „Deutsch-Webentwickler“ gibt es wahrscheinlich nur deshalb noch nicht, weil es ein mehrbändiges Werk wäre, für das einfach der Markt zu klein ist․ Heute schauen wir uns einmal den Begriff des „Atomic Design“ näher an․

Atomic Design: Das Grundkonzept
Der Begriff Atomic Design geistert seit gut sieben Jahren durch das Web․ Erfunden von Brad Frost und mit einem kompletten, online lesbaren Buch hinterlegt, lässt indes der Siegeszug auf sich warten․ Oder doch nicht? Das hängt ganz von der Perspektive des Betrachters ab․
Für den Fall, dass ihr noch nichts von Atomic Design gehört habt, stellen wir den theoretischen․․․

Die 5 Coding-Skills, die sich jeder selbst aneignen kann
#html #rubyonrails #uxdesign #css #javascript #rails #entwicklungunddesign #python

Habt ihr auch schon mal darüber nachgedacht, Softwareentwickler zu werden? Unser Gastautor gibt euch Tipps, was ihr zuerst lernen solltet und wo ihr die besten kostenlosen Ressourcen findet․
Zuletzt wurden laut Digitalverband Bitkom allein in Deutschland 124․000 Fachkräfte im IT-Bereich gesucht – darunter besonders häufig Programmierer․ Diese Zahl ist an sich schon beeindruckend, in der aktuellen Krise bekommt sie jedoch eine noch größere Bedeutung: Mehr Menschen als sonst denken derzeit über eine berufliche Veränderung nach – ob freiwillig oder notgedrungen․ Vielleicht überlegt․․․

Knopf․css: Diese Bibliothek sorgt für schicke Buttons in deinen Webdesigns
#webdesign #github #css

Knopf․css ist eine Bibliothek mit einem Namen, der hält, was er verspricht․ Mit ihrer Hilfe könnt ihr konsistent und einfach Schaltflächen erstellen․ Eine Grundausstattung wird mitgeliefert․
Es ist eine minifiziert 8,6 Kilobyte große CSS-Datei, die ihr in eure Website einbinden müsst, um die Basis für ein konsistentes und nachvollziehbares Button-Management zu bekommen․ Denn um nicht mehr oder weniger kümmert sich die CSS-Bibliothek Knopf․css von den Entwicklern hinter der Videokonferenz-Lösung Team-Video․
Knopf․css produziert Knöpfe für Websites
Ursprünglich für das Rapid․․․

Debuggen lernen: 5 Kniffe für die Chrome-Dev-Tools, die ihr kennen solltet
#chrome #entwicklungunddesign #code #css

In den Chrome-Dev-Tools schlummern einige mächtige Debugging-Features – aber kennt ihr auch alle? Wir zeigen euch fünf unserer Favoriten․ Auch Nicht-Entwickler können hier etwas mitnehmen – versprochen!
Chrome ist der meistgenutzte Browser der Welt – aus diesem Grund entscheidet sich immer noch ein großer Teil der Webentwickler für den Google-Browser․ Es gibt aber auch so einige gute Gründe, ihn in die eigene Entwicklungsumgebung aufzunehmen․ Die mächtigen Developer-Tools des Browsers sind einer davon․ In diesem Listicle zeigen wir euch, wie ihr mehr aus den Chrome-eigenen Debugging-Werkzeugen․․․

Tailwind CSS: Wie das Beiprodukt eines Seitenprojekts zu einem Multimillionengeschäft wurde
#entwicklungunddesign #webentwicklung #css

Webentwickler kennen das CSS-Framework Tailwind, das sich rasant steigender Beliebtheit erfreut․ Was sie nicht wissen, ist, dass es sich dabei um ein Geschäftsmodell handelt, das inzwischen Millionenumsätze generiert․ Tailwinds Geschichte hat was von der Romantik des amerikanischen Tellerwäscher-Traums․
Vor ein paar Wochen erreichte das CSS-Framework Tailwind, das wir euch hier und hier schon einmal vorgestellt haben, seine zehn-millionste Installation․ Was heute eine Erfolgsgeschichte ist, begann vor rund fünf Jahren relativ holprig․
Eines der populärsten Utility-first-Frameworks: Tailwind CSS․ (Screenshot: t3n)
Völlig unbeabsichtigt: Tailwind CSS
Adam Wathan, Erfinder des Tailwind CSS, hat․․․

Pure CSS: Entwicklerin baut Meisterwerk aus 1665 originalgetreu nach
#css #fullstack #entwicklungunddesign

Die Full-Stack-Entwicklerein Louise Flanagan hat sich an einen alten Meister gewagt․ Aus purem CSS baute sie „Das Mädchen mit dem Perlenohrring“ nach․ Das Bild wird auf etwa 1665 datiert, das CSS ist ganz frisch․
Johannes Vermeer wäre wohl begeistert․ Der niederländische Meister hatte sein Bild „Das Mädchen mit dem Perlenohrring“ um das Jahr 1665 herum mit Ölfarben auf Leinwand gebannt․ Ein Canvas hat auch die australische Webentwicklerin Louise Flanagan verwendet․ Auf das Öl hat sie zugunsten von CSS verzichtet․
Vermeer würde staunen
Um einschätzen zu können, was Flanagan hier geleistet hat, schauen wir․․․

Webdesign: So lernst du spielerisch CSS3-Grids
#css

Am Rechner spielen, dabei einen kleinen Garten retten und gleichzeitig neues Wissen über das Grid-Modul von CSS3 erwerben – das hört sich nach einem guten Plan an, oder?
Das Grid-Layout-Modul von CSS3 ist eine relativ neue und sehr wichtige Layout-Technik, die viele Dinge im Webdesign-Bereich deutlich vereinfachen wird․ Darüber hinaus eröffnet diese Technologie einige neue und interessante Möglichkeiten․
CSS3-Grids sind einfacher und leistungsfähiger
Man muss sich dank des Grid-Moduls nicht mehr so abmühen und um die Ecke denken, wie das noch zu Zeiten der․․․

4 CSS-Kniffe, die eure Website aufwerten – und euch das Leben leichter machen
#css #entwicklungunddesign

Angehende Frontend-Entwickler brauchen CSS-Kenntnisse․ Vielen ist die Stylesheet-Formatierungssprache dennoch ein Graus․ Auch wer nie zum CSS-Profi werden wird: Diese vier Tipps kann man immer wieder gebrauchen․
Aller Anfang ist schwer․ CSS lernen ist da keine Ausnahme․ Selektoren, Spezifität, die Regeln der Cascade, Responsivität oder Module wie Grid und Flexbox – das Feld ist riesig, den Umgang mit der Programmiersprache zu lernen ein Vorhaben, das man wirklich wollen muss․ Frameworks wie Bootstrap, Materialize oder Tailwind machen zwar vieles einfacher, trotzdem lohnt es sich, neben grundlegenden․․․

Was ist eigentlich CSS in JS?
#proptech #browser #javascript #react #server #entwicklungunddesign #css

CSS in JavaScript ist kontrovers – und kann durchaus einen Blick wert sein, nicht nur für React-Entwickler․ Wir stellen das Konzept vor und formulieren Fragen, die dir bei der Entscheidung für die CSS-in-JS-Library helfen können․
Im Grunde ist das Prinzip einfach: Anstelle von Stylesheets verpackt ihr euer CSS in Komponenten․ Die Wahl der richtigen CSS-in-JS-Library kann bei fast 50 Optionen zwar durchaus schwierig ausfallen, und am Ende kommt es auf euren jeweiligen Use-Case an․ Einige Eigenschaften haben jedoch alle Libraries gemeinsam:
Gescoptes CSS ✔️
Alle CSS-in-JS-Bibliotheken generieren einzigartige․․․

10 Jahre Bootstrap: Auf weitere 10 Jahre oder hat das Framework langsam ausgedient?
#targetingitentscheider #frameworks #css #twitterbootstrap

Jeden Dienstag blicken wir im Wochenbriefing für unsere Pro-Member auf ein wichtiges Thema der IT․ Heute geht es um CSS-Frameworks․ Den Impuls gab der zehnte Bootstrap-Geburtstag․
Bootstrap, das wohl populärste CSS-Framework aller Zeiten, hat vergangene Woche seinen zehnten Geburtstag gefeiert․ Am 19․ August war es genau zehn Jahre her, dass der erste Release des Erfolgsprojektes via GitHub released wurde․ Dahinter steckten zwei Entwickler des damals noch jungen sozialen Netzwerks Twitter․ Twitter entstand aus dem Bedarf an einem Management-Tool für Werbekampagnen zur i․․․

CSS Working Group bringt CSS Nesting Module auf den Weg
#css

Sie gehört zu den meist gewünschten CSS-Features überhaupt – die Möglichkeit, CSS-Selektoren ineinander zu verschachteln․ Das CSS Nesting Module soll genau das standardisieren und hat sich jetzt auf den steinigen Weg gemacht․
Am 31․ August ist das CSS Nesting Module im Status „First Public Working Draft“ erschienen․ Damit hat es den Status eines „Editor’s Draft“, den es seit März 2019 innehatte, endlich verlassen und darf als in der CSS Working Group (CSSWG) anerkannter Konsens angesehen werden․ Damit ist der Weg zum Standard eröffnet․
Verschachteltes CSS kennen Präprozessoren seit den Nullerjahren
Das Feature, das․․․

Programmieren lernen: Darum ist es so wichtig, die Basics nicht zu skippen
#programmierenlernen #webentwicklung #code #targetingitentscheider #css #twitter

Jeden Dienstag beschäftigen wir uns im Pro-Briefing mit einem wichtigen Thema der IT․ Heute geht es um Webentwicklung und die Empfehlung, statt CSS zunächst Tailwind zu lernen․ Den Impuls gab ein Tweet․
Programmieren – und Webentwicklung – zu lernen, ist nicht einfach․ Viele angehende Entwickler:innen sind dankbar über jeden Fingerzeig, der ihnen dabei Orientierung bietet․ Die sozialen Medien, allen voran Twitter, bieten von solchen Ratschlägen mehr als genug․ Während es sinnvoll ist, sich von Menschen beraten zu lassen, die selbst Expert:innen in einem Bereich sind, kann die bloße Fülle an․․․