Wie ich in fünf Tagen kostenlos die Front-End-Webentwicklung gelernt habe

Letzte Woche habe ich mich der Herausforderung gestellt, in nur fünf Tagen ein fortgeschrittener Front-End-Entwickler zu werden. So habe ich es gemacht.

Dies ist nicht mein erstes Lernexperiment. Vor zehn Jahren forderte ich mich heraus, in 17 Tagen Französisch zu lernen, und es gelang mir. Seitdem habe ich ganze Studiengänge online absolviert (sowie einige Graduiertenkollegs offline), mehr Sprachen gelernt und mehrere Unternehmen gegründet.

Ich hätte dies nicht tun können, ohne effektive Lernstrategien zu entwickeln, von denen viele dem allgemein anerkannten Modell widersprechen, wie man etwas Neues lernt. Einige von ihnen haben sogar die Debatte an den Ivy League-Universitäten beflügelt.

Obwohl ich viel Erfahrung mit technischen Teams hatte, beginne ich nur mit technischen Konzepten auf hohem Niveau und praktisch ohne praktisches Wissen.

Sprachenlernen als Analogon

Ich habe mit einem Programm, das viele Hacks und skurrile Techniken kombiniert, Französisch gelernt, um fließend zu sprechen. Könnte ich analoge Techniken verwenden, um die Front-End-Entwicklung zu lernen? Bisher sieht es so aus, als ob ich es kann.

Meine Sprachlerntechniken umfassten:

  • Audio / visuelle Anleitung - Hören Sie sich die MP3s von Michel Thomas an
  • Immersion - Aufenthalt in einem französischsprachigen Land
  • Benchmarking - Lesen bekannter Kinderbücher auf Französisch und Hören französischer Musik
  • Vertrauensbildende Hacks - Essays über mich selbst schreiben und Füllwörter lernen
  • Auswendiglernen - Verbtabellen ausschreiben

Jeder hat ein Analogon in der Front-End-Codierung:

  • Tutorial-Videos auf Youtube ansehen
  • Ich tauche in einen Entwicklungssprint ein
  • Benchmarking meiner Lieblingsseiten mit der Entwicklerkonsole
  • Sprechen Sie mit anderen Entwicklern, um Feedback und Ratschläge zum Workflow zu erhalten
  • Auswendiglernen von CSS-Elementen Spickzettel

Dies war die Blaupause für meine Lernstrategien.

Der bisherige Fortschritt

Ich bin 48 Stunden in und hier bin ich:

  1. Ich habe mich im Sprint eines meiner Nebenprojekte den Front-End-Geschichten verschrieben. Insbesondere erstelle ich zwei Seiten: eine Zielseite und eine detailliertere Produktseite.
  2. Gleich zu Beginn habe ich ein Basisprojekt gestartet (nur zwei Textdateien mit HTML und CSS) und ungefähr eine Stunde damit verbracht, HTML für die Zielseite durchzuarbeiten. Wie sich herausstellt, werde ich das Ganze rauswerfen und von vorne beginnen, aber alle Videos, die ich gesehen habe, werden in einen Kontext gebracht.
  3. Ich war bei drei Mittag- und Abendessen mit erfahrenen Programmierern, wo wir über den Workflow gesprochen haben.
  4. Der Löwenanteil meiner bisherigen Zeit war Tutorial-Videos und Code-Komplettlösungen auf Youtube gewidmet. Ehrlich gesagt war es eine der intensivsten Lernerfahrungen meines Lebens, die ich Ihnen ausführlich mitteilen werde. Wenn Sie also verrückt genug sind, in meine Fußstapfen zu treten, können Sie dieselben Materialien verwenden.

Youtube Videos

Obwohl ich nicht unbedingt vorhatte, so viel Zeit mit Tutorial-Videos zu verbringen - oder so weit und tief mit ihnen zu gehen -, bin ich unglaublich froh, dass ich das getan habe. Es hat mich schon früh mit vielen Konzepten und Technologien vertraut gemacht, und ich kann es nur empfehlen.

Es steht in krassem Gegensatz zu dem, was die meisten Leute empfehlen, nämlich das Nötigste zu lernen und festzuhalten. Wenn Sie langsam lernen, ist das vielleicht am besten, aber wenn Sie Konzepte schnell verstehen, ist es meiner Meinung nach besser, wenn Sie tief gehen schneller. Außerdem waren es nur zwei Tage Youtube. . . Das ist nicht viel im Kontext.

Um so viel Material in so kurzer Zeit zu verbrauchen, musste ich alle Videos mit doppelter Geschwindigkeit ansehen. Ich bin als Podcast- / Hörbuchsüchtiger sehr daran gewöhnt und empfehle, es in Ihrer Lernroutine zu verwenden, da es Ihre Produktivität verdoppelt. Sie können zunächst mit 1,25x oder 1,5x beginnen, wenn 2x zu schnell ist.

Außerdem schreibe ich zwei oder drei Zeilen mit Notizen zu den Schlüsselkonzepten, die ich aus jedem Video lerne. Ich bezweifle, dass ich irgendetwas von dem, was ich geschrieben habe, noch einmal lesen werde, aber das ist in Ordnung, weil ich es hauptsächlich zur Konsolidierung und zum Gedächtnis mache.

Also ohne weiteres, hier sind die Videos, die ich in den letzten 48 Stunden gesehen habe (machen Sie sich bereit).

1. Einführung in die Django-Webentwicklung (12 Videos)

Da ich mit Python bereits einigermaßen vertraut bin, dachte ich, Django (Pythons Webframework) wäre der natürliche Ausgangspunkt. Rückblickend halte ich es für eine viel bessere Idee, mit HTML, CSS und Javascript zu beginnen. Tatsächlich würde ich davon ausgehen, dass Menschen, die sagen, dass sie programmieren möchten, wirklich meinen, dass sie Webentwicklung lernen möchten. Welches ist genau das, was mir passiert ist.

Diese Wiedergabeliste gab mir jedoch eine viel bessere Vorstellung davon, wie Backends wie Django (und Rails) HTML generieren. Wenn Sie Python bereits gelernt haben, ist dies kein schlechter Ausgangspunkt, nur für den Kontext.

2. Bootstrap Tutorial für Anfänger (14 Videos)

Mein Entwicklerteam sagte mir, ich solle Bootstrap lernen. Das war also die erste Wiedergabeliste, die ich gefunden habe. Es ist ziemlich gut, obwohl in Kürze eine noch bessere Wiedergabeliste erscheint. Aber es schadet nicht, es zu wiederholen.

3. UIkit-Webframework (10 Videos)

UIkit wurde im Vorbeigehen in einem der obigen Bootstrap-Videos erwähnt. Ich war neugierig und habe mir dieses Intro zur UIkit-Wiedergabeliste angesehen. Damit wurde Bootstrap als nur eine Option (wenn auch die beliebteste) für den schnellen Aufbau des Frontends relativiert, aber es gibt Alternativen.

4. Derek Banas Tutorials (3 Videos)

Auf der Suche nach weiteren Bootstrap-Anweisungen bin ich auf Derek Banas 'Videos gestoßen. Ich habe seinen Stil sofort geliebt - sehr intensive Beispiele nacheinander, die all die verschiedenen Elemente und Möglichkeiten in jedem Framework veranschaulichen. Diese zeichnen eine Analogie zum Erlernen einer Sprache und decken die Verbtabellen ab.

5. learnCode Academy (1 Video)

Dies war der Zeitpunkt, an dem die Dinge wirklich sehr, sehr interessant wurden. Dieser Kanal ist der Goldstandard für das Codieren von Videos, und dieses Intro-Video gab mir einen großartigen Überblick über all die verschiedenen Bereiche, die ich kennen musste, um Entwickler zu werden.

Wenn Sie sich das Codieren beibringen möchten, ist dies der beste Ausgangspunkt.

Hinweis: Hier ist die im Video beschriebene Mind-Map - eine großartige Ressource.

6. Web Development Tutorial für Anfänger (29 Videos)

Diese Wiedergabeliste ist einfach brillant und der beste Ort, um die Webentwicklung zu lernen, die ich je gefunden habe. Der Vollständigkeit halber beziehe ich meine gesamte Reise mit ein, aber ich würde diese Wiedergabeliste als Kernmaterial empfehlen. Es enthält HTML, CSS, Bootstrap, FTP, Javascript, Github, JQuery, Live Reload, Grunt und vieles mehr.

7. Javascript-Tutorial für Anfänger (10–12 Videos, da einige in der obigen Wiedergabeliste enthalten sind)

Zu diesem Zeitpunkt war ich süchtig. Selbst bei 2-facher Geschwindigkeit war die letzte Wiedergabeliste ziemlich anstrengend, aber ich fühlte mich sehr motiviert, direkt in mehr Javascript zu springen. Diese Wiedergabeliste enthält das Durchlaufen des DOM und modulare Javascript-Konzepte.

8. Was ist "Dies" in Javascript (4 Video)

Als das Javascript-Tutorial anfing, sich mit modularen Konzepten zu befassen, stellte ich fest, dass ich das 'this'-Konzept nicht wirklich verstand. Also habe ich nach Erklärungen gesucht und dies sind die Videos, mit denen ich dieses schlüpfrige Konzept verstanden habe.

9. Front-End-Workflow (12 Videos)

Zu diesem Zeitpunkt wurde mir klar, dass es Tools gab, die die Produktivität steigern konnten. Meine früheren Erfahrungen mit HTML und CSS waren schmerzlich klobig und langweilig, daher war ich äußerst glücklich, dies im Vorfeld zu erfahren. Ich habe definitiv vor, Jade oder Emmet und SASS vom ersten Tag an zu verwenden.

10. Verwenden der Chrome Developer Tools (6 Videos)

Viele der Videos verwenden die Chrome Developer Console, um ihren Code zu debuggen. Ich dachte, ich sollte mehr darüber erfahren, und diese Videos waren gut genug, um die Grundlagen zu erlernen und andere Konzepte wie GET- und POST-Anfragen zu verstärken.

11. CSS Flexbox Essentials (2 Videos)

Ich habe mit dem CTO eines meiner vorherigen Startups zu Mittag gegessen, der mir einige hervorragende Ratschläge gegeben hat. Eine Sache, die ich aufgeschrieben habe, war "Flexbox lernen" und ich bin sehr, sehr froh, dass ich das getan habe. Es scheint eine wirklich intuitive Art zu sein, mit Abstands- und Dehnungselementen umzugehen. Dazu gibt es ein Folgevideo, das ich mir ebenfalls angesehen habe.

Ich muss sagen, dass ich auch ein großer Fan des DevTips-Kanals bin, der dieses Video produziert hat. Sie haben einen Großteil des Workflows und der praktischen Techniken beeinflusst, die ich bei meinem ersten Projekt verwende.

12. Front-End-Beispielprojekte (9 Videos)

Dies ist eine Zusammenstellung von exemplarischen Vorgehensweisen zum schrittweisen Erstellen realer Websites. Nachdem sie alle grundlegenden und Zwischenkonzepte durchlaufen haben, waren sie eine großartige Möglichkeit, die Ideen zu konsolidieren und ein professionelles Workflow-Modell zu enthüllen. Und der Workflow ist der Schlüssel. Als Neuling denke ich ständig darüber nach, ob ich mich etwas richtig nähere. Diese Videos geben Ihnen einen Ausgangspunkt.

Videos, die ich hier nicht aufgenommen habe

Es gibt ein paar Dutzend Videos, die ich weggelassen habe, da ich sie nicht fertiggestellt habe oder sie nicht gut waren. Ich habe auch ungefähr 10 andere Videos auf dem YouTube-Kanal von learnCode.academy gesehen, in denen die Grundlagen von Node.js, Angular.js, React.js, Vagrant und Docker behandelt wurden, aber ich kann mich jetzt kaum an sie erinnern und habe mich dagegen entschieden Verwenden von Javascript-Frameworks in meinen ersten Projekten.

Insgesamt habe ich in 48 Stunden über 125 Codierungsvideos gesehen und ich fühle mich wie Neo in The Matrix, wenn er in fünf Minuten Kampfkunst lernt. Aber ich bin so froh, dass ich am Anfang breit geworden bin.

Nächste Schritte

Jetzt ist es an der Zeit, einige aktuelle Webseiten zu erstellen. Ich habe ein hartes Ziel, das mich anspornt. Also genug von Medium und zurück zu Sublime Text.

Über mich:

Ich bin Dave und coache CEOs von Technologieunternehmen der Serie A +. In den letzten 10 Jahren habe ich drei von VC unterstützte Technologieunternehmen mitbegründet, als VC- und Angel-Investor in Dutzende von Start-ups im Frühstadium investiert und Hunderte von Startups als Lead Mentor für Google betreut. Weitere Informationen finden Sie unter Dave-Bailey.com.