Willst du besser im Code werden? Bringen Sie jemandem CSS bei.

Kürzlich hat mich ein Freund um die Programmierung gefragt. Sie ist eine absolute Anfängerin, die nichts über das Programmieren weiß. Ich beschloss, mit meinem eigenen Ausgangspunkt zu beginnen: HTML und CSS. Wir verwenden CodePen und beginnen mit dem Kopieren und Ändern vorhandener Code -Snippets. Bald wurde uns ein Lernweg eindeutig präsentiert.

Der Zweck dieses Artikels ist es nicht, Lesern, die die Grundlagen von CSS beherrscht, die Grundlagen von CSS zu vermitteln, sondern sich auf Inhalte zu konzentrieren, die Anfänger zum Lernen inspirieren und hoffentlich dazu inspirieren, Wissen an andere weiterzugeben, wenn Sie die Gelegenheit dazu haben. Es ist so erfreulich, anderen zu helfen, und ich habe im Gegenzug einige wertvolle Erfahrungen gelernt, die die Art und Weise, wie ich über Code denke, verändert haben. Win-Win!

Hier sind fünf Lektionen, die ich nach dem Unterrichten anderer CSS gelernt habe:

Lektion 1: Beginnen Sie nicht von vorne von vorne

Als ich vor 12 Jahren anfing, Web -Programmierung zu lernen, begann ich mit Layouts - mit Floats, Rändern, Füllungen und Positionsdeklarationen für die Positionierung. Dies mag heutzutage ein bisschen veraltet erscheinen, aber dort habe ich damals mit meinem neuen Programmierpartner angefangen.

Das Ergebnis ist nicht ideal.

Wie Sie vielleicht erraten haben, ist es ein Fehler, mit "Auf diese Weise eine leere Box in der Mitte des Bildschirms zu finden". Wie langweilig! Obwohl ich beeindruckt war, dass meine Fähigkeit demonstriert, wie Flexbox Elemente in der Mitte des Bildschirms positionierte (dazu später mehr), stand ich sofort mit vielen anderen Problemen, die nicht mit der Lage zusammenhielten.

"Wie kann man die Farbe ändern?"

"Kann es die Form ändern, wenn sie schwebt?"

"Welche Schriftarten können auf der Webseite verwendet werden?"

Ich dachte, es würde uns noch ein paar Wochen brauchen, um dies zu lernen.

Also wurde mein Plan, 12 Spalten mit Grids zu unterrichten, in die Warteschleife gebracht. Wir haben Chris 'benannten Farbtisch zusammen mit ein paar kopierten Code -Snippets aufgebracht und begannen zu versuchen. Zuerst haben wir die Farbe des Cassidy Williams Netflix/Netlify -Logo geändert. Wow! Es erregte sofort ihre Aufmerksamkeit.

<code><a href="https://www.php.cn/link/2080dd731c0a27c6944f58acae270b81" target="_blank"> 
</a></code>
<div></div>
<div></div>
<div></div>

<div>Hübscher</div>

Dann einige einfache Änderungen an CSS:

 <code>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; }</code>

Innerhalb weniger Minuten war mein Freund fasziniert! Es gibt keine langweilige Positionierung, über die man sich Sorgen machen muss, nur ein paar einfache Codezeilen können vertraute Dinge in etwas völlig anderes verwandeln.

Dann erkannte sie, dass sie die Farbe von irgendetwas ändern konnte! Wir haben einige bekannte Websites in unserem Browser geladen und einige Text- und Hintergrundfarben mit Devtools geändert, die alle in wenigen Minuten durchgeführt wurden. Die Mission ist abgeschlossen! Mein Freund war fasziniert.

Lektionen gelernt: Mach dir keine Sorgen über den Versuch, von Grund auf neu zu bauen. Versuchen Sie, vorhandene Ressourcen zu verwenden!

Lektion 2: Kommentare

Dies ist nicht Teil meines Plans für den Kurs, aber die Frage stellt sich, warum einige CSS -Abschnitte mit / und enden mit / damit wir dies diskutieren.

Dies ließ mich über meine Arbeit nachdenken. Ich habe wirklich nicht genug Code -Kommentare geschrieben. Das Beobachten eines neuen Programmierers, der alles kommentiert (ich meine alles ), ließ mir klar, wie nützlich die Kommentare sind, nicht nur für sich selbst, sondern auch für ein breiteres Team und sogar für Sie in Zukunft . (Sarah Drasner hat eine großartige Rede zu diesem Thema).

Hier ist die Sache: Vorher dachte ich, ich hätte ziemlich fleißig in Kommentaren geschrieben. Als ich jedoch andere beobachtete, merkte ich, wie oft ich mir ein Stück Code (insbesondere JavaScript) ansah, und wünschte, ich hätte dort ein oder zwei Zeilen hinzugefügt, um mich daran zu erinnern, was ich damals tat. Eine zehn-Sekunden-Aufgabe kann mir fünf Minuten (oder mehr) Zeit ersparen. Dies akkumuliert und jetzt arbeite ich, um mich zu verbessern.

Lektionen gelernt: Schreiben Sie mehr Notizen.

Lektion 3: Positionierung

Wir begannen mit einiger grundlegender HTML und ehrlich gesagt habe ich fast sofort meinen Ruhm verloren, als ich die Augen meines Freundes sah. (Im Gegensatz zur Bearbeitung vor geschriebenes CSS) sieht es zu langweilig aus, wenn Sie nicht sofort sehen können, wie es funktioniert. Wir haben jedoch durchgehalten und Ergebnisse erzielt.

Vertrauen Sie mir, benutze nicht 1 Pixelrand um leer herum

Das Element ist positioniert. Sie werden die Aufmerksamkeit Ihres Publikums sehr schnell verlieren. Setzen Sie ein Bild des Hundes - oder Baby Yoda oder Pizza -, solange er nicht leer ist. Dann wandten wir uns an Flexbox. Zuerst fanden wir heraus, dass es etwas zu viele CSS -Netze gab. Wir haben uns kurz das CSS -Netz angesehen, aber als wir viele Artikel darüber lesen, ist es offensichtlich, dass viele Menschen davon ausgehen, dass die Leser bereits mit CSS vertraut sind, insbesondere mit Flexbox. Mein Freund beschloss, mit Flexbox zu beginnen.

Ich gebe zu: Ich bin es so gewohnt, UI -Frameworks (insbesondere Bootstrap) zu verwenden, dass ich selten CSS selbst zur Positionierung schreibe. Ich weiß, wie es funktioniert und (meistens) Aussagen, aber ich schreibe es immer noch selten selbst aus, selbst in relativ einfachen Situationen. Der Unterricht ließ mich über meine Abhängigkeit von UI -Frameworks nachdenken. Ja, sie sind zweifellos großartig und sparen viel Zeit in unserem Projekt, aber ich erinnere mich, dass ich Bootstrap in einem aktuellen Projekt verwendet habe, das im Grunde nur zwei Seiten hat und es wahrscheinlich überhaupt nicht braucht!

Lektionen gelernt: Wenn das Projekt klein ist und die Anzahl der Elemente, die positioniert werden müssen, minimal ist, sollten Sie den Framework aufgeben und Code von Grund auf neu schreiben! Das Endergebnis wird leichter, schneller und befriedigender sein!

Lektion 4: Artensett

Ich mag Typografie. Ich hatte das Glück, in den letzten Jahren mit großartigen Designern zusammenzuarbeiten, und es hat mir wirklich geholfen, die Nuancen der Typografie zu erfassen. Es ist erstaunlich, wie Änderungen zu Dingen wie Linienhöhe und Wortabständen das Design von normal zu ausgezeichnet heben können. Ich möchte, dass die Neulinge, die ich lerne, zu meistern. Nun, ich muss mich nicht darum kümmern, denn das einzige, an dem ich anfangs interessiert war, war die Änderung der Schriftarten, und dann war die Anzahl der Schriftarten, die wir verwenden konnten, von entscheidender Bedeutung. Die Wahl ist nahezu unbegrenzt, die Dienste, die Web -Schriftarten und Gießereien anbieten, sind so weit wie möglich gestiegen, an dem in den letzten Jahren alles möglich ist, sehr schnell und einen kleinen Einfluss auf die Ladezeit.

Aber die Sache mit Designern (und Front-End-Entwicklern wie mir) ist Folgendes: Wir sind vielleicht ein wenig engstirnig, wenn es um die Auswahl der Schriftart geht. Entwürfe halten sich in der Regel an denselben Schriftarten (Roboto und offene Sans?) Mit demselben Service, da wir wissen, dass sie leicht zu implementieren und zu arbeiten sind. Die Erkundung von Schriftarten mit einem Neuling zwang mich, über alte Standards hinauszugehen und etwas Neues auszuprobieren. Ich suche jetzt nach neuen Kombinationen und optimiere, wie sie auf dem Bildschirm funktionieren und wie sich das Aussehen und das Gefühl des Designs insgesamt auswirkt. Kurz gesagt, das Unterrichten anderer über Typografie hat meine eigene Typografiegeschichte verbessert, die möglicherweise um 2017 festsitzt.

Lektionen gelernt: Machen Sie mit den neuesten Updates in der Typografie auf dem Laufenden.

Lektion 5 :: Hover macht alles Spaß

Bisher läuft alles gut, aber wie Sie sich vorstellen können, sind die Dinge immer noch ziemlich statisch. Ohne wirkliche Pläne fügten wir versehentlich den Schwebeffekt des Elements hinzu, der ihre Aufmerksamkeit sofort erregte, wie beim ersten Mal die Farbe zu ändern!

Hover fügt Interaktionen hinzu und macht es einfach zu beeindrucken, was sie für Anfänger perfekt macht. Wenn Sie Objekte skalieren, ändern Sie die Box von Quadrat zum Kreis, ausblenden Inhalt - alles kann leicht erfolgen. Daher ist das Umschwingen die ideale Möglichkeit für neue Programmierer, sofortige Ergebnisse zu erzielen. Hier ist die Sache: "'Spiel wie dieses'" wird andere Türen öffnen. "Was ist, wenn ich das nur mache?" Dies ist eine Frage, die sich viele von uns in unserer täglichen Arbeit selten stellen. Mit klaren Designs gibt es nur wenige Möglichkeiten zum Spielen, und es gibt auch nur wenige Möglichkeiten zu experimentieren.

Hier ist die letzte Lektion: Nehmen Sie sich Zeit zum Spielen. Nur gefragt zu werden: "Wie lässt du dieses Ding das tun?" zwingt mich, neue Dinge zu lernen, neue Dinge über CSS zu lernen und zu verstehen, was ich in meinen täglichen Routine zurückbringen kann. Experiment (oder noch besser spielen) macht mich zu einem besseren Designer und ich werde mehr tun.

Lektionen gelernt: Nehmen Sie sich Zeit zum Spielen.

abschließend

Wenn meine Zeit für Neuling CSS mir etwas beigebracht hat, schreibe ich selten Code wieder von Grund auf neu. Code -Snippets und automatische Vervollständigung haben mir Stunden Zeit gespart, aber diese Annehmlichkeiten ließen mich etwas sehr einfaches vergessen. Etwas, das ich wissen sollte. Durch das Unterrichten anderer hat sich meine Kodierung insgesamt verbessert, selbst wenn sie nur 15 Minuten dauert, und mein Horizont ist offen für neue Ideen und Techniken, die möglicherweise noch nicht berücksichtigt wurden.

Wie für meine Freunde? Nun, sie war für kurze Zeit so besessen von CSS, dass sie zusammen waren, dass sie jetzt einen Online -Kurs besuchte, der HTML enthielt, und jetzt, wo sie wusste, was HTML tun konnte, schien es nicht so langweilig zu sein!

Das obige ist der detaillierte Inhalt vonWillst du besser im Code werden? Bringen Sie jemandem CSS bei.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!