Möchten Sie besser im Programmieren werden? Bringen Sie jemandem CSS bei.

Ein Freund von mir bat mich kürzlich, ihr das Programmieren beizubringen. Sie war ein absoluter Anfänger und hatte keine Ahnung, was Programmieren wirklich bedeutet. Ich beschloss, dort anzufangen, wo ich angefangen hatte: HTML und CSS. Mit CodePen begannen wir, Pens zu forken und sie zu verändern. Bald begann sich ein Lernpfad abzuzeichnen.

Ziel dieses Artikels ist es nicht, denen, die es bereits wissen, grundlegendes CSS beizubringen, sondern vielmehr die Dinge hervorzuheben, die einen Neuling inspiriert haben, und Sie hoffentlich zu inspirieren, Wissen weiterzugeben, wenn sich die Gelegenheit ergibt. Es war gut, jemandem zu helfen, und ich habe dabei einige wirklich wertvolle Lektionen gelernt, die die Art und Weise, wie ich über meinen Code denke, verändert haben. Win-Win!

Also, los geht's: Fünf Lektionen, die ich beim Unterrichten von CSS gelernt habe.

Lektion 1: Nicht bei Null anfangen

Als ich vor 12 Jahren mit der Webentwicklung begann, startete ich mit dem Layout – Positionierung mit Floats, Margins, Paddings und Positionsdeklarationen. Das mag heutzutage veraltet erscheinen, aber trotzdem bin ich sofort mit meiner neuen Coding-Kumpanin dorthin gegangen.

Das lief nicht so gut.

Wie Sie sich vielleicht vorstellen können, war es ein Fehler, mit etwas wie „Hier ist, wie man eine leere Box in der Mitte des Bildschirms positioniert“ zu beginnen. Wie uninspiriert! Und obwohl ich von meiner eigenen Fähigkeit beeindruckt war, zu demonstrieren, wie Flexbox ein Element in der Mitte des Bildschirms positionieren kann (mehr dazu später), sah ich mich sofort mit vielen zusätzlichen, nicht-positionalen Fragen konfrontiert.

„Wie ändert man also die Farben?“

„Kann es sich beim Darüberfahren mit der Maus verformen?“

„Welche Schriftarten können Sie im Web verwenden?“

Ich dachte, wir wären noch Wochen davon entfernt.

Also flog mein Plan, das 12-Spalten-Raster zu lehren, aus dem Fenster und wir holten Chris' Farb-Chart mit Namen neben ein paar geforkten Pens heraus und fingen an zu spielen. Zuerst änderten wir die Farben von Cassidy Williams' Netflix/Netlify-Logo. Wow! Sofortiger Erfolg.

<a class="container" href="https://netlify.com" target="_blank"> 
  <div class="logo">
    <div class="uno"></div>
    <div class="dos"></div>
    <div class="tres"></div>
  </div>
  <div class="name">Prettier</div>
</a>

Dann ein paar einfache Tweaks am CSS

body {
  background: #F9F2DB;
  color: #092935;
  font-size: 50px;
}


a {
  color: #092935;
}


.logo .uno, .dos, .tres {
  background: #C61561;
}

.logo .dos {
  box-shadow: 0 0 20px #F9F2DB;
}

.logo::before {
  background: #F9F2DB;
}


.name {
  letter-spacing: 8px;
}

Innerhalb weniger Minuten war meine Freundin begeistert! Es gab keine langweilige Positionierung zu berücksichtigen, nur ein klares Beispiel dafür, wie ein paar einfache Codezeilen etwas so Vertrautes in etwas völlig anderes verwandeln können.

Dann dämmerte es mir, dass man die Farbe von allem ändern kann! Wir luden ein paar bekannte Websites im Browser und änderten die Farben von Text und Hintergründen mit DevTools, alles in ein paar Minuten. Mission erfüllt! Meine Freundin war begeistert. 

Gelernte Lektion: Machen Sie sich keine Sorgen, etwas von Grund auf neu zu erstellen. Spielen Sie mit dem, was bereits da ist! 

Lektion 2: Kommentare

Das hatte ich nicht für meinen geplanten Kurs vorgesehen, aber die Frage, warum einige Teile von CSS mit /* beginnen und mit */ enden, kam auf, also machten wir weiter. 

Das brachte mich wirklich zum Nachdenken über meine eigene Arbeit. Ich kommentiere meinen Code wirklich nicht genug. Jemanden, der neu ist, beim Kommentieren von allem (und ich meine allem) zuzusehen, erinnerte mich daran, wie hilfreich Kommentare sind, nicht nur für Sie selbst, sondern auch für ein breiteres Team oder sogar für das zukünftige Ich. (Sarah Drasner hat einen großartigen Vortrag zu diesem Thema).

Und hier ist die Sache: Bis dahin dachte ich, ich würde ziemlich sorgfältig kommentieren. Aber jemanden anders dabei zuzusehen, ließ mich erkennen, wie oft ich ein Stück Code (besonders JavaScript) ansehe und mir wünschte, ich hätte eine Zeile oder zwei hinzugefügt, um mich daran zu erinnern, was ich tat. Eine zehntsekündige Aufgabe hätte mir vielleicht fünf (oder sogar mehr) Minuten später gespart. Das summiert sich und ist etwas, woran ich jetzt arbeite.

Gelernte Lektion: Kommentieren Sie mehr. 

Lektion 3: Positionierung

Wir begannen mit etwas einfachem HTML, und ehrlich gesagt, ich sah, wie die Augen meiner Freundin fast sofort glasig wurden. Es sieht einfach so langweilig aus, wenn man nicht sofort sieht, dass es etwas tut (im Gegensatz zur Bearbeitung von vorformuliertem CSS). Wir blieben aber dran und erzielten Ergebnisse.

Glauben Sie mir, fangen Sie nicht damit an, leere <div>-Elemente mit 1-Pixel-Rändern darum herum zu positionieren. Sie verlieren Ihr Publikum sehr schnell. Packen Sie ein Bild von einem Hund hinein – oder Baby Yoda oder eine Pizza – solange es etwas anderes ist als ein leeres Element.

Dann wandten wir uns Flexbox zu. Tatsächlich fanden wir CSS Grid am Anfang etwas zu viel. Wir haben uns kurz mit CSS Grid beschäftigt, aber wenn man viele Artikel darüber liest, wird klar, dass viele davon ausgehen, dass der Leser bereits mit CSS, insbesondere mit Flexbox, vertraut ist. Meine Freundin entschied sich, mit Flexbox zu beginnen.

Eine eigene Einsicht: Ich bin es so gewohnt, UI-Frameworks (insbesondere Bootstrap) zu verwenden, dass ich nur noch selten etwas in Flexbox positioniere, indem ich das CSS selbst schreibe. Ich weiß, wie es funktioniert und (die meisten) Deklarationen, aber ich schreibe es immer noch selten selbst aus, selbst in Situationen, in denen es relativ einfach wäre. Das Unterrichten brachte mich dazu, über meine Abhängigkeit von UI-Frameworks als Ganzes nachzudenken. Ja, sie sind zweifellos erstaunlich und sparen uns Tonnen von Zeit bei Projekten, aber ich erinnere mich, dass ich Bootstrap bei einem kürzlichen Projekt verwendet habe, das im Grunde zwei Seiten umfasste und es wahrscheinlich nicht brauchte! 

Gelernte Lektion: Wenn das Projekt etwas Kleines mit einer minimalen Anzahl von Elementen zur Positionierung ist, dann sollten Sie das Framework verwerfen und von Grund auf neu codieren! Das Endergebnis wird leichtgewichtig, schnell und viel befriedigender sein!

Lektion 4: Typografie

Ich liebe Typografie. Ich hatte das Glück, in den letzten Jahren mit großartigen Designern zusammenzuarbeiten, und das hat mir wirklich geholfen, die Nuancen der Typografie zu verstehen. Es ist erstaunlich, wie Änderungen an Dingen wie Zeilenhöhe und Buchstabenabstand ein Design von durchschnittlich zu erstaunlich machen können. Das wollte ich meiner eifrigen neuen Schülerin vermitteln. Nun, ich hätte mir die Mühe sparen können, da das Einzige, was (anfänglich) von Interesse war, das Ändern von Schriftarten und dann, für mich entscheidend, die schiere Anzahl von Schriftarten, die uns zur Verfügung stehen. Die Auswahl ist fast grenzenlos und die Dienste und Gießereien, die Webfonts anbieten, sind in den letzten Jahren explodiert, bis zu dem Punkt, an dem alles möglich ist, schnell und mit geringen Auswirkungen auf die Ladezeiten.

Aber das ist die Sache mit Designern (und Frontend-Entwicklern wie mir): Wir können bei der Schriftauswahl etwas engstirnig sein. Designs bleiben tendenziell bei denselben Schriftarten von denselben Diensten (Roboto und Open Sans, jemand?) hängen, weil wir wissen, dass sie einfach zu implementieren sind und funktionieren. Die Erkundung von Schriftarten mit jemandem, der neu in diesem Beruf ist, zwang mich, über die alten Staples hinauszublicken und ein paar neue Dinge auszuprobieren. Ich suche jetzt nach neuen Paarungen, die gut zusammenarbeiten, und beschäftige mich damit, wie sie auf dem Bildschirm funktionieren und das gesamte Erscheinungsbild eines Designs beeinflussen. Kurz gesagt, jemand anderem etwas über Typografie beizubringen, hat meine eigene Reise mit Typografie verbessert, die wahrscheinlich bei etwa 2017 stecken geblieben war. 

Gelernte Lektion: Bleiben Sie auf dem Laufenden über Typografie.

Lektion 5. :hover macht alles zum Spaß

Bis zu diesem Punkt lief es ganz gut, aber wie Sie sich wahrscheinlich vorstellen können, war es immer noch ziemlich statisch. Ohne wirkliche Planung sind wir auf das Hinzufügen eines Hover-Effekts auf ein Element gestoßen und es war ein sofortiger Hit, genau wie das Ändern der Farben zum ersten Mal!

Hovers fügen Interaktivität hinzu und beeindrucken leicht, was sie großartig für Neulinge zum Spielen macht. Skalierende Objekte, Ändern einer Box von quadratisch zu rund, Verbergen von Inhalten – dies sind die Arten von Dingen, die so einfach gemacht werden können, dass Hovers eine ideale Möglichkeit für einen neuen Programmierer sind, sofortige Ergebnisse zu erzielen. Und hier ist die Sache: „Spielen“ wie dieses öffnet andere Türen. „Was wäre, wenn ich das einfach tue?“ ist etwas, das viele von uns sich in unserem täglichen Job selten fragen können. Bei vordefinierten Designs gibt es oft wenig Möglichkeit zu spielen und ebenso wenig Möglichkeit zu experimentieren.

Hier ist also die letzte Lektion: Nehmen Sie sich Zeit zum Spielen. Allein die Frage „Wie mache ich, dass dieses Ding das tut?“ hat mich gezwungen, neue Dinge zu lernen, zu sehen, was es Neues in CSS gibt, und zu sehen, was ich in meine tägliche Arbeit zurücknehmen kann. Experimentieren (oder besser noch, Spielen) hat mich zu einem besseren Designer gemacht, und ich werde mehr davon tun.

Gelernte Lektion: Nehmen Sie sich Zeit zum Spielen.

Fazit

Wenn mich meine Zeit beim Unterrichten von CSS für einen Neuling eines gelehrt hat, dann, dass ich selten noch Code von Grund auf neu schreibe. Code-Schnipsel und Autovervollständigung sparen mir Stunden, aber es sind genau diese Annehmlichkeiten, die mich einige wirklich grundlegende Dinge vergessen lassen. Dinge, die ich wissen sollte. Indem ich jemand anderem beibringe, selbst wenn es nur 15 Minuten hier und da sind, hat sich mein Code im Allgemeinen verbessert und meine Augen sind offen für neue Ideen und Techniken, die ich sonst vielleicht nicht in Betracht gezogen hätte.

Und was meine Freundin angeht? Nun, sie war von CSS in unserer kurzen Zeit so begeistert, dass sie jetzt einen Online-Kurs macht, der HTML beinhaltet, was gar nicht mehr so langweilig erscheint, seit sie weiß, wozu es fähig ist!