Aus irgendeinem Grund habe ich in letzter Zeit viel darüber nachgedacht, was es braucht, um in die Webdesign-Branche einzusteigen und CSS zu lernen. Ich vermute, das hat etwas mit Keith Grants Beitrag von Anfang dieses Monats über ein CSS-Mentalmodell zu tun, in dem er von einem „gemeinsamen Kern für CSS“ spricht.
Wir brauchen solche gemeinsamen Kern-Tricks für CSS. Nicht „Tricks“ im alten Sinne (wie man einen gefälschten Gradientenrand erstellt), sondern mentale Muster: Wege, das Problem in unseren Köpfen zu formulieren, damit wir Probleme in ihre Bestandteile zerlegen und wiederkehrende Muster erkennen können. Diejenigen von uns, die die Sprache tiefgehend verstehen, tun dies intern. Wir müssen anfangen, diese mentalen Muster zu destillieren, die wir zum Verständnis von Layout und Positionierung sowie zur Arbeit mit relativen Einheiten verwenden, damit wir sie anderen artikulieren können.
In diesem Sinne hat Rachel Andrew auch darüber geschrieben, wie man CSS lernt, aber in diesem Fall konzentriert sie sich mehr auf technische CSS-Details.
Für vieles in CSS müssen Sie sich keine Sorgen machen, Eigenschaften und Werte auswendig zu lernen. Sie können sie nachschlagen, wenn Sie sie brauchen. Es gibt jedoch einige wichtige Grundlagen der Sprache, ohne die Sie Schwierigkeiten haben werden, sie zu verstehen. Es lohnt sich wirklich, etwas Zeit darauf zu verwenden, sicherzustellen, dass Sie diese Dinge verstehen, da dies Ihnen auf lange Sicht viel Zeit und Frustration ersparen wird.
Das passt gut zu Andy Bells Argument „CSS sucks nicht“. Andy sagt, dass der Grund, warum die Leute CSS so oft angreifen, vielleicht darin liegt, dass sie es einfach nicht grundlegend verstehen und dadurch nicht respektieren, warum es so funktioniert, wie es funktioniert.
Es wird ermüdend, so viel meiner Zeit damit zu verbringen, eine der drei Säulen des Webs zu verteidigen: CSS. Es sollte gleichberechtigt mit HTML und JavaScript stehen, um zugängliche, fortschrittlich verbesserte Websites und Webanwendungen zu produzieren, die jedem helfen, das zu erreichen, was er erreichen muss.
Als ich diese und andere Beiträge las, konnte ich nicht aufhören darüber nachzudenken, welchen Rat ich einem aufstrebenden Entwickler geben würde, der sich für Webdesign und CSS interessiert – wo würde ich ihm empfehlen, anzufangen? Es gibt so viel zu behandeln, dass mir allein der Gedanke daran Kopfzerbrechen bereitet.
Persönlich beginne ich oft mit den Grundlagen von HTML und führe die Leute langsam an CSS-Eigenschaften wie color oder font-family heran. Aber diese Art von Rat ist im Allgemeinen nur nützlich, wenn Sie direkt neben jemandem sitzen und Zeit haben, alles über HTML und CSS zu erklären: wie man eine Seite layoutet, wie man die Leistung handhabt, wie man über progressive Verbesserung nachdenkt usw. Diese Themen allein sind einen monatelangen Workshop wert – und das ist erst der Anfang!
Wo also anfangen? Welche Art von Ratschlag würde einem Studenten langfristig helfen?
Meine Erfahrung in der Branche entspricht wahrscheinlich der vieler anderer Webdesigner: Ich habe dafür keine Schule besucht. Ich habe Dinge selbst herausgefunden, während ich Referenzseiten wie CSS-Tricks und Smashing Magazine genutzt habe, um Lücken zu füllen. Ich würde mit einem Projekt beginnen (wie dem Erstellen einer Website für meine High-School-Band – und nein, ich werde Ihnen den Namen nicht verraten) und dabei würde ich beiläufig etwas über Typografie, Sass, Build-Tools sowie zugängliches, handgeschriebenes Markup lernen.
Hören Sie mir zu, aber ich glaube nicht, dass der beste Weg, in die Webdesign-Branche einzusteigen, darin besteht, das neueste Gimmick oder Widget zu lernen. Ja, irgendwann müssen Sie sich damit befassen. Oder vielleicht auch nicht. Irgendwann ist es gut, Flexbox und Grid fest im Griff zu haben und sich ein paar Eigenschaften zu merken. Aber ich möchte Webdesignern das Fischen beibringen und sicherstellen, dass sie sich für die Zukunft rüsten können. Und der beste Weg, um CSS zu fischen, wird wahrscheinlich weder in einem bestimmten Buch noch in einem Klassenlehrplan zu finden sein. Stattdessen glaube ich, dass es am besten ist, etwas ganz anderes zu empfehlen.
Mein Rat lässt sich in nur vier Worten zusammenfassen: Besorgen Sie sich einen RSS-Reader.
Nachdem ich darüber nachgedacht hatte, stellte ich fest, dass der nützlichste Rat, den ich geben kann, ist, sich in die Community zu integrieren – und für mich geschah das über RSS. Finden Sie eine Menge Blogs und abonnieren Sie sie. Mit der Zeit lernen Sie nicht nur das Handwerk, sondern haben auch eine stattliche (und hoffentlich organisierte) Sammlung von Ressourcen, die Grundlagen, Tricks, Standards, persönliche Schwierigkeiten und Neuigkeiten abdecken, unter vielem, vielem mehr.
So lerne ich auch heute noch Webdesign. RSS ist das wichtigste Werkzeug, das mir hilft, weiterhin über das Web zu lernen – von der Arbeit mit winzigen CSS-Eigenschaften bis hin zu riesigen Frameworks. Sicher, Twitter ist ein guter Ort, um von Schwergewichten der Webdesign-Branche zu lernen (und sogar mit ihnen in Kontakt zu treten), aber es gibt keine bessere Technologie als RSS, um sich ständig über die Denkweise von Leuten zu CSS und Webentwicklung zu informieren.
Daher ermutige ich Sie (ja, *Sie*), sich einen RSS-Reader zuzulegen, wenn Sie noch keinen haben, oder den, den Sie haben, abzustauben, wenn es schon eine Weile her ist. Ich benutze Reeder 3 auf OSX und iOS und kombiniere das mit Feedbin. Von dort abonnieren Sie eine Menge Blogs oder folgen Sie vielen Leuten auf Twitter, um deren Websites zu finden. Es gibt keinen Mangel an Material oder Quellen da draußen!
Das klingt nach einer albernen Empfehlung, aber die Einbindung in die Webdesign-Community ist wichtiger als das Erlernen eines coolen CSS-Tricks. Sie schaffen eine Umgebung, in der Sie ständig neue Dinge für die Zukunft lernen können. Und ich verspreche, sobald Sie damit anfangen, ist es nicht so einschüchternd, Leute zu finden, denen Webentwicklung am Herzen liegt und letztendlich CSS zu lernen, wie es alleine sein könnte.
Welche Websites sollten Sie abonnieren? Nun, Stuart Robson hat eine wunderbare Liste aller Websites erstellt, die er über RSS abonniert – Sie sollten diese Datei herunterladen und direkt in Ihren RSS-Reader einfügen können. Auch Rachel Andrew hat vor einiger Zeit eine großartige Liste von Websites erstellt, als sie fragte „Was passiert in CSS“? Und natürlich ist unser eigener Newsletter, This Week in Web Design and Development, sicherlich ein guter Ausgangspunkt. Apropos E-Mails und Newsletter – Dev Tips von Umar Hansa ist eine weitere großartige Ressource, bei der ich ständig neue Dinge über die DevTools von Chrome lerne.
Welche Websites mögen Sie aber? Was ist die beste Ressource, um mit CSS auf dem Laufenden zu bleiben? Lassen Sie es uns in den Kommentaren unten wissen!
Es mag ein Fehler sein, von einem „gemeinsamen Kern für CSS“ zu sprechen, da Common Core wegen seiner Ideologie von „Methode vs. Ergebnis“ für Hard Skills wie Mathematik und technisches Denken offen verspottet wird; etwas, das gute CSS-Code-Schreiber benötigen, um guten Code zu erstellen.
Auch nur eine Anmerkung: Wenn ich CSS unterrichte, beginne ich mit dem Box-Modell. Font-family und Farbe sind nicht annähernd so wichtig wie das Box-Modell.
Ich stimme zu, das ist tatsächlich ein guter Anfang! Das mache ich auch. Ohne das Box-Modell zu verstehen, gerät man in ein Chaos haha
Hm, ich stimme zu, dass das Box-Modell sehr wichtig ist. Tatsächlich ist es grundlegend für die Arbeit mit jedem Layout oder für noch grundlegendere Dinge mit CSS.
Offensichtlich ist dies sehr subjektiv, aber ich unterrichte seit Jahren CSS und stimme der Prämisse des Artikels zu, mit Typografie zu beginnen und von dort aus fortzufahren.
Dies gibt den Leuten ein gewisses Verständnis für die Sprache, bevor Sie komplexe Konzepte mit Box-Modus, Flexbox und jetzt Grid einführen.
„wie das Erstellen einer Website für meine High-School-Band – und nein, ich werde dir den Namen verraten“
Wie lautet also der Name?
CSS-Tricks ist ein perfekter Ort, um CSS-Techniken zu lernen. Codepen.io und Scrimba sind auch nicht schlecht.
Tolle Ratschläge. Und wenn Sie nicht für einen RSS-Reader bezahlen möchten, können Sie Feedly verwenden, das kostenlos ist.
Als ich damals anfing, CSS zu lernen, war es für mich wirklich schwer zu verstehen, was mit CSS möglich war und was nicht.
Es half, dass CSS3 damals noch nicht existierte oder schicke Tools wie Präprozessoren wie Less oder Sass oder Postprozessoren wie PostCSS.
Was ich am Ende in meinem Kopf dachte, war, dass alles ein Quadrat – eine Box – ist und diese Boxen entweder übereinander, nebeneinander oder übereinander gestapelt erscheinen können. Wenn ich Websites sah, selbst wenn etwas schick aussah, dachte ich, dass es eigentlich ein Satz von Boxen sei und ich mir nur überlegte, wie ich diesen Effekt mit nur Quadraten replizieren und dem Benutzer die Illusion geben kann, dass er zum Beispiel abgerundete Ecken hat.
Dieser mentale Ansatz hat mir sehr geholfen. Plötzlich musste ich mich nur noch an das Box-Modell und eine Reihe von Eigenschaften dieser „Boxen“ erinnern. Dann ging ich zum Positionieren usw. über und nahm es von dort aus Schritt für Schritt in Angriff.
Ich würde mich nicht einmal mit Layouts wie Flexbox oder Grid beschäftigen, bevor ich einen Junior-Entwickler versuche, ein Layout ohne sie zu erstellen, damit er dann den Unterschied und die Probleme, die sie lösen, sehen kann.
Das größte Problem mag sein, dass man einige Grundkenntnisse benötigt, um viele Blogbeiträge von heute zu verstehen. Es kann (vielleicht) sehr frustrierend werden, wenn man eine Sache verstehen will und zu viele andere Dinge nachschlagen muss.
Aber am Ende stimme ich Ihnen voll und ganz zu. Über CSS zu lesen ist der beste Weg, es zu lernen.
Hallo Chris! Ich habe hier auch eine ähnliche Liste von Entwickler-Blogs gestartet
https://github.com/endymion1818/awesome-developer-blogs/
Meine Absicht war es, jeden einzelnen Blog aufzulisten, sobald ich ihn entdeckte, damit ich zurückgehen konnte (auch wenn sie kein RSS anbieten) und uns ermutigen, weiterhin auf unseren eigenen Blogs zu veröffentlichen, anstatt auf gehosteten Optionen wie Medium.
Ich hoffe, dass es Stu’s bereits großartige Liste ergänzen kann.
Danke für den Rat. Ich kann den Bedarf an „Learning by Doing“, also dem Lesen von Artikeln, nicht genug betonen. Ich nutze Twitter, um großartige Ressourcen zu finden, aber ich werde diese neue Methode, die Sie vorgeschlagen haben, mit einem RSS-Reader ausprobieren.